:root{
  --navy:#101A32;
  --navy-800:#16223F;
  --navy-700:#1B2949;
  --navy-600:#26355A;
  --navy-500:#2E3F66;
  --amber:#F6921C;
  --amber-600:#DD7F0C;
  --amber-text:#A55C08;
  --amber-50:#FEF3E4;
  --amber-100:#FCE3C2;
  --ink:#131A26;
  --body:#414D5F;
  --muted:#5D6879;
  --line:#E4E8EF;
  --line-soft:#EEF1F6;
  --bg:#FFFFFF;
  --bg-soft:#F7F9FC;
  --bg-tint:#F2F6FB;
  --ok:#1B7F4B;
  --ok-bg:#E7F6EE;
  --radius:14px;
  --radius-lg:20px;
  --wrap:1320px;
  --shadow-xs:0 1px 2px rgba(16,26,50,.05);
  --shadow:0 1px 2px rgba(16,26,50,.05), 0 8px 24px -12px rgba(16,26,50,.18);
  --shadow-lg:0 2px 4px rgba(16,26,50,.06), 0 24px 48px -20px rgba(16,26,50,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--body); background:var(--bg); line-height:1.62; font-size:18px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{color:var(--ink); line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em}
h1{font-size:clamp(2.25rem,4.8vw,3.85rem); line-height:1.1; letter-spacing:-.04em}
h2{font-size:clamp(1.75rem,3.4vw,2.85rem); line-height:1.13; letter-spacing:-.03em}
h3{font-size:1.25rem; letter-spacing:-.015em}
h4{font-size:1.08rem}
p{margin:0 0 1rem}
a{color:var(--navy); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--amber-text)}
img,svg{max-width:100%; height:auto}
img{display:block}
ul,ol{margin:0; padding:0; list-style:none}
strong,b{color:var(--ink); font-weight:650}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:var(--bg-tint); padding:2px 6px; border-radius:5px; color:var(--navy-700)}
:focus-visible{outline:3px solid var(--amber-text); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:900px; margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 20px; z-index:300; border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--amber-text); margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--amber); border-radius:2px}
.eyebrow.on-dark{color:#FBB35C}

/* ---------------- header ---------------- */
.site-header{position:sticky; top:0; z-index:200; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand img{height:34px; width:auto}
.nav-main{display:none; align-items:center; gap:4px; flex:1}
.nav-actions{display:none; align-items:center; gap:12px; flex:none}
@media(min-width:1040px){ .nav-main{display:flex} .nav-actions{display:flex} }

.nav-item{position:relative}
.nav-link{
  display:inline-flex; align-items:center; gap:5px; padding:10px 13px; border-radius:9px;
  color:var(--body); text-decoration:none; font-size:.94rem; font-weight:550;
  background:none; border:0; font-family:inherit; cursor:pointer;
}
.nav-link:hover,.nav-item:hover .nav-link{color:var(--navy); background:var(--bg-soft)}
.nav-link[aria-current="page"]{color:var(--navy); font-weight:650}
.nav-link .chev{width:13px; height:13px; transition:transform .18s ease; color:var(--muted)}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg)}

/* Panels are anchored to the left edge of their trigger, never centred on it.
   A centred panel is pushed off the left of the viewport as soon as the trigger
   sits near the start of the nav, which clipped the first link of the Platform
   menu at the narrow end of the desktop range. Left anchoring keeps the first
   link visible at every width; the trailing menu opts into .end instead so it
   cannot run off the right. */
.mega{
  position:absolute; top:calc(100% + 6px); left:0; transform:translateY(-6px);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:18px; min-width:600px; opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Menus sitting at the end of the nav open leftwards from their right edge. */
.mega.end{left:auto; right:0}
.mega.narrow{min-width:320px}
/* The platform menu shows the three capability layers, not the modules, so it
   needs three columns of breathing room rather than the default two. */
.mega.wide{min-width:780px; max-width:calc(100vw - 48px)}
/* .is-open is applied by JS on focusin. CSS :focus-within alone is not enough:
   children of a visibility:hidden element are not focusable, so keyboard users
   tab straight past the menu. */
.nav-item:hover .mega,.nav-item:focus-within .mega,.nav-item.is-open .mega{opacity:1; visibility:visible; transform:translateY(0)}
/* Opening via keyboard must be instant. While the visibility transition is
   still running the menu's links are not yet focusable, so a fast Tab press
   skips the whole menu. */
.nav-item.is-open .mega{transition:none}
.nav-item.is-open .chev{transform:rotate(180deg)}
/* Escape closes the menu but must leave focus on the trigger, which means focus
   is still inside .nav-item and :focus-within above would hold the menu open.
   This rule has the same specificity as that one (three compound selectors), so
   it only wins by coming after it. Do not move it above. JS clears the class on
   hover or on focus leaving the item, so the menu is dismissed rather than
   disabled. */
.nav-item.is-dismissed .mega{opacity:0; visibility:hidden; transform:translateY(-6px)}
.mega-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:4px}
.mega.narrow .mega-grid{grid-template-columns:1fr}
.mega.wide .mega-grid{grid-template-columns:repeat(3,1fr); align-items:start; gap:8px}
.mega.wide .mega-link{flex-direction:column; gap:10px; padding:14px 14px 16px}
.mega.wide .mega-link .t{font-size:1rem}
.mega-link{display:flex; gap:12px; padding:11px 12px; border-radius:11px; text-decoration:none; transition:background .14s ease}
.mega-link:hover{background:var(--bg-soft)}
.mega-link img{width:56px; height:56px; flex:none; margin-top:1px}
.mega-link .t{display:block; color:var(--ink); font-weight:650; font-size:.92rem; line-height:1.35}
.mega-link .d{display:block; color:var(--muted); font-size:.8rem; line-height:1.45; margin-top:2px}
.mega-foot{margin-top:12px; padding-top:14px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; gap:16px}
.mega-foot span{font-size:.84rem; color:var(--muted)}

.burger{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1.5px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; color:var(--navy)}
@media(min-width:1040px){ .burger{display:none} }
.mobile-nav{display:none; border-top:1px solid var(--line); background:#fff; max-height:calc(100vh - 72px); overflow-y:auto}
.mobile-nav.open{display:block}
.mobile-nav details{border-bottom:1px solid var(--line-soft)}
.mobile-nav summary{padding:15px 24px; font-weight:650; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary::after{content:"+"; color:var(--amber-text); font-size:1.3rem; font-weight:400}
.mobile-nav details[open] summary::after{content:"\2013"}
.mobile-nav .sub{padding:0 24px 14px}
.mobile-nav .sub a{display:block; padding:9px 0; color:var(--body); text-decoration:none; font-size:.94rem}
.mobile-nav > a{display:block; padding:15px 24px; font-weight:650; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-soft)}
.mobile-cta{padding:18px 24px; display:grid; gap:10px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:10px; font-weight:650; font-size:1rem;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:inherit;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--amber); color:#22160A; box-shadow:0 1px 2px rgba(246,146,28,.3)}
.btn-primary:hover{background:var(--amber-600); color:#22160A; transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(246,146,28,.55)}
.btn-ghost{border-color:var(--line); color:var(--navy); background:#fff}
.btn-ghost:hover{border-color:var(--navy); color:var(--navy); background:var(--bg-soft)}
.btn-dark{background:var(--navy); color:#fff}
.btn-dark:hover{background:var(--navy-700); color:#fff; transform:translateY(-1px)}
.btn-on-dark{background:#fff; color:var(--navy)}
.btn-on-dark:hover{background:var(--bg-soft); color:var(--navy)}
.btn-outline-light{border-color:rgba(255,255,255,.32); color:#fff; background:transparent}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff}
.btn-lg{padding:15px 30px; font-size:1.06rem}
.btn-sm{padding:9px 16px; font-size:.88rem}
.btn-block{width:100%}

/* ---------------- sections ---------------- */
section{padding:96px 0}
.sec-sm{padding:64px 0}
.sec-soft{background:var(--bg-soft)}
.sec-tint{background:var(--bg-tint)}
.sec-dark{background:var(--navy); color:rgba(255,255,255,.8)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4,.sec-dark strong{color:#fff}
.bordered{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* 50em measured out at roughly 81 characters, well past a comfortable line.
   42em lands near 68, which is inside the 45-75 range prose wants. */
.sec-head{max-width:42em; margin-bottom:52px}
.sec-head.center{margin-inline:auto; text-align:center}

/* Modifier classes replacing the inline styles that were repeated across the
   page generators. Each one existed as a hand-written style attribute in
   several places, which is how the spacing drifted in the first place. */
.actions{display:flex; flex-wrap:wrap; gap:13px}
.actions.center{justify-content:center}
.sec-foot{text-align:center; margin-top:34px}
.card.compact{padding:26px}
/* Qualified with .card deliberately. As a bare class this sits above .card in
   the sheet, and at equal specificity .card's white background won, so a dark
   tile rendered white with white text on it. */
.card.on-dark-card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.on-dark-text{color:rgba(255,255,255,.78)}
.strong{font-weight:600; color:var(--ink)}
.sec-head p{font-size:1.15rem; line-height:1.6; margin-bottom:0}
.sec-head p+p{margin-top:.8rem}

.grid{display:grid; gap:24px}
/* Grid and flex children default to min-width:auto and refuse to shrink below
   their min-content width, which overflows the viewport on narrow screens
   wherever a child contains a wide table or a long unbroken string. */
.grid>*,.split>*,.plans>*,.steps>*,.checks>*,.facts>*{min-width:0}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media(min-width:460px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:700px){ .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
.split{display:grid; gap:48px; align-items:center}
@media(min-width:960px){ .split{grid-template-columns:1fr 1fr; gap:72px} .split.wide-left{grid-template-columns:1.15fr .85fr} }

/* ---------------- cards ---------------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.card.hover:hover{border-color:#CBD3E0; box-shadow:var(--shadow); transform:translateY(-2px)}
.card h3{margin-bottom:.45em}
.card p{font-size:1rem; margin-bottom:0}
.card p+p{margin-top:.7rem}
a.card{text-decoration:none; display:block; color:var(--body)}
a.card:hover{color:var(--body)}
.card-more{display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--navy); font-weight:650; font-size:.9rem}
a.card:hover .card-more{color:var(--amber-text)}
/* Icon scale. Exactly three steps, and nothing may introduce a fourth.
   These icons are detailed illustrations, not glyphs, so they are drawn to be
   seen. Each step is set at or above the largest size that context used before
   the ladder existed, so consolidating the old ten sizes never shrinks an icon:
     .i-sm   56px  dense rows and menus        (replaced 44 and 54)
     .i-md  120px  one per card, the default   (replaced 72, 92, 112 and 120)
     .i-lg  288px  one feature moment per page (replaced 180 and 288)
   Every call site goes through the icon helpers, so the ladder cannot drift
   back into the ad-hoc sizes it replaced. */
/* height is auto, not pinned. The global img rule sets height:auto so a
   clamped width keeps the square ratio; declaring an explicit height here
   overrode that, and an icon in a column narrower than itself rendered
   squashed (160x288 on the home page at 960px). aspect-ratio holds the square
   before the SVG has loaded. */
.i-sm{width:56px; height:auto; aspect-ratio:1; flex:none}
.i-md{width:120px; height:auto; aspect-ratio:1; margin-bottom:24px}
.i-lg{width:288px; height:auto; aspect-ratio:1; margin:0 auto}
/* No width override below any breakpoint. The three steps are the contract, and
   the global img rule (max-width:100%) already stops one overflowing a narrow
   column: with aspect-ratio:1 it shrinks to the column and stays square. An
   explicit mobile size would be a fourth and fifth step invented behind the
   ladder's back, which is the thing this block exists to prevent. Only spacing
   tightens on small screens. */
@media(max-width:520px){
  .i-md{margin-bottom:18px}
}

/* The one icon container. Neutral, not amber: a tinted plate behind coloured
   artwork put two colour systems in the same box. Sized so the glyph inside is
   larger than the 56px the amber badge gave it. */
.i-plate{
  width:112px; height:112px; border-radius:var(--radius-lg); flex:none;
  display:grid; place-items:center; margin-bottom:22px;
  background:var(--bg-soft); border:1px solid var(--line);
  transition:border-color .18s ease;
}
/* Any icon inside a plate takes the plate's sizing, so a call site cannot
   introduce a different glyph size by omitting the class. */
.i-plate img{width:76px; height:76px; margin:0}
@media(max-width:520px){
  .i-plate{margin-bottom:18px}
}
a.card:hover .i-plate{border-color:var(--amber)}


/* checklist */
.checks{display:grid; gap:12px}
.checks.two{gap:12px}
@media(min-width:700px){ .checks.two{grid-template-columns:repeat(2,1fr)} }
.check{display:flex; gap:11px; align-items:flex-start; font-size:1rem}
.check>svg{flex:none; margin-top:4px; width:17px; height:17px; color:var(--amber-text)}
.sec-dark .check>svg{color:#FBB35C}

/* steps */
.steps{counter-reset:s; display:grid; gap:26px}
@media(min-width:860px){ .steps{grid-template-columns:repeat(4,1fr); gap:28px} }
.step{position:relative; padding-top:52px}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:750; font-size:1rem}
.sec-dark .step::before{background:var(--amber); color:#22160A}
.step h3{margin-bottom:.4em}
.step p{font-size:1rem; margin-bottom:0}

/* page hero */
.page-hero{background:linear-gradient(180deg,var(--bg-soft) 0%,#fff 100%); border-bottom:1px solid var(--line); padding:68px 0 76px}
.page-hero .lede{font-size:1.22rem; line-height:1.62; max-width:40em; margin-bottom:0}
.crumbs{display:flex; flex-wrap:wrap; gap:7px; font-size:.83rem; color:var(--muted); margin-bottom:18px; align-items:center}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--navy)}
.crumbs span[aria-current]{color:var(--ink); font-weight:600}

/* stats strip — capability facts, not performance claims */
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
@media(min-width:860px){ .facts{grid-template-columns:repeat(4,1fr)} }
.fact{background:#fff; padding:26px 22px; text-align:center}
.fact .n{font-size:2.1rem; font-weight:750; color:var(--navy); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1}
.fact .l{font-size:.92rem; color:var(--muted); margin-top:7px; line-height:1.45}

/* product screenshots */
.shot{margin:0}
.shot-frame{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--bg-soft); box-shadow:var(--shadow);
}
.shot-frame img{display:block; width:100%; height:auto}
.shot figcaption{margin-top:12px; font-size:.83rem; color:var(--muted); text-align:center}
/* Phone-shaped frame for mobile captures. max-width keeps the 390px capture at
   roughly life size instead of stretching it across the column. */
.shot.phone{max-width:340px; margin-inline:auto}
.shot.phone .shot-frame{
  border-radius:34px; border:9px solid var(--navy); background:var(--navy);
  box-shadow:var(--shadow-lg);
}
.shot.phone .shot-frame img{border-radius:26px}

/* dashboard mock */
.mock{background:var(--navy); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--navy-700)}
.mock-bar{display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--navy-700); border-bottom:1px solid rgba(255,255,255,.08)}
.mock-dots{display:flex; gap:5px; flex:none}
.mock-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.23)}
.mock-title{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.mock-title strong{font-size:.75rem; color:#fff}
.mock-title small{font-size:.61rem; color:rgba(255,255,255,.55); white-space:nowrap}
.mock-sample{margin-left:auto; padding:3px 8px; border:1px solid rgba(255,255,255,.13); border-radius:999px; font-size:.57rem; font-weight:700; color:rgba(255,255,255,.65); white-space:nowrap}
.mock-body{padding:16px}
.mock-caption{padding:11px 16px; background:rgba(255,255,255,.05); border-top:1px solid rgba(255,255,255,.08); font-size:.74rem; color:rgba(255,255,255,.62); text-align:center}
.mock-context{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px}
.mock-context>div:first-child{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.mock-kicker,.mock-context small{font-size:.6rem; color:rgba(255,255,255,.55)}
.mock-context>div:first-child strong{font-size:1rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mock-recipe{width:112px; flex:none; display:grid; grid-template-columns:1fr auto; gap:3px 8px; align-items:center}
.mock-recipe span,.mock-recipe strong{font-size:.62rem; color:rgba(255,255,255,.65)}
.mock-recipe strong{color:#fff}
.mock-recipe i{grid-column:1/-1; height:4px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.1)}
.mock-recipe i::after{content:""; display:block; width:69%; height:100%; border-radius:inherit; background:var(--amber)}
.mock-metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px}
.mock-metric,.mock-panel,.mock-zone{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.085); border-radius:10px}
.mock-metric{padding:9px 10px; line-height:1.15}
.mock-metric>span{display:block; font-size:.56rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.56); font-weight:700}
.mock-metric strong{display:block; margin:3px 0; color:#fff; font-size:1.04rem; font-variant-numeric:tabular-nums}
.mock-metric strong small{font-size:.55rem; color:rgba(255,255,255,.6); margin-left:2px}
.mock-metric em{display:block; font-size:.53rem; font-style:normal; color:#6EE7A8}
.mock-workspace{display:grid; gap:8px; margin-bottom:10px}
.mock-panel{padding:10px; min-width:0}
.mock-panel-head{display:flex; align-items:center; justify-content:space-between; gap:8px; color:rgba(255,255,255,.78); font-size:.59rem; font-weight:700; line-height:1.2}
.mock-badge{padding:2px 6px; border-radius:999px; font-size:.52rem; font-weight:750; white-space:nowrap}
.mock-badge.ok{background:rgba(74,222,148,.15); color:#6EE7A8}
.mock-badge.warn{background:rgba(246,146,28,.18); color:#FBB35C}
.mock-plot{display:block; width:100%; height:72px; margin-top:6px}
.mock-axis{display:flex; justify-content:space-between; gap:8px; color:rgba(255,255,255,.62); font-size:.49rem; font-variant-numeric:tabular-nums}
.mock-axis span:last-child{color:#FBB35C}
.mock-ops{display:grid; align-content:start}
.mock-op{display:flex; align-items:end; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid rgba(255,255,255,.07); line-height:1.1}
.mock-op:first-of-type{margin-top:5px}
.mock-op span{display:flex; flex-direction:column; min-width:0}
.mock-op small,.mock-op em{font-size:.5rem; color:rgba(255,255,255,.5); font-style:normal}
.mock-op strong{font-size:.64rem; color:#fff; margin-top:3px; white-space:nowrap}
.mock-op em{white-space:nowrap; color:rgba(255,255,255,.72)}
.mock-zone-head{display:flex; align-items:center; justify-content:space-between; margin:0 1px 6px; color:rgba(255,255,255,.68); font-size:.58rem; font-weight:700}
.mock-zone-head small{font-size:.53rem; color:rgba(255,255,255,.62); font-weight:500}
.mock-zones{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
.mock-zone{padding:8px; min-width:0}
.mock-zone>span:first-child{display:flex; align-items:center; gap:5px; margin-bottom:5px; min-width:0}
.mock-zone strong{display:grid; place-items:center; width:18px; height:18px; flex:none; border-radius:5px; background:rgba(246,146,28,.16); color:#FBB35C; font-size:.56rem}
.mock-zone small{color:rgba(255,255,255,.7); font-size:.5rem; line-height:1.2}
@media(min-width:520px){
  .mock-metrics{grid-template-columns:repeat(4,1fr)}
  .mock-workspace{grid-template-columns:1.35fr .9fr}
}

/* pricing */
.plans{display:grid; gap:22px; align-items:start}
@media(min-width:900px){ .plans{grid-template-columns:repeat(3,1fr)} }
.plan{background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg); padding:30px; position:relative}
.plan.featured{border-color:var(--amber); box-shadow:0 20px 44px -24px rgba(246,146,28,.5)}
.plan-tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--amber); color:#22160A; font-size:.74rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 14px; border-radius:999px}
.plan h3{font-size:1.35rem; margin-bottom:.25em}
.plan .who{font-size:.9rem; color:var(--muted); margin-bottom:20px; min-height:2.8em}
.plan .price{font-size:1.6rem; font-weight:750; color:var(--ink); letter-spacing:-.02em}
.plan .price small{display:block; font-size:.82rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-top:4px}
.plan ul{margin:22px 0; display:grid; gap:11px}

/* comparison table */
.tablewrap{position:relative; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
/* Only present while the wrapper is actually scrollable: the script adds
   tabindex when the table is clipped and removes it when it is not. */
.tablewrap:focus-visible{outline:3px solid var(--amber-text); outline-offset:2px}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:.93rem}
th,td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top}
thead th{background:var(--bg-soft); font-weight:700; color:var(--ink); font-size:.83rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--ok); font-weight:700}
td.no{color:var(--muted)}

/* faq */
details.faq{border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:12px; overflow:hidden}
details.faq[open]{border-color:#CBD3E0; box-shadow:var(--shadow)}
details.faq summary{padding:19px 22px; cursor:pointer; font-weight:650; color:var(--ink); font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--amber-text); font-size:1.4rem; font-weight:400; line-height:1; flex:none}
details.faq[open] summary::after{content:"\2013"}
details.faq .ans{padding:0 22px 20px; font-size:.96rem}
details.faq .ans > :last-child{margin-bottom:0}

/* cta band */
.band{background:var(--navy); background-image:radial-gradient(760px 420px at 84% 0%, rgba(246,146,28,.22), transparent 62%); color:#fff; border-radius:var(--radius-lg); padding:52px 40px}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.82); font-size:1.05rem; max-width:40em}
.band-grid{display:grid; gap:34px}
@media(min-width:940px){ .band-grid{grid-template-columns:1fr 1fr; gap:52px; align-items:start} }
.band-cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:24px}

/* forms */
.form{background:#fff; border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-lg)}
.field{margin-bottom:15px}
.field label{display:block; font-size:.85rem; font-weight:650; color:var(--ink); margin-bottom:6px}
.field .req{color:var(--amber-text)}
.field input,.field select,.field textarea{width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:9px; font-family:inherit; font-size:.95rem; color:var(--ink); background:#fff; transition:border-color .16s ease,box-shadow .16s ease}
/* Keep the global :focus-visible outline. This rule used to set outline:none and
   replace it with a 15%-alpha orange ring sitting at 1.13:1 against the field,
   a weaker indicator than every other control on the site gets, on the one page
   where a keyboard user has to type. The border colour and the glow stay as the
   affordance; the outline is what makes focus legible. */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(246,146,28,.15)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--amber-text); outline-offset:2px}
.field textarea{resize:vertical; min-height:92px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--body); margin-bottom:16px}
.consent input{width:17px; height:17px; flex:none; margin-top:3px; accent-color:var(--amber-600)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .form-note{font-size:.78rem; color:var(--muted); margin:14px 0 0; line-height:1.55}
.form .form-note a{color:var(--navy); font-weight:600}

/* prose (legal pages) */
.prose{font-size:1rem}
.prose h2{font-size:1.4rem; margin-top:2.2em; padding-top:.2em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.06rem; margin-top:1.7em}
.prose p,.prose li{color:var(--body)}
.prose ul{list-style:disc; padding-left:1.3em; margin:0 0 1rem}
.prose ol{list-style:decimal; padding-left:1.3em; margin:0 0 1rem}
.prose li{margin-bottom:.5rem}
.prose table{min-width:0}
.prose .tablewrap{margin-bottom:1.4rem}
.toc{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin-bottom:40px}
.toc h2{font-size:.82rem !important; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 12px !important; padding:0 !important}
.toc ol{list-style:none; padding:0; margin:0; columns:2; column-gap:28px}
@media(max-width:640px){ .toc ol{columns:1} }
.toc li{margin-bottom:7px; font-size:.9rem; break-inside:avoid}
/* pricing table: capability-layer group rows */
.tablewrap tr.grp th{background:var(--bg-soft); font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding-top:16px}
.tablewrap tr.grp th a{color:var(--amber-text); text-decoration:none}
.tablewrap tr.grp th a:hover{color:var(--navy)}

/* capability layers */
.ladder{display:grid; gap:16px}
.rung{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 28px;
  text-decoration:none; transition:border-color .14s ease, box-shadow .14s ease;
}
@media(min-width:760px){ .rung{grid-template-columns:auto 1fr auto; align-items:center} }
.rung:hover{border-color:var(--navy-500); box-shadow:var(--shadow)}
.rung-n{
  width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-weight:750; font-size:1.15rem; flex:none;
}
.rung-body h3{font-size:1.2rem; margin-bottom:.35em}
.rung-body p{margin-bottom:.6rem}
.rung-mods{display:block; font-size:.83rem; color:var(--muted); line-height:1.6}
.rung .card-more{margin-top:0; white-space:nowrap}

/* full module index */
.mod-group{margin-bottom:30px}
.mod-group-head{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px}
.mod-group-head a{color:var(--amber-text); text-decoration:none}
.mod-group-head a:hover{color:var(--navy)}
.mod-list{display:grid; grid-template-columns:1fr; gap:8px}
@media(min-width:560px){ .mod-list{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .mod-list{grid-template-columns:repeat(4,1fr)} }
.mod-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px;
  border:1px solid var(--line-soft); text-decoration:none; color:var(--ink);
  font-size:.9rem; font-weight:600; transition:background .14s ease, border-color .14s ease;
}
.mod-item:hover{background:var(--bg-soft); border-color:var(--line)}


/* layer badge on module pages */
.layer-badge{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px; padding:5px 12px 5px 6px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:999px;
  font-size:.8rem; font-weight:600; color:var(--body); text-decoration:none;
}
.layer-badge:hover{border-color:var(--navy-500); color:var(--navy)}
.layer-badge b{
  display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:.72rem; font-weight:750;
}

/* blog */
.post-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:.82rem; color:var(--muted); margin-bottom:12px}
.post-topic{background:var(--amber-50); color:var(--amber-text); font-weight:650; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px}
.post-card h2,.post-card h3{font-size:1.08rem; margin-bottom:.45em}
.post-lead-icon{width:120px; height:auto; aspect-ratio:1; margin:0 0 30px}
.prose h2{margin-top:2.2rem}
.pager{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:44px; flex-wrap:wrap}
.pg-nums{display:flex; gap:6px}
.pg-num,.pg-step{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px;
  border:1px solid var(--line); border-radius:10px; text-decoration:none; font-size:.92rem; font-weight:600; color:var(--body); background:#fff;
}
.pg-num:hover,.pg-step:hover{border-color:var(--navy-500); color:var(--navy)}
.pg-num.is-current{background:var(--navy); border-color:var(--navy); color:#fff}
.pg-step.is-off{color:var(--muted); border-color:var(--line-soft); background:var(--bg-soft)}

.note{background:var(--amber-50); border-left:3px solid var(--amber); border-radius:0 10px 10px 0; padding:16px 20px; margin:0 0 1.4rem; font-size:.93rem}
.note p:last-child{margin-bottom:0}
.updated{font-size:.88rem; color:var(--muted); margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--line)}

/* footer */
.site-footer{background:var(--navy); color:rgba(255,255,255,.68); padding:60px 0 30px; font-size:.9rem}
.foot-grid{display:grid; gap:34px; margin-bottom:40px}
@media(min-width:760px){ .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr} }
/* Footer column headings are h2, not h4. They sit inside the footer landmark,
   directly below the page h1, so h4 skipped two levels on every page. The
   selector carries the size instead of the tag, so the rendering is unchanged. */
.site-footer h2{color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:15px; font-weight:700}
.site-footer a{color:rgba(255,255,255,.68); text-decoration:none}
.site-footer a:hover{color:var(--amber)}
.site-footer .foot-platform-link{color:#FBB35C; font-weight:700}
.site-footer li{margin-bottom:9px}
/* Second-level heading inside a footer column. Same rhythm as the column head, stepped back
   so the column still reads as one group rather than two stacked columns. */
.site-footer h3.foot-sub{margin-top:16px; color:rgba(255,255,255,.55); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:15px}
/* Logo ink is #101A32, the same as the footer background, so it sits on a light
   plate. Do not knock it out with a filter: that erases the amber and the bee. */
.foot-brand img{display:block; height:32px; width:auto; margin-bottom:16px;
  background:var(--bg); padding:11px 16px; border-radius:12px; box-sizing:content-box}
.foot-brand p{max-width:28em; font-size:.9rem; margin-bottom:14px}
.foot-bot{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font-size:.83rem}
.foot-legal{display:flex; flex-wrap:wrap; gap:8px 18px}

/* Keep the larger desktop type scale comfortable on narrow screens. */
@media(max-width:700px){
  body{font-size:17px}
  .wrap,.wrap-narrow{padding-inline:20px}
  section{padding:72px 0}
  .sec-sm{padding:52px 0}
  .page-hero{padding:52px 0 60px}
  .sec-head{margin-bottom:40px}
  .card{padding:26px}
  .band{padding:40px 24px}
  .btn{max-width:100%; white-space:normal; line-height:1.35; text-align:center}
}