/* ===========================================================================
   INDUSTRIES WE SERVE — the mobile selection layer            (<= 760px only)

   A phone correction, not a redesign. Everything above 760px — the whole
   signed-off desktop rail-beside-panel, and the tablet row at 761-900px —
   is left exactly as it was; this file opens with a media query and never
   closes it around anything else.

   What it fixes, in the order a visitor reads it:

     Audience Type  ->  Selected Industry  ->  Connected Industry Content

   1. AUDIENCE TYPE.  The segmented control wrapped onto two lines at 390px,
      so step one of the chain read as a broken control. It is now one
      full-width segment, both labels on one line.

   2. SELECTED INDUSTRY.  Healthcare was `background:var(--paper)` sitting on
      `--mist` (#FFFFFF on #F6F8FC) with its shadow explicitly removed — a
      1.5% difference in luminance was carrying the entire selected state.
      The rail now has a ground of its own (--v03-dock), the unselected
      industries are flat on it with no plate at all, and the selected one is
      the only white surface in the row.

   3. CONNECTED CONTENT.  The panel's full-width `border-top` used to run
      straight across under the selected tab and cut it off from its own
      content. That rule is gone. Instead the selected tab takes the panel's
      own white fill, loses its bottom margin and its bottom corners, and
      meets the panel with nothing between them — one surface, entered
      through the tab you picked. The dock's ground stops either side of it,
      which is what draws the join.

   4. HORIZONTAL-SCROLL CLARITY.  The row still runs off to the right, which
      is correct: that is what says there are more industries. What was wrong
      is that it ended in a hard vertical cut through the middle of a word,
      which reads as a rendering fault rather than as a list continuing. A
      hard vertical cut IS the answer, though — the site carries no edge fades
      anywhere (2026-09-09), because a half-dissolved word reads as a smudge
      rather than as a list continuing. The row starts hard against its left
      edge and ends hard against its right one. No arrows, no dots, no "swipe"
      wording, and no fade.

   Reviewed at /doctor/ind-mob-q6/preview.html.
   =========================================================================== */

@media (max-width: 760px){

  /* ---- shared mobile tokens for this section ------------------------------
     Prefixed, because a bare --dock or --tint here would be picked up by
     anything nested inside .iw2 that happens to use the same name. */
  .iw2.v03{
    --v03-dock:#ECF1F9;      /* the industry rail's own ground */
    --v03-gut:22px;          /* the panel's gutter. The rail's 10px lead plus a
                                tab's 12px padding comes to the same 22px, so a
                                selected tab's icon sits on the same line as the
                                industry name in the panel underneath it. */
  }

  /* =====================================================================
     STEP 1 — AUDIENCE TYPE
     ===================================================================== */
  .iw2 .v03-top{ padding:12px 12px 13px; }
  .iw2 .v03-seg{ display:flex; width:100%; padding:3px; }
  .iw2 .v03-segb{
    flex:1 1 0; min-width:0; padding:10px 6px;
    font-size:13.5px; line-height:1.2; white-space:nowrap; text-align:center;
    /* the section's own rule puts `transition:all` on these buttons, which
       would animate the font-size and padding this block changes as soon as
       the stylesheet lands. Only the selected pill's own look may move. */
    transition:background .2s var(--ease), color .2s var(--ease),
               box-shadow .2s var(--ease);
  }
  /* nowrap keeps step one on one line but cannot shrink to fit, so the two
     labels are stepped down again before the narrowest phones can clip them */
  @media (max-width:359px){
    .iw2 .v03-segb{ font-size:12px; padding:10px 2px; letter-spacing:-.01em; }
  }

  /* =====================================================================
     STEP 2 — THE INDUSTRY DOCK
     A dock over a canvas, not a strip of buttons above a panel.
     ===================================================================== */
  /* The dock's ground is painted by the BODY, not by the rail. That was
     originally so the rail could wear an edge-fade mask without dissolving its
     own ground; the mask is gone (2026-09-09, no fades anywhere) but the split
     is still the right one — the panel is the body's second row and paints its
     own white over everything below the rail, so the ground shows exactly
     where the rail is and nowhere else. */
  .iw2 .v03-body{ background:var(--v03-dock); }
  .iw2 .v03-rail{
    /* stretch, NOT flex-end. With flex-end the tabs were hung from their own
       bottom margins, so an unselected tab (49px box + 11px margin) and the
       selected one (54px, no margin) shared a bottom edge and sat at two
       different heights — the neighbour read as raised. Stretched, every tab
       is the height of the row and centres its own icon and name inside it. */
    display:flex; flex-direction:row; align-items:stretch; gap:4px;
    width:100%; background:transparent;
    /* no bottom padding: the selected tab has to be able to reach the panel */
    padding:12px 10px 0;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity;
    /* a snap rail eats its own lead padding — scroll-padding is what gives the
       first and last tab room to settle against the edge */
    scroll-padding-inline:10px;
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .iw2 .v03-rail::-webkit-scrollbar{ height:0; display:none; }
  /* ind-mobile.js still toggles .v03-more / .v03-back from the rail's scroll
     position; nothing styles them now. They used to swap in a 46px fade at
     whichever end had more past it, which dimmed a real industry name — and
     the selected one, if it was the last. Removed 2026-09-09. */

  /* --- an industry that is NOT selected: flat on the dock, no plate ------- */
  .iw2 .v03-rail .v03-row{
    flex:0 0 auto; width:auto; min-width:0; max-width:none;
    display:flex; align-items:center; gap:9px;
    scroll-snap-align:start;
    /* THE SAME BOX FOR EVERY TAB, selected or not: same margin, same padding,
       same radius, and all of them running down to meet the panel. Selection
       changes colour and shadow only — so picking one moves nothing, neither
       the tab itself nor its neighbours, and the row stays on one line before
       and after a tap. Only the fill says which is chosen, and only the
       selected fill is the panel's own white, which is what joins them. */
    margin:0; padding:11px 12px 13px;
    border-radius:14px 14px 0 0; background:transparent; box-shadow:none;
    /* No transition is declared here on purpose, and the section's own
       `transition:background` is the only one a row keeps. Putting padding,
       margin and border-radius on a transition made the tab ANIMATE its
       layout: this file is the last stylesheet on the page, so a row is first
       laid out with the styles above it and then re-laid-out when this one
       lands, and with those three properties transitionable the whole rail
       visibly slid into place on load — and every tap after that moved the tab
       instead of just marking it. Nothing in this section moves on its own. */
  }
  .iw2 .v03-rail .v03-row .iw2-icn{
    width:30px; height:30px; border-radius:9px;
    /* the section's own rule puts `transition:all` on this plate, which would
       animate the 36px -> 30px size change the moment this stylesheet lands,
       and re-run it on every tap. Only the colours are allowed to move. */
    transition:background .16s var(--ease), border-color .16s var(--ease),
               color .16s var(--ease);
  }
  .iw2 .v03-rail .v03-row .iw2-icn svg{ width:16px; height:16px; }
  /* the one size bump the brief asked for: at 14.5px the industry peeking in
     from the right was not readable enough to be recognised as a choice */
  .iw2 .v03-rail .v03-nm{ font-size:15.5px; font-weight:600; letter-spacing:-.008em; }
  /* :not(.is-on), so a sticky touch-hover can never take the white back off
     the selected tab and break the join */
  .iw2 .v03-rail .v03-row:not(.is-on):hover{ background:transparent; }

  /* --- the SELECTED industry: the only white in the row, and the way in --- */
  /* Not one geometric property here — no padding, no margin, no radius, no
     border, no transform. Anything that changes an edge would move this tab or
     shove its neighbours along the row the moment it was picked. */
  .iw2 .v03-rail .v03-row.is-on{
    background:var(--paper);
    /* the join carries no line of its own; the shadow only lifts the sides,
       and the rail clips it before it can reach the panel */
    box-shadow:-9px 2px 14px -12px rgba(15,27,61,.55),
                9px 2px 14px -12px rgba(15,27,61,.55);
  }
  /* colour only — NOT weight. 600 -> 700 makes the name measurably wider, which
     widens the tab and shoves every industry to its right along the row the
     moment you pick one. The white fill, the ink and the accent icon carry the
     selected state; nothing about it may change a width. */
  .iw2 .v03-rail .v03-row.is-on .v03-nm{ color:var(--ink); }
  .iw2 .v03-rail .v03-row.is-on .iw2-icn{
    background:var(--tint); border-color:var(--edge); color:var(--accent);
  }

  /* =====================================================================
     STEP 3 — THE CONNECTED CONTENT
     ===================================================================== */
  .iw2 .v03-panel{
    background:var(--paper);
    border-top:0;                       /* the rule that used to cut the tab off */
    padding:16px var(--v03-gut) 22px;
  }
  /* the 52px icon plate is the same icon, in the same colours, 12px under the
     tab that already shows it — the panel keeps the name, the description and
     every business type, and drops only the duplicate */
  .iw2 .v03-head .iw2-icn{ display:none; }
  .iw2 .v03-name{ margin-top:0; font-size:27px; }
  .iw2 .v03-desc{ margin-top:8px; font-size:15px; line-height:1.55; }
  .iw2 .v03-label{ margin-top:15px; font-size:10.5px; }

  .iw2 .v03-deckwrap{ height:300px; margin-top:12px; }
  /* the chip well overflows on purpose too. It used to wear the same 34px
     right-end fade as the rail; removed 2026-09-09 — a chip is a word, and a
     half-faded word reads as broken rendering, not as "there is more". */
}