/* ============================================================
   NextForm Health — design system (nf.css)
   Clinical editorial. Type-led. No stock imagery, no gradients,
   no warm-cream/serif cliché, no card soup.
   Signature: the measured rule — a clinical ruler motif with
   major and minor ticks, opening every section.
   ============================================================ */

:root{
  --ink:        #0C2B29;
  --ink-soft:   #3B4E4B;
  --muted:      #677872;
  --bg:         #F6F9F8;
  --surface:    #FFFFFF;
  --line:       #E1EBE8;
  --line-strong:#C9DBD6;

  --teal:       #0891B2;
  --teal-ink:   #0A6478;
  --green:      #16A34A;
  --green-btn:  #15803D;
  --green-btn2: #10662F;

  --dark:       #0B2523;
  --dark-line:  #1F423E;
  --on-dark:    #EDF5F3;
  --on-dark-mut:#9CB5B0;

  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --wrap:1120px;
  --read:700px;
  --pad:clamp(1.15rem,5vw,2.75rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .25vw,1.12rem);
  line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--teal-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

/* ---------------- layout ---------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3.25rem,7.5vw,6.5rem)}
.section-tight{padding-block:clamp(2.25rem,5vw,3.75rem)}
.cols{display:grid;gap:clamp(1.4rem,4vw,3.25rem)}
@media(min-width:840px){
  .cols-2{grid-template-columns:.82fr 1.18fr}
  .cols-even{grid-template-columns:1fr 1fr}
}

/* ---------------- type ---------------- */
.display{font-weight:600;font-size:clamp(2.15rem,1.3rem + 4.1vw,4.2rem);line-height:1.03;letter-spacing:-.03em;margin:0;max-width:17ch}
.head{font-weight:600;font-size:clamp(1.65rem,1.25rem + 1.85vw,2.5rem);line-height:1.1;letter-spacing:-.022em;margin:0 0 1rem;max-width:21ch}
.sub{font-weight:600;font-size:clamp(1.1rem,1.02rem + .45vw,1.32rem);letter-spacing:-.012em;margin:0 0 .45rem;line-height:1.3}
.lead{font-size:clamp(1.1rem,1.02rem + .55vw,1.34rem);line-height:1.55;color:var(--ink-soft);max-width:46ch;margin:1.35rem 0 0}
p{margin:0 0 1.1rem;color:var(--ink-soft)}
.eyebrow{font-family:var(--mono);font-size:.69rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.eyebrow-t{color:var(--teal-ink)}

/* ---------------- SIGNATURE: measured rule ---------------- */
.measure{display:flex;align-items:center;gap:1rem;margin-bottom:2.25rem}
.measure .eyebrow{white-space:nowrap;flex:none}
.measure .scale{
  flex:1;height:12px;border-bottom:1px solid var(--line-strong);
  background:
    repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 66px) bottom/100% 12px no-repeat,
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 11px) bottom/100% 6px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);
}
.measure-d .eyebrow{color:var(--on-dark-mut)}
.measure-d .scale{
  border-bottom-color:var(--dark-line);
  background:
    repeating-linear-gradient(90deg,var(--dark-line) 0 1px,transparent 1px 66px) bottom/100% 12px no-repeat,
    repeating-linear-gradient(90deg,var(--dark-line) 0 1px,transparent 1px 11px) bottom/100% 6px no-repeat;
}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:1rem;padding:.9rem 1.5rem;border-radius:3px;border:1px solid transparent;transition:background .18s ease,transform .18s ease}
.btn-primary{background:var(--green-btn);color:#fff;box-shadow:0 1px 2px rgba(11,37,35,.16),0 12px 26px -14px rgba(21,128,61,.55)}
.btn-primary:hover{background:var(--green-btn2);text-decoration:none;transform:translateY(-1px)}
.btn-lg{padding:1.05rem 1.85rem;font-size:1.06rem}
.btn .arrow,.linkline .arrow{display:inline-block;transition:transform .18s ease}
.btn:hover .arrow,.linkline:hover .arrow{transform:translateX(3px)}
.linkline{font-weight:600;color:var(--teal-ink)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem;margin-top:2.1rem}

/* ---------------- top bar ---------------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(246,249,248,.9);backdrop-filter:saturate(150%) blur(9px);border-bottom:1px solid var(--line)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;min-height:62px;gap:1rem}
.brand{display:flex;align-items:baseline;gap:.5rem;font-weight:600;letter-spacing:-.022em;font-size:1.14rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.topnav{display:flex;align-items:center;gap:1.5rem}
.topnav a{font-size:.94rem;font-weight:500;color:var(--ink-soft)}
.topnav a:hover{color:var(--ink);text-decoration:none}
.topnav .cta{color:var(--teal-ink);font-weight:600;white-space:nowrap}
@media(max-width:720px){.topnav .navlink{display:none}.brand .tag{display:none}}

/* ---------------- hero ---------------- */
.hero{padding-block:clamp(3rem,8.5vw,7rem) clamp(2rem,5vw,3.5rem)}
.teamstrip{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.71rem;letter-spacing:.05em;color:var(--muted)}
.teamstrip span{display:inline-flex;align-items:center;gap:.5rem}
.teamstrip span::before{content:"";width:5px;height:5px;background:var(--green);border-radius:50%;flex:none}

/* ---------------- phases ---------------- */
.phase{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2rem}
.phase:first-of-type{margin-top:0}
.phase .num{font-family:var(--mono);font-size:.71rem;letter-spacing:.12em;color:var(--teal-ink);font-weight:500}
.phase .sub{margin:.5rem 0 .45rem}
.phase p{margin:0;max-width:62ch}

/* ---------------- clinical data panel ---------------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:clamp(1.4rem,3.5vw,2rem)}
.panel dl{margin:0}
.panel .rowitem{display:flex;justify-content:space-between;gap:1.25rem;padding:.8rem 0;border-top:1px solid var(--line)}
.panel .rowitem:first-child{border-top:0;padding-top:0}
.panel dt{font-weight:500;color:var(--ink);font-size:.97rem}
.panel dd{margin:0;font-family:var(--mono);font-size:.73rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;white-space:nowrap;padding-top:.2rem}

/* ---------------- team roster ---------------- */
.roster{display:grid;margin-top:2.25rem}
.role{display:grid;gap:.3rem 2rem;padding:1.5rem 0;border-top:1px solid var(--line)}
@media(min-width:820px){.role{grid-template-columns:.42fr 1fr;align-items:baseline}}
.role h3{margin:0;font-weight:600;font-size:1.12rem;letter-spacing:-.012em;color:var(--ink)}
.role p{margin:0;max-width:60ch}
.roster-d .role{border-top-color:var(--dark-line)}
.roster-d .role h3{color:var(--on-dark)}
.roster-d .role p{color:var(--on-dark-mut)}

/* ---------------- dark band ---------------- */
.band{background:var(--dark);color:var(--on-dark)}
.band p{color:var(--on-dark-mut)}
.band .head,.band .sub{color:var(--on-dark)}
.quote{font-size:clamp(1.45rem,1.15rem + 1.5vw,2.1rem);font-weight:600;letter-spacing:-.022em;line-height:1.22;color:var(--on-dark);max-width:15ch;margin:0}
.quote em{color:var(--green);font-style:normal}

/* ---------------- start box ---------------- */
.startbox{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:clamp(1.5rem,4vw,2.4rem);box-shadow:0 1px 2px rgba(11,37,35,.05),0 26px 50px -34px rgba(11,37,35,.3)}
.price{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:1.55rem;letter-spacing:-.01em;margin:.6rem 0 0}
.fineprint{font-size:.88rem;color:var(--muted);margin-top:1rem}

/* ---------------- knowledge list ---------------- */
.kb-list{display:grid;margin-top:.25rem}
.kb-item{display:block;padding:1.55rem 0;border-top:1px solid var(--line);transition:padding-left .2s ease}
.kb-item:hover{text-decoration:none;padding-left:.4rem}
.kb-item .cat{font-family:var(--mono);font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.kb-item h3{margin:.45rem 0 .3rem;color:var(--ink);font-weight:600;font-size:1.2rem;letter-spacing:-.014em}
.kb-item p{margin:0;color:var(--ink-soft);max-width:68ch}
.kb-item .go{display:inline-block;margin-top:.55rem;font-size:.9rem;font-weight:600;color:var(--teal-ink)}

/* ---------------- article ---------------- */
.prose{max-width:var(--read)}
.prose p{margin:0 0 1.25rem}
.prose h2{font-weight:600;font-size:clamp(1.35rem,1.18rem + .95vw,1.8rem);letter-spacing:-.02em;line-height:1.18;margin:2.5rem 0 .85rem;color:var(--ink);scroll-margin-top:82px}
.prose h3{font-weight:600;font-size:1.16rem;margin:1.9rem 0 .45rem;color:var(--ink)}
.prose ul{margin:0 0 1.25rem;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:1.45rem;margin-bottom:.55rem;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--green)}
.article-head{padding-block:clamp(2.25rem,5.5vw,4rem) clamp(1.25rem,3vw,2rem)}
.byline{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;font-size:.86rem;color:var(--muted);margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.byline .rev{color:var(--ink-soft);font-weight:600}
.toc{border-left:2px solid var(--green);padding:.15rem 0 .15rem 1.05rem;margin:0 0 2.1rem;font-size:.94rem}
.toc p{font-family:var(--mono);font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .45rem}
.toc a{display:block;color:var(--ink-soft);padding:.18rem 0}
.callout{background:#EDF5F3;border:1px solid var(--line);border-radius:4px;padding:1.25rem 1.35rem;margin:1.9rem 0;font-size:.97rem;color:var(--ink-soft)}
.callout strong{color:var(--ink)}
.article-cta{border-top:1px solid var(--line);margin-top:2.75rem;padding-top:1.9rem}

/* ---------------- footer ---------------- */
.foot{background:var(--dark);color:var(--on-dark-mut);padding-block:3.25rem 2.25rem}
.foot a{color:var(--on-dark)}
.foot a:hover{color:#fff}
.foot .grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.foot .grid{grid-template-columns:1.5fr 1fr 1fr}}
.foot .brand{color:var(--on-dark)}
.foot .brand .tag{color:var(--on-dark-mut);display:inline}
.foot h4{font-family:var(--mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mut);font-weight:500;margin:0 0 .85rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot ul li{margin-bottom:.5rem}
.foot .disc{border-top:1px solid var(--dark-line);margin-top:2.25rem;padding-top:1.4rem;font-size:.81rem;line-height:1.6}
.foot .disc p{color:var(--on-dark-mut);margin:0 0 .45rem;max-width:78ch}

/* ---------------- motion ---------------- */
.rise{opacity:0;transform:translateY(13px);transition:opacity .55s ease,transform .55s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}