/* ============================================================
   Alleviate Care — Phase 1 prototype · shared design system
   Type: Specimen B "The Clinic" (Fraunces + IBM Plex Sans).
   Palette + tokens carried verbatim from the locked homepage
   (web/phase-1/index.html) so interior pages match exactly.

   Type sizing: a rem-bounded fluid scale — clamp(remMin, vw, remMax).
   The vw term keeps type fluid (grows with the viewport); the rem
   bounds mean it also honours the reader's browser font-size setting
   (accessibility / WCAG) and keeps sane limits on small + very large
   screens. Reading copy uses the --read* / --step-0 tokens so it
   scales on large monitors instead of freezing at ~14px.
   ============================================================ */

:root{
  --teal:#2B435B; --teal-deep:#13202E; --teal-ink:#0C1721;
  --mist:#E7EDEF; --mint:#6FC8B6;
  --paper:#F4F1EA; --paper-2:#EDE8DD;
  --ink:#15212B; --ink-60:#5d6b75; --ink-40:#8a96a0;
  --line:#d8d2c5; --accent:#0E7C7B; --gap:#C9821E;
  --serif:'Fraunces',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --gutter: clamp(1.5rem, 6vw, 8rem);
  --measure: 108rem;
  --measure-read: 76rem;                     /* narrower ceiling for text-led interior pages */
  --section-y: clamp(3.5rem, 8vw, 8.5rem);
  --band-y: clamp(3rem, 6vw, 6.5rem);

  /* fluid type scale — rem-bounded (accessibility) with a vw term (fluid) */
  --step-0:  clamp(1.02rem, 0.95rem + 0.34vw, 1.24rem);   /* base body      ~16.3 → 19.8px */
  --read:    clamp(0.95rem, 0.89rem + 0.32vw, 1.1rem);    /* reading copy   ~15.2 → 17.6px */
  --read-sm: clamp(0.88rem, 0.84rem + 0.24vw, 1.02rem);   /* dense/2ndary   ~14   → 16.3px */
  --lede:    clamp(1.06rem, 0.98rem + 0.5vw, 1.42rem);    /* ledes / intros ~17   → 22.7px */
  --fine:    clamp(0.78rem, 0.75rem + 0.14vw, 0.86rem);   /* fine print     ~12.5 → 13.8px */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:var(--step-0);line-height:1.55;position:relative;overflow-x:hidden}
.serif{font-family:var(--serif);font-weight:400}
.it{font-family:var(--serif);font-style:italic}
.wrap{width:min(100% - var(--gutter) * 2, var(--measure));margin-inline:auto}
.wrap.read{width:min(100% - var(--gutter) * 2, var(--measure-read))}
a{color:inherit;text-decoration:none}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--ink-60)}
img{max-width:100%}

/* ---- content-gap annotation layer (toggleable, matches homepage) ---- */
.tbd{border-bottom:2px dashed var(--gap);background:rgba(201,130,30,.10);padding:0 3px;border-radius:2px;cursor:help}
.gtag{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--gap);color:#fff;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle;white-space:nowrap}
/* Prototype flags/notes appear ONLY on dev (html.show-flags is set by a head
   script on dev.alleviate.care / localhost). Staging + prod render clean by
   default — no flash, since the default state hides everything below. */
html:not(.show-flags) .tbd{border-bottom:none;background:none;padding:0}
html:not(.show-flags) .gtag{display:none}
html:not(.show-flags) .protobar{display:none}
html:not(.show-flags) nav.bar{top:0}
html:not(.show-flags) .trustlock .note{display:none}
html:not(.show-flags) footer .dis{display:none}
html:not(.show-flags) .internal{display:none}
.protobar{position:sticky;top:0;z-index:40;background:#2a2114;color:#f3e7d2;font-size:12.5px}
.protobar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap}
.protobar b{color:#fff}
.gapbtn{background:var(--gap);color:#fff;border:none;font-family:inherit;font-weight:700;font-size:12px;padding:7px 14px;border-radius:100px;cursor:pointer;white-space:nowrap}
.gapbtn:hover{background:#b0701a}

/* ---- utility strip ---- */
.util{background:var(--teal-ink);color:#aebfcb;font-size:12.5px;letter-spacing:.02em}
.util .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px;flex-wrap:wrap}
.util a{color:#cfe0ea}
.util a:hover{color:#fff}

/* ---- primary nav ---- */
nav.bar{position:sticky;top:40px;z-index:30;background:rgba(244,241,234,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:30px;width:auto}
.brand .tag{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60);border-left:1px solid var(--line);padding-left:12px}
.navlinks{display:flex;gap:30px;font-size:14.5px;font-weight:500;align-items:center}
.navlinks a{color:var(--ink);transition:color .25s;cursor:pointer;position:relative}
.navlinks a:hover{color:var(--teal)}
.navlinks a.on{color:var(--teal)}
.navlinks a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--teal)}
.navlinks a.soon{color:var(--ink-40);cursor:default}
.navlinks a.soon:hover{color:var(--ink-40)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--teal);color:#fff;font-weight:600;font-size:var(--read-sm);padding:12px 22px;border-radius:100px;letter-spacing:.01em;transition:transform .25s,background .25s;cursor:pointer}
.btn:hover{transform:translateY(-1px);background:var(--teal-deep)}
.btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--paper-2);color:var(--teal-deep)}
.btn.lg{font-size:var(--read);padding:15px 30px}

/* ---- interior masthead (no photo hero) ---- */
.masthead{background:var(--teal-ink);color:#eef4f3;position:relative;overflow:hidden}
.masthead::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 88% -10%, rgba(111,200,182,.16), transparent 60%),
  radial-gradient(90% 80% at 4% 120%, rgba(43,67,91,.55), transparent 55%)}
.masthead .wrap{position:relative;padding-block:clamp(3.2rem,7vw,6.5rem)}
.masthead.paper{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.masthead.paper::before{background:radial-gradient(90% 80% at 92% -20%, rgba(43,67,91,.06), transparent 60%)}
.crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fb2c0;margin-bottom:20px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.masthead.paper .crumb{color:var(--ink-40)}
.crumb a{color:inherit}.crumb a:hover{color:#fff}
.masthead.paper .crumb a:hover{color:var(--teal)}
.crumb .sep{opacity:.5}
.masthead .kicker{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mint);margin-bottom:16px}
.masthead.paper .kicker{color:var(--accent)}
.masthead h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.75rem,6.2vw,5.75rem);line-height:1.0;letter-spacing:-.012em;color:#fff;max-width:17ch;text-wrap:balance}
.masthead.paper h1{color:var(--ink)}
.masthead h1 .it{color:#cdeee5}
.masthead.paper h1 .it{color:var(--teal)}
.masthead .lede{font-size:var(--lede);color:#cdd9df;max-width:46ch;line-height:1.6;margin-top:26px}
.masthead.paper .lede{color:var(--ink-60)}
.masthead .mh-cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
.masthead .btn{background:#fff;color:var(--teal)}
.masthead .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.masthead.paper .btn{background:var(--teal);color:#fff}
.masthead.paper .btn.ghost{background:transparent;color:var(--teal);border:1px solid var(--line)}
/* Split masthead with a supporting photo (copy left, image right) */
.masthead.photo .wrap{display:grid;grid-template-columns:1.05fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.masthead.photo .mh-img{border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(8,20,30,.32);aspect-ratio:4/3;background:var(--mist)}
.masthead.photo .mh-img img{width:100%;height:100%;object-fit:cover;display:block}
.masthead.photo h1{max-width:15ch}
@media(max-width:820px){.masthead.photo .wrap{grid-template-columns:1fr}.masthead.photo .mh-img{aspect-ratio:16/9;margin-top:20px}}

/* ---- section + section head (from homepage) ---- */
section{padding-block:var(--section-y)}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;border-bottom:1px solid var(--line);padding-bottom:22px;gap:30px;flex-wrap:wrap}
.sechead .lead-no{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-40);margin-bottom:6px}
.sechead h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,4.4vw,3.75rem);line-height:1.02;letter-spacing:-.005em}
.sechead h2 .it{color:var(--teal)}
.sechead p{color:var(--ink-60);max-width:30em;font-size:var(--read-sm)}

/* ---- prose (article / long-form body) ---- */
.prose{max-width:42rem}
.prose > * + *{margin-top:1.15em}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.08;letter-spacing:-.005em;margin-top:1.8em}
.prose h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.4vw,1.7rem);line-height:1.12;margin-top:1.5em}
.prose p{color:#33414c;line-height:1.68}
.prose .lead-p{font-size:1.14em;color:var(--ink);line-height:1.6}
.prose ul,.prose ol{padding-left:1.25em;color:#33414c}
.prose li{margin-top:.5em;line-height:1.6}
.prose li::marker{color:var(--teal)}
.prose a.link{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}
.prose blockquote{border-left:3px solid var(--mint);padding-left:22px;font-family:var(--serif);font-size:1.3em;line-height:1.35;color:var(--teal-deep)}

/* ---- two-column article layout (sticky aside) ---- */
.artlayout{display:grid;grid-template-columns:1fr 21rem;gap:clamp(2rem,5vw,5rem);align-items:start}
.aside{position:sticky;top:132px;border:1px solid var(--line);border-top:2px solid var(--teal);background:#fff;padding:24px 24px 22px}
.aside h4{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.6vw,1.4rem);margin-bottom:6px}
.aside p{font-size:var(--read-sm);color:var(--ink-60);line-height:1.55;margin-bottom:16px}
.aside .btn{width:100%;justify-content:center}
.aside .fine{font-size:var(--fine);color:var(--ink-40);margin-top:12px;line-height:1.5}
.aside ul{list-style:none;font-size:var(--read-sm)}
.aside li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}
.aside li:last-child{border-bottom:none}

/* ---- feature grid (value props / "why") ---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{border:1px solid var(--line);border-top:2px solid var(--teal);background:#fff;padding:28px 26px}
.card .cn{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-40);margin-bottom:12px}
.card .ci{font-size:26px;line-height:1;margin-bottom:14px;color:var(--teal)}
.card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,1.9vw,1.7rem);line-height:1.08;margin-bottom:10px}
.card p{font-size:var(--read);color:var(--ink-60);line-height:1.6}

/* ---- process / numbered steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:30px 24px 28px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:none}
.step .sn{font-family:var(--serif);font-size:clamp(2.2rem,3vw,2.8rem);color:var(--teal);line-height:.9}
.step h4{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.6vw,1.45rem);margin:14px 0 8px;line-height:1.1}
.step p{font-size:var(--read-sm);color:var(--ink-60);line-height:1.55}

/* ---- doors (audience nav, from homepage) ---- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.door{border:1px solid var(--line);border-top:2px solid var(--teal);background:#fff;padding:30px 28px 26px;transition:background .25s,border-color .25s;cursor:pointer;display:block}
.door:hover{background:var(--paper-2);border-top-color:var(--teal-deep)}
.door .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:600}
.door h4{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,2.1vw,1.9rem);margin:12px 0 10px;line-height:1.05}
.door p{font-size:var(--read);color:var(--ink-60);line-height:1.55;margin-bottom:18px}
.door .go{font-size:var(--read-sm);font-weight:600;color:var(--teal);display:inline-flex;align-items:center;gap:7px}

/* ---- leaders (from homepage) ---- */
.leaders{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.leader{display:grid;grid-template-columns:128px 1fr;gap:24px;align-items:start}
.leader .mono{width:128px;height:128px;border-radius:50%;overflow:hidden;background:var(--mist);border:3px solid var(--mint)}
.leader .mono img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.leader h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.5vw,2.1rem);line-height:1.04;margin-bottom:3px}
.leader .role{font-size:11.5px;color:var(--teal);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.leader p{font-size:var(--read);color:var(--ink-60);line-height:1.6}

/* ---- trust-mark lockup (from homepage) ---- */
.trustlock{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trustlock .wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding-block:clamp(1.5rem,3vw,2.5rem)}
.trustlock .seal{width:86px;height:86px;border-radius:50%;border:1.5px solid var(--teal);color:var(--teal);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:9px;line-height:1.32;flex:none}
.trustlock .seal .mk{font-size:18px;line-height:1;margin-bottom:5px}
.trustlock .txt{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);line-height:2;border-left:1px solid var(--line);padding-left:30px}
.trustlock .note{margin-left:auto;font-size:11px;color:var(--ink-60);max-width:25ch;text-align:right;line-height:1.5}
.trustlock .certs{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.trustlock .certcard{background:#fff;border:1px solid var(--line);border-radius:8px;height:84px;padding:0 20px;display:flex;align-items:center;justify-content:center}
.trustlock .certcard img{height:52px;width:auto;display:block}
@media(max-width:600px){.trustlock .certcard{height:66px;padding:0 14px}.trustlock .certcard img{height:40px}}

/* ---- quote band (from homepage) ---- */
.quote{background:var(--teal-ink);color:#eef4f3}
.quote .wrap{width:min(100% - var(--gutter) * 2, 68rem);padding-block:clamp(5rem,9vw,7rem);text-align:center}
.quote blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.75rem);line-height:1.2;letter-spacing:-.005em;text-wrap:balance}
.quote blockquote .it{color:#bfe7dc}
.quote .by{margin-top:30px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9fc6bb}

/* ---- FAQ / accordion ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.2;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:22px;font-family:var(--sans);font-size:26px;font-weight:400;color:var(--teal);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--teal)}
.faq .ans{padding:0 40px 26px 0;max-width:58rem}
.faq .ans p{color:#33414c;line-height:1.68}
.faq .ans > * + *{margin-top:.9em}
.faq .ans ul{padding-left:1.2em;color:#33414c}
.faq .ans li{margin-top:.45em;line-height:1.6}
.faq .ans li::marker{color:var(--teal)}

/* ---- contact + non-PHI form (from homepage) ---- */
.contact{background:var(--paper-2)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;padding-block:var(--band-y);border-top:1px solid var(--line)}
.contact .invite .h{font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.6rem);line-height:1.04;max-width:13ch}
.contact .invite .lines{margin-top:22px;font-size:var(--read);color:var(--ink-60);line-height:2}
.contact .invite .lines b{color:var(--ink);font-weight:600}
.cform{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 26px 22px}
.cform .row{display:flex;gap:14px;flex-wrap:wrap}
.cform .f{flex:1;min-width:150px;margin-bottom:13px}
.cform label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);margin:0 0 5px}
.cform input,.cform select,.cform textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:10px 12px}
.cform textarea{resize:vertical;min-height:70px}
.cform .phinote{display:block;border-left:3px solid var(--gap);padding:3px 0 3px 16px;font-size:var(--fine);color:var(--ink-60);line-height:1.55;margin:6px 0 15px;border-radius:0}
.cform .phinote b{color:var(--ink)}
.cform button{width:100%;background:var(--teal);color:#fff;border:none;font-family:inherit;font-weight:600;font-size:var(--read);padding:13px;border-radius:100px;cursor:pointer}
.cform button:hover{background:var(--teal-deep)}
.cform .cf-turnstile{margin:6px 0 14px}
.cform .fine{font-size:var(--fine);color:var(--ink-40);margin-top:10px;text-align:center}

/* ---- callout / phi banner (standalone) ---- */
.callout{display:block;border-left:3px solid var(--gap);padding:3px 0 3px 18px;font-size:var(--read-sm);color:var(--ink-60);line-height:1.6;border-radius:0}
.callout b{color:var(--ink);font-weight:600}
.callout.teal{border-left-color:var(--teal)}
.callout.teal b{color:var(--teal-deep)}

/* ---- editorial directory (audience rows, replaces uniform card grid) ---- */
.audlist{border-top:1px solid var(--line)}
.audrow{display:grid;grid-template-columns:14rem 1fr;gap:8px 44px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.audk{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink-40);line-height:1.2}
.audrow h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2vw,1.7rem);line-height:1.1;margin-bottom:8px}
.audrow p{font-size:var(--read);color:var(--ink-60);line-height:1.6}
.audrow .more{margin-top:12px}
.audrow .more a{color:var(--teal);font-weight:600}

/* ---- numbered editorial reasons (serif numerals, no cards, no icons) ---- */
.reasons{border-top:1px solid var(--line)}
.reason{display:grid;grid-template-columns:auto 1fr;gap:30px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.reason .rn{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);color:var(--teal);line-height:1;min-width:1.5ch}
.reason h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2vw,1.7rem);line-height:1.1;margin-bottom:8px}
.reason p{font-size:var(--read);color:var(--ink-60);line-height:1.6}
@media(max-width:700px){.audrow,.reason{grid-template-columns:1fr;gap:6px}}

/* ---- linked index (audience nav, replaces uniform door-card grid) ---- */
.doorlist{border-top:1px solid var(--line)}
.doorlink{display:grid;grid-template-columns:1fr auto;gap:10px 28px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);transition:padding-left .2s;cursor:pointer}
.doorlink:hover{padding-left:10px}
.doorlink .dl-k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:6px}
.doorlink h4{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.1;margin-bottom:6px}
.doorlink p{font-size:var(--read-sm);color:var(--ink-60);line-height:1.55;max-width:60ch}
.doorlink .go{color:var(--teal);font-weight:600;font-size:var(--read-sm);white-space:nowrap;justify-self:end}
@media(max-width:600px){.doorlink{grid-template-columns:1fr;gap:8px}.doorlink .go{justify-self:start}}

/* ---- footer (from homepage) ---- */
footer{background:var(--teal-ink);color:#8ea2af;padding:58px 0 42px;font-size:var(--read-sm)}
footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
footer .cols{display:flex;gap:56px;flex-wrap:wrap;font-size:var(--read-sm)}
footer .cols .ch{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5f7381;margin-bottom:10px;font-weight:700}
footer .cols a{display:block;color:#a9bcc7;padding:5px 0;cursor:pointer}
footer .cols a:hover{color:#fff}
footer .dis{font-size:var(--fine);color:#4f626e;margin-top:32px;border-top:1px solid #1e2f3b;padding-top:20px;max-width:90ch}

@media(max-width:900px){
  .navlinks{display:none}
  .artlayout,.grid3,.grid2,.leaders,.doors,.contact .wrap{grid-template-columns:1fr}
  .aside{position:static}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2n){border-right:none}
}
@media(max-width:640px){
  .brand .tag{display:none}          /* free up the nav row for the CTA + hamburger */
  .util{display:none}                /* utility strip wraps to two lines on phones; nav carries the referral CTA */
}
.btn{white-space:nowrap}
@media(max-width:520px){
  .steps{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid var(--line)}
  .leader{grid-template-columns:1fr}
  .leader .mono{width:110px;height:110px}
}