/* Refinements on top of the approved page styles (layout + design inspectors, 2026-11-12/13;
   Josh: "Yes, fix them"). Loaded after home.css / inner.css on every page. The approved
   stylesheets stay byte-for-byte as ported; every change lives here. */

/* --- Keyboard focus ring (only keyboard users see it) --- */
:focus-visible{outline:2px solid #3F80EA;outline-offset:3px;border-radius:4px}
.hdr.dark :focus-visible,footer :focus-visible{outline-color:#9CC0FF}

/* --- Header: a solid backdrop once you scroll, so nothing slides under the logo and buttons --- */
#hdr.dark.scrolled{background:rgba(14,19,36,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.07)}

/* --- Header buttons: Call on the inner pages (same pill as the homepage), Menu on phones/tablets --- */
.hdr:not(#hdr) .grp{display:flex;gap:10px;align-items:center;margin-left:auto}
.hdr:not(#hdr) nav+.grp{margin-left:0}
.hdr:not(#hdr) .grp .cta{margin-left:0}
.hdr:not(#hdr) .pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1.5px solid currentColor;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;color:var(--ink)}
.mnav-b{display:none;flex:none;width:44px;height:44px;padding:0;border-radius:999px;border:1.5px solid currentColor;background:none;color:inherit;place-items:center;cursor:pointer}
@media (max-width:1080px){#hdr .mnav-b{display:grid}}
@media (max-width:820px){#hdr .mnav-b{width:40px;height:40px}}
@media (max-width:900px){
  .hdr:not(#hdr) .mnav-b{display:grid;width:42px;height:42px;color:var(--ink)}
  .hdr:not(#hdr) .pillbtn{width:42px;height:42px;padding:0}
  .hdr:not(#hdr) .hide-s{display:none}
}
.hdr.mopen nav{display:flex!important;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px var(--pad) 16px;background:#fff;color:#1D2950;box-shadow:0 24px 40px -20px rgba(14,19,36,.45);max-height:calc(100svh - var(--hh));overflow:auto}
.hdr.mopen nav .dd-b{display:none}
.hdr.mopen nav .dd{display:block;position:static}
.hdr.mopen nav .dd-m{display:grid!important;position:static;transform:none;grid-template-columns:1fr;gap:0;padding:0;background:none;border-radius:0;box-shadow:none}
.hdr.mopen nav .dd-m::before{display:none}
.hdr.mopen nav a{display:block;padding:12px 0;border-bottom:1px solid #E7E2D6;font-size:16px;font-weight:800;color:#1D2950;text-decoration:none}
.hdr.mopen nav>a:last-child{border-bottom:0}
.hdr.mopen nav .dd-m a{border-radius:0;background:none;box-shadow:none;transform:none}
.hdr.mopen nav .dd-m a b{display:block;font-size:16px}
.hdr.mopen nav .dd-m a span{display:block;margin-top:2px;font-size:13px;font-weight:600;color:#5F6884}
.hdr.mopen{background:#fff!important;color:#1D2950!important}
.hdr.mopen .logo{color:#3F80EA!important}

/* --- Type scale: the main headline (H1) is the biggest type on every page, at every size --- */
.dream-a h2{font-size:clamp(44px,min(5.6vw,8.8vh),88px)}
.f-big{font-size:clamp(36px,min(6vw,10.4vh),98px)}
.pf .num,.stt .big{font-size:clamp(44px,min(5.2vw,9.6vh),90px)}
@media (max-width:820px){
  .dream-a h2{font-size:min(36px,8.6vw)}
  .f-big{font-size:min(44px,9.4vw)}
  .rating b{font-size:min(48px,9.4vw)}
  .ws-copy h4{font-size:min(42px,9.4vw)}
  .hr-title{font-size:min(31px,8vw)}
  .hr-title.hr-wide{font-size:min(30px,7.8vw)}
}
@media (max-width:900px){.pf .num,.stt .big{font-size:min(44px,10vw)}}
/* Story headings sit one clear step under the H1 (about three quarters of it) */
.hr-title{font-size:clamp(36px,min(4.9vw,8vh),78px)}
.hr-title.hr-wide{font-size:clamp(34px,min(4.3vw,7.2vh),70px)}
#bridge .h2{font-size:clamp(36px,min(4.9vw,8vh),78px)}
.ml-intro .h2{font-size:clamp(40px,min(5.4vw,8.6vh),84px)}
@media (min-width:821px){.db-p-head .db-head h2,.db-p-pill .db-head h2{font-size:clamp(38px,min(5vw,8vh),78px)}}
@media (max-width:820px){
  .hr-title{font-size:min(31px,8vw)}
  .hr-title.hr-wide{font-size:min(30px,7.8vw)}
}

/* --- Phones: the tools rail on the system map wraps instead of running off the edge --- */
@media (max-width:820px){
  #solution .sm-tools{flex-wrap:wrap;justify-content:center;width:max-content;max-width:76%;row-gap:6px;border-radius:22px}
}

/* --- Phones: inner-page hero cards stay inside the screen --- */
@media (max-width:900px){.wrap>.hero{grid-template-columns:minmax(0,1fr)}.hero-art .viz.hero-v{min-width:0}}

/* --- Back-to-top button steps aside over the footer (its own "Back to top" link is there) --- */
.totop.away{opacity:0!important;pointer-events:none!important}

/* --- Tap targets: footer links at least 24px tall --- */
footer .in nav a{display:inline-block;padding:3px 0;min-height:24px}
@media (max-width:820px){#hdr~footer nav a,footer .fine a{display:inline-block;min-height:24px;padding:3px 0}}

/* --- One pink: the pastel pink on "Instead, you became an employee." becomes the Brand Kit's
   pink for dark backgrounds (#FF4D84, about 5.6:1 on the night navy) --- */
.db-head h2 .bl2{color:#FF4D84}
.dream-b.af .db-head h2 .bl2{color:#EB0052}

/* --- Phones: the bot and team panels keep the name, face and words below the tabs; the device
   mockup takes whatever height is left (short phones squeezed the words up under the tabs) --- */
@media (max-width:820px){
  .motion.v3 :is(#bots,#human) .bp{height:100%;align-content:start;grid-template-rows:auto minmax(0,1fr);gap:12px}
  .motion.v3 :is(#bots,#human) .bp-vid{align-self:stretch;min-height:0;display:flex;align-items:flex-start;justify-content:center}
  .motion.v3 :is(#bots,#human) .bp .vid{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto}
  .motion.v3 :is(#bots,#human) .bp .vid-screen{flex:1 1 auto;min-height:0;aspect-ratio:auto;height:auto}
}

/* --- Buttons: white text on the brand blue was 3.8:1; this blue is 4.6:1 (AA) and reads the same --- */
.cta{background:#3672DA}
.cta:hover{background:#2A5FC0}
.lm:hover,.faq .more:hover{background:#3672DA}

/* --- Back-to-top leaves the tab order while it is hidden --- */
.totop:not(.on),.totop.away{visibility:hidden;transition:opacity .4s,transform .4s,visibility 0s .4s}

/* --- No sideways scroll even by script or find-in-page: off-canvas story layers stay clipped --- */
html{overflow-x:clip}

/* --- Bots: the intro line now introduces the two bots, so phones show it too (the old "Two of our most popular bots:" label is gone) --- */
@media (max-width:820px){ #bots .bx-head.bh1 .lead{display:block;font-size:15px;line-height:1.4;margin-top:8px;max-width:34ch} }
@media (max-width:820px) and (max-height:700px){ #bots .bx-head.bh1 .h2{font-size:22px} #bots .bx-head.bh1 .lead{font-size:13.5px;line-height:1.35;margin-top:5px} }

/* ===== Phone pass (2026-11-13, Josh: "make sure the mobile experience is world-class") ===== */
/* Header buttons sit at the right edge whenever the full nav is hidden */
@media (max-width:1080px){ #hdr .grp{margin-left:auto} }
@media (max-width:900px){ .hdr:not(#hdr) .grp{margin-left:auto} }

/* Back-to-top: phones already have the sticky header and Menu, and the round button kept covering chat inputs and form fields */
@media (max-width:767px){ .totop{display:none!important} }

/* A focused form field never ends up flush against the bottom edge or the keyboard */
form :is(input,select,textarea){scroll-margin:90px 0 120px}

/* Phone tap targets at least 24px: footer contact links and the phone link under the form */
@media (max-width:820px){ .f-col a,.formnote a{display:inline-block;min-height:24px;line-height:24px} }

/* Bots and team tabs stay on one row on phones */
@media (max-width:820px){
  #bots .bx-tabs{flex-wrap:nowrap;gap:6px}
  #bots .bx-tabs button{white-space:nowrap;font-size:13px;padding:4px 12px 4px 4px;gap:7px}
  #bots .tg2 button{padding:6px 11px}
  #bots .bx-tabs img{width:26px;height:26px}
}
@media (max-width:380px){ #bots .bx-tabs button{font-size:12px;padding-right:9px} #bots .tg2 button{padding:6px 8px} }

/* Short phones (and phones in a browser with big toolbars): the chat window keeps most of the screen */
@media (max-width:820px) and (max-height:760px){
  .motion.v3 #bots .bx-in{gap:8px}
  .motion.v3 #bots .bx-view{padding:4px 0 10px}
  .motion.v3 #bots .bp{gap:8px}
  #bots .bp-face{width:44px;border-radius:12px}
  #bots .bp-who h3{font-size:21px}
  #bots .vid-bar{padding:2px 4px 6px;gap:5px}
  #bots .vid-bar i{width:8px;height:8px}
  #bots .vid-bar span{height:20px;font-size:11px;margin-left:6px}
}

/* Films on phones: the portrait films take the whole stage, leaving room only for the caption */
@media (max-width:820px){
  .emp-frame{width:min(100%,calc((100svh - var(--hh) - 84px) * 9 / 16))}
  .motion.v3 #watch .hr-panel .lap-lid{width:min(88vw,440px,calc((100svh - var(--hh) - 84px) * .5625 + 20px))}
  .lap-tap{margin-top:10px}
}

/* Short phones: the five-step cards get compact so the system diagram keeps more of the screen */
@media (max-width:820px) and (max-height:700px){
  .hr-panel.sol-stage{gap:8px}
  .st-col{gap:8px}
  .st-in{padding:12px 16px;border-radius:18px}
  .st-in .jn{font-size:12px;margin-bottom:4px}
  .st-in b{font-size:21px}
  .st-in p{font-size:14px;line-height:1.35;margin-top:4px}
  .st-next{padding:7px 12px 7px 14px;font-size:14px}
  .st-col:not(.end) .st-view{transform:translateY(16px)}
}

/* Inner-page header: the button group sits at the right edge once the nav folds into Menu */
@media (max-width:900px){ .hdr:not(#hdr) nav + .grp{margin-left:auto} }

/* Team tabs fit inside their pills on phones */
@media (max-width:440px){
  #bots .tg2 button{font-size:12px;padding:5px 9px 5px 5px;gap:5px;min-width:0}
  #bots .tg2 button img,#bots .tg2 button svg{width:22px;height:22px}
  #bots .tg1 button{padding:4px 11px 4px 4px}
}

/* Inner hero: on phones the "<name>'s team" chip sits above the card instead of on top of its title */
@media (max-width:900px){
  .hero-art .lead-chip{position:relative;right:auto;top:auto;width:max-content;max-width:100%;margin:0 0 12px auto}
}

/* Live list rows on phones: the status tag drops under the text instead of squeezing the title */
@media (max-width:480px){
  .rw{flex-wrap:wrap;row-gap:6px}
  .rw .tx{flex:1 1 150px}
  .rw .tg{margin-left:44px}
}

@media (max-width:370px){ #bots .tg2 button{padding:5px 7px 5px 4px;font-size:11.5px} #bots .tg2{gap:4px} }
@media (max-width:900px){ .hero-art:has(> .lead-chip){display:flex;flex-direction:column} .hero-art > .lead-chip{order:-1} }

/* Phones: bot and team chats get every pixel the scene can spare (they were cropped on 375x812 and 360x780 iPhones) */
@media (max-width:820px){
  #bots .bx-heads>.bx-head{align-self:end}
  #bots .vid-bar{display:none}
  #bots .bp .vid{padding:6px}
  #bots .bp .vid-screen{border-radius:14px}
  .motion.v3 #bots .bx-view{padding:6px 0 12px}
  .motion.v3 #bots .bx-in{gap:10px}
}

/* 2026-11-13 round 5: bots CTA under each bot, and the "we put a bot in your business first" line shown on short laptops too */
#bots .bp-try{align-self:flex-start;margin-top:clamp(12px,2.2vh,22px)}
@media (min-width:821px) and (max-height:760px){ #bots .bx-head.bh1 .lead{display:block;font-size:15px;line-height:1.35;margin-top:.8vh;max-width:none} #bots .bx-head.bh1 .h2{font-size:clamp(26px,min(2.6vw,5.4vh),44px)} }
@media (max-width:820px){ #bots .bp-try{height:36px;padding:0 14px;font-size:13px;margin-top:6px} #bots .bp-who p{display:none} }

/* 2026-11-13 round 5: one footer everywhere (the homepage's). These copy the homepage footer rules so the
   inner pages (inner.css) render it the same; the How We Help column makes it four columns. */
footer:has(.f-top){background:var(--night);color:#C9D2E8;padding:clamp(64px,10vh,120px) var(--pad,clamp(20px,4vw,64px)) 0;position:relative;overflow:hidden;font-size:16px}
footer:has(.f-top) a{color:inherit;text-decoration:none;font-weight:600}
footer:has(.f-top) .f-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:clamp(48px,8vh,88px);border-bottom:1px solid rgba(255,255,255,.12)}
footer:has(.f-top) .f-big{margin:0;color:#fff;line-height:.95;font-weight:900;letter-spacing:-.045em}
footer:has(.f-top) .f-big span{color:var(--brand,#3F80EA)}
footer:has(.f-top) .f-cta{display:flex;flex-wrap:wrap;gap:14px}
footer:has(.f-top) .f-cta .cta.big{height:62px;padding:0 30px;font-size:18px}
footer:has(.f-top) .cta.ghost{background:transparent;box-shadow:none;border:2px solid rgba(255,255,255,.55);color:#fff}
footer:has(.f-top) .fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding:clamp(40px,6vh,64px) 0}
footer:has(.f-top) .f-brand .logo{display:block;width:190px;color:#fff}
footer:has(.f-top) .f-brand .logo .full{display:block}
footer:has(.f-top) .f-brand p{margin-top:16px;font-size:16px;line-height:1.6;max-width:32ch;font-weight:500}
footer:has(.f-top) .f-col{display:flex;flex-direction:column;gap:12px;font-size:16px;font-weight:600}
footer:has(.f-top) .f-col small{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7F8DB3;margin-bottom:4px}
footer:has(.f-top) .f-col a:hover,footer:has(.f-top) .fine a:hover{color:#fff}
footer:has(.f-top) .fine{margin-top:0;padding:22px 0 26px;font-size:13.5px;color:#8E9AC0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
footer:has(.f-top) .fine span{display:flex;flex-wrap:wrap;gap:22px}
footer:has(.f-top) .f-mark{display:block;width:100%;height:auto;margin:6px 0 -2.2%;fill:rgba(255,255,255,.06)}
@media (max-width:1080px){ footer:has(.f-top) .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))} footer:has(.f-top) .f-brand{grid-column:1/-1} }
@media (max-width:820px){ footer:has(.f-top) .f-brand .logo{width:170px} footer:has(.f-top) .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 20px} footer:has(.f-top) .f-col{font-size:15px} footer:has(.f-top) .f-cta,footer:has(.f-top) .f-cta .cta{width:100%} footer:has(.f-top) .f-col a{display:inline-block;min-height:24px;line-height:24px} }
.hdr:not(#hdr).ondark{background:rgba(14,19,36,.92);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.07)}
.hdr:not(#hdr).ondark .logo{color:#fff}
.hdr:not(#hdr).ondark .pillbtn,.hdr:not(#hdr).ondark .mnav-b{color:#fff;border-color:rgba(255,255,255,.55)}

/* ===== 2026-11-13 round 5: How We Help pages rebuilt (Josh: hats up, no pills, film, results, more ways) ===== */
/* The 7 hats: one white card per hat slides in from the right as you scroll */
.hx{position:relative;height:calc(7 * 80svh)}
.hx-pin{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));display:flex;flex-direction:column;overflow:hidden;padding:clamp(16px,4vh,44px) 0 clamp(16px,3.4vh,36px)}
.hx-head{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hx-head h2{margin-top:10px;font-size:clamp(28px,min(3.4vw,6vh),54px);line-height:1.03;font-weight:900;letter-spacing:-.04em;text-wrap:balance}
.hx-meter{display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:end;gap:8px;flex:none}
.hx-cur{font-size:clamp(30px,min(3vw,5.4vh),48px);line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--brand)}
.hx-meter>span{font-size:15px;font-weight:800;color:var(--muted)}
.hx-segs{grid-column:1/-1;display:flex;gap:6px;margin-top:6px}
.hx-segs i{width:22px;height:4px;border-radius:4px;background:#DCE1EC;transition:background .4s var(--ease)}.hx-segs i.on{background:var(--brand)}
.hx-view{flex:1;min-height:0;margin-top:clamp(14px,3vh,34px)}
.hx-track{display:flex;column-gap:clamp(18px,2.6vw,40px);height:100%;padding-left:max(var(--pad),calc((100vw - 1240px) / 2 + var(--pad)));will-change:transform}
.hx-slide{flex:0 0 calc(min(1240px,100vw) - 2 * var(--pad));height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(18px,3.6vh,44px) clamp(22px,3.2vw,52px);border-radius:32px;background:#fff;box-shadow:0 40px 80px -56px rgba(29,41,80,.55),0 0 0 1px rgba(29,41,80,.05);opacity:.4;transition:opacity .5s var(--ease)}
.hx-slide.on{opacity:1}
.hx-copy{min-width:0}
.hx-name{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.hx-num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-size:12.5px;letter-spacing:0;flex:none}
.hx-slide h3{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(26px,min(2.8vw,5vh),46px);line-height:1.05;font-weight:900;letter-spacing:-.035em;max-width:16ch;text-wrap:balance}
.hx-slide p.wy{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(15px,min(1.15vw,2.2vh),19px);line-height:1.5;font-weight:600;color:var(--slate);max-width:42ch}
.hx-slide .uw{margin-top:clamp(10px,1.8vh,18px)}
.hx-slide .uw div{font-size:clamp(14px,min(1.02vw,1.95vh),16.5px)}
.hx-slide .uw em{font-style:normal}
.hx-slide .lm{margin-top:clamp(12px,2vh,20px)}
.hx-art{min-width:0;height:100%;min-height:0;display:grid;place-items:center}
.hx-art .viz{grid-area:1/1;width:min(100%,540px)}
@media (min-width:901px) and (max-height:620px){ .hx-slide .uw{display:none} .hx-slide p.wy{max-width:46ch} }
/* phones (and reduced motion): the hats stack, one card each */
.hx.flat{height:auto}
.hx.flat .hx-pin{position:static;height:auto;overflow:visible;padding:56px 0 24px}
.hx.flat .hx-meter{display:none}
.hx.flat .hx-track{flex-direction:column;row-gap:22px;transform:none!important;padding:0 var(--pad)}
.hx.flat .hx-slide{flex:none;height:auto;grid-template-columns:1fr;opacity:1;padding:24px 20px;border-radius:26px}
.hx.flat .hx-art{height:auto}.hx.flat .hx-art .viz{width:100%}
@media (max-width:900px){ .hx{height:auto} .hx-pin{position:static;height:auto} .hx-slide h3{font-size:28px} .hx-slide p.wy{font-size:16px;max-width:none} }

/* Working together: the film */
.fx{padding:clamp(70px,12vh,130px) 0;background:var(--navy);color:#fff}
.fx-head{text-align:center;max-width:860px;margin:0 auto}
.fx-head .eyebrow{color:#9DBBF3}
.fx-head h2{margin-top:12px;font-size:clamp(32px,min(4.2vw,7vh),64px);line-height:1.03;font-weight:900;letter-spacing:-.04em;text-wrap:balance}
.fx-head .lede{margin:clamp(14px,2.4vh,22px) auto 0;max-width:60ch;font-size:clamp(17px,1.35vw,21px);line-height:1.55;font-weight:600;color:#C9D3EA}
.fx-frame{margin:clamp(30px,5vh,56px) auto 0;width:min(100%,calc((100svh - var(--hh) - 60px) * 16 / 9));aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#0B1022;box-shadow:0 50px 100px -50px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.fx-vid{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:820px), (orientation:portrait){ .fx-frame{aspect-ratio:9/16;width:min(100%,calc((100svh - var(--hh) - 40px) * 9 / 16));border-radius:24px} }

/* Results: logos and the jump, big */
.wins{padding:clamp(70px,12vh,130px) 0}
.wins-head h2{margin-top:12px;font-size:clamp(32px,min(4vw,6.6vh),62px);line-height:1.04;font-weight:900;letter-spacing:-.04em}
.wins-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(28px,5vh,50px)}
.wn{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);border-radius:30px;background:#fff;box-shadow:0 40px 80px -56px rgba(29,41,80,.5),0 0 0 1px rgba(29,41,80,.05)}
.wn-logo{height:72px;display:flex;align-items:center}
.wn-logo img{max-height:72px;max-width:220px;width:auto;height:auto;object-fit:contain}
.wn-from{margin-top:clamp(20px,3.4vh,30px);font-size:15px;font-weight:700;color:var(--muted)}
.wn-num{margin-top:2px;font-size:clamp(60px,min(6.2vw,10.6vh),100px);line-height:.95;font-weight:900;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.wn-unit{margin-top:8px;font-size:clamp(17px,1.4vw,20px);font-weight:800;color:var(--brand-ink)}
.wn-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.wn-tags b{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;background:#E6F4EC;color:#16673A;font-size:14px;font-weight:800}
.wn-tags b::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid currentColor}
.wn-det{margin-top:16px;flex:1;font-size:16px;line-height:1.5;font-weight:600;color:var(--slate)}
.wn-by{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* More ways we help: the other three places your hats sit */
.mways{padding:clamp(70px,12vh,130px) 0;background:#fff}
.mways-head h2{margin-top:12px;font-size:clamp(32px,min(4vw,6.6vh),62px);line-height:1.04;font-weight:900;letter-spacing:-.04em}
.mways-head .lede{margin-top:14px;max-width:52ch;font-size:clamp(17px,1.35vw,21px);line-height:1.55;font-weight:600;color:var(--slate)}
.mways-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(28px,5vh,50px)}
.mw{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);border-radius:30px;background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.mw b{font-size:clamp(24px,2.1vw,32px);line-height:1.05;font-weight:900;letter-spacing:-.03em}
.mw-line{margin-top:10px;font-size:17px;line-height:1.45;font-weight:650;color:var(--slate)}
.mw-hats{margin-top:20px;padding-top:18px;border-top:1px solid rgba(29,41,80,.12);flex:1;font-size:14.5px;line-height:1.7;font-weight:700;color:var(--muted)}
.mw-go{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--brand-ink)}
@media (hover:hover){ .mw:hover{transform:translateY(-4px);background:var(--navy);color:#fff;box-shadow:0 40px 70px -40px rgba(29,41,80,.7)}
.mw:hover .mw-line,.mw:hover .mw-hats{color:#C9D3EA}.mw:hover .mw-go{color:#9DBBF3}.mw:hover .mw-hats{border-color:rgba(255,255,255,.15)} }
@media (max-width:900px){ .wins-row,.mways-row{grid-template-columns:1fr} .wn-num{font-size:64px} }
.fx.pending{display:none}

/* ===== round 6 (Josh, Nov 13 night): less to read, more room, the hat carries through ===== */
.hx-head h2{font-size:clamp(30px,min(3.8vw,6.6vh),60px)}
.hx-meter{display:flex;gap:clamp(4px,.6vw,8px);align-items:center}
.hx-meter i{display:block;color:#C9D0DE;transition:color .4s var(--ease),transform .4s var(--ease)}
.hx-meter i.on{color:var(--brand)}
.hx-meter .hat{display:block;width:clamp(24px,2vw,32px);height:clamp(24px,2vw,32px)}
.hx-view{display:flex;align-items:center}
.hx-track{height:auto;align-items:center}
.hx-slide{flex-basis:min(1080px,calc(100vw - 2 * var(--pad)));height:min(100%,clamp(380px,62vh,560px));gap:clamp(30px,5vw,80px);padding:clamp(26px,5vh,56px) clamp(28px,4.4vw,72px)}
.hx-view{height:100%}.hx-track{height:100%}
.hx-num{display:block;width:auto;height:auto;background:none;border-radius:0;color:var(--brand);font-size:clamp(15px,1.1vw,18px);font-weight:900;letter-spacing:.08em}
.hx-slide h3{margin-top:clamp(12px,2vh,20px);font-size:clamp(30px,min(3.2vw,5.8vh),54px);line-height:1.04;max-width:15ch}
.hx-slide h3 .hw{color:var(--brand)}
.hx-slide p.wy{margin-top:clamp(14px,2.4vh,24px);font-size:clamp(16px,min(1.2vw,2.3vh),20px);line-height:1.55;max-width:38ch}
.hx.flat .hx-slide{height:auto;padding:28px 22px}
.hx.flat .hx-meter{display:none}
@media (max-width:900px){ .hx-slide h3{font-size:30px;max-width:none} }

/* results: logo, the jump, one line */
.wn{align-items:flex-start}
.wn-line{display:flex;gap:8px;align-items:baseline;margin-top:16px;font-size:15px;line-height:1.4;font-weight:800;color:#16673A;white-space:nowrap}
.wn-line::before{content:"";flex:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid currentColor;transform:translateY(-1px)}
.wn-num{white-space:nowrap}

/* more ways: a hat, a name, one sentence */
.mways-head{text-align:left}
.mw .hat{width:40px;height:40px;color:var(--brand);margin-bottom:22px}
.mw-line{flex:1;font-size:18px}
@media (hover:hover){ .mw:hover .hat{color:#9DBBF3} }

/* footer: two rows, smaller, the full logo faint behind both */
footer:has(.f-top){padding:clamp(48px,7vh,84px) var(--pad,clamp(18px,5.6vw,80px)) clamp(28px,4vh,44px);isolation:isolate}
footer:has(.f-top) .f-top{padding-bottom:clamp(28px,4.5vh,48px)}
footer:has(.f-top) .f-big{font-size:clamp(34px,min(4.6vw,8vh),76px)}
footer:has(.f-top) .f-cta .cta.big{height:56px;padding:0 26px;font-size:17px}
footer:has(.f-top) .fgrid{padding:clamp(28px,4.5vh,44px) 0 0;gap:32px}
footer:has(.f-top) .f-mark{position:absolute;left:var(--pad,clamp(18px,5.6vw,80px));right:var(--pad,clamp(18px,5.6vw,80px));top:50%;width:calc(100% - 2 * var(--pad,clamp(18px,5.6vw,80px)));transform:translateY(-50%);margin:0;fill:rgba(255,255,255,.035);z-index:-1;pointer-events:none}
.f-legal{margin-top:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:#8E9AC0}
.f-links{display:flex;flex-wrap:wrap;gap:4px 18px}.f-links a{text-decoration:none;display:inline-block;min-height:24px;line-height:24px}.f-links a:hover{color:#fff}
@media (max-width:820px){ footer:has(.f-top) .f-mark{top:auto;bottom:18px;transform:none} }

/* round 7: no hat icons for now (meter is simple bars again); stacked hats on phones whatever the inline height */
.hx-meter i{display:block;width:22px;height:4px;border-radius:4px;background:#DCE1EC;transition:background .4s var(--ease)}
.hx-meter i.on{background:var(--brand)}
.hx.flat{height:auto!important}
@media (max-width:900px){ .hx{height:auto!important} }
footer:has(.f-top) .f-brand .logo{margin-bottom:4px}
.hx-slide h3{max-width:17ch}

/* Launch (Nov 14): phones and reduced motion get the stacked hats layout from the first paint, not after
   the script adds .flat, so the page no longer jumps while it loads (was CLS 0.25 to 0.3). */
@media (max-width:900px), (prefers-reduced-motion: reduce){
  .hx{height:auto!important}
  .hx .hx-pin{position:static;height:auto;overflow:visible;padding:56px 0 24px}
  .hx .hx-meter{display:none}
  .hx .hx-track{flex-direction:column;row-gap:22px;transform:none!important;padding:0 var(--pad);height:auto}
  .hx .hx-slide{flex:none;height:auto;grid-template-columns:1fr;opacity:1;padding:28px 22px;border-radius:26px}
  .hx .hx-art{height:auto} .hx .hx-art .viz{width:100%}
}
/* Launch a11y (Nov 14): AA contrast for the hat numbers and the footer button text. */
.hx-num{color:#2F6FD8}
footer:has(.f-top) .f-cta .cta:not(.ghost){color:#fff}
/* Launch CLS (Nov 14): on phones the header illustration is drawn by the script; reserve its final height
   (per page, --ham, the smallest phone height measured) so nothing below jumps when it appears. */
@media (max-width:900px){ .hero-art{min-height:var(--ham,0);align-items:start;align-content:start} }
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Launch CLS (Nov 14): on phones, start the hero at the size the fit script would pick (headline at about
   10.35vw, intro lines wrapping), so the hero does not resize after the page appears. */
@media (max-width:484px){ .hero-copy h1{font-size:10.35vw} .hero-copy p.hl4>*{width:auto;white-space:normal} }
/* Launch tap targets (Nov 14): the eyebrow link back to Find More Work and the sitemap/legal list links
   get a 24px+ tap area without changing how they look. */
.eyebrow a{display:inline-block;padding:6px 0;margin:-6px 0}
.dd-legal li a,.dd-legal ul a{display:inline-block;padding:4px 0}
/* ChatGPT search box in the mockups gets a sparkle, not the Google mark. */
.gq .g.ai{background:#10A37F;-webkit-mask:none;mask:none;color:#fff;display:grid;place-items:center;font-size:14px;line-height:1}