/* ==========================================================================
   Propelon — sitewide design system  ·  v1.0.0  ·  2026-09-17
   The only stylesheet for the 2026 marketing site. Per program rule, pages
   carry no per-page CSS: every rule lives here, page-scoped with body
   classes where needed.
   ========================================================================== */

/* ---- Fonts (self-hosted; no external requests) --------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2')}

/* ---- Tokens --------------------------------------------------------------- */
:root{
  --pl-navy-950:#0B1C36;
  --pl-navy-900:#0E2647;
  --pl-navy-850:#112C52;
  --pl-navy-800:#16345E;
  --pl-navy-700:#1D4173;

  --pl-ink:#152238;
  --pl-body:#3B4A61;
  --pl-mute:#5B6C83;

  --pl-paper:#FFFFFF;
  --pl-wash:#F5F8FB;
  --pl-wash-2:#ECF1F7;
  --pl-line:#DFE6EF;
  --pl-line-strong:#C4D0DF;

  --pl-orange:#EE7614;       /* brand accent — large/graphic use            */
  --pl-amber:#F6A73C;        /* gradient partner, on-dark accents           */
  --pl-cta:#C6520A;          /* solid CTA ground — AA with white label      */
  --pl-cta-hover:#A84406;
  --pl-eyebrow:#B34A03;      /* small caps labels on light — AA             */

  --pl-on-navy:#F4F7FB;
  --pl-on-navy-mute:#A7BCD3; /* secondary text on navy-900                  */
  --pl-on-navy-line:#2A4A79;

  /* value-state ramp — five hue families, never summed                      */
  --v-opp:#77879C;
  --v-mod:#3E74B0;
  --v-com:#14406F;
  --v-rea:#2E8B6F;
  --v-ver:#166A47;

  --pl-ok:#1E7A50;
  --pl-warn:#B34A03;
  --pl-risk:#B3261E;

  --wrap:1200px;
  --gut:24px;
  --r-lg:14px;
  --r-md:10px;
  --sec-y:clamp(58px,8vw,104px);
  --font:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---- Reset / base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.propelon{margin:0;background:var(--pl-paper);color:var(--pl-body);font-family:var(--font);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
:where(body.propelon) main img,:where(body.propelon) main svg{max-width:100%;height:auto;display:block}
:where(body.propelon) h1,:where(body.propelon) h2,:where(body.propelon) h3,:where(body.propelon) h4{color:var(--pl-ink);line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.015em}
:where(body.propelon) h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;letter-spacing:-.022em}
:where(body.propelon) h2{font-size:clamp(26px,3vw,34px)}
:where(body.propelon) h3{font-size:21px}
:where(body.propelon) h4{font-size:17px}
:where(body.propelon) p{margin:0 0 1em}
:where(body.propelon) a{color:var(--pl-navy-700);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a.lk-quiet{color:inherit;text-decoration:none}
a.lk-quiet:hover{color:var(--pl-navy-700)}
:where(body.propelon) a:hover{color:var(--pl-navy-950)}
:where(body.propelon) :focus-visible{outline:2px solid var(--pl-orange);outline-offset:2px;border-radius:3px}
body.propelon ::selection{background:var(--pl-amber);color:var(--pl-navy-950)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--pl-navy-950);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}
.hp-field{position:absolute !important;left:-9999px !important;top:auto !important;width:1px;height:1px;opacity:0 !important;pointer-events:none}

/* ---- Header ---------------------------------------------------------------- */
.pl-header{position:sticky;top:0;z-index:100;background:var(--pl-navy-900);border-bottom:1px solid var(--pl-on-navy-line);transition:box-shadow .22s ease}
.pl-header.is-scrolled{box-shadow:0 8px 28px rgba(9,20,39,.28)}
.pl-header .wrap{display:flex;align-items:center;gap:26px;min-height:68px}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{height:30px;width:auto}
.nav-primary{display:flex;align-items:center;gap:4px;margin-left:6px}
.nav-primary>li{list-style:none;position:relative}
.nav-primary,.nav-primary ul{margin:0;padding:0}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:22px 12px;color:var(--pl-on-navy);text-decoration:none;font-size:15px;font-weight:500;letter-spacing:.005em;border-bottom:2px solid transparent}
.nav-link:hover{color:#fff}
.nav-link.is-current{color:#fff;border-bottom-color:var(--pl-amber)}
.nav-link .caret{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav-dd{position:absolute;left:0;top:100%;min-width:540px;background:var(--pl-paper);border:1px solid var(--pl-line);border-radius:0 0 var(--r-md) var(--r-md);box-shadow:0 18px 40px rgba(11,28,54,.18);padding:22px 24px;display:none;grid-template-columns:1fr 1fr;gap:6px 34px}
.nav-dd.cols-3{min-width:660px;grid-template-columns:1fr 1fr 1fr}
li.has-dd.open>.nav-dd{display:grid}
.dd-group{min-width:0}
.dd-h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pl-eyebrow);margin:6px 0 8px}
.nav-dd a{display:block;padding:7px 0;color:var(--pl-ink);text-decoration:none;font-size:15px;border-radius:6px}
.nav-dd a:hover{color:var(--pl-navy-700);text-decoration:underline}
.nav-utils{margin-left:auto;display:flex;align-items:center;gap:18px}
.signin{color:var(--pl-on-navy);text-decoration:none;font-size:15px;font-weight:500}
.signin:hover{color:#fff;text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pl-cta);color:#fff;border:1px solid var(--pl-cta);border-radius:999px;padding:11px 22px;font-family:var(--font);font-size:15.5px;font-weight:600;letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:background .15s ease,transform .12s ease}
.btn:hover{background:var(--pl-cta-hover);border-color:var(--pl-cta-hover);color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(198,82,10,.22)}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(198,82,10,.18)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.7;cursor:progress;transform:none;box-shadow:none}
.btn:active{transform:none}
.btn-lg{padding:14px 28px;font-size:16.5px}
.btn-ghost{background:transparent;color:var(--pl-navy-800);border:1.5px solid var(--pl-line-strong)}
.btn-ghost:hover{background:var(--pl-wash);color:var(--pl-navy-950);border-color:var(--pl-navy-800);transform:translateY(-1px);box-shadow:0 8px 20px rgba(9,20,39,.10)}
.btn-ghost:active{transform:translateY(0);box-shadow:none}
.btn-ondark{background:transparent;color:var(--pl-on-navy);border:1.5px solid var(--pl-on-navy-line)}
.btn-ondark:hover{background:var(--pl-navy-850);border-color:var(--pl-on-navy-mute);color:#fff;transform:none}
.header-cta{white-space:nowrap}
.nav-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--pl-on-navy-line);border-radius:8px;color:var(--pl-on-navy);padding:9px 12px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;align-items:center;gap:8px}
.nav-toggle .bars{display:inline-block;width:16px;height:2px;background:currentColor;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:'';position:absolute;left:0;width:16px;height:2px;background:currentColor}
.nav-toggle .bars::before{top:-5px}.nav-toggle .bars::after{top:5px}

/* Mobile drawer */
.pl-drawer{display:none;background:var(--pl-navy-900);border-top:1px solid var(--pl-on-navy-line)}
.pl-drawer.open{display:block}
.pl-drawer nav{padding:10px var(--gut) 26px;max-width:var(--wrap);margin:0 auto}
.pl-drawer a{display:block;padding:13px 2px;color:var(--pl-on-navy);text-decoration:none;font-size:17px;font-weight:500;border-bottom:1px solid var(--pl-on-navy-line)}
.pl-drawer a:hover{color:#fff}
.pl-drawer .drawer-sub{padding-left:16px;font-size:15px;color:var(--pl-on-navy-mute)}
.pl-drawer .drawer-cta{margin-top:18px;border-bottom:0;padding:0}
.pl-drawer .drawer-cta .btn{width:100%;justify-content:center}

/* ---- Sections -------------------------------------------------------------- */
.sec{padding:var(--sec-y) 0}
.sec-wash{background:var(--pl-wash)}
.sec-navy{background:var(--pl-navy-900);color:var(--pl-on-navy-mute)}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy p{color:var(--pl-on-navy-mute)}
.sec-navy a{color:var(--pl-amber)}
.sec-navy a:hover{color:#fff}
.eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pl-eyebrow);margin:0 0 12px}
.sec-navy .eyebrow{color:var(--pl-amber)}
.lede{font-size:19px;line-height:1.6;color:var(--pl-body);max-width:62ch}
.sec-navy .lede{color:var(--pl-on-navy-mute)}
.sec-head{max-width:820px;margin-bottom:clamp(28px,4vw,44px)}
.center{text-align:center}
.center .sec-head,.center .lede{margin-left:auto;margin-right:auto}
.tight{max-width:760px}
.note{font-size:14px;color:var(--pl-mute);border-left:3px solid var(--pl-line-strong);padding:2px 0 2px 14px;max-width:70ch}
.sec-navy .note{color:var(--pl-on-navy-mute);border-left-color:var(--pl-on-navy-line)}

/* ---- Hero ------------------------------------------------------------------- */
.hero h1{color:#fff}
.hero{background:linear-gradient(160deg,var(--pl-navy-950) 0%,var(--pl-navy-900) 55%,var(--pl-navy-850) 100%);color:var(--pl-on-navy);padding:clamp(60px,8vw,108px) 0 0;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--pl-on-navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--pl-on-navy-line) 1px,transparent 1px);background-size:64px 64px;opacity:.28;pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{color:#fff;margin-bottom:18px;max-width:15ch}
.hero .lede{color:var(--pl-on-navy-mute);font-size:20px;max-width:52ch}
.hero-kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pl-amber);border:1px solid var(--pl-on-navy-line);border-radius:999px;padding:7px 14px;margin-bottom:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 8px;align-items:center}
.hero-more{color:var(--pl-on-navy);font-weight:600;text-decoration:none;font-size:15.5px}
.hero-more:hover{color:#fff;text-decoration:underline}
.hero-more::after{content:'\2192';margin-left:8px}
.hero-panel{border:1px solid var(--pl-on-navy-line);border-radius:var(--r-lg);background:var(--pl-navy-850);padding:10px;box-shadow:0 30px 60px rgba(5,13,26,.45)}
.hero-panel figcaption{font-size:12.5px;color:var(--pl-on-navy-mute);padding:10px 8px 4px;margin:0}
.hero-panel figure{margin:0}
.hero-proof{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--pl-on-navy-line);background:rgba(9,20,39,.45)}
.proof-strip{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.proof-head{grid-column:1 / -1;margin:0;padding:22px 24px 6px;font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em}
.proof-cell{padding:22px 26px 24px;border-left:1px solid var(--pl-on-navy-line)}
.proof-cell:first-child{border-left:0;padding-left:0}
.proof-n{display:block;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em;color:#fff}
.proof-l{display:block;font-size:14.5px;color:var(--pl-on-navy-mute);margin-top:2px;line-height:1.45}

/* subheroes on interior pages */
.page-hero h1{color:#fff}
.page-hero{background:linear-gradient(160deg,var(--pl-navy-950),var(--pl-navy-900));color:var(--pl-on-navy);padding:clamp(52px,6.5vw,84px) 0}
.page-hero h1{color:#fff;max-width:20ch}
.page-hero .lede{color:var(--pl-on-navy-mute)}
.crumb{font-size:13.5px;color:var(--pl-on-navy-mute);margin-bottom:14px}
.crumb a{color:var(--pl-on-navy-mute)}
.crumb a:hover{color:#fff}

/* ---- Cards & grids ----------------------------------------------------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--pl-paper);border:1px solid var(--pl-line);border-radius:var(--r-lg);padding:26px 26px 24px;min-width:0}
.sec-wash .card{border-color:var(--pl-line)}
.card h3{margin-bottom:8px}
.card p{margin-bottom:0;font-size:15.5px}
.card .more{display:inline-block;margin-top:14px;font-weight:600;font-size:15px}
.card-rule{border-top:3px solid var(--pl-orange);border-radius:var(--r-md)}
.card-navy{background:var(--pl-navy-850);border-color:var(--pl-on-navy-line)}
.card-navy h3{color:#fff}.card-navy p{color:var(--pl-on-navy-mute)}
.stat-card{background:var(--pl-paper);border:1px solid var(--pl-line);border-radius:var(--r-lg);padding:26px}
.stat-card .n{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--pl-navy-900)}
.stat-card .l{display:block;font-size:15px;color:var(--pl-body);margin-top:6px;line-height:1.5}
.stat-card .src{display:block;font-size:12.5px;color:var(--pl-mute);margin-top:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.split .pane-figure{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:18px 0 0;list-style:none}
.chips li{border:1px solid var(--pl-line-strong);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--pl-ink);background:var(--pl-paper)}
.sec-navy .chips li{background:transparent;border-color:var(--pl-on-navy-line);color:var(--pl-on-navy)}
.checklist{list-style:none;margin:16px 0 0;padding:0}
.checklist li{position:relative;padding:0 0 12px 30px;font-size:15.5px}
.checklist li::before{content:'';position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--pl-ok)}
.checklist li::after{content:'';position:absolute;left:4.5px;top:9px;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.sec-navy .checklist li{color:var(--pl-on-navy)}

/* two-tone problem panel */
.gap-panel{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--pl-line);border-radius:var(--r-lg);overflow:hidden}
.gap-cell{padding:30px 30px 26px}
.gap-cell .n{display:block;font-size:clamp(40px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1}
.gap-cell .t{display:block;margin-top:10px;font-size:15.5px;line-height:1.5}
.gap-a{background:var(--pl-wash)}
.gap-a .n{color:var(--pl-body)}
.gap-b{background:var(--pl-navy-900)}
.gap-b .n{color:#fff}
.gap-b .t{color:var(--pl-on-navy-mute)}
.gap-src{grid-column:1/-1;padding:12px 30px;background:var(--pl-paper);border-top:1px solid var(--pl-line);font-size:12.5px;color:var(--pl-mute)}

/* buyer tabs-as-cards */
.role-card h3{display:flex;align-items:baseline;gap:10px}
.role-card .who{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pl-eyebrow)}

/* steps (true sequence) */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step{counter-increment:step;background:var(--pl-paper);border:1px solid var(--pl-line);border-radius:var(--r-lg);padding:26px;position:relative}
.step::before{content:counter(step,decimal-leading-zero);display:inline-block;font-weight:800;font-size:14px;letter-spacing:.06em;color:#fff;background:var(--pl-navy-900);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.step h3{font-size:18px}
.step p{font-size:15px;margin:0}
.step .dur{display:block;margin-top:12px;font-size:13px;font-weight:600;color:var(--pl-eyebrow)}

/* journey timeline (30-60-90) */
.tl{list-style:none;margin:26px 0 0;padding:0;border-left:2px solid var(--pl-line-strong)}
.tl li{position:relative;padding:0 0 26px 26px}
.tl li::before{content:'';position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--pl-orange);border:2px solid var(--pl-paper)}
.tl .when{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pl-eyebrow);margin-bottom:4px}
.tl h3{font-size:17px;margin-bottom:4px}
.tl p{font-size:15px;margin:0;max-width:60ch}

/* definition rows on platform page */
.mod{display:grid;grid-template-columns:260px minmax(0,1fr);gap:8px 36px;padding:24px 0;border-top:1px solid var(--pl-line)}
.mod:last-of-type{border-bottom:1px solid var(--pl-line)}
.mod h3{font-size:18px;margin:0}
.mod .tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pl-mute);margin-top:6px}
.mod p{margin:0;font-size:15.5px}

/* fine-print / guardrail box */
.guard{background:var(--pl-wash);border:1px solid var(--pl-line);border-left:4px solid var(--pl-navy-800);border-radius:var(--r-md);padding:20px 22px;font-size:15px;max-width:78ch}
.guard strong{color:var(--pl-ink)}

/* CTA band */
.cta-band{background:linear-gradient(150deg,var(--pl-navy-950),var(--pl-navy-800));border-radius:var(--r-lg);padding:clamp(34px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.cta-band h2{color:#fff;margin:0 0 8px}
.cta-band p{color:var(--pl-on-navy-mute);margin:0;max-width:56ch}
.cta-band .btn{white-space:nowrap}

/* ---- Forms -------------------------------------------------------------------- */
.form-card{background:var(--pl-paper);border:1px solid var(--pl-line);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.f-field{display:flex;flex-direction:column;min-width:0}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:14px;font-weight:600;color:var(--pl-ink);margin-bottom:6px}
.f-field .hint{font-weight:400;color:var(--pl-mute)}
.f-field input,.f-field select,.f-field textarea{font:inherit;font-size:15.5px;color:var(--pl-ink);background:var(--pl-paper);border:1.5px solid var(--pl-line-strong);border-radius:var(--r-md);padding:11px 13px;width:100%}
.f-field textarea{min-height:96px;resize:vertical}
.f-field input:focus-visible,.f-field select:focus-visible,.f-field textarea:focus-visible{outline:2px solid var(--pl-orange);outline-offset:1px;border-color:var(--pl-navy-800)}
.f-actions{margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.f-privacy{font-size:13px;color:var(--pl-mute);margin:14px 0 0}
.form-ok{background:#EAF5EF;border:1px solid #BFE0CE;border-radius:var(--r-md);color:#14532D;padding:16px 18px;font-size:15.5px;margin-bottom:22px}
.form-err{background:#FBEDEA;border:1px solid #EFC7BF;border-radius:var(--r-md);color:#7F1D12;padding:16px 18px;font-size:15.5px;margin-bottom:22px}

/* ---- Footer --------------------------------------------------------------------- */
.pl-footer{background:var(--pl-navy-950);color:var(--pl-on-navy-mute);margin-top:0}
.pl-footer .wrap{padding-top:clamp(44px,5vw,64px);padding-bottom:30px}
.foot-grid{display:grid;grid-template-columns:minmax(190px,1.4fr) repeat(5,minmax(0,1fr));gap:28px}
.foot-brand img{height:26px;width:auto;margin-bottom:16px}
.foot-brand p{font-size:14px;line-height:1.6;max-width:30ch}
.foot-h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pl-amber);margin:4px 0 12px}
.pl-footer ul{list-style:none;margin:0;padding:0}
.pl-footer li{margin:0 0 9px}
.pl-footer a{color:var(--pl-on-navy-mute);text-decoration:none;font-size:14.5px}
.pl-footer a:hover{color:#fff;text-decoration:underline}
.foot-legal{border-top:1px solid var(--pl-on-navy-line);margin-top:38px;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:13.5px}
.foot-legal .cr{margin-right:auto}

/* ==========================================================================
   Interactive Card Hover + Focus Emphasis — component behavior
   Default: neutral card background and standard border.
   Hover / keyboard focus (focus-within, so a focused link inside a card gives
   the card the same treatment): stronger border, elevation, translateY(-2px).
   Transition ~220 ms ease on background, border, shadow, transform; mouse-out
   restores the default state through the same transition.
   Reduced motion: the highlight stays; the movement is removed.
   Applies to every comparable Propelon card: .card, .stat-card, .calc-stat, .mod
   ========================================================================== */
.card,.stat-card,.calc-stat,.mod{transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.card:hover,.card:focus-within,.stat-card:hover,.stat-card:focus-within,.calc-stat:hover,.calc-stat:focus-within{border-color:var(--pl-navy-800);box-shadow:0 12px 30px rgba(9,20,39,.12);transform:translateY(-2px)}
.card-navy:hover,.card-navy:focus-within{border-color:var(--pl-amber);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.sec-navy .card:hover,.sec-navy .card:focus-within{border-color:var(--pl-amber)}
.mod:hover,.mod:focus-within{background:var(--pl-wash);box-shadow:inset 3px 0 0 var(--pl-orange)}
.card:focus-within,.stat-card:focus-within,.calc-stat:focus-within{outline:2px solid var(--pl-orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .card,.stat-card,.calc-stat,.mod,.btn,.btn-ghost,.pl-header{transition-duration:.01ms}
  .card:hover,.card:focus-within,.stat-card:hover,.stat-card:focus-within,.calc-stat:hover,.calc-stat:focus-within,.btn:hover,.btn-ghost:hover{transform:none}
}
.proof-n,.stat-card .n,.calc-stat .n,.gap-cell .n{font-variant-numeric:tabular-nums}

/* ---- Product screenshots ("shot") ------------------------------------------ */
.shot{margin:0;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--pl-line);box-shadow:0 24px 50px rgba(9,20,39,.14)}
.shot-bar{display:flex;gap:6px;padding:9px 12px;background:var(--pl-wash-2);border-bottom:1px solid var(--pl-line)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--pl-line-strong);display:block}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:12.5px;line-height:1.45;color:var(--pl-mute);padding:9px 14px;background:var(--pl-wash);border-top:1px solid var(--pl-line)}
.hero .shot{border-color:var(--pl-on-navy-line);box-shadow:0 30px 60px rgba(5,13,26,.5)}
.hero .shot figcaption{background:var(--pl-navy-850);color:var(--pl-on-navy-mute);border-top-color:var(--pl-on-navy-line)}
.hero .shot .shot-bar{background:var(--pl-navy-800);border-bottom-color:var(--pl-on-navy-line)}
.hero .shot .shot-bar i{background:var(--pl-on-navy-mute)}

/* ---- Launch polish ---------------------------------------------------------- */
html{scroll-padding-top:88px}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* ---- Legal & long-form ------------------------------------------------------ */
.legal{max-width:76ch}
.legal h2{margin-top:2.1em}
.legal h2:first-child{margin-top:0}
.legal h3{margin-top:1.6em;font-size:18px}
.legal ul,.legal ol{margin:0 0 1.1em;padding-left:1.3em}
.legal li{margin:0 0 .5em}
.legal .card{margin:20px 0}
.eff{font-size:14px;color:var(--pl-mute);margin:-4px 0 30px}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--pl-wash-2);border:1px solid var(--pl-line);border-radius:5px;padding:1px 6px}

/* ---- Search ----------------------------------------------------------------- */
.search-bar{display:flex;gap:10px;max-width:620px;margin:2px 0 8px}
.search-bar input{font:inherit;font-size:16px;color:var(--pl-ink);background:var(--pl-paper);border:1.5px solid var(--pl-line-strong);border-radius:var(--r-md);padding:12px 14px;flex:1;min-width:0}
.search-bar input:focus-visible{outline:2px solid var(--pl-orange);outline-offset:1px;border-color:var(--pl-navy-800)}
.pager{display:flex;gap:16px;justify-content:center;margin-top:34px}
.pager a{font-weight:600}

/* ---- Media resources -------------------------------------------------------- */
.swatches{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 30px}
.swatch{width:130px;border:1px solid var(--pl-line);border-radius:var(--r-md);overflow:hidden;background:var(--pl-paper);display:block}
.swatch i{display:block;height:54px}
.swatch span{display:block;font-size:12.5px;padding:8px 10px;color:var(--pl-body)}
.sw-navy950{background:var(--pl-navy-950)}
.sw-navy{background:var(--pl-navy-900)}
.sw-orange{background:var(--pl-orange)}
.sw-amber{background:var(--pl-amber)}
.sw-cta{background:var(--pl-cta)}
.asset-thumb{background:var(--pl-wash);border:1px solid var(--pl-line);border-radius:var(--r-md);padding:18px;display:flex;align-items:center;justify-content:center;min-height:96px;margin-bottom:14px}
.asset-thumb.dark{background:var(--pl-navy-900);border-color:var(--pl-navy-800)}
.asset-thumb img{max-height:44px;width:auto;max-width:100%;height:auto;display:block}

/* ---- Dark-ground component corrections ------------------------------------- */
.card-navy .eyebrow{color:var(--pl-amber)}
.sec-navy .btn:not(.btn-ghost){color:#fff}

/* ---- Team cards & value-gap calculator ------------------------------------- */
.team-card{display:flex;gap:18px;align-items:flex-start}
.team-card>div{min-width:0;flex:1}
.avatar{width:96px;height:96px;border-radius:50%;flex:0 0 96px;object-fit:cover;object-position:50% 22%;border:1px solid var(--pl-line);background:var(--pl-wash)}
.avatar-mono{display:flex;align-items:center;justify-content:center;background:var(--pl-navy-900);color:#fff;font-weight:700;font-size:26px;letter-spacing:.02em}
.calc{background:var(--pl-paper);border:1px solid var(--pl-line);border-radius:var(--r-lg);padding:28px}
.calc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0 14px}
.calc-stat{background:var(--pl-wash);border:1px solid var(--pl-line);border-radius:var(--r-md);padding:18px}
.calc-stat .n{display:block;font-size:clamp(28px,3vw,36px);font-weight:800;letter-spacing:-.02em;color:var(--pl-cta)}
.calc-stat .l{display:block;font-size:14px;color:var(--pl-body);margin-top:4px;line-height:1.45}
@media (max-width:767.98px){.calc-grid,.calc-out{grid-template-columns:1fr}.team-card{flex-direction:column}}

/* ---- Readiness assessment --------------------------------------------------- */
.assess{background:var(--pl-paper);border:1px solid var(--pl-line);border-radius:var(--r-lg);padding:8px 28px 28px}
.aq{border:0;border-top:1px solid var(--pl-line);margin:0;padding:18px 0}
.aq:first-child{border-top:0}
.aq legend{padding:0;font-weight:600;color:var(--pl-ink);font-size:16px;line-height:1.45;display:block;float:left;width:100%;margin-bottom:10px}
.aq-n{display:inline-block;min-width:26px;height:26px;border-radius:50%;background:var(--pl-navy-900);color:#fff;font-size:13px;font-weight:700;text-align:center;line-height:26px;margin-right:8px}
.aq-opts{clear:both;display:flex;gap:10px;flex-wrap:wrap}
.aq-opts label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--pl-line-strong);border-radius:999px;padding:8px 16px;font-size:14.5px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.aq-opts label:hover{border-color:var(--pl-navy-800);background:var(--pl-wash)}
.aq-opts input{margin:0}
.aq-opts label:has(input:checked){border-color:var(--pl-orange);background:#FDECDC;color:var(--pl-cta)}
.assess-out{margin-top:8px}
.assess-read{font-size:16px;color:var(--pl-body);margin-top:14px}

/* ---- Status chips & consent banner ----------------------------------------- */
.st{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:4px 10px;margin-bottom:12px;border:1px solid transparent}
.st-live{background:#E3F3EB;color:#0F5A3A;border-color:#BFE3D0}
.st-conn{background:#E4EDF8;color:#173E70;border-color:#C3D5EE}
.st-next{background:#FDECDC;color:#8A3D07;border-color:#F6CDA8}
.st-later{background:var(--pl-wash-2);color:var(--pl-body);border-color:var(--pl-line)}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:none;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:1080px;margin:0 auto;background:var(--pl-paper);border:1px solid var(--pl-line-strong);border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(9,20,39,.18);padding:16px 20px}
html[data-consent="pending"] .consent{display:flex}
.consent p{margin:0;font-size:14.5px;color:var(--pl-body);flex:1 1 420px}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent .btn{padding:10px 16px;font-size:14.5px}
@media print{.consent{display:none !important}}

/* ---- Print (agreements print as documents) ---------------------------------- */
@media print{
  .pl-header,.pl-footer,.pl-drawer,.skip,.nav-toggle,.crumb,.hero-cta,.search-bar,.form-card form,[data-print]{display:none !important}
  body.propelon,.sec,.sec-wash,.page-hero{background:#fff !important;color:#000 !important}
  .page-hero h1,.page-hero .lede,.legal,.legal h2,.legal h3,.legal p,.legal li,.card,.card h3,.card p{color:#000 !important}
  .card,.form-card,.form-ok{border:1px solid #999;box-shadow:none;break-inside:avoid}
  .legal{max-width:none}
  a{text-decoration:none;color:#000}
}

/* ==========================================================================
   Diagrams — inline SVG artwork is colored here, from tokens, so every
   graphic follows the design system and any rebrand is a token change.
   ========================================================================== */
.d-ink{fill:var(--pl-ink)}
.d-body{fill:var(--pl-body)}
.d-mute{fill:var(--pl-mute)}
.d-white{fill:#fff}
.d-onnavy{fill:var(--pl-on-navy)}
.d-onnavy-mute{fill:var(--pl-on-navy-mute)}
.d-paper{fill:var(--pl-paper)}
.d-wash{fill:var(--pl-wash)}
.d-wash2{fill:var(--pl-wash-2)}
.d-navy{fill:var(--pl-navy-900)}
.d-navy-850{fill:var(--pl-navy-850)}
.d-navy-800{fill:var(--pl-navy-800)}
.d-navy-700{fill:var(--pl-navy-700)}
.d-orange{fill:var(--pl-orange)}
.d-amber{fill:var(--pl-amber)}
.d-ok{fill:var(--pl-ok)}
.d-warn{fill:var(--pl-warn)}
.d-risk{fill:var(--pl-risk)}
.d-none{fill:none}
.s-line{stroke:var(--pl-line);fill:none}
.s-strong{stroke:var(--pl-line-strong);fill:none}
.s-navyline{stroke:var(--pl-on-navy-line);fill:none}
.s-navy{stroke:var(--pl-navy-800);fill:none}
.s-orange{stroke:var(--pl-orange);fill:none}
.s-amber{stroke:var(--pl-amber);fill:none}
.s-ok{stroke:var(--pl-ok);fill:none}
.s-warn{stroke:var(--pl-warn);fill:none}
.v-opp{fill:var(--v-opp)}
.v-mod{fill:var(--v-mod)}
.v-com{fill:var(--v-com)}
.v-rea{fill:var(--v-rea)}
.v-ver{fill:var(--v-ver)}
.d-svg text{font-family:var(--font)}
.t-11{font-size:11px}.t-12{font-size:12px}.t-13{font-size:13px}.t-14{font-size:14px}.t-16{font-size:16px}.t-20{font-size:20px}.t-26{font-size:26px}
.w-600{font-weight:600}.w-700{font-weight:700}.w-800{font-weight:800}
.figure{margin:0}
.figure figcaption{font-size:13px;color:var(--pl-mute);margin-top:12px;max-width:78ch}
.sec-navy .figure figcaption{color:var(--pl-on-navy-mute)}
.figure-frame{border:1px solid var(--pl-line);border-radius:var(--r-lg);background:var(--pl-paper);padding:clamp(14px,2vw,26px);overflow-x:auto}
.sec-navy .figure-frame,.hero .figure-frame{border-color:var(--pl-on-navy-line);background:var(--pl-navy-850)}

/* ---- Utility ---------------------------------------------------------------------- */
.mt-0{margin-top:0}.mt-24{margin-top:24px}.mt-34{margin-top:34px}.mt-44{margin-top:44px}
.mb-0{margin-bottom:0}
.mb-24{margin-bottom:24px}
.small{font-size:14px;color:var(--pl-mute)}

/* ---- Motion (one orchestrated hero moment; respects reduced motion) --------------- */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lede,.hero .hero-cta,.hero .hero-kicker{animation:pl-rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero .lede{animation-delay:.08s}
  .hero .hero-cta{animation-delay:.16s}
  .hero-panel,.hero .shot{animation:pl-rise .8s .12s cubic-bezier(.2,.7,.2,1) both}
  @keyframes pl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---- Responsive -------------------------------------------------------------------- */
@media (max-width:1219.98px){
  .nav-primary,.pl-header .wrap>nav,.nav-utils .signin{display:none}
  .nav-utils{margin-left:auto}
  .nav-toggle{display:inline-flex}
  .header-cta{display:none}
}
@media (min-width:1220px){
  .pl-drawer{display:none !important}
}
@media (max-width:1023.98px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{max-width:none}
  .split{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .mod{grid-template-columns:1fr;gap:6px}
  .cta-band{grid-template-columns:1fr}
  /* Mobile story order inside the hero: category → proof → CTA */
  .hero-grid{display:flex;flex-direction:column}
  .hero-copy{display:contents}
  .hero-copy .hero-kicker{order:1}
  .hero-copy h1{order:2}
  .hero-copy .lede{order:3}
  .hero-panel-slot{order:4}
  .hero-copy .hero-cta{order:5;margin-top:6px}
}
@media (max-width:767.98px){
  .g3,.steps{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr}
  .proof-strip{grid-template-columns:1fr;padding:0 var(--gut)}
  .proof-cell{border-left:0;border-top:1px solid var(--pl-on-navy-line);padding-left:0}
  .proof-cell:first-child{border-top:0}
  .gap-panel{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .nav-dd,.nav-dd.cols-3{min-width:0}
}