/* Employer pages. The section furniture is the same as the brokers page, so it is
   written once here and both model pages inherit it. */


  .sec{max-width:1500px;margin:0 auto;padding:60px 56px}
  .sec h2{font-family:'Fraunces',Georgia,serif;font-weight:500;color:var(--ink);
          font-size:clamp(28px,3vw,42px);line-height:1.14;letter-spacing:-.024em;max-width:24ch}
  .sec h2 em{font-style:normal;color:var(--accent)}
  .sec .intro{margin-top:22px;font-size:18px;line-height:1.62;color:var(--ink-1);max-width:62ch}

  /* the three things a broker actually gets */
  .gains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
  .gain{background:var(--panel);border:1px solid rgba(197,199,227,.14);border-radius:20px;
        padding:30px}
  .gmk{display:block;width:64px;height:10px}
  .gmk svg{display:block;width:64px;height:10px;overflow:visible}
  .gain h3{margin-top:18px;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:24px;
           letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
  .gain p{margin-top:14px;font-size:16px;line-height:1.6;color:var(--ink-1)}

  /* proof hand-off */
  /* A sentence at one end and a button at the other left the middle empty, and a 30ch
     cap broke the sentence so one word sat alone on a second line. The case's own two
     figures fill the span and give the box a reason to be the width of the page. */
  .proof{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap;
         border:1px solid var(--hair);border-radius:22px;padding:28px 36px;margin-top:8px}
  .proof p{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:23px;line-height:1.26;
           letter-spacing:-.02em;color:var(--ink)}
  .proof .btn-line{margin-top:0;white-space:nowrap}
  .pfig{display:flex;gap:52px}
  .pfig span{display:block}
  .pfig b{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:26px;
          line-height:1;letter-spacing:-.045em;color:var(--ink)}
  .pfig b.hot{color:var(--accent)}
  .pfig i{display:block;margin-top:8px;font-style:normal;font-size:12.5px;color:var(--ink-2)}
  @media (max-width:900px){ .pfig{gap:34px} }

  .faq{margin-top:34px;max-width:1000px}
  .q{border:0;border-top:1px solid var(--hair);padding:24px 0;width:100%;text-align:left;
     font:inherit;color:inherit;background:none;cursor:pointer;display:block;
     transition:border-color .2s ease}
  .q:last-child{border-bottom:1px solid var(--hair)}
  .q:hover{border-top-color:var(--accent)}
  .q .row{display:flex;align-items:flex-start;gap:20px}
  .q h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:22px;
        letter-spacing:-.02em;line-height:1.3;color:var(--ink);max-width:44ch}
  .q .sign{margin-left:auto;font-size:22px;line-height:1;color:var(--ink-3);flex:none;
           transition:transform .28s ease,color .2s ease}
  .q[aria-expanded="true"] .sign{transform:rotate(45deg)}
  .q:hover .sign{color:var(--accent)}
  .q .a{display:grid;grid-template-rows:0fr;opacity:0;
        transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1),opacity .3s}
  .q .a > div{overflow:hidden}
  .q[aria-expanded="true"] .a{grid-template-rows:1fr;opacity:1}
  .q .a p{margin-top:16px;font-size:16.5px;line-height:1.66;color:var(--ink-2);max-width:70ch}
  .q .a a{color:var(--accent)}

  /* This @media opener was lost in an earlier edit, so five mobile rules were applying
     at every width: .sec fell to 24px padding site-wide, and .gains, .zero and .fid all
     collapsed to a single column on desktop. */
  @media (max-width:1080px){
    .sec{padding:52px 24px}
    .gains,.terms{grid-template-columns:1fr}
    .fid{grid-template-columns:1fr;gap:34px}
    .zpanel{padding:28px 24px}
    .cta,.draftnote{padding-left:24px;padding-right:24px}
  }

  .ehead{max-width:1500px;margin:0 auto;padding:88px 56px 60px}
  .ehead h1{font-family:'Fraunces',Georgia,serif;font-weight:500;color:var(--ink);
            font-size:clamp(38px,4.6vw,66px);line-height:1.05;letter-spacing:-.028em;
            max-width:980px}
  .ehead h1 em{font-style:normal;color:var(--accent)}
  .esub{margin-top:28px;font-size:21px;line-height:1.56;color:var(--ink-1);max-width:760px}
  .ehead .btn{margin-top:36px}
  .pick2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
  .p2{background:var(--panel);border:1px solid rgba(197,199,227,.14);border-radius:20px;
      padding:32px;text-decoration:none;color:inherit;display:block;
      transition:border-color .2s ease,transform .18s ease}
  .p2:hover{border-color:var(--accent);transform:translateY(-2px)}
  .p2 h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:26px;
         letter-spacing:-.02em;color:var(--ink)}
  .p2 p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--ink-1)}
  .p2 .go{margin-top:20px}
  .roi{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px;max-width:1000px}
  .rbox{border:1px solid var(--hair);border-radius:20px;padding:32px 34px}
  .rbox.hot{background:var(--panel);border-color:transparent}
  .rbox .k{font-size:14px;color:var(--ink-2)}
  .rbox .n{margin-top:16px;font-family:'JetBrains Mono';font-size:clamp(44px,4.6vw,64px);
           font-weight:500;line-height:1;letter-spacing:-.055em;color:var(--accent)}
  .rbox .w{margin-top:14px;font-size:16.5px;font-weight:600;color:var(--ink)}
  .rbox ul{list-style:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
  .rbox li{font-size:15.5px;line-height:1.6;color:var(--ink-1);margin-top:6px}
  @media (max-width:1080px){
    .ehead{padding:64px 24px 44px}
    .pick2,.roi{grid-template-columns:1fr}
  }

  @media (max-width:1080px){
    .sec{padding:52px 24px}
    .gains{grid-template-columns:1fr}
    .zpanel{padding:28px 24px}
  }

  /* ---- section shapes, deliberately different from each other ---- */
  /* figures, not prose */

  /* a sequence, numbered */

  /* four tiles, the only place the whole method is listed */

  @media (max-width:1080px){
  }
  @media (max-width:720px){ .four{grid-template-columns:1fr} }

  .sec h2 em{font-style:normal;color:var(--accent)}
  .src{margin-top:26px;font-size:12.5px;color:var(--ink-3)}

  /* four figures */
  .stat4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}
  .s4{background:var(--panel);border:1px solid rgba(197,199,227,.14);border-radius:20px;padding:28px}
  .s4 .n{font-family:'JetBrains Mono';font-size:clamp(28px,2.7vw,36px);font-weight:500;
         line-height:1;letter-spacing:-.05em;color:var(--accent)}
  .s4 .l{margin-top:16px;font-size:15.5px;line-height:1.56;color:var(--ink-1)}

  /* one against five: the asymmetry is the argument */

  /* the advocacy comparison */
  .vs{display:grid;grid-template-columns:1fr 1fr;margin-top:42px;max-width:1080px;
      border:1px solid var(--hair);border-radius:20px;overflow:hidden}
  .vhead.a{background:rgba(23,7,93,.04);color:var(--ink-3)}
  .vhead.b{background:var(--bg);color:rgba(214,213,235,.72)}
  .vrow.b b{font-weight:600}

  /* tile grids */
  .six{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
  .tile{background:var(--panel);border:1px solid rgba(197,199,227,.14);border-radius:20px;padding:28px}
  .tile h3{margin-top:16px;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:21px;
           letter-spacing:-.02em;line-height:1.24;color:var(--ink)}
  .tile p{margin-top:12px;font-size:15.5px;line-height:1.58;color:var(--ink-1)}
  /* the line the whole section exists to deliver, so it carries weight and full ink
     and a rule above it. Not mono: a whole sentence in a monospace face is one of the
     tells of a generated page, and mono here is for figures only. */
  .handline{margin-top:46px;padding-top:30px;border-top:1px solid var(--hair);
            font-weight:500;font-size:clamp(17px,1.6vw,21px);line-height:1.5;
            letter-spacing:-.01em;color:var(--ink)}
  .handline .arw{color:var(--accent);margin:0 10px}

  /* the trust strip */

  @media (max-width:1080px){
    .stat4,.six,.three{grid-template-columns:1fr 1fr}
    .vs{grid-template-columns:1fr}
  }
  @media (max-width:720px){ .stat4,.six,.three{grid-template-columns:1fr} }

  /* ---- the road: seven stops, and only one of them is theirs ---- */
  /* the track is the brand bar, run the width of the journey */

  @media (max-width:1080px){
  }

  /* ---- the road: the bar is the road, one segment per step ---- */
  /* each segment arrives in turn; the finished state is the default so nothing
     depends on the script or on motion being allowed */
  /* each stage arrives as a unit, bar and words together, and holds long enough
     to be read before the next one starts */

  @media (max-width:1080px){
  }

  /* ---- the road: ONE bar ---- */
  /* It was five bevelled segments in a row with gaps between them, and that is the
     default Process graphic in every slide deck there is. The reason it happened is
     specific to us: our bevel is a CUT, not an arrowhead. Repeat the cut five times
     with gaps and the eye reads the slant as direction, so the bar becomes a chain
     of arrows. The parallelogram survives as a mark. It does not survive as a chain.

     So: one continuous bar with one terminal at each end, and the employee's stretch
     carried in accent rather than cut out of it. A terminal marks a state, a tick
     marks an act, and nothing in the row has two jobs. */
  /* the road runs between the two states rather than under them. Stacking
     "Care received" above the first column put it directly over the employee's one
     step, and the reader could not tell which words belonged to which mark. */
  .road{margin-top:52px;--tickw:2.4;
        display:grid;grid-template-columns:136px 1fr 136px;gap:0 26px;align-items:start}
  section.warm .road{--tickw:3.4}
  .endstate{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:16px;
            line-height:1.25;color:var(--ink);margin-top:-7px}
  .endstate.b{text-align:right}

  .axis{position:relative}
  .axis .rbar{display:block;width:100%;height:34px;overflow:visible}

  /* one grid for the two rows of words. gap 0, so a column edge is exactly W/5 and
     a tick lands on the first letter of its caption. Breathing room is padding
     inside the column, never a gap that moves the boundary. */
  .lanerow,.caprow{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
  .lanerow{margin-top:10px}
  .lname{font-size:12.5px;line-height:1.3;padding-right:12px;color:var(--ink-2)}
  .lname.emp{grid-column:1 / 2;color:var(--accent)}
  .lname.oct{grid-column:2 / 6}

  .caprow{margin-top:7px;align-items:start}
  /* one face, one size, one weight, one alignment. colour is the only variable,
     because seven items at 14px in three different alignments is what made the row
     read as crooked. */
  .cap{font-size:14px;line-height:1.44;color:var(--ink-1);padding-right:18px;
       min-width:0;overflow-wrap:break-word}
  .cap.emp{color:var(--accent)}

  /* ---- motion: the bar draws once, and everything else arrives as it passes ---- */
  /* the sweep is clipped on the bar's own 44.8°, so the growing end is a bevel and
     never a square edge */
  /* the clip has to start OUTSIDE the bar. The bar's left terminal is a slanted cut
     that reaches x=-6.5, so a clip whose left edge sat at 0 sliced the top corner off
     and the parallelogram came out broken. Only the right edge travels. */
  html.motion .road .rbar{clip-path:polygon(-24px 0, -24px 0, -11px 100%, -24px 100%)}
  html.motion .road.in .rbar{clip-path:polygon(-24px 0, 100% 0, calc(100% + 13px) 100%, -24px 100%);
    transition:clip-path 2500ms cubic-bezier(.28,.66,.24,1)}
  html.motion .road .cap,html.motion .road .lname,html.motion .road .endstate{
    opacity:0;transform:translateY(6px)}
  html.motion .road.in .cap,html.motion .road.in .lname,html.motion .road.in .endstate{
    opacity:1;transform:none;
    transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1)}

  /* Every delay lives here rather than being written onto the elements by script.
     Inline delays only landed if the draw happened to run before the section came
     into view, so on a fast scroll the later captions arrived with no delay at all
     and were simply there from the start. CSS cannot lose that race. */
  /* the sweep crosses a fifth of the road every 500ms, so each caption arrives just
     after the bar has reached the column it names */
  html.motion .road.in .endstate.a{transition-delay:0ms}
  html.motion .road.in .cap.emp,
  html.motion .road.in .lname.emp{transition-delay:180ms}
  html.motion .road.in .cap[data-i="1"],
  html.motion .road.in .lname.oct{transition-delay:640ms}
  html.motion .road.in .cap[data-i="2"]{transition-delay:1140ms}
  html.motion .road.in .cap[data-i="3"]{transition-delay:1640ms}
  html.motion .road.in .cap[data-i="4"]{transition-delay:2140ms}
  html.motion .road.in .endstate.b{transition-delay:2500ms}

  @media (max-width:1080px){
    .road{display:block}
    .axis,.lanerow{display:none}
    .endstate{display:block;font-size:19px;margin-top:0}
    .endstate.b{text-align:left;margin-top:10px;color:var(--accent)}
    .caprow{grid-template-columns:1fr;margin-top:26px}
    .cap{padding:16px 0 16px 26px;position:relative;border-left:2px solid var(--hair);
         font-size:16.5px;padding-right:0}
    .cap.emp{border-left-color:var(--accent)}
  }

  /* On the white ground --panel IS white, so a card painted with it disappears and
     only a 14% lavender hairline is left holding it. Give the light ground its own
     card: the faintest tint of the ink, and a hairline that can actually be seen. */
  section.light .tile,section.light .p2{background:rgba(23,7,93,.035);
                                        border-color:rgba(23,7,93,.13)}
  section.light .tile:hover{background:rgba(23,7,93,.055);
                            border-color:rgba(225,84,28,.42);transform:translateY(-3px)}

  /* ---- colour, so the page stops reading as one grey note ---- */
  /* no rule above the figure. an accent bar across the top of a card is the most
     generic card treatment there is, and it says nothing the figure is not already
     saying in the accent colour. */
  .s4{position:relative;overflow:hidden}
  /* the total-value box commits to the accent rather than tinting it */
  .rbox.hot{background:var(--accent);border-color:transparent}
  .rbox.hot .k,.rbox.hot li{color:rgba(255,255,255,.86)}
  .rbox.hot .n{color:#FFFFFF}
  .rbox.hot .w{color:#FFFFFF}
  .rbox.hot ul{border-top-color:rgba(255,255,255,.32)}
  /* the two routes are two different destinations, so they are not the same card */
  .p2:first-child{background:var(--panel)}
  .p2:last-child{background:rgba(255,122,61,.10);border-color:rgba(255,122,61,.26)}

  /* ---- people ---- */
  .hpor{margin:0;border-radius:22px;overflow:hidden;position:relative;background:#312A80}
  .hpor img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.05) brightness(1.02)}
  .hpor::after{content:"";position:absolute;inset:0;background:#312A80;
                            mix-blend-mode:soft-light;opacity:.345}
  .valuerow{display:grid;grid-template-columns:340px 1fr;gap:26px;margin-top:42px;align-items:stretch}
  .hpor{min-height:100%}
  .valuerow .six{grid-template-columns:1fr 1fr;margin-top:0}

  @media (max-width:1080px){
    .valuerow{grid-template-columns:1fr;gap:34px}
    .hpor{aspect-ratio:16/10}
    .valuerow .six{grid-template-columns:1fr}
  }

  /* ---- nothing on this page is inert under the cursor ---- */
  /* the marker bar is drawn full length and revealed by a widening window, so the
     44.8 terminal never distorts the way a scaleX would */
  .tile .gmk,.dcard .gmk{width:26px;overflow:hidden;transition:width .4s cubic-bezier(.2,.7,.2,1)}
  .tile:hover .gmk{width:64px}
  .tile{transition:border-color .22s ease,transform .2s ease,background .22s ease}
  .tile:hover{border-color:rgba(255,122,61,.42);transform:translateY(-3px)}

  /* the figure itself is the hover. nothing else needs to move. */
  .s4{transition:transform .2s ease,border-color .22s ease}
  .s4:hover{transform:translateY(-3px);border-color:rgba(255,122,61,.42)}
  .s4 .n{display:inline-flex;align-items:flex-start;
         transition:transform .32s cubic-bezier(.2,.7,.2,1);transform-origin:left center}
  .s4:hover .n{transform:scale(1.08)}

  /* the return is the one number worth enlarging */
  .rbox{transition:transform .2s ease,border-color .22s ease}
  .rbox:hover{transform:translateY(-3px)}
  .rbox:not(.hot):hover{border-color:rgba(255,122,61,.42)}
  .rbox .n{display:inline-block;transition:transform .34s cubic-bezier(.2,.7,.2,1);
           transform-origin:left center}
  .rbox:hover .n{transform:scale(1.09)}

  /* on the comparison, hovering a row brings our side forward */
  .vs:hover .vrow.b{background:rgba(255,122,61,.09)}
  .vrow.b:hover{background:rgba(255,122,61,.16)}
  .vrow.a:hover{color:var(--ink)}

  /* the two routes already lift; give them the arrow as well */
  .p2 .arw{display:inline-block;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
  .p2:hover .arw{transform:translateX(5px)}

  /* and the trust marks */
  .tmarks li:hover{color:var(--accent)}

  /* ---- the comparison, read as two columns of marks ---- */
  .vhead{padding:20px 26px;font-size:13px;letter-spacing:0}
  .vhead.a{background:rgba(197,199,227,.05);color:var(--ink-2)}
  .vhead.b{background:rgba(255,122,61,.14);color:var(--accent);font-weight:600}

  /* a row is a mark and a line of text, so the eye can scan the marks alone */
  .vrow{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start;
        padding:20px 26px;font-size:16px;line-height:1.56;
        border-top:1px solid var(--hair);transition:background .22s ease,color .22s ease}
  .vrow.a{color:var(--ink-1)}
  .vrow.b{color:var(--ink);background:rgba(255,122,61,.05)}
  .vrow.b b{font-weight:600}
  .vmk{display:block;margin-top:7px}
  .vmk svg{display:block;width:22px;height:8px;overflow:visible}
  /* dim on their side, lit on ours: the weight carries the argument, not a claim
     that what advocacy does never happens */
  .vrow.a .vmk svg path{fill:var(--ink-3)}
  .vrow.b .vmk svg path{fill:var(--accent)}

  /* a band that wraps a section must not add its own padding on top of it */
  section.band.nopad{padding:0}
  section.warm.strip{padding:0}

  /* ---- the closing line, alone on its own strip ---- */
  .everyone{max-width:1500px;margin:0 auto;padding:64px 56px;text-align:center}
  .everyone p{font-family:'Fraunces',Georgia,serif;font-weight:500;
              font-size:clamp(22px,2.2vw,30px);line-height:1.34;letter-spacing:-.02em;
              color:var(--ink);max-width:30ch;margin:0 auto}
  .everyone b{color:var(--accent);font-weight:500}

  /* ---- the roster: the strike, run backwards ---- */
  /* Everywhere else the bar cancels. Here it is already there, marking who sits
     outside the plan, and it withdraws. Removing the mark is the whole message, so
     the finished state is the one with no marks in it: if motion never runs, every
     name simply stands. A frozen half-struck roster would say the opposite. */
  .roster{display:flex;flex-wrap:wrap;justify-content:center;
          gap:16px 46px;margin:0 auto 46px;max-width:1000px}
  .who{position:relative;display:inline-block;padding:0 4px;text-align:center}
  .who b{display:inline-block;font-family:'Fraunces',Georgia,serif;font-weight:500;
         font-size:clamp(19px,1.9vw,25px);letter-spacing:-.02em;line-height:1.2;
         color:var(--ink);transition:color .8s ease}
  .who i{display:block;margin-top:5px;font-family:'JetBrains Mono';font-style:normal;
         font-size:11px;letter-spacing:-.01em;color:var(--ink-3);
         transition:color .8s ease,opacity .8s ease}
  .who .cut{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;
            clip-path:polygon(0 0, 0 0, 5px 100%, 0 100%)}

  /* struck while it waits, released once the reader arrives */
  html.motion .roster .cut{clip-path:polygon(0 0, 100% 0, calc(100% + 5px) 100%, 0 100%)}
  html.motion .roster .who b{color:var(--ink-3)}
  html.motion .roster .who i{opacity:1}
  html.motion .roster.in .cut{clip-path:polygon(0 0, 0 0, 5px 100%, 0 100%);
    transition:clip-path .9s cubic-bezier(.45,.02,.3,1)}
  html.motion .roster.in .who b{color:var(--ink)}
  html.motion .roster.in .who i{opacity:.45}
  html.motion .roster.in .who:nth-child(1) *{transition-delay:1000ms}
  html.motion .roster.in .who:nth-child(2) *{transition-delay:1200ms}
  html.motion .roster.in .who:nth-child(3) *{transition-delay:1400ms}
  html.motion .roster.in .who:nth-child(4) *{transition-delay:1600ms}
  html.motion .roster.in .who:nth-child(5) *{transition-delay:1800ms}
  html.motion .roster.in .who:nth-child(6) *{transition-delay:2000ms}

  /* the closing sentence stays inside its paragraph and simply arrives last */
  html.motion .everyone .punch{opacity:0;transition:opacity .5s ease}
  html.motion .roster.in ~ p .punch{opacity:1;transition-delay:3100ms}

  @media (max-width:720px){ .roster{gap:14px 26px} }

  /* ---- the ask: a thin strip, with the marks carried as badges ---- */
  .cta{max-width:1500px;margin:0 auto;padding:34px 56px 30px}
  .ctarow{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
  .cta h2{font-family:'Fraunces',Georgia,serif;font-weight:500;color:var(--ink);
          font-size:clamp(21px,1.9vw,27px);line-height:1.2;letter-spacing:-.02em;max-width:28ch}
  .ctabadges{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;
             padding-top:22px;border-top:1px solid rgba(255,255,255,.26)}
  .ctabadges li{font-size:13.5px;color:#FFFFFF;border:1px solid rgba(255,255,255,.34);
                background:rgba(255,255,255,.10);border-radius:100px;padding:8px 16px;
                transition:background .2s ease}
  .ctabadges li:hover{background:rgba(255,255,255,.2)}

  @media (max-width:1080px){
    .everyone{padding:48px 24px}
    .cta{padding:28px 24px 26px}
  }

  /* ---- the HR payoff, on the warm ground ---- */
  /* On orange the words are white and only objects take the purple, so the emphasis
     in the heading comes from opacity rather than from a second hue. */
  section.warm .sec h2{color:rgba(255,255,255,.80)}
  section.warm .sec h2 em{color:#FFFFFF}
  section.warm .tile{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
  section.warm .tile h3{color:#FFFFFF}
  section.warm .tile p{color:rgba(255,255,255,.90)}
  section.warm .tile:hover{background:rgba(255,255,255,.18);
                           border-color:rgba(255,255,255,.55);transform:translateY(-3px)}
  section.warm .gmk svg path{fill:#FFFFFF}
  /* the portrait keeps its purple grade, which now sits against the orange rather
     than beside it */
  section.warm .hpor{background:var(--bg)}

  /* the proof strip carries its own ground so it can never double up with the
     section above it on any of the three employer pages */
  .proofsec{padding-top:52px;padding-bottom:52px}

  /* ---- the FAQ ---- */
  .faq{margin-top:34px;max-width:1000px}
  .q{border:0;border-top:1px solid var(--hair);padding:24px 0;width:100%;text-align:left;
     font:inherit;color:inherit;background:none;cursor:pointer;display:block;
     transition:border-color .2s ease}
  .q:last-child{border-bottom:1px solid var(--hair)}
  .q:hover{border-top-color:var(--accent)}
  .q .row{display:flex;align-items:flex-start;gap:20px}
  .q h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:22px;
        letter-spacing:-.02em;line-height:1.3;color:var(--ink);max-width:44ch}
  .q .sign{margin-left:auto;font-size:22px;line-height:1;color:var(--ink-3);flex:none;
           transition:transform .28s ease,color .2s ease}
  .q[aria-expanded="true"] .sign{transform:rotate(45deg)}
  .q:hover .sign{color:var(--accent)}
  .q .a{display:grid;grid-template-rows:0fr;opacity:0;
        transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1),opacity .3s}
  .q .a > div{overflow:hidden}
  .q[aria-expanded="true"] .a{grid-template-rows:1fr;opacity:1}
  /* body the reader must take in, so --ink-1 and not the aside tier */
  .q .a p{margin-top:16px;font-size:16.5px;line-height:1.66;color:var(--ink-1);max-width:70ch}
  .faq + .btn{margin-top:52px}

  /* the human peak on the funding-model pages */
  .wkick{margin-top:22px;font-family:'Fraunces',Georgia,serif;font-weight:500;
         font-size:clamp(19px,1.7vw,24px);line-height:1.34;letter-spacing:-.02em;
         color:var(--ink);max-width:42ch}
  section.warm .wkick{color:#FFFFFF}
  .wkick + .btn{margin-top:38px}


  /* ---- a portrait beside the argument, not a diagram of it ---- */
  /* The words set the height and the picture crops to it. A 210px text block centred
     against a 480px image MUST leave 135px above and below: that is the definition of
     centring, not a padding problem. The aspect-ratio was the invented constraint. */
  .pictrow{display:grid;grid-template-columns:42% 1fr;gap:64px;align-items:stretch}
  .pict{margin:0;position:relative;min-height:290px;border-radius:22px;overflow:hidden;
        background:#312A80}
  .pict img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
            filter:saturate(.94) contrast(1.05) brightness(1.02)}
  .pict::after{content:"";position:absolute;inset:0;background:#312A80;
               mix-blend-mode:soft-light;opacity:.34}
  /* a flex column stretches its children, which turned the button into a full-width
     bar. align-items:flex-start lets it size to its own words again. */
  .pictrow > div{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .pictrow .intro{margin-top:22px;max-width:none;color:var(--ink-1)}
  .pictrow .btn{margin-top:34px}

  /* ---- the bar under the words: emphasis, the job it already had ---- */
  .uline{position:relative;white-space:nowrap;color:var(--accent)}
  .uline svg{position:absolute;left:0;bottom:-.2em;width:100%;height:8px;overflow:visible}

  /* ---- "Everything else follows", made literal: they arrive in turn ---- */
  .six .tile{transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  .six.armed .tile{opacity:0;transform:translateY(14px)}
  .six.armed.in .tile{opacity:1;transform:none}
  .six.armed.in .tile:nth-child(1){transition-delay:0ms}
  .six.armed.in .tile:nth-child(2){transition-delay:130ms}
  .six.armed.in .tile:nth-child(3){transition-delay:260ms}
  .six.armed.in .tile:nth-child(4){transition-delay:390ms}
  .six.armed.in .tile:nth-child(5){transition-delay:520ms}
  .six.armed.in .tile:nth-child(6){transition-delay:650ms}

  /* ---- the three steps are a sequence, so they carry their number ---- */
  .stepno{display:block;margin-top:16px;font-size:12px;font-weight:600;
          letter-spacing:-.01em;color:var(--accent)}
  .gain .stepno + h3{margin-top:6px}

  /* ---- the method, in the homepage's own shape: bar, number, act, figure ---- */
  .mstep{max-width:760px;margin-top:52px}
  .mstep:first-of-type{margin-top:46px}
  .mk{display:flex;align-items:center;gap:12px}
  .mbar{display:block;width:34px;height:8px}
  .mbar svg{display:block;width:34px;height:8px;overflow:visible}
  .mno{font-size:11px;color:var(--ink-3);letter-spacing:-.01em}
  .mstep h3{margin-top:14px;font-family:'Fraunces',Georgia,serif;font-weight:500;
            font-size:clamp(21px,2vw,27px);letter-spacing:-.022em;line-height:1.2;color:var(--ink)}
  .mstep .does{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--ink-1);max-width:62ch}
  .mstep .prob{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
  .mstep .figure{font-size:26px;letter-spacing:-.045em;color:var(--ink);margin-right:8px}
  .mpayoff{display:flex;align-items:baseline;gap:20px;margin-top:64px;
           padding-top:40px;border-top:1px solid var(--hair)}
  .mbig{font-size:clamp(56px,7vw,96px);line-height:.9;letter-spacing:-.06em;color:var(--accent)}
  .mcap{font-size:15px;color:var(--ink-2)}
  .mhand{margin-top:40px;font-family:'Fraunces',Georgia,serif;font-weight:500;
         font-size:clamp(19px,1.8vw,25px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
  @media (max-width:1080px){ .mpayoff{flex-direction:column;gap:8px} }


  /* ---- self-funded's own "nothing to implement" block ---- */
  /* Scoped to the section id, not to bare classes: octi.css is shared and a plain
     class of ours has already collided with it three times. */
  #sfzero .sec{padding-top:78px;padding-bottom:78px}
  #sfzero h2{max-width:20ch}
  #sfzero .intro{margin-top:22px;max-width:54ch}
  /* the four run across, so the block is a band rather than a second right-hand column */
  #sfzero .sfgone{list-style:none;display:flex;flex-wrap:wrap;gap:20px 52px;
                  margin-top:54px;padding-top:36px;border-top:1px solid var(--hair)}
  #sfzero .sfgone li{margin-top:0}
  /* the one that survives: same face and size as the four, carried by weight and by the
     bar moving from through the words to under them */
  #sfzero .sfkept{margin-top:44px;font-size:20px;line-height:1.5;font-weight:600;
                  color:var(--ink)}
  /* only the bar is accent here. The words stay in the ink they would otherwise carry,
     so the mark emphasises without the phrase also changing colour. */
  #sfzero .sfkept .uline{color:inherit}
  @media (max-width:1080px){
    #sfzero .sec{padding-top:52px;padding-bottom:52px}
    #sfzero .sfgone{gap:16px 32px;margin-top:38px;padding-top:28px}
    #sfzero .sfgone .zw,#sfzero .sfkept{font-size:18px}
  }

  /* ---- the wellness row ---- */
  /* the words are one tight block, not three paragraphs spread down a column */
  /* The phone is anchored and cropped by the band rather than sitting in the grid.
     As a grid item it forced two separate voids at once: a 377px text block centred
     against a 514px device left 69px of dead band above AND below it, and the copy
     column took 978px while its own measure caps at 485px, so half of it was empty.
     Out of the flow the words set the height, the column is only as wide as the text
     it carries, and the phone gets its real size instead of being shrunk to limit the
     damage. Same move as the homepage's #s4. */
  .wellband{position:relative;overflow:hidden}
  /* The device stays IN the row so the gap is a fixed number rather than whatever the
     viewport leaves over: absolutely positioned, every extra pixel of a wide screen
     landed between the words and the phone, which is the one place space reads as
     something missing. Only its HEIGHT is taken out of the calculation. .wdev is a
     440px box, the phone inside it is 722px, and the band crops the difference. The
     words set the height, the leftover width goes to the right edge as margin. */
  .wellrow{position:relative;min-height:500px;display:flex;align-items:center;gap:80px}
  .wcopy{flex:0 1 528px}
  .wdev{flex:none;position:relative;width:344px;height:440px}
  .wphone{position:absolute;top:0;left:0}
  .wcopy .intro{margin-top:20px;max-width:520px}
  .wcopy .wkick{margin-top:20px;font-family:'Public Sans',system-ui,sans-serif;
                font-weight:600;font-size:18px;line-height:1.62;letter-spacing:0;
                color:var(--ink);max-width:520px}
  .wcopy .btn{margin-top:30px}

  /* the device kit: one bezel gradient, a pool of light behind it, real proportions */
  /* the canonical device kit: 344 wide, 46px radius, 10px padding, screen at 38px.
     It was a 0.72 scale of that, which is why none of the interior numbers matched
     the spec. Every interior value below is the kit value, not a shrunk one. */
  .wdev::before{content:"";position:absolute;left:50%;top:20px;
    transform:translateX(-50%);width:660px;height:620px;border-radius:50%;
    background:radial-gradient(circle,rgba(96,78,214,.20),transparent 66%);pointer-events:none}
  .wphone{width:344px;flex:none;border-radius:46px;padding:10px;
    background:linear-gradient(160deg,#3A3170,#171041 42%,#0B0730);
    box-shadow:0 44px 100px rgba(23,7,93,.32),0 0 0 1px rgba(197,199,227,.15)}
  .wnotch{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:81px;height:5px;
          border-radius:5px;background:rgba(197,199,227,.26);z-index:3}
  /* the screen redefines the tokens, so a light interface sits inside a dark page */
  .wscreen{--panel:#FFFFFF;--ink:#17075D;--ink-2:rgba(23,7,93,.60);--ink-3:rgba(23,7,93,.38);
           --hair:rgba(23,7,93,.12);--accent:#E1541C;
           position:relative;background:#FFFFFF;border-radius:38px;overflow:hidden;
           aspect-ratio:9 / 19.5}
  .wapp{padding:34px 20px 22px}
  /* ---- the result screen ---- */
  /* Data is mono throughout, which is what makes it read as a document rather than as
     marketing. The screen's own tracked micro-label is the one place on the site where
     tracked caps are allowed, because it belongs to the product being depicted. */
  .rstop{display:flex;align-items:center;justify-content:space-between;
         padding-bottom:15px;border-bottom:1px solid var(--hair);color:var(--ink)}
  .rsmark{display:block;width:22px;height:25px}
  .rscase{font-size:11.5px;letter-spacing:-.01em;color:var(--ink-3)}
  .rshead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
          margin-top:20px}
  .rshead b{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
  .rsdate{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
  .rsrail{margin-top:18px;height:12px}
  .rsbar{display:block;width:100%;height:12px;overflow:visible}
  .rsstage{margin-top:11px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--accent)}
  .rsledger{margin-top:24px;border-top:1px solid var(--hair)}
  .rsrow{display:flex;align-items:baseline;justify-content:space-between;
         padding:14px 0;border-bottom:1px solid var(--hair)}
  .rsrow span:first-child{font-size:13.5px;color:var(--ink-2)}
  .rsrow span:last-child{font-size:17px;letter-spacing:-.04em;color:var(--ink)}
  /* the payoff: the one figure on the screen that describes a change, so the one that
     is allowed to move. It rests on its real value if it cannot. */
  .rssaved{margin-top:26px}
  .rssavedl{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
  .rssavedn{display:inline-flex;align-items:flex-start;margin-top:8px;
            font-size:40px;font-weight:500;line-height:1;letter-spacing:-.055em;
            color:var(--accent)}

  @media (max-width:1080px){
    .wellband{overflow:visible}
    .wellrow{display:block;min-height:0;gap:0}
    .wcopy{max-width:none}
    .wdev{position:relative;width:344px;height:auto;margin-top:44px}
    .wphone{position:relative;top:auto;left:auto}
    .wdev::before{top:0}
  }

/* ── the spend strip ───────────────────────────────────────────────────────
   HR needs to know she brought in something the company gains from, so she can
   say it internally. She does not need the funding mechanism, which is the
   finance page's job. So this is a strip: the sentence, and one number moving. */
.spendrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
          gap:72px;align-items:center}
.spendcopy h2{margin:0}
.spendfig{margin:0}

/* A sheet, because a line item in a budget is where a company actually meets this
   number. What reads as a budget is the structure, not the row count: a tab, column
   headings, and figures aligned right. */
.sheet{background:#FFFFFF;border-radius:14px;overflow:hidden;
       box-shadow:0 30px 70px rgba(0,0,0,.42);
       font-family:'JetBrains Mono',monospace}
.shtab{display:inline-block;margin:10px 0 0 12px;padding:7px 18px 8px;
       background:#EFEFF4;border-radius:8px 8px 0 0;font-size:11.5px;
       color:rgba(23,7,93,.62)}
.shhead{display:grid;grid-template-columns:1fr 168px;background:#EFEFF4;
        border-top:1px solid rgba(23,7,93,.12);
        border-bottom:1px solid rgba(23,7,93,.14)}
.shhead span{padding:8px 18px;font-size:10.5px;color:rgba(23,7,93,.46)}
.shhead span:last-child{text-align:right}
.shrow{display:grid;grid-template-columns:1fr 168px;align-items:center;
       border-bottom:1px solid rgba(23,7,93,.09)}
.shrow:last-child{border-bottom:0}
.shrow .shl{padding:16px 18px;font-size:14px;color:rgba(23,7,93,.78)}
.shrow > b{padding:16px 18px;font-size:20px;font-weight:600;color:#17075D;
           text-align:right;font-variant-numeric:tabular-nums}

/* The other lines are deliberately unreadable. A budget has many rows, and blurring
   them says so without inventing figures a reader would take as ours. */
.shblur{filter:blur(3.4px);opacity:.40;user-select:none}
.shblur .shl,.shblur > b{color:rgba(23,7,93,.55)}

/* our line */
.shpick{background:rgba(225,84,28,.08);position:relative}
.shpick::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
                background:var(--accent)}
.shv{padding:12px 18px;text-align:right;display:block}
.shwas{position:relative;display:inline-block;text-decoration:none;
       font-size:13px;color:rgba(23,7,93,.46);font-variant-numeric:tabular-nums;
       opacity:0}
.shwas .shcut{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;
              clip-path:polygon(0 0, 0 0, 5px 100%, 0 100%)}
.shn{display:block;margin-top:3px;font-size:24px;font-weight:600;color:var(--accent);
     font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* The struck figure is the resting state, not a reward for watching. Without motion
   it is simply there, already crossed out. */
.shwas{opacity:1}
.shwas .shcut{clip-path:polygon(0 0, 100% 0, calc(100% + 5px) 100%, 0 100%)}
html.motion .shwas{opacity:0;transition:opacity .45s ease}
html.motion .shwas .shcut{clip-path:polygon(0 0, 0 0, 5px 100%, 0 100%);
       transition:clip-path .75s cubic-bezier(.3,.02,.2,1) .25s}
html.motion .sheet.done .shwas{opacity:1}
html.motion .sheet.done .shwas .shcut{clip-path:polygon(0 0, 100% 0, calc(100% + 5px) 100%, 0 100%)}

.spendfig figcaption{margin-top:14px;font-family:'JetBrains Mono',monospace;
                     font-size:11px;color:var(--ink-3);text-align:right}

@media (max-width:1080px){
  .spendrow{grid-template-columns:1fr;gap:36px}
  .sheet{max-width:420px}
}

/* ── the coverage claim on the warm ground ─────────────────────────────────
   Every written thing stays white. The strike is an object, not a word, so it
   takes the purple, and it is the thing the reader watches withdraw. */
section.warm .who .cut path{fill:var(--axis)}
section.warm .everyone p{color:#FFFFFF}
section.warm .everyone p b{color:#FFFFFF;font-weight:600}

/* ── the case card, sitting inside the questions' white band ───────────────
   On the light ground --panel IS white, so an unfilled card disappears. The card
   carries the deep ground itself and redefines its own tokens, the same way a
   device screen does, so every rule inside it resolves without knowing where it is.
   Descendants inherit a computed colour, not the variable, so the children are set
   explicitly. */
.proof.inband{background:#0D0733;border-color:transparent;
  --ink:#FFFFFF;--ink-1:rgba(255,255,255,.88);--ink-2:rgba(255,255,255,.70);
  --hair:rgba(197,199,227,.30);--accent:#FF7A3D;
  --btn-bg:#FFFFFF;--btn-fg:#0D0733;
  margin:0 0 76px;padding:34px 40px;color:var(--ink)}
.proof.inband p{color:var(--ink)}
.proof.inband .pfig b{color:var(--ink)}
.proof.inband .pfig b.hot{color:var(--accent)}
.proof.inband .pfig i{color:var(--ink-2)}
.proof.inband .btn-line{color:var(--ink);border-color:var(--hair)}

/* "eligible." was landing on a line of its own. A ch cap is a guess and it was the
   wrong one, so the punch is given its own line outright and the measure only has to
   hold the sentence across two. */
.everyone p{max-width:36ch}
.everyone p .punch{display:block}
@media (max-width:1080px){ .everyone p{max-width:26ch} }

@media (prefers-reduced-motion: reduce){
  .zudev.armed *{animation:none!important}
  .zudev.armed .zufill{transform:scaleX(1)}
  .zudev.armed .zudone,.zudev.armed .zufile{opacity:1}
}

@media (max-width:1080px){
  .zuscreen{min-height:0}
  .zumain{padding:20px 20px 22px}
  .zucur{left:78px}
}

/* the qualifiers, in the hero's pill pattern. The shared rule is coloured for the dark
   ground, so on a light band the pill needs its own values or it draws an outline on
   nothing. */
.band.light .badges li{color:rgba(23,7,93,.80);border-color:rgba(23,7,93,.18);
                       background:rgba(23,7,93,.04)}

/* the three gains on the PEO page: peers, so equal cards are right here */
.pgains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.pgain{background:var(--panel);border:1px solid rgba(197,199,227,.16);border-radius:20px;
       padding:26px 28px 30px;transition:border-color .22s ease,transform .2s ease}
.pgain:hover{transform:translateY(-3px);border-color:rgba(255,122,61,.42)}
.pgain .gmk{display:block;width:26px;height:10px;overflow:hidden;
            transition:width .4s cubic-bezier(.2,.7,.2,1)}
.pgain .gmk svg{display:block;width:64px;height:10px;overflow:visible}
.pgain:hover .gmk{width:64px}
.pgain h3{margin-top:16px;font-family:'Fraunces',Georgia,serif;font-weight:500;
          font-size:23px;letter-spacing:-.02em;line-height:1.18;color:var(--ink)}
.pgain p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-1)}
@media (max-width:1080px){ .pgains{grid-template-columns:1fr} }


/* ── phone ──────────────────────────────────────────────────────────────────
   The pools of light behind the device frames are sized for a desktop ground:
   660px and 620px. Below 400px they are wider than the page, and a decoration
   must never be the thing that makes a page scroll sideways. */
@media (max-width:720px){
  .wdev{width:100%;max-width:344px;margin-left:auto;margin-right:auto}
  .wdev::before{width:300px;height:300px}
  .wphone{width:100%;max-width:344px}
  .spendrow{grid-template-columns:1fr;gap:34px}
}