/* ============ 1. TOKENS ============ */
:root{
  --brand:#36AD49;          /* logo green, exact */
  --green:#15803D;          /* interactive green, AA with white text */
  --forest:#14532D;
  --ink:#0B1410;
  --tint:#F1F7F2;
  --paper:#FFFFFF;
  --paper-2:#FAFBFA;
  --rule:#E4E9E5;
  --rule-2:#C9D3CC;
  --muted:#6B776F;
  --body-c:#44534A;
  --amber:#C2410C;

  --display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;

  --gutter:clamp(20px,5vw,64px);
  --max:1240px;
  --r:6px; --r-lg:10px;
}
*,*::before,*::after{box-sizing:border-box;}
/* The UA rule for [hidden] is display:none, but ANY author rule that sets
   display beats it — specificity does not come into it, author styles simply
   win over UA styles. .form__done sets display:flex, so its hidden attribute
   did nothing and the success panel showed permanently. This makes the
   attribute mean what it says, everywhere. */
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2;}
/* Spacing is deliberately generous: with the background grid gone from light
   sections, whitespace is what separates one idea from the next. */
.section{padding:clamp(96px,13vw,184px) 0;position:relative;}
.section--tint{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.section--ink{background:var(--ink);color:#EAF0EC;}
.section--clip{overflow:hidden;}

/* ============ 2. TYPE ============ */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.025em;line-height:1.08;}
h1{font-size:clamp(2.4rem,5.4vw,4.15rem);font-weight:650;}
h2{font-size:clamp(1.85rem,3.5vw,2.9rem);}
h3{font-size:1.06rem;letter-spacing:-.012em;line-height:1.3;}
p{margin:0;}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:3px;height:13px;background:var(--brand);flex:0 0 3px;border-radius:1px;}
.eyebrow--plain::before{display:none;}
.eyebrow--onink{color:rgba(234,240,236,.58);}
.lede{font-size:clamp(1.04rem,1.5vw,1.18rem);color:var(--body-c);line-height:1.6;max-width:56ch;}
.lede--onink{color:rgba(234,240,236,.64);}
.sec-head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(52px,7vw,88px);max-width:58ch;}
.sec-head h2 .accent{color:var(--green);}
.section--ink .sec-head h2{color:#fff;}

/* ============ 3. BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:var(--r);border:1px solid transparent;font-size:14.5px;font-weight:550;letter-spacing:-.005em;transition:background .16s,border-color .16s,color .16s;}
.btn--primary{background:var(--green);color:#fff;}
.btn--primary:hover{background:var(--forest);}
.btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--rule-2);}
.btn--ghost:hover{border-color:var(--ink);background:var(--tint);}
.btn--onink{background:transparent;color:#EAF0EC;border-color:rgba(234,240,236,.28);}
.btn--onink:hover{background:rgba(234,240,236,.09);border-color:rgba(234,240,236,.55);}
.btn--sm{padding:9px 15px;font-size:13.5px;}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

/* ============ 4. BACKGROUND / PARALLAX ============ */
/* House rule: decorative background artwork appears on DARK sections only.
   Light and white sections stay plain — whitespace carries the rhythm there.
   Everything below is therefore only ever used inside .section--ink. */
.bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bg svg{position:absolute;}
.par{will-change:transform;}
.grid-layer{position:absolute;inset:-20% -5%;
  mask-image:radial-gradient(ellipse 90% 70% at 60% 30%,#000 15%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 60% 30%,#000 15%,transparent 76%);}
.grid-layer--ink{
  background-image:linear-gradient(to right,rgba(234,240,236,.065) 1px,transparent 1px),linear-gradient(to bottom,rgba(234,240,236,.065) 1px,transparent 1px);
  background-size:60px 60px;}
.elev{right:-8%;bottom:-10%;width:min(720px,68vw);opacity:.45;}
.elev--left{left:-12%;right:auto;bottom:-16%;opacity:.4;}

/* ============ 5. LOGO ============ */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:650;font-size:17px;letter-spacing:-.022em;}
.brand__mark{width:30px;height:30px;flex:0 0 30px;border-radius:7px;object-fit:contain;}
.brand--onink{color:#fff;}

/* ============ 6. NAV ============ */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid var(--rule);}
.nav__in{display:flex;align-items:center;gap:24px;height:66px;}
.nav__links{display:flex;gap:2px;margin-left:8px;}
/* nowrap + no shrink: without these the flex row compresses the items as the
   viewport narrows and the labels wrap inside their own padding. */
.nav__links > a,.nav__item{flex:0 0 auto;white-space:nowrap;}
.nav__links a{padding:7px 11px;border-radius:var(--r);font-size:14px;color:#3A473F;transition:background .15s,color .15s;}
.nav__links a:hover{background:var(--tint);color:var(--forest);}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:9px;}
.starbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--rule-2);border-radius:var(--r);font-family:var(--mono);font-size:12.5px;transition:border-color .15s,background .15s;}
.starbtn:hover{border-color:var(--ink);background:var(--tint);}
.navtoggle{display:none;background:none;border:1px solid var(--rule-2);border-radius:var(--r);padding:8px 11px;font-family:var(--mono);font-size:12px;}

/* ============ 7. HERO ============ */
.hero{padding:clamp(72px,9vw,128px) 0 clamp(84px,10vw,140px);overflow:hidden;}
.hero__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(36px,5vw,72px);align-items:center;}
.hero__copy{display:flex;flex-direction:column;gap:28px;}
.badges{display:flex;flex-wrap:wrap;gap:7px;}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px;border:1px solid var(--rule);background:rgba(255,255,255,.7);color:#425047;}
.badge--live{background:var(--tint);border-color:#CFE6D6;color:var(--forest);}
.dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 6px;}
h1 .accent{color:var(--green);}
/* Stats span the full width of the copy column, one equal share each.
   auto-flow:column means this holds for any number of stats, not just three.
   minmax(0,1fr) rather than 1fr so a long label can't force an overflow. */
.hero__meta{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:26px;}
.hero__meta div{display:flex;flex-direction:column;gap:5px;}
.hero__meta b{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.03em;}
.hero__meta span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}

.stack{position:relative;padding-bottom:52px;}
.frame{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);}
.frame__bar{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--rule);background:var(--paper-2);font-family:var(--mono);font-size:11px;color:var(--muted);}
.frame__bar .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.frame img{width:100%;height:auto;}
.stack__over{position:absolute;left:-7%;bottom:0;width:min(340px,60%);z-index:3;}

.report{border:1px solid var(--rule);border-radius:9px;overflow:hidden;background:var(--paper);box-shadow:0 10px 30px -16px rgba(11,20,16,.24);}
.report__head{background:var(--ink);color:#fff;padding:14px 16px;}
.report__kicker{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.52);}
.report__title{font-family:var(--display);font-size:.98rem;font-weight:600;margin-top:6px;letter-spacing:-.02em;}
.cells{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--rule);}
.cell{padding:12px 12px;border-right:1px solid var(--rule);}
.cell:last-child{border-right:0;}
.cell__l{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.cell__v{font-family:var(--display);font-size:1.08rem;font-weight:600;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;}
.cell__v--dim{color:var(--rule-2);}
.cell__v--warn{color:var(--amber);}
.cell__v--sm{font-size:.82rem;}
.bar{padding:13px 15px 12px;}
.bar__track{height:6px;background:#EDF1EE;border-radius:100px;overflow:hidden;}
.bar__fill{height:100%;width:0;background:var(--green);border-radius:100px;transition:width 1.4s cubic-bezier(.22,1,.36,1) .3s;}
.bar__marks{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:9px;color:var(--muted);}
.bar__marks .late{color:var(--amber);}

/* ============ 8. PROOF / STATS ============ */
.proof{padding:clamp(40px,5vw,58px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2);}
.proof__stat{text-align:center;max-width:40ch;margin:0 auto;font-family:var(--display);
  font-size:clamp(1.2rem,2.3vw,1.7rem);font-weight:600;letter-spacing:-.022em;line-height:1.3;color:var(--ink);}
.proof__stat b{color:var(--green);font-weight:600;}

/* ============ 9. MODULES ============
   A row of six tabs over a two-column stage: copy on the left, mock UI on the
   right. The tab "border" is not a border — each tab has 1px of padding with two
   full-bleed layers behind it and an opaque inner panel covering the middle, so
   only a 1px rim shows. Scaling the fill layer sweeps light around that rim,
   which doubles as the auto-advance timer. Cheap: two divs and a transform, no
   path-length maths, and it works at any border-radius. */
.mtabs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:clamp(30px,4vw,46px);}

/* Vertical variant: stacked column, selection follows scroll position and click.
   The green marker is a single thumb sliding down one continuous rail on the
   left, not a fill per tab. One element moving smoothly reads as continuous
   travel; six independent fills lighting up read as flicker. */
.mtabs--v{display:flex;flex-direction:column;gap:0;margin-bottom:0;grid-template-columns:none;
  position:relative;padding-left:22px;}
.mtabs--v .mtab__bg,.mtabs--v .mtab__fill{display:none;}   /* rim sweep is horizontal-only */
.mrail{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rule);border-radius:2px;}
.mrail__thumb{position:absolute;left:0;width:2px;height:0;background:var(--brand);border-radius:2px;
  transition:top .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1);}

.mtabs--v .mtab{padding:0;border-radius:0;border-top:1px solid var(--rule);overflow:visible;}
.mtabs--v .mtab:last-of-type{border-bottom:1px solid var(--rule);}
.mtabs--v .mtab__in{background:none;padding:20px 0;gap:0;transition:opacity .3s ease;opacity:.55;}
.mtabs--v .mtab:hover .mtab__in{opacity:.82;background:none;}
.mtabs--v .mtab.on .mtab__in{opacity:1;background:none;cursor:default;}
.mtabs--v .mtab__top{display:flex;align-items:baseline;gap:12px;}
.mtabs--v .mtab__n{flex:0 0 auto;}
.mtabs--v .mtab__h{font-size:1.04rem;line-height:1.3;color:var(--ink);}
.mtabs--v .mtab__p{display:block;font-size:14.5px;color:var(--body-c);line-height:1.6;margin-top:9px;}
.mtabs--v .mtab__extra{display:block;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .3s ease;}
.mtabs--v .mtab.on .mtab__extra{max-height:320px;opacity:1;}
.mshow--v{grid-template-columns:.95fr 1.25fr;}
.mtab{position:relative;padding:1px;border:0;border-radius:10px;background:none;font:inherit;color:inherit;
  cursor:pointer;text-align:left;overflow:hidden;-webkit-appearance:none;}
.mtab__bg{position:absolute;inset:0;background:var(--rule);border-radius:inherit;}
.mtab__fill{position:absolute;inset:0;border-radius:inherit;background:var(--brand);
  transform:scaleX(0);transform-origin:left center;}
.mtab.on .mtab__fill{transform:scaleX(1);}
.mtab--sweep .mtab__fill{animation:mtab-sweep var(--dwell,6000ms) linear forwards;}
@keyframes mtab-sweep{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.mtab__in{position:relative;display:flex;flex-direction:column;gap:7px;border-radius:9px;
  background:var(--paper-2);padding:13px 14px;transition:background .25s ease,color .25s ease;min-height:100%;}
.mtab:hover .mtab__in{background:var(--paper);}
.mtab.on .mtab__in{background:var(--paper);}
.mtab__n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--rule-2);transition:color .25s ease;}
.mtab.on .mtab__n{color:var(--green);}
.mtab__h{font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:-.012em;line-height:1.25;
  color:var(--muted);transition:color .25s ease;}
.mtab.on .mtab__h{color:var(--ink);}
.mtab:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

/* Stage: all copy panes share one grid cell so the block sizes to the tallest
   and cross-fades without any JS height measurement. */
.mshow{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.5vw,60px);align-items:start;}
.mpanes{display:grid;}
.mpane{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility .4s;}
.mpane.on{opacity:1;visibility:visible;transform:none;}
.mpane h3{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;}
.mpane p{font-size:15px;color:var(--body-c);line-height:1.65;margin-top:13px;}
.mod__tags{display:flex;flex-wrap:wrap;gap:6px;padding-top:17px;}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--rule);background:var(--paper);border-radius:100px;padding:3px 9px;}
.mod__repo{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10.5px;color:var(--forest);background:var(--tint);padding:3px 9px;border-radius:4px;}

.show__panel{position:sticky;top:100px;}
.panel{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:0 24px 50px -34px rgba(11,20,16,.32);}
/* Keep 1400/875. In the real layout the panel is ~610px wide, so this gives the
   tallest card (KPI row + 5 rows + footer) about 50px of slack. Shortening it
   clips the last row, since .ui__body hides overflow. */
#slides{position:relative;aspect-ratio:1400/875;background:var(--paper-2);}
.panel__slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;pointer-events:none;}
.panel__slide.on{opacity:1;pointer-events:auto;}
.panel__slide img{width:100%;height:100%;object-fit:cover;object-position:top left;}

/* ============ MOCK UI CARDS ============
   Purpose-built summaries that replace raw app screenshots. A screenshot of a
   dense ERP screen is unreadable once scaled into a web panel, and it crops
   badly at every breakpoint. These are built from the same tokens as the rest
   of the site, so they stay sharp, stay legible, reflow instead of cropping,
   and can be corrected without a new screen capture. */
/* Flows normally so it can sit inside a .frame on any page; only the module
   panel needs it absolute, because those slides cross-fade on top of each other. */
.ui{display:flex;flex-direction:column;background:var(--paper);}
.panel__slide .ui{position:absolute;inset:0;}
.ui__head{display:flex;align-items:baseline;gap:10px;padding:13px 17px;border-bottom:1px solid var(--rule);background:var(--paper-2);flex:0 0 auto;}
.ui__t{font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:-.015em;}
.ui__sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ui__pill{margin-left:auto;font-family:var(--mono);font-size:9.5px;padding:3px 9px;border-radius:100px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;background:var(--tint);color:var(--forest);}
.ui__pill--warn{background:#FDF0E6;color:var(--amber);}
.ui__body{flex:1 1 auto;min-height:0;padding:15px 17px;display:flex;flex-direction:column;gap:13px;overflow:hidden;}

.ui__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden;flex:0 0 auto;}
.ui__kpi{background:var(--paper);padding:10px 12px;min-width:0;}
.ui__kpi i{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ui__kpi b{display:block;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.025em;margin-top:5px;}
.ui__kpi b.neg{color:var(--amber);}
.ui__kpi b.pos{color:var(--green);}

.ui__rows{border:1px solid var(--rule);border-radius:8px;overflow:hidden;flex:0 1 auto;min-height:0;}
.ui__r{display:grid;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--rule);font-size:12.5px;}
.ui__r:last-child{border-bottom:0;}
.ui__r--h{background:var(--paper-2);font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.ui__r--flag{background:#FDF7F2;}
.ui__c{font-family:var(--mono);font-size:11.5px;color:var(--body-c);}
.ui__n{font-family:var(--mono);font-size:11.5px;text-align:right;white-space:nowrap;}
.ui__nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ui__tag{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:100px;background:var(--tint);color:var(--forest);justify-self:start;white-space:nowrap;}
.ui__tag--mute{background:#F1F2F1;color:var(--muted);}
.ui__tag--warn{background:#FDF0E6;color:var(--amber);}

/* Both need display:block. .ui__track is a grid child so it gets blockified for
   free, but .ui__fill sits inside it and would stay inline — width and height
   silently ignored, leaving every bar empty. */
.ui__track{display:block;height:5px;border-radius:100px;background:var(--rule);overflow:hidden;}
.ui__fill{display:block;height:100%;border-radius:100px;background:var(--green);}
.ui__fill--warn{background:var(--amber);}

.ui__flow{display:flex;align-items:center;gap:7px;flex:0 0 auto;flex-wrap:wrap;}
.ui__step{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid var(--rule);color:var(--muted);}
.ui__step.on{border-color:#CFE6D6;background:var(--tint);color:var(--forest);}
.ui__arrow{color:var(--rule-2);font-size:11px;}

.ui__foot{margin-top:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:0 0 auto;}
/* Reserves the strip the hero's report card overlaps, so the frame keeps a
   screen-like height without putting content where it cannot be read. */
.ui__pad{height:132px;flex:0 0 auto;}

@media (max-width:560px){
  .ui__kpis{grid-template-columns:1fr 1fr;}
  .ui__body{padding:12px 13px;gap:10px;}
  /* Row column widths are set inline per card, so they cannot be reflowed from
     here. Let the row scroll instead: .ui__body still clips vertically, the rows
     scroll horizontally, and no figure gets cut off mid-digit. */
  .ui__rows{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ui__r{min-width:440px;}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel__cap{display:flex;align-items:center;gap:12px;padding:9px 11px 9px 15px;border-top:1px solid var(--rule);background:var(--paper-2);}
.panel__cap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.panel__nav{margin-left:auto;display:flex;align-items:center;gap:4px;}
.pbtn{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--rule);background:var(--paper);
  border-radius:5px;color:var(--body-c);transition:border-color .15s,background .15s,color .15s;}
.pbtn:hover{border-color:var(--ink);color:var(--ink);}
.pbtn:disabled{opacity:.35;cursor:default;border-color:var(--rule);}
.pbtn svg{width:12px;height:12px;}
.pdots{display:flex;gap:5px;margin:0 8px;}
.pdot{width:6px;height:6px;border-radius:50%;background:var(--rule-2);border:0;padding:0;transition:background .2s,transform .2s;}
.pdot.on{background:var(--brand);transform:scale(1.35);}

/* ============ 9b. ACCOUNTING ============ */
.acct{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(32px,4.5vw,68px);align-items:center;}
.spec{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin-top:30px;background:var(--paper);}
.spec__row{display:grid;grid-template-columns:11ch 1fr;gap:16px;padding:15px 18px;border-bottom:1px solid var(--rule);align-items:baseline;}
.spec__row:last-child{border-bottom:0;}
.spec__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--green);}
.spec__v{font-size:14.5px;color:var(--ink);line-height:1.45;}
.spec__v small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.01em;}
.acct__shot .frame{border-radius:var(--r-lg) var(--r-lg) 0 0;}
.acct__strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--paper-2);}
.acct__strip div{padding:14px 18px;border-right:1px solid var(--rule);}
.acct__strip div:last-child{border-right:0;}
.acct__strip span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.acct__strip b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:600;letter-spacing:-.03em;margin-top:6px;}
.acct__strip .good{color:var(--green);}

/* ============ 9c. PRODUCTS ============ */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;}
.prod{background:var(--paper);padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;gap:14px;transition:background .2s;}
.prod:hover{background:var(--tint);}
.prod--flag{background:var(--ink);}
.prod--flag:hover{background:#101d16;}
.prod--flag .prod__h{color:#fff;}
.prod--flag .prod__d{color:rgba(234,240,236,.6);}
.prod--flag .prod__tag{color:var(--brand);}
.prod--flag .chip{border-color:rgba(234,240,236,.22);color:rgba(234,240,236,.7);background:transparent;}
.prod__tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--green);}
.prod__h{font-family:var(--display);font-size:1.18rem;font-weight:600;letter-spacing:-.02em;}
.prod__d{font-size:14px;color:var(--body-c);line-height:1.5;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px;}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted);border:1px solid var(--rule);background:var(--paper-2);border-radius:100px;padding:4px 9px;}

.tools{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,32px);align-items:center;
  margin-top:16px;padding:20px clamp(20px,3vw,28px);border:1px solid #CFE6D6;border-radius:var(--r-lg);background:var(--tint);}
.tools__free{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--green);
  border:1px solid #BFDCC8;border-radius:100px;padding:5px 11px;background:var(--paper);white-space:nowrap;}
.tools__n{font-family:var(--display);font-size:1.08rem;font-weight:600;letter-spacing:-.02em;}
.tools__d{font-size:14px;color:var(--body-c);margin-top:4px;line-height:1.45;}

/* ============ 10. PERSONAS ============ */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;}
.persona{background:var(--paper);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:11px;transition:background .2s;}
.persona:hover{background:var(--tint);}
.persona__ix{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);}
.persona p{font-size:14px;color:var(--body-c);line-height:1.58;}
.persona__runs{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:auto;padding-top:14px;line-height:1.6;}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.role{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--body-c);border:1px solid var(--rule);background:var(--paper);border-radius:100px;padding:7px 14px;}

/* ============ 11. MOBILE APP ============ */
.mob{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;}
.phones{display:flex;gap:18px;justify-content:center;align-items:flex-end;}
.phone{width:208px;flex:0 0 208px;border:1px solid rgba(234,240,236,.18);border-radius:26px;background:var(--paper);padding:7px;box-shadow:0 28px 54px -28px rgba(0,0,0,.65);}
.phone--back{transform:translateY(-28px) scale(.94);opacity:.9;}
.phone__scr{border-radius:20px;overflow:hidden;background:var(--paper);}
.phone__top{background:var(--ink);color:#fff;padding:13px 14px 12px;}
.phone__t1{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.phone__t2{font-family:var(--display);font-size:.92rem;font-weight:600;margin-top:5px;letter-spacing:-.02em;}
.prow{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid #F0F3F1;}
.prow__n{font-size:11.5px;font-weight:500;}
.prow__s{font-family:var(--mono);font-size:8.5px;color:var(--muted);margin-top:2px;}
.chk{width:16px;height:16px;flex:0 0 16px;border-radius:5px;border:1px solid var(--rule-2);display:grid;place-items:center;}
.chk--on{background:var(--green);border-color:var(--green);}
.chk--on::after{content:"";width:7px;height:3.5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translateY(-1px);}
.ptile{padding:11px 13px;border-bottom:1px solid #F0F3F1;}
.ptile__l{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.ptile__v{font-family:var(--display);font-size:1.1rem;font-weight:600;letter-spacing:-.03em;margin-top:5px;}
.phone__pill{margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;background:var(--tint);color:var(--forest);padding:3px 7px;border-radius:100px;}
.phone__cta{margin:11px 13px 13px;background:var(--green);color:#fff;text-align:center;padding:9px;border-radius:6px;font-size:11px;font-weight:550;}
.mob__list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mob__list li{display:flex;gap:10px;font-size:14px;color:rgba(234,240,236,.7);line-height:1.5;}
.mob__list li::before{content:"";width:5px;height:5px;flex:0 0 5px;margin-top:8px;border-radius:50%;background:var(--brand);}

/* ============ 12. IMPLEMENTATION ============ */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;}
.phase{background:var(--paper);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;}
.phase__n{font-family:var(--display);font-size:2.3rem;font-weight:600;letter-spacing:-.05em;color:#E7F1EA;line-height:.85;}
.phase__w{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);}
.phase ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.phase li{font-size:13.5px;color:var(--body-c);line-height:1.5;padding-left:13px;position:relative;}
.phase li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--rule-2);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;margin-top:16px;}
.side{background:var(--paper);padding:clamp(24px,3vw,34px);}
.side--tint{background:var(--tint);}
.side h3{margin-bottom:18px;}
.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.side li{display:flex;gap:11px;font-size:14.5px;color:var(--body-c);line-height:1.5;}
.side li::before{content:"→";font-family:var(--mono);color:var(--green);flex:0 0 auto;font-size:13px;}

/* ============ 13. PRICING ============ */
.host{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;}
.plan{background:var(--paper);display:flex;flex-direction:column;}
.plan--pick{background:var(--tint);}
.plan__top{padding:clamp(24px,3vw,34px);border-bottom:1px solid var(--rule);}
.plan__name{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin-top:13px;}
.plan__price{font-family:var(--display);font-size:1.9rem;font-weight:600;letter-spacing:-.035em;margin-top:16px;}
.plan__price small{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-left:7px;}
.plan__list{list-style:none;margin:0;padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:12px;flex:1;}
.plan__list li{display:flex;gap:11px;font-size:14.5px;color:var(--body-c);line-height:1.5;}
.plan__list li::before{content:"";width:13px;height:13px;flex:0 0 13px;margin-top:5px;border-radius:50%;border:1px solid #BFDCC8;background:linear-gradient(45deg,transparent 44%,var(--green) 44%,var(--green) 56%,transparent 56%),var(--tint);}
.plan__cta{padding:0 clamp(22px,3vw,30px) clamp(24px,3vw,32px);}
.plan__cta .btn{width:100%;}

/* ============ 14. OPEN SOURCE ============ */
.os{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,76px);align-items:center;}
.os__pts{display:flex;flex-direction:column;gap:1px;background:rgba(234,240,236,.14);border:1px solid rgba(234,240,236,.14);border-radius:var(--r-lg);overflow:hidden;margin-top:28px;}
.os__pt{background:var(--ink);padding:18px 22px;display:flex;gap:14px;align-items:baseline;}
.os__pt h4{font-family:var(--display);font-size:.98rem;font-weight:600;color:#fff;flex:0 0 34%;letter-spacing:-.015em;}
.os__pt p{font-size:13.5px;color:rgba(234,240,236,.58);line-height:1.55;}
.term{display:flex;align-items:center;gap:11px;background:rgba(234,240,236,.06);border:1px solid rgba(234,240,236,.13);border-radius:var(--r);padding:12px 13px;font-family:var(--mono);font-size:12.5px;color:#D5E2D9;margin-top:18px;}
.term__p{color:var(--brand);flex:0 0 auto;}
.term__cmd{white-space:nowrap;overflow-x:auto;scrollbar-width:none;}
.term__cmd::-webkit-scrollbar{display:none;}
.term__copy{margin-left:auto;flex:0 0 auto;background:rgba(234,240,236,.12);border:0;color:#D5E2D9;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:4px;}
.term__copy:hover{background:rgba(234,240,236,.24);}
.repos{display:grid;gap:12px;}
.repo{border:1px solid rgba(234,240,236,.14);border-radius:9px;padding:18px;transition:border-color .16s,background .16s;}
.repo:hover{border-color:rgba(234,240,236,.4);background:rgba(234,240,236,.04);}
.repo__n{font-family:var(--mono);font-size:12.5px;color:#fff;}
.repo p{font-size:13px;color:rgba(234,240,236,.55);line-height:1.5;margin-top:6px;}
.repo__meta{display:flex;gap:14px;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:rgba(234,240,236,.4);}
.lang{display:inline-flex;align-items:center;gap:6px;}

/* ============ 15. QUOTE / FAQ / CTA / FOOT ============ */
.quote{max-width:60ch;}
.quote blockquote{margin:0;font-family:var(--display);font-size:clamp(1.3rem,2.6vw,2.05rem);font-weight:500;line-height:1.32;letter-spacing:-.022em;}
.quote__by{display:flex;align-items:center;gap:13px;margin-top:30px;}
.quote__by img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px;background:var(--tint);}
.quote__nm{font-size:14.5px;font-weight:600;}
.quote__rl{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:3px;}

/* ============ SYSTEM MAP ============
   Six modules wired to one hub. Three stacked line layers share the same six
   <path> defs via <use>, so the geometry is written once:
     .sm__track  faint, always visible — the diagram reads before it animates
     .sm__line   brand green, draws outward from the hub on reveal
     .sm__flow   short dashes travelling hub -> module, looping
   Every path carries pathLength="1", so dash values are fractions of the path
   rather than user units. That normalises six different lengths: all six draw
   in the same time and the pulses stay in step. */
/* Below ~640px the diagram scrolls inside its own box rather than shrinking the
   labels to nothing. The mask fades the right edge while there is more to see,
   so the swipe is discoverable; it collapses to nothing once fully visible. */
.sysmap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.sysmap::-webkit-scrollbar{display:none;}
.sysmap__svg{display:block;width:100%;min-width:640px;height:auto;fill:none;}
@media (max-width:700px){
  .sysmap{mask-image:linear-gradient(to right,#000 88%,transparent 100%);
          -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);}
}

.sm__track use{stroke:rgba(234,240,236,.11);stroke-width:1.5;}

.sm__line use{stroke:var(--brand);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;}
.sysmap.in .sm__line use{animation:sm-draw .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.25s + var(--d));}
@keyframes sm-draw{to{stroke-dashoffset:0;}}

/* .012 dash + .075 gap = .087 period; shifting by exactly one period loops seamlessly */
.sm__flow use{stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:.012 .075;stroke-dashoffset:0;opacity:0;}
.sysmap.in .sm__flow use{animation:sm-fade .5s ease 1.5s forwards,sm-flow 2.6s linear 1.5s infinite;}
@keyframes sm-flow{to{stroke-dashoffset:-.087;}}
@keyframes sm-fade{to{opacity:.9;}}

.sm__node rect{fill:rgba(234,240,236,.04);stroke:rgba(234,240,236,.13);stroke-width:1;}
.sm__node .sm__num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;fill:rgba(234,240,236,.42);}
.sm__node .sm__nm{font-family:var(--display);font-size:19px;font-weight:550;letter-spacing:-.015em;fill:#EAF0EC;}
.sm__node{opacity:0;transform:translateX(-14px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);}
.sm__node--r{transform:translateX(14px);}                        /* right column slides the other way */
.sysmap.in .sm__node{opacity:1;transform:none;transition-delay:calc(.75s + var(--d));}

.sm__hub .sm__disc{fill:var(--ink);}
.sm__hub .sm__ring{fill:none;stroke:var(--brand);stroke-width:1.5;}
.sm__hub .sm__halo{opacity:0;}
.sm__hub .sm__hubl{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;fill:rgba(234,240,236,.5);text-anchor:middle;}
.sm__hub{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.86);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);}
.sysmap.in .sm__hub{opacity:1;transform:none;}
.sysmap.in .sm__hub .sm__halo{animation:sm-halo 3.4s ease-in-out 1.4s infinite;}
@keyframes sm-halo{0%,100%{opacity:.5;}50%{opacity:1;}}

/* The global reduced-motion rule kills animation and transition, which would
   otherwise strand the lines undrawn and the nodes invisible. Restore the
   finished state explicitly. */
@media (prefers-reduced-motion:reduce){
  .sm__line use{stroke-dashoffset:0;}
  .sm__flow use{opacity:.9;}
  .sm__node,.sm__hub{opacity:1;transform:none;}
  .sm__hub .sm__halo{opacity:.7;}
}

/* On ink, --green is too dark to read as an accent; --brand is the logo green. */
.section--ink .sec-head h2 .accent{color:var(--brand);}
.section--ink .lede{color:rgba(234,240,236,.64);}

.faq{border-top:1px solid var(--rule);}
.qa{border-bottom:1px solid var(--rule);}
.qa summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:flex-start;gap:18px;font-family:var(--display);font-size:1.02rem;font-weight:500;letter-spacing:-.01em;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:17px;color:var(--green);flex:0 0 auto;line-height:1.3;}
.qa[open] summary::after{content:"–";}
.qa__a{padding:0 0 22px;max-width:70ch;font-size:14.5px;color:var(--body-c);line-height:1.65;}
.qa__a code{font-family:var(--mono);font-size:13px;background:var(--tint);padding:2px 6px;border-radius:3px;color:var(--forest);}

.cta{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;}
.cta h2{color:#fff;max-width:22ch;}
.cta p{color:rgba(234,240,236,.64);max-width:48ch;font-size:1.04rem;}

.foot{border-top:1px solid var(--rule);}
.foot__cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:clamp(24px,4vw,48px);padding:clamp(44px,5vw,64px) 0;}
.foot__cols h4{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:15px;}
.foot__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.foot__cols a{font-size:14px;color:var(--body-c);}
.foot__cols a:hover{color:var(--green);}
.foot__about p{font-size:14px;color:var(--muted);margin-top:15px;max-width:30ch;line-height:1.6;}
.foot__bot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:20px 0 40px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;color:var(--muted);}
.foot__bot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:18px;}

/* ============ 16. MOTION ============ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .rv{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
  .par{transform:none!important;}
}

/* ============ 17. RESPONSIVE ============ */
/* The nav collapses earlier than the rest of the layout. Seven items plus the
   GitHub and demo buttons leave only ~24px of clearance at 1100px, which the
   webfonts can eat once they load — so hand over to the menu button at 1140
   while the page layout stays two-column down to 1080. */
@media (max-width:1140px){
  .nav__links{display:none;}
  .navtoggle{display:block;}
  .nav__links.open{display:flex;flex-direction:column;position:absolute;top:66px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);padding:12px var(--gutter) 20px;gap:2px;}
  .nav__item .dd{display:none;}
}
@media (max-width:1080px){
  .hero__grid,.mob,.os,.mshow{grid-template-columns:1fr;}
  /* Stage stacks: mock UI first, then the copy — the visual is the hook and the
     tab row sits directly above it. Panel un-sticks so it scrolls with content. */
  .show__panel{position:static;order:-1;margin-bottom:26px;}
  .mtabs{grid-template-columns:repeat(3,1fr);}
  .who{grid-template-columns:1fr 1fr;}
  .acct{grid-template-columns:1fr;}
  .prods{grid-template-columns:1fr;}
  .phases{grid-template-columns:1fr 1fr;}
  .foot__cols{grid-template-columns:1fr 1fr 1fr;}
  .elev{opacity:.28;}
}
/* ---- narrow-screen navbar ----
   At 360px the right group reached 402px and body{overflow-x:hidden} simply
   clipped it, so "Book a demo" lost its edge. Shed the two labels that carry no
   information the icon or logo does not already give, in that order. */
@media (max-width:620px){
  .starbtn__t{display:none;}
  .starbtn{padding:8px 10px;}
  .nav__in{gap:14px;}
  .nav__right{gap:7px;}
}
@media (max-width:460px){
  .nav .brand__t{display:none;}          /* mark alone still links home; footer keeps its wordmark */
  .btn--sm{padding:9px 12px;}
  .navtoggle{padding:8px 9px;}
  .nav__in{gap:10px;}
}

@media (max-width:720px){
  .mtabs{grid-template-columns:1fr 1fr;gap:6px;}
  .mtab__in{padding:11px 12px;gap:5px;}
  .cells{grid-template-columns:1fr 1fr;}
  .cell:nth-child(1),.cell:nth-child(2){border-bottom:1px solid var(--rule);}
  .cell:nth-child(2){border-right:0;}
  .who,.host,.split,.phases,.mob__list{grid-template-columns:1fr;}
  .tools{grid-template-columns:1fr;text-align:left;}
  .spec__row{grid-template-columns:1fr;gap:6px;}
  .os__pt{flex-direction:column;gap:6px;}
  .os__pt h4{flex:none;}
  .foot__cols{grid-template-columns:1fr 1fr;}
  .hero__meta{gap:14px;}
  .stack{padding-bottom:0;}
  .stack__over{position:relative;left:0;width:100%;margin-top:-22px;}
  .phones{gap:10px;}
  .phone{width:168px;flex:0 0 168px;}
}

/* ============ 18. SHARED PAGE COMPONENTS ============ */
.page-hero{padding:clamp(52px,7vw,88px) 0 clamp(40px,5vw,60px);position:relative;overflow:hidden;}
.page-hero__in{max-width:62ch;display:flex;flex-direction:column;gap:20px;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);}

/* dropdown nav */
.nav__item{position:relative;}
.nav__btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:var(--r);font-size:14px;color:#3A473F;background:none;border:0;}
.nav__btn:hover,.nav__item:focus-within .nav__btn{background:var(--tint);color:var(--forest);}
.nav__btn svg{width:9px;height:9px;opacity:.6;}
.dd{position:absolute;top:calc(100% + 8px);left:0;min-width:264px;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);box-shadow:0 22px 46px -26px rgba(11,20,16,.3);padding:7px;
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70;}
.nav__item:hover .dd,.nav__item:focus-within .dd{opacity:1;visibility:visible;transform:none;}
/* The last dropdown sits near the right edge, so a left-aligned 264px panel
   runs past the viewport and gets clipped by body{overflow-x:hidden}. */
.nav__item:last-of-type .dd{left:auto;right:0;}
.dd a{display:block;padding:9px 11px;border-radius:var(--r);}
.dd a:hover{background:var(--tint);}
/* Both must be block. As inline spans they started at the same x and the
   description wrapped back over the name — and margin-top on an inline element
   does nothing, so the two lines collided in every dropdown. */
.dd__n{display:block;font-size:14px;font-weight:550;color:var(--ink);}
.dd__d{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:3px;letter-spacing:.02em;}
.dd__badge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);border:1px solid #BFDCC8;border-radius:100px;padding:2px 7px;margin-left:7px;vertical-align:1px;}
.dd a.dd__hl{background:var(--tint);}
.dd a.dd__hl:hover{background:#E4F0E8;}

/* generic grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;}
.tile{background:var(--paper);padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;gap:11px;}
.tile__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);}
.tile h3{font-size:1.04rem;}
.tile p{font-size:14px;color:var(--body-c);line-height:1.55;}
.tile__v{font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:600;letter-spacing:-.035em;}

/* feature rows */
.frows{border-top:1px solid var(--rule);}
.frow{display:grid;grid-template-columns:12ch 1fr;gap:clamp(16px,3vw,40px);padding:22px 0;border-bottom:1px solid var(--rule);}
.frow:hover{background:var(--paper-2);}
.frow__k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--green);padding-top:4px;}
.frow h3{font-size:1.02rem;}
.frow p{font-size:14.5px;color:var(--body-c);line-height:1.6;margin-top:7px;max-width:64ch;}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);}
.cmp th,.cmp td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule);font-size:14.5px;vertical-align:top;}
.cmp thead th{background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;}
.cmp tbody th{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;width:22%;}
.cmp td:last-child{background:var(--tint);color:var(--ink);}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0;}
.cmp-wrap{overflow-x:auto;}

/* cards / list items */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.card{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);padding:clamp(22px,2.8vw,30px);
  display:flex;flex-direction:column;gap:11px;transition:border-color .18s,background .18s;}
a.card:hover{border-color:var(--rule-2);background:var(--paper-2);}
.card h3{font-size:1.08rem;}
.card p{font-size:14px;color:var(--body-c);line-height:1.55;}
.card__meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);}

/* form */
.form{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper);padding:clamp(24px,3vw,34px);display:grid;gap:14px;}
.field{display:flex;flex-direction:column;gap:7px;}
/* Was 10px in --muted, which sat around 4.4:1 and read as a hint rather than a
   label. 11px at --body-c is ~8.5:1 and scans properly. */
.field label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body-c);}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:14.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);border-radius:var(--r);padding:11px 13px;width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green);}
.field textarea{min-height:110px;resize:vertical;}
.form__note{font-size:12.5px;color:var(--muted);line-height:1.5;}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ---- validation ----
   Errors are announced, not just coloured: every message is tied to its input
   with aria-describedby and carries role="alert", so a screen reader hears it
   the moment it appears. Colour alone would fail WCAG 1.4.1. */
.req{color:var(--amber);margin-left:3px;font-weight:600;}
.opt{color:var(--rule-2);letter-spacing:.1em;}
.field__err{display:none;font-size:12.5px;line-height:1.45;color:var(--amber);}
.field__err::before{content:"A0";margin-right:6px;font-size:11px;}
.field.err .field__err{display:block;}
.field.err input,.field.err select,.field.err textarea{border-color:var(--amber);background:#FEFAF7;}
.field.err input:focus,.field.err select:focus,.field.err textarea:focus{outline-color:var(--amber);border-color:var(--amber);}
.field.ok input,.field.ok select,.field.ok textarea{border-color:#BFDCC8;}
.form__err{display:none;font-size:13.5px;line-height:1.5;color:var(--amber);background:#FDF0E6;
  border:1px solid #F5D9C4;border-radius:var(--r);padding:11px 13px;}
.form.err .form__err{display:block;}
.field select:invalid{color:var(--muted);}   /* the "Select..." placeholder reads as muted */

/* Shown in place of the form after a successful POST. role="status" so it is
   announced; the form is hidden rather than cleared so nothing flashes back. */
.form__done{border:1px solid #CFE6D6;background:var(--tint);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:8px;}
.form__done strong{font-family:var(--display);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--forest);}
.form__done span{font-size:15px;color:var(--body-c);line-height:1.55;}

/* ---- content diagrams ----
   SVG so the text stays selectable, searchable and sharp, and scales with the
   viewBox instead of pixelating. Below the min-width the wrapper scrolls rather
   than shrinking the labels into illegibility — a diagram nobody can read is
   worse than one they have to nudge sideways. */
.dgm{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(28px,3.5vw,44px);}
.dgm svg{display:block;width:100%;min-width:660px;height:auto;}
.dgm__box{fill:var(--paper);stroke:var(--rule-2);stroke-width:1;}
.dgm__box--on{fill:var(--tint);stroke:#BFDCC8;}
.dgm__box--ink{fill:var(--ink);stroke:var(--ink);}
.dgm__t{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.012em;fill:var(--ink);}
.dgm__t--on{fill:#fff;}
.dgm__s{font-family:var(--mono);font-size:10.5px;fill:var(--muted);letter-spacing:.02em;}
.dgm__s--on{fill:rgba(255,255,255,.66);}
.dgm__lvl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;fill:var(--muted);text-transform:uppercase;}
.dgm__line{stroke:var(--rule-2);stroke-width:1.4;fill:none;}
.dgm__line--on{stroke:var(--brand);stroke-width:1.8;}
.dgm__head{fill:var(--rule-2);}
.dgm__head--on{fill:var(--brand);}
.dgm__note{font-family:var(--mono);font-size:10px;fill:var(--green);letter-spacing:.04em;}
.dgm__cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:14px;}

/* contact blocks */
/* Plain stacked list, not a bordered table. Each entry leads with an icon so
   the eye can jump to the right one without reading the labels. */
.cinfo{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,30px);}
.cinfo__item{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;}
.cinfo__ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--tint);color:var(--forest);flex:0 0 34px;}
.cinfo__ico svg{width:16px;height:16px;}
.cinfo__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.cinfo__v{font-size:15.5px;margin-top:5px;line-height:1.5;color:var(--ink);}
.cinfo__v a:hover{color:var(--green);}
.cinfo__sub{display:block;font-size:13px;color:var(--muted);margin-top:3px;}
.cinfo__sub a{color:var(--green);}

.cinfo__social{padding-top:4px;}
.cinfo__links{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px;}
.cinfo__soc{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;transition:background .18s ease,transform .18s ease;}
.cinfo__soc:hover{background:var(--green);transform:translateY(-2px);}
.cinfo__soc svg{width:16px;height:16px;}

/* prose (legal pages) */
.prose{max-width:74ch;}
.prose h2{font-size:1.34rem;margin-top:40px;}
.prose h3{font-size:1.05rem;margin-top:26px;}
.prose p,.prose li{font-size:14.5px;color:var(--body-c);line-height:1.7;margin-top:12px;}
.prose ul{padding-left:20px;}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:2px;}

/* video grid */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.vid{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);}
/* Thumbnails used to be product screenshots at .55 opacity behind the play
   button — unreadable at this size, and they showed the wrong screen. A labelled
   tile says which module the walkthrough covers, which is the only thing a
   thumbnail this small can usefully carry. */
.vid__thumb{aspect-ratio:16/9;background:var(--ink);display:grid;place-items:center;position:relative;}
.vid__tag{position:absolute;top:12px;left:13px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,240,236,.62);}
.vid__play{position:absolute;width:40px;height:40px;border-radius:50%;background:var(--brand);display:grid;place-items:center;}
.vid__play::after{content:"";width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px;}
.vid__b{padding:16px 18px;}
.vid__b h3{font-size:.98rem;}
.vid__b p{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:7px;}

/* misc */
/* align-items centres the CROSS axis. On .actions, which is a flex ROW, that
   is vertical — so a lone button stayed left-aligned under centred text.
   justify-content is the one that centres along the row. */
.center{text-align:center;margin-left:auto;margin-right:auto;align-items:center;justify-content:center;}
.mt{margin-top:16px;}
.repos--2{grid-template-columns:1fr 1fr;}
@media (max-width:1080px){
  .g2,.g3,.g4,.cards,.vids,.repos--2{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .frow{grid-template-columns:1fr;gap:8px;}
  .f2{grid-template-columns:1fr;}
}

/* ============ 17b. SHRINK-TO-FIT ============
   Grid and flex items default to min-width:auto, which means they refuse to
   shrink below their content's min-content width. One stubborn child — the hero
   stat row, whose three labels total 470px — then forces its whole column wider
   than the viewport, and the section's overflow:hidden quietly clips it rather
   than showing a scrollbar. min-width:0 lets these actually fit. */
.hero__grid > *,.hero__copy > *,.mshow > *,.g2 > *,.g3 > *,.g4 > *,
.host > *,.os > *,.mob > *,.cards > *,.split > *,.who > *,.phases > *,
.prods > *,.vids > *,.acct > *,.foot__cols > *,.nav__in > *{min-width:0;}

/* ============ 18. MOBILE TYPOGRAPHY ============
   Last in the file on purpose. These override component rules that are defined
   further down than the responsive block above, where source order would other-
   wise decide it — equal specificity means the later rule wins, and the mid-file
   media query was losing to base rules declared after it. */
@media (max-width:560px){
  .ui__kpi i,.ui__r--h{font-size:10px;}
  .ui__c,.ui__n{font-size:12px;}
  .ui__foot{font-size:10.5px;}
  .cinfo__k{font-size:10.5px;}
  .spec__k{font-size:10.5px;}
  .frow__k{font-size:10.5px;}
  .chip{font-size:10.5px;}
  .foot__cols h4{font-size:11px;}
  .mtab__n{font-size:10.5px;}

  /* SVG text scales with the viewBox, so a 9.5px label inside a 1000-unit
     diagram rendered at 660px comes out near 6px. Widen the diagram a little and
     lift the smallest labels, so the scrolled drawing is actually readable. */
  .dgm svg{min-width:780px;}
  .dgm__lvl{font-size:12px;}
  .dgm__note{font-size:11.5px;}
  .sysmap__svg{min-width:760px;}

  /* Small labels that carry real figures, not decoration. The phone mock-up
     internals (.phone__*, .ptile__*, .prow__*) are left tiny on purpose — they
     are meant to read as a phone screen, not as body copy. */
  .cell__l{font-size:10px;}
  .report__kicker{font-size:10px;}
  .ui__sub,.ui__pill,.ui__step,.ui__tag{font-size:10.5px;}
  .prod__tag,.tile__k,.phase__w{font-size:10.5px;}
  .hero__meta span{font-size:10.5px;}

  /* Tap targets. Footer links were 17px tall and the panel dots 6px — both under
     the 24px WCAG 2.5.8 floor, and well under what a thumb wants. The dots grow
     their hit area with padding while the visible dot stays 6px, via
     background-clip, so nothing looks different. */
  .foot__cols a{display:inline-block;padding:6px 0;}
  .foot__cols ul{gap:2px;}
  .pdot{box-sizing:content-box;padding:9px;background-clip:content-box;}
  .cinfo__soc{width:42px;height:42px;}
  /* Two 168px phones plus their gap need 346px; a 320px screen has ~280px of
     usable width. Drop the decorative second phone rather than shrinking both
     until the mock screen is unreadable. */
  .phone--back{display:none;}
  .phones{gap:0;}
  /* Six padded dots plus two arrows no longer fit beside the caption at 320px,
     so let the caption row wrap rather than shrinking the targets back down. */
  .panel__cap{flex-wrap:wrap;row-gap:8px;}
  .panel__nav{margin-left:0;}
}