/* TerrainRx design system — normative source: DESIGN.md at repo root */
:root{
  --navy:#13185A; --navy-2:#2A3070; --indigo:#4F55AA; --peri:#7A7DEE; --lime:#D7F20C;
  --ink:#1A1D2E; --body:#4A5068; --muted:#6E7590;
  --surface:#F3F5F9; --surface-2:#E7EBF3; --line:#DDE2ED; --white:#fff;
  --shadow-rest:0 2px 10px rgba(19,24,90,.06);
  --shadow-lift:0 15px 35px rgba(19,24,90,.10);
  --r:10px; --r-sm:6px;
  --font-display:"fractul-variable",Poppins,system-ui,sans-serif;
  --font-body:Poppins,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--body); font-family:var(--font-body); font-size:17px; line-height:1.68}
img,svg,video,iframe{max-width:100%; display:block}
a{color:var(--indigo)}
h1,h2,h3{font-family:var(--font-display); color:var(--navy); line-height:1.18; letter-spacing:-.02em; margin:0; text-wrap:balance}
main h2{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight:600}
.wrap{width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(1.15rem, 4vw, 2.5rem)}
.eyebrow{font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--indigo); margin:0 0 .9rem}
.stats .eyebrow{color:var(--peri)}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--peri); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; background:var(--navy); color:#fff; padding:.9rem 1.25rem; z-index:300; border-radius:0 0 6px 0}
.skip:focus{left:0; top:0}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.hbar{display:flex; align-items:center; gap:1rem; min-height:76px}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; color:var(--navy); min-height:44px}
.brand img{width:30px; height:30px}
.brand b{font-family:var(--font-display); font-size:1.25rem; font-weight:600; letter-spacing:-.025em}
nav#primary-nav ul{display:flex; gap:.1rem; list-style:none; margin:0; padding:0}
nav#primary-nav a{display:flex; align-items:center; min-height:44px; padding:0 .9rem; text-decoration:none; font-size:.95rem; font-weight:500; color:var(--body); border-radius:6px}
nav#primary-nav a:hover{color:var(--navy); background:var(--surface)}
nav#primary-nav a[aria-current="page"]{color:var(--navy); font-weight:600}
nav#primary-nav .has-sub{position:relative}
nav#primary-nav .navsub-btn{display:flex; align-items:center; gap:.35rem; min-height:44px; padding:0 .9rem; font-family:inherit; font-size:.95rem; font-weight:500; color:var(--body); background:none; border:0; border-radius:6px; cursor:pointer}
nav#primary-nav .navsub-btn:hover{color:var(--navy); background:var(--surface)}
nav#primary-nav .navsub-btn svg{width:14px; height:14px; flex:none; transition:transform .18s ease}
nav#primary-nav .navsub-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
nav#primary-nav .navsub-btn.current-section{color:var(--navy); font-weight:600}
nav#primary-nav .submenu{display:none; list-style:none; margin:0; padding:0}
nav#primary-nav .has-sub.open > .submenu{display:block}
@media(min-width:1001px){
  nav#primary-nav .submenu{position:absolute; top:calc(100% + 6px); left:0; min-width:240px; background:var(--white); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lift); padding:.4rem}
  /* The 6px offset above is a visual gap the pointer still has to cross. Without
     this bridge it belongs to neither the button nor the panel, so travelling to
     the panel fires mouseleave on .has-sub and the menu shuts under the cursor. */
  nav#primary-nav .submenu::before{content:""; position:absolute; left:0; right:0; top:-7px; height:7px}
  nav#primary-nav .submenu a{min-height:42px; white-space:nowrap}
}
/* `.btn` must work on <button> as well as <a>: a bare <button> otherwise inherits
   the UA's Arial, its 2px outset border, and cursor:default. */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.5rem; border:0; border-radius:var(--r); appearance:none; background:none; font-family:inherit; text-decoration:none; font-weight:600; font-size:.95rem; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease}
.btn-primary{background:var(--lime); color:var(--ink); box-shadow:var(--shadow-rest)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift)}
.btn-outline{border:1.5px solid var(--navy); color:var(--navy)}
.btn-outline:hover{background:var(--navy); color:#fff}
.btn-ghost-light{border:1.5px solid rgba(255,255,255,.7); color:#fff}
.btn-ghost-light:hover{background:#fff; color:var(--navy)}
.header-cta{min-height:44px; padding:0 1.15rem; font-size:.85rem}
.navtoggle{display:none; appearance:none; background:none; border:0; cursor:pointer; min-width:44px; min-height:44px; align-items:center; justify-content:center; border-radius:6px; color:var(--navy)}
.navtoggle:hover{background:var(--surface)}
.navtoggle svg{width:26px; height:26px}
.navtoggle .icon-close{display:none}
@media(max-width:1000px){
  .navtoggle{display:inline-flex}
  nav#primary-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lift);
    padding:.75rem clamp(1.15rem, 4vw, 2.5rem) 1.25rem;
  }
  nav#primary-nav ul{flex-direction:column; gap:0}
  nav#primary-nav a{width:100%; min-height:48px; font-size:1.12rem; border-bottom:1px solid var(--line); border-radius:0}
  nav#primary-nav li:last-child a{border-bottom:0}
  nav#primary-nav .navsub-btn{width:100%; min-height:48px; font-size:1.12rem; border-bottom:1px solid var(--line); border-radius:0; justify-content:space-between}
  nav#primary-nav .submenu a{padding-left:1.9rem; font-size:1.02rem}
  nav#primary-nav .submenu li:last-child a{border-bottom:1px solid var(--line)}
  header.nav-open nav#primary-nav{display:block}
  header.nav-open .navtoggle .icon-open{display:none}
  header.nav-open .navtoggle .icon-close{display:block}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(480px, 72vh, 660px); display:flex; align-items:center; overflow:hidden; background:var(--navy)}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(19,24,90,.92) 0%, rgba(19,24,90,.72) 46%, rgba(42,48,112,.42) 100%)}
.hero .wrap{position:relative; z-index:2; padding-block:clamp(3rem, 8vw, 5rem)}
.hero h1{color:#fff; font-size:clamp(2.1rem, 1.3rem + 3.4vw, 3.85rem); font-weight:600; max-width:19ch}
.hero p{color:rgba(255,255,255,.9); max-width:56ch; margin:1.5rem 0 0; font-size:1.08rem}
.hero .acts{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem}
.hero .eyebrow{color:var(--peri)}
.nowrap{white-space:nowrap}
.vidctl{
  position:absolute; right:clamp(1rem, 3vw, 2rem); bottom:clamp(1rem, 3vw, 2rem); z-index:3;
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:0 1rem;
  background:rgba(19,24,90,.62); color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px;
  font:inherit; font-size:.85rem; font-weight:500; cursor:pointer;
}
.vidctl:hover{background:rgba(19,24,90,.85)}

/* ---------- audience router ---------- */
.router{background:var(--surface); border-bottom:1px solid var(--line)}
.router .wrap{padding-block:clamp(2.75rem, 6vw, 4.5rem)}
.rhead{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2rem}
.rhead h2{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight:600}
.rhead p{margin:.6rem 0 0; max-width:46ch}
.rlist{border-top:1px solid var(--line)}
.rrow{
  display:grid; grid-template-columns:15.5rem 1fr auto; gap:1.5rem; align-items:center;
  padding:1.35rem 1.1rem; border-bottom:1px solid var(--line); text-decoration:none; color:var(--body);
  box-shadow:inset 0 0 0 0 var(--peri); transition:background .16s ease, box-shadow .16s ease;
}
.rrow:hover{background:var(--white); box-shadow:inset 3px 0 0 0 var(--peri)}
.rrow h3{font-size:1.12rem; font-weight:600}
.rrow p{margin:0; font-size:.95rem}
.rrow .arrow{color:var(--peri); font-weight:600; font-size:1.1rem; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center}
@media(max-width:820px){
  .rrow{grid-template-columns:1fr auto; gap:.5rem 1rem; padding-block:1.15rem}
  .rrow h3{grid-column:1}
  .rrow p{grid-column:1/-1}
  .rrow .arrow{grid-row:1; grid-column:2}
}

/* ---------- sections ---------- */
section{padding-block:clamp(3rem, 7vw, 5.5rem)}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center}
@media(max-width:900px){ .split{grid-template-columns:1fr} }
.split h2{font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight:600}
.split p{margin:1.1rem 0 0; max-width:60ch}
/* Split art comes in at anything from 0.67 to 1.75 aspect. height:auto keeps every
   image undistorted; the min/max pair bounds how tall the column gets so no page
   shows a thin letterbox or a portrait that towers over its own copy. Only images
   outside the band are cropped, and cover keeps that crop proportional. */
.split img{width:100%; height:auto; min-height:400px; max-height:560px; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow-rest)}
.ticks{list-style:none; margin:1.75rem 0 0; padding:0}
.ticks li{position:relative; display:block; padding:.55rem 0 .55rem 1.5rem; font-size:.95rem}
.ticks li::before{content:""; position:absolute; left:0; top:1.08rem; width:8px; height:8px; background:var(--peri)}
.morelink{display:inline-flex; align-items:center; gap:.4rem; min-height:44px; margin-top:1rem; font-weight:600; text-decoration:none; color:var(--navy)}
.morelink:hover{color:var(--indigo)}

/* stats */
.stats{background:var(--navy); color:#fff}
.stats h2{color:#fff}
.sgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); border-radius:var(--r); overflow:hidden; margin-top:2.5rem}
.sgrid>div{background:var(--navy); padding:1.85rem 1.5rem}
.sgrid dt{font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--peri)}
.sgrid dd{margin:.7rem 0 0; font-size:clamp(2.1rem, 1.5rem + 2vw, 3.1rem); line-height:1; font-weight:600; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; font-family:var(--font-display)}
.sgrid dd small{display:block; font-size:.95rem; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.78); margin-top:.8rem; line-height:1.5; font-family:var(--font-body)}
@media(max-width:940px){ .sgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:500px){ .sgrid{grid-template-columns:1fr} }
/* 5-up variant (About values strip); the class replaces an inline style that overrode the breakpoints */
.sgrid.cols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:940px){ .sgrid.cols-5{grid-template-columns:repeat(2,1fr)} }
@media(max-width:500px){ .sgrid.cols-5{grid-template-columns:1fr} }

/* regulatory line — text only; no third-party logos (FDA logo use is prohibited) */
.regline{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 2.5rem; padding-block:2.25rem; border-bottom:1px solid var(--line); margin:0; list-style:none}
.regline li{font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.keepcase{text-transform:none}

/* products */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem}
@media(max-width:940px){ .pgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .pgrid{grid-template-columns:1fr} }
.pcard{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; display:flex; flex-direction:column; gap:.9rem; box-shadow:var(--shadow-rest); text-decoration:none; color:var(--body); transition:transform .18s ease, box-shadow .18s ease}
a.pcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.pface{display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm)}
.pcard h3{font-size:1.12rem; font-weight:600}
.pcard .tags{display:flex; flex-wrap:wrap; gap:.4rem; margin:0}
.pcard .tags span{font-size:.74rem; font-weight:600; letter-spacing:.08em; color:var(--indigo); background:var(--surface); border-radius:999px; padding:.28rem .7rem}
.pcard .ndc{margin:auto 0 0; font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums}
.storage-note{margin-top:1.5rem; font-size:.85rem; color:var(--muted)}

/* pipeline */
.pipe{background:var(--surface)}
.tl{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem}
.tl>div{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; box-shadow:var(--shadow-rest)}
.tl h3{font-size:.85rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--indigo); margin-bottom:1rem; font-family:var(--font-body)}
.tl ul{list-style:none; margin:0; padding:0}
.tl li{padding:.5rem 0; border-top:1px solid var(--line); font-size:.95rem}
.tl li:first-child{border-top:0}
@media(max-width:940px){ .tl{grid-template-columns:repeat(2,1fr)} }
@media(max-width:500px){ .tl{grid-template-columns:1fr} }

/* contact */
.contact{background:var(--navy); color:rgba(255,255,255,.86)}
.contact h2{color:#fff; font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight:600}
.contact .eyebrow{color:var(--peri)}
.cgrid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem, 5vw, 4rem); margin-top:2.25rem; align-items:start}
@media(max-width:900px){ .cgrid{grid-template-columns:minmax(0,1fr)} }
.cbig{font-family:var(--font-display); font-size:clamp(2.1rem, 1.5rem + 2vw, 3.1rem); font-weight:600; letter-spacing:-.03em; color:#fff; text-decoration:none; font-variant-numeric:tabular-nums; display:inline-block}
.cbig:hover{color:var(--lime)}
@media(max-width:360px){ .cbig{font-size:1.85rem} }  /* the phone number was the widest unbreakable item at 320px */
.cmail{color:#fff; font-size:1.1rem; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); display:inline-flex; align-items:center; min-height:44px}
.cmail:hover{border-bottom-color:#fff}
.cinfo{list-style:none; margin:1.85rem 0 0; padding:0}
.cinfo li{display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:.85rem 0; border-top:1px solid rgba(255,255,255,.18)}
.cinfo span{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--peri); padding-top:.3rem}
.cinfo-light span{color:var(--indigo)}
.cinfo a{color:#fff}
/* below 400px the 8.5rem label column plus an unbreakable e-mail address exceeds the viewport, so stack label over value */
@media(max-width:400px){ .cinfo li{grid-template-columns:1fr; gap:.25rem} .cinfo span{padding-top:0} }
.safety{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:var(--r); padding:1.5rem; margin-top:1.75rem}
.safety p{margin:.7rem 0 0; font-size:.95rem}
.safety strong{color:#fff}
.safety a{color:#fff; text-underline-offset:3px}
/* ---------- inquiry form (loaded on demand) ----------
   The LeadConnector embed pulls ~15 third-party scripts, so nothing is requested
   until the visitor opens the form. The shell is one object across all three
   states: invitation, opening, form. Nothing is swapped out for a placeholder. */
/* THE PANEL MUST STAY DARK. The LeadConnector form is configured with white
   labels on a fully transparent ground (verified: its html, body and form
   elements all compute to rgba(0,0,0,0), every label to #fff). Its container is
   therefore the only thing supplying a background, and a light one renders the
   form invisible. We cannot restyle inside the iframe: it is cross-origin, and
   those colours live in the LeadConnector form builder. */
.formshell{position:relative; background:var(--navy); border-radius:var(--r); padding:.75rem; box-shadow:var(--shadow-rest); transition:height .42s cubic-bezier(.16,1,.3,1)}
/* On the navy contact band the panel keeps the same Deep Navy and is defined by a
   hairline instead. A lifted tint was tried and rejected: it raises the ground to
   rgb(36,40,102), where the Periwinkle eyebrow measures 3.82:1 and fails AA. */
.contact .formshell{border:1px solid rgba(255,255,255,.18); box-shadow:none}

/* Navy ground, so The Ground Rule inverts: Periwinkle eyebrows, and secondary
   text tinted from white rather than a neutral gray (The No-Gray-On-Navy Rule). */
.finvite{color:rgba(255,255,255,.86); padding:1.6rem 1.5rem 1.5rem}
.finvite .eyebrow{color:var(--peri)}
.finvite h3{font-size:1.12rem; font-weight:600; color:#fff}
.finvite .fintro{margin:.55rem 0 0; font-size:.95rem; max-width:44ch; color:rgba(255,255,255,.86)}
.finvite .ticks{margin:1.15rem 0 0}
.finvite .ticks li{padding:.32rem 0 .32rem 1.5rem}
.finvite .ticks li::before{top:.86rem; width:6px; height:6px}
.finvite .btn{margin-top:1.5rem}
.finvite .btn[aria-busy="true"]{opacity:.75; pointer-events:none; transform:none; box-shadow:var(--shadow-rest)}

/* While opening, the frame is laid over the shell at full width so LeadConnector's
   resizer can measure it, but held invisible. The invitation stays on screen the
   whole time, so the panel is never blank and never a spinner in a box. */
.fframe{position:absolute; inset:.75rem; opacity:0; pointer-events:none}
.formshell.is-live .fframe{position:static; inset:auto; opacity:1; pointer-events:auto; transition:opacity .3s ease}
.formshell.is-live .finvite{display:none}
.formshell.is-live{min-height:640px}

/* Height is owned by LeadConnector: form_embed.js writes an inline height from the
   form's own iframe-resizer measurement (~1001px at desktop width, taller when the
   column narrows). Never use !important here — it beats LC's inline style and clips
   the form. */
/* transparent on purpose: the shell's dark ground shows through behind the form */
.formshell iframe{width:100%; border:none; border-radius:var(--r-sm); display:block; background:transparent}

/* Failure state: named problem, working recovery. Replaces the invitation in flow. */
.form-fallback{color:rgba(255,255,255,.86); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.55rem}
/* an author `display` beats the UA's [hidden]{display:none}, so restate it */
.form-fallback[hidden]{display:none}
.form-fallback h3{font-size:1.12rem; font-weight:600; color:#fff}
.form-fallback p{margin:0; font-size:.95rem}
.form-fallback a{color:#fff; font-weight:600; text-underline-offset:3px}
.formshell noscript p{color:rgba(255,255,255,.86); padding:1.6rem 1.5rem; margin:0; font-size:.95rem}
.formshell noscript a{color:#fff}
/* SMS consent note under the inquiry form; sits on the navy shell in every state */
.formshell .fconsent{margin:0; padding:.9rem 1.5rem 1rem; font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.72)}
.formshell .fconsent a{color:#fff; text-underline-offset:3px}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* footer */
footer{background:var(--ink); color:rgba(255,255,255,.6); font-size:.85rem}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding-block:3rem 2rem}
@media(max-width:820px){ .fgrid{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .fgrid{grid-template-columns:1fr} }
.fgrid h3,.fgrid .fhead{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 .75rem; font-family:var(--font-body)}
.fgrid ul{list-style:none; margin:0; padding:0}
.fgrid a{color:rgba(255,255,255,.82); text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.fgrid a:hover{color:#fff}
.fbrand p{margin:.75rem 0 0; max-width:34ch; line-height:1.6}
.social{display:flex; gap:.5rem; margin-top:1rem}
.social a{min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.22); border-radius:6px; color:rgba(255,255,255,.82)}
.social a:hover{border-color:#fff; color:#fff}
.social svg{width:18px; height:18px; fill:currentColor}
.fbase{display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; padding-block:1.4rem; border-top:1px solid rgba(255,255,255,.14)}
.fbase a{color:rgba(255,255,255,.82); display:inline-flex; align-items:center; min-height:44px; text-decoration:none}
.fbase a:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* ---------- subpage components ---------- */

/* static-image page hero */
.phero{position:relative; display:flex; align-items:center; min-height:clamp(360px, 52vh, 520px); overflow:hidden; background:var(--navy)}
.phero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.phero::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(19,24,90,.92) 0%, rgba(19,24,90,.72) 46%, rgba(42,48,112,.42) 100%)}
.phero .wrap{position:relative; z-index:2; padding-block:clamp(2.5rem, 7vw, 4.5rem)}
.phero .eyebrow{color:var(--peri)}
.phero h1{color:#fff; font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.25rem); font-weight:600; max-width:22ch}
.phero p{color:rgba(255,255,255,.9); max-width:58ch; margin:1.4rem 0 0; font-size:1.05rem}
.phero .acts{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem}

/* objective/value rows (definition table) */
.defrows{border-top:1px solid var(--line); margin-top:2.25rem}
.defrow{display:grid; grid-template-columns:16rem 1fr; gap:1.5rem; padding:1.35rem .25rem; border-bottom:1px solid var(--line)}
.defrow h3{font-size:1.12rem; font-weight:600}
.defrow p{margin:0; font-size:.95rem}
@media(max-width:760px){ .defrow{grid-template-columns:1fr; gap:.4rem} }

/* numbered process steps */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.5rem}
.steps>div{counter-increment:step; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; box-shadow:var(--shadow-rest)}
.steps>div::before{content:counter(step, decimal-leading-zero); display:block; font-family:var(--font-display); font-size:1.12rem; font-weight:600; color:var(--indigo); margin-bottom:.6rem; font-variant-numeric:tabular-nums}
.steps h3{font-size:1.12rem; font-weight:600; margin-bottom:.6rem}
.steps p, .steps li{font-size:.95rem; margin:0}
.steps ul{list-style:none; margin:.4rem 0 0; padding:0}
.steps li{padding:.35rem 0; border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
@media(max-width:940px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .steps{grid-template-columns:1fr} }

/* benefit card grid (icon-free, per craft rules) */
.bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem}
.bgrid>div{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; box-shadow:var(--shadow-rest)}
.bgrid h3{font-size:1.12rem; font-weight:600; margin-bottom:.55rem}
.bgrid p{margin:0; font-size:.95rem}
@media(max-width:940px){ .bgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .bgrid{grid-template-columns:1fr} }
/* 2-up variant; the class replaces an inline style that overrode the breakpoints */
.bgrid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){ .bgrid.cols-2{grid-template-columns:1fr} }

/* audience switch strip */
.xaud{background:var(--surface); border-block:1px solid var(--line)}
.xaud .wrap{padding-block:2.25rem}
.xaud p.lead{margin:0 0 1rem; font-size:.95rem; color:var(--muted)}
.xaud ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem}
.xaud a{display:inline-flex; align-items:center; min-height:44px; padding:0 1.1rem; border:1px solid var(--line); border-radius:var(--r); background:var(--white); text-decoration:none; font-weight:600; font-size:.85rem; color:var(--navy); transition:border-color .16s ease, box-shadow .16s ease}
.xaud a:hover{border-color:var(--peri); box-shadow:var(--shadow-rest)}

/* compact contact band (no form) */
.contact .ccta{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.75rem}

/* ---------- product spec sheets ---------- */
.pspec{display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:1.5rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; box-shadow:var(--shadow-rest); margin-top:1.5rem}
.pspec dl{margin:0; display:grid; grid-template-columns:11rem 1fr; gap:.35rem 1.25rem; align-content:start}
.pspec dt{font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--indigo); padding-top:.2rem}
.pspec dd{margin:0; font-size:.95rem}
.pspec dd.tnum{font-variant-numeric:tabular-nums}
.pspec .res{grid-column:1/-1; border-top:1px solid var(--line); padding-top:1rem; margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.6rem 1.75rem}
.pspec .res a{display:inline-flex; align-items:center; min-height:44px; font-weight:600; font-size:.85rem; color:var(--indigo); text-decoration:none; border-bottom:2px solid var(--peri)}
.pspec .res a:hover{color:var(--navy); border-bottom-color:var(--navy)}
@media(max-width:820px){ .pspec{grid-template-columns:1fr} .pspec .pface{max-width:300px} .pspec dl{grid-template-columns:1fr; gap:.1rem} .pspec dt{padding-top:.7rem} }

/* ---------- data tables (pipeline grid, partner touchpoints) ---------- */
.dtable-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); margin-top:2.5rem; background:var(--white); box-shadow:var(--shadow-rest)}
.dtable{width:100%; min-width:640px; border-collapse:collapse; font-size:.95rem}
.dtable th{text-align:left; font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--white); background:var(--navy); padding:.9rem 1.1rem; white-space:nowrap}
.dtable td{padding:1rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:top}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:nth-child(even){background:var(--surface)}
.dtable td:first-child{font-weight:600; color:var(--navy)}

/* ---------- legal / long-read prose ---------- */
.prose{max-width:72ch; margin-inline:auto}
.prose h2{font-size:clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-top:2.5rem}
.prose h3{font-size:1.12rem; margin-top:2rem}
.prose p, .prose li{font-size:.95rem}
.prose p{margin:1rem 0 0}
.prose ul{margin:.75rem 0 0; padding-left:1.25rem}
.prose li{margin:.4rem 0}
.prose a{color:var(--indigo)}
.legal-updated{font-size:.85rem; color:var(--muted); margin-top:.75rem}