/* ==========================================================================
   OUR GOOGLE ADS SYSTEM
   --------------------------------------------------------------------------
   No pictures.  Type, rule, space and one light surface ladder:

       rail  #E8EFF9   recessed — the tabs that are NOT open
       sheet #F6FAFF   the open tab and its panel, one continuous surface
       box   #FFFFFF   a step

   TWO THINGS THIS FILE IS BUILT TO PREVENT

   1 · A STEP MUST NEVER LINE UP WITH A TAB.  Three equal full-width tabs over
       three equal full-width columns made column three read as though it
       belonged to tab three.  So the tabs are now sized to their own words and
       sit left in the rail, the steps are inset boxes with gaps between them,
       and no step edge falls on a tab edge at any width.

   2 · EVERY STAGE USES THE SAME BOX.  The panel is always the same slider —
       three boxes of one width in view, `grid-auto-flow: column`.  A stage with
       three has nothing to scroll; a stage with five slides.  Nothing about the
       box size or the layout changes between tabs.

   House rules obeyed: the w8- prefix on every class and custom property
   (section-class-name-collisions, css-var-collides); the reset in :where()
   (scoped-reset-needs-where); `[hidden]` re-declared (hidden-attribute-defeated);
   `minmax(0,1fr)` on collapsed tracks (grid-1fr-overflows-on-phones);
   `scroll-padding-inline` matching the rail's padding
   (scroll-snap-eats-lead-padding); and NOTHING position:fixed or sticky — the
   site bar is already fixed and a second pinned layer is what made the old
   phone version cover its own content.
   ========================================================================== */

.w8{
  --w8-box:   #FFFFFF;   /* a step                                       */
  --w8-sheet: #F6FAFF;   /* the open tab and its panel — one surface     */
  --w8-rail:  #E8EFF9;   /* the tabs that are not open                   */
  --w8-edge:  #DCE6F5;   /* the hairline that reads on all three         */
  --w8-edge2: #E9EFF8;   /* the quieter rule inside a box                */
  --w8-r:     22px;
  --w8-gap:   clamp(13px, 1.35vw, 20px);
  --w8-pad:   clamp(20px, 2.7vw, 42px);
  --maxw:     1400px;
}

.w8 :where(p,h2,h3,h4,ul,ol,li,b,em,i,s,u){ margin:0; padding:0; }
.w8 :where(ul,ol){ list-style:none; }
.w8 :where(b,em,i,s,u){ font-style:normal; text-decoration:none; }
.w8 :where(button){ font:inherit; color:inherit; background:none; border:0; }
.w8 [hidden]{ display:none !important; }

.w8{
  position: relative;
  padding: clamp(46px,4.8vw,84px) 0 clamp(52px,5.4vw,92px);
  background: var(--paper);
}
.w8-wrap{ width: min(var(--maxw), 100% - 2*var(--pad)); margin-inline: auto; }


/* ==========================================================================
   1 · HEADER
   ========================================================================== */
.w8-head{ text-align:center; max-width: 980px; margin-inline:auto; }
.w8-eye{
  font-family: var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform: uppercase; font-weight:500; color: var(--ink-2);
}
.w8-h2{
  margin-top:.4em; font-size: clamp(29px,3.1vw,50px); font-weight:800;
  letter-spacing:-.045em; line-height:1.04; color: var(--ink); text-wrap: balance;
}
.w8-h2 i{ color: var(--accent); }
.w8-sub{
  margin:16px auto 0; max-width: 62ch;
  font-size: clamp(15px,1.1vw,17.5px); line-height:1.58; color: var(--ink-2);
}


/* ==========================================================================
   2 · THE STAGE STRIP
   --------------------------------------------------------------------------
   Folder tabs.  The open one is the sheet: same fill as the panel, rounded at
   the top, and pulled 1px down over the rail's hairline so there is no seam
   between the tab and its content.  Four signals carry the open state at once
   — the sheet fill, the filled accent badge, the ink-black name and the accent
   bar across the top — so it never depends on a single line or a dark block.
   ========================================================================== */
.w8-area{
  margin-top: clamp(28px,3.2vw,50px);
  border-radius: var(--w8-r);
  background: var(--w8-sheet);
  box-shadow: inset 0 0 0 1px var(--w8-edge),
              0 2px 6px rgba(15,27,61,.05), 0 30px 60px -38px rgba(15,27,61,.32);
  overflow: hidden;
}
.w8-dock{
  display:flex; align-items:flex-end; gap:22px;
  /* the rail is inset further than the panel is, so no tab edge can land
     on a box edge at any width — that near-miss is what made column three
     read as though it belonged to tab three */
  padding: 9px clamp(14px,1.9vw,28px) 0;
  background: var(--w8-rail); border-bottom: 1px solid var(--w8-edge);
}
.w8-tab{
  position: relative; display:flex; align-items:center; gap:12px;
  padding: 13px clamp(12px,1.3vw,18px) 14px;
  border-radius: 14px 14px 0 0; cursor:pointer; text-align:left;
  transition: background .18s var(--ease), color .18s var(--ease);
}
/* the numbered badge is gone.  Order is carried by the when-word under each
   name, by the flow mark between the tabs of a section that IS a sequence
   (.w8--flow), and by the selected tab welding itself onto the panel. */
.w8-tab-b{ display:none; }

/* the flow mark — only on a dock whose tabs are stages, never on one whose
   tabs are categories.  It is drawn in the gap BETWEEN two tabs, so it reads
   as a join rather than as a piece of either one.

   It hangs off .w8-tab-t and not off .w8-tab, because both of the tab's own
   pseudo-elements are already spoken for: ::before is the selected tab's
   accent inlay and ::after is the skin's filler past the seam. */
.w8-tab-t{ position:relative; }
.w8--flow .w8-tab + .w8-tab .w8-tab-t::before{
  content:""; position:absolute; top:50%;
  left: calc(-1 * (clamp(12px,1.3vw,18px) + 14px));
  width:7px; height:7px; margin-top:-4px;
  border-right:1.6px solid var(--w8-edge2); border-top:1.6px solid var(--w8-edge2);
  transform: rotate(45deg);
  transition: border-color .18s var(--ease);
}
.w8--flow .w8-tab[aria-selected="true"] .w8-tab-t::before,
.w8--flow .w8-tab[aria-selected="true"] + .w8-tab .w8-tab-t::before{
  border-color: var(--accent);
}
.w8-tab-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.w8-tab-n{
  font-size: clamp(15.5px,1.28vw,18px); font-weight:700; letter-spacing:-.03em;
  line-height:1.18; color: var(--ink-2); white-space:nowrap;
}
.w8-tab-w{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform: uppercase; color: var(--ink-4); white-space:nowrap;
}
.w8-tab-s{ display:none; }
.w8-tab:hover{ background: rgba(255,255,255,.55); }
.w8-tab:hover .w8-tab-n{ color: var(--ink); }

.w8-tab[aria-selected="true"]{
  background: var(--w8-sheet);
  margin-bottom:-1px; padding-bottom:15px;   /* over the rail's hairline */
  box-shadow: 0 -10px 22px -16px rgba(15,27,61,.5);
}
.w8-tab[aria-selected="true"]::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  border-radius:14px 14px 0 0; background: var(--accent);
}
.w8-tab[aria-selected="true"] .w8-tab-n{ color: var(--ink); font-weight:800; }
.w8-tab[aria-selected="true"] .w8-tab-w{ color: var(--accent); }

.w8-canvas{ background: var(--w8-sheet); }
.w8-panel{ padding: var(--w8-pad); }
.w8-pname{ display:none; }

/* the swap.  An animation, not a transition: it runs itself the moment the
   panel goes from display:none to shown, so there is no rAF to miss
   (sheet-reveal-needs-no-raf) and no state to get stuck in. */
@keyframes w8in{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.w8-panel:not([hidden]){ animation: w8in .3s var(--ease) both; }


/* ==========================================================================
   3 · THE SLIDER — one shape for every stage
   --------------------------------------------------------------------------
   `grid-auto-flow: column` with a fixed auto-column gives every box the same
   width whether the stage has three or five, and the four named rows let each
   box adopt them with `subgrid`, so name, sentence and list start on the same
   line across every box in the stage — including the ones off-screen.
   ========================================================================== */
.w8-view{ position:relative; margin-right: calc(-1 * var(--w8-pad)); }
.w8-rail{
  display:grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--w8-gap)) / 3);
  padding-right: var(--w8-pad);   /* the last box's stop, and the peek */
  grid-template-rows: auto auto auto auto;   /* number · name · sentence · list */
  gap: 0 var(--w8-gap);
  overflow-x:auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width:none; -webkit-overflow-scrolling: touch;
}
.w8-rail::-webkit-scrollbar{ display:none; }
.w8-view.is-slide .w8-rail{ cursor: grab; }
.w8-view.is-slide .w8-rail.is-drag{ cursor: grabbing; scroll-behavior:auto;
  scroll-snap-type:none; }

.w8-step{
  --w8-sp: clamp(17px, 1.65vw, 26px);
  display:grid; grid-template-rows: subgrid; grid-row: span 4;
  scroll-snap-align: start;
  background: var(--w8-box); border-radius:16px; padding: var(--w8-sp);
  box-shadow: inset 0 0 0 1px var(--w8-edge),
              0 1px 2px rgba(15,27,61,.04), 0 14px 30px -24px rgba(15,27,61,.5);
}
/* without subgrid the box is still one column and still correct — the four
   rows simply size themselves instead of sharing a line */
@supports not (grid-template-rows: subgrid){
  .w8-step{ display:flex; flex-direction:column; }
}

/* ---- inside a box ------------------------------------------------------- */
/* the lead mark.  What used to be a large 01/02/03 is now an accent stroke
   that runs out of the card's left edge into a hairline — the card is marked
   as an entry in a series without being told which entry it is. */
.w8-num{ display:flex; align-items:center; gap:0; }
.w8-num b{
  flex:none; width:32px; height:3px; border-radius:2px; background: var(--accent);
}
.w8-num s{
  flex:1; height:2px; border-radius:1px; background: var(--w8-edge2);
  margin-right: calc(-1 * var(--w8-sp));
}
.w8-sn{
  margin-top: clamp(13px,1.2vw,18px);
  font-size: clamp(19px,1.55vw,24px); font-weight:800; letter-spacing:-.036em;
  line-height:1.16; color: var(--ink); text-wrap: balance;
}
.w8-sl{
  margin-top:9px; font-size: clamp(15px,1.12vw,16px); line-height:1.54;
  color: var(--ink-2);
}
.w8-li{
  margin-top: clamp(13px,1.1vw,17px); padding-top: clamp(14px,1.25vw,19px);
  border-top: 1px solid var(--w8-edge2);
  display:flex; flex-direction:column; gap: clamp(9px,.8vw,12px);
}
.w8-li li{
  position:relative; padding-left:27px;
  font-size: clamp(14.8px,1.06vw,15.5px); font-weight:600; line-height:1.35;
  letter-spacing:-.008em; color: var(--ink);
}
/* the tick, drawn — no icon file, no inline svg repeated two dozen times */
.w8-li li::before{
  content:""; position:absolute; left:0; top:.05em;
  width:18px; height:18px; border-radius:50%; background: var(--accent-soft);
}
.w8-li li::after{
  content:""; position:absolute; left:6.5px; top: calc(.05em + 4.5px);
  width:4px; height:8px; border:2px solid var(--accent);
  border-top:0; border-left:0; transform: rotate(42deg);
}

/* ---- which boxes are in view -------------------------------------------
   Only a stage that actually scrolls needs to say so. */
.w8-dots{ display:none; align-items:center; gap:7px; margin-top: clamp(14px,1.3vw,19px); }
.w8-view.is-slide ~ .w8-dots{ display:flex; }
.w8-dots i{
  display:block; height:4px; width:22px; border-radius:2px; background:#C6D5EA;
  transition: width .22s var(--ease), background .22s var(--ease);
}
.w8-dots i.on{ background: var(--accent); }
.w8-dots b{ display:none; }


/* ==========================================================================
   4 · THE CLOSE
   ========================================================================== */
.w8-close{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap: clamp(12px,2vw,30px);
  margin-top: clamp(24px,2.6vw,38px);
  padding-top: clamp(16px,1.8vw,24px); border-top:1px solid var(--w8-edge);
}
.w8-close p{ font-size:15px; color: var(--ink-2); }
.w8-go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; letter-spacing:-.012em; color: var(--accent);
}
.w8-go svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition: transform .16s var(--ease);
}
.w8-go:hover svg{ transform: translateX(3px); }


/* ==========================================================================
   5 · BETWEEN — the three names stop fitting on one rail before the boxes do
   ========================================================================== */
@media (max-width: 1240px){
  .w8-tab-w{ display:none; }                 /* the when-words go first  */
  .w8-tab{ padding-block: 15px 16px; }
  .w8-tab[aria-selected="true"]{ padding-bottom:17px; }
}
@media (max-width: 1040px) and (min-width: 861px){
  .w8-rail{ grid-auto-columns: calc((100% - var(--w8-gap)) / 2); }
  .w8-view{ --w8-inview: 2; }
  .w8-view:not(.is-slide){ --w8-inview: 2; }
  .w8-tab{ gap:10px; }
}


/* ==========================================================================
   6 · THE PHONE — one box at a time, on the same slider
   --------------------------------------------------------------------------
   The stage strip is NOT pinned.  The strip, the stage name, the box and its
   counter all fit on one screen together, so nothing has to follow the reader
   down the page and nothing can cover what they are reading.
   ========================================================================== */
@media (max-width: 860px){
  .w8{ padding: 44px 0 48px; }
  .w8-head{ text-align:left; max-width:none; }
  .w8-h2{ font-size: clamp(27px, 8.2vw, 36px); }
  .w8-sub{ margin-inline:0; font-size:15.5px; }

  /* edge to edge, on the phone's own 18px gutter and nothing else */
  .w8-area{
    margin-top:22px; margin-inline: calc(-1 * var(--pad));
    border-radius:0; box-shadow:none;
    border-top:1px solid var(--w8-edge); border-bottom:1px solid var(--w8-edge);
  }
  .w8-dock{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap:0; padding: 7px 6px 0; }
  /* three equal columns already read left-to-right; the mark would only
     crowd the short labels */
  .w8--flow .w8-tab + .w8-tab .w8-tab-t::before{ content:none; }
  .w8-tab{
    flex-direction:column; align-items:center; gap:5px; text-align:center;
    padding: 9px 4px 10px; border-radius:12px 12px 0 0;
  }
  .w8-tab[aria-selected="true"]{ padding-bottom:11px; }
  .w8-tab-t{ display:none; }
  .w8-tab-s{ display:block; font-size:13px; font-weight:650; letter-spacing:-.022em;
    color: var(--ink-2); }
  .w8-tab[aria-selected="true"] .w8-tab-s{ color: var(--ink); font-weight:800; }
  .w8-tab[aria-selected="true"]::before{ height:3px; }

  .w8-panel{ padding: 18px 0 20px; --w8-pad: 0px; }
  /* the stage says its own full name once, above its boxes */
  .w8-pname{
    display:block; padding-inline: var(--pad);
    font-size:20px; font-weight:800; letter-spacing:-.034em; color: var(--ink);
  }

  /* one box in view.  scroll-padding matches the padding, or the first box
     snaps flush to the screen edge (scroll-snap-eats-lead-padding) */
  .w8-view{ margin-top:14px; margin-right:0; }
  .w8-rail{
    grid-auto-columns: min(84vw, 340px);
    gap: 0 12px;
    padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    padding-right: var(--pad);
  }
  .w8-step{ --w8-sp: 20px; }

  .w8-num b{ width:26px; }
  .w8-sn{ font-size:21px; margin-top:13px; }
  .w8-sl{ font-size:15.5px; }
  .w8-li li{ font-size:15.5px; }

  /* every stage slides here, so every stage says where it is */
  .w8-dots{ display:flex; margin-top:16px; padding-inline: var(--pad); }
  .w8-view ~ .w8-dots{ display:flex; }
  .w8-dots i{ width:16px; }
  .w8-dots i.on{ width:30px; }

  .w8-close{ flex-direction:column; align-items:flex-start; gap:4px;
    margin-top:22px; padding-top:18px; }
  .w8-close p{ font-size:14.5px; }
  .w8-go{ padding-block:11px; }   /* a link on its own line is a tap target */
}

@media (max-width: 400px){
  .w8-tab-s{ font-size:12px; }
  .w8-rail{ grid-auto-columns: 88vw; }
}

@media (prefers-reduced-motion: reduce){
  .w8-panel:not([hidden]){ animation:none; }
  .w8-rail{ scroll-behavior:auto; }
  .w8-dots i, .w8-view::after, .w8-go svg{ transition:none; }
}