/* ==========================================================================
   Octana Dx
   Built from design-package.md. Dark revision: the page is one continuous
   vertical gradient rather than stacked light sections, so scrolling reads as
   moving through a place. Every colour role was re-derived for the dark ground
   and re-measured against the gradient's LIGHTEST point, not its darkest.
   ========================================================================== */

/* --- Display face --------------------------------------------------------- */
/* Self-hosted rather than pulled from a CDN: one less third-party request on a
   site whose whole pitch is that it loads fast. Paths are relative to assets/,
   not root-absolute, so the site still works if it is ever served from a
   subfolder. Three weights, all of them used below. */
@font-face{
  font-family:'ClashDisplay';
  src:url('fonts/ClashDisplay-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'ClashDisplay';
  src:url('fonts/ClashDisplay-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'ClashDisplay';
  src:url('fonts/ClashDisplay-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root{
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.8),0 10px 44px rgba(5,5,10,.8);

  /* Greyscale, 10 steps, #0A0A0D to #EBEBF0 */
  --g-900:#0A0A0D; --g-800:#141419; --g-700:#1F1F26; --g-600:#2E2E37; --g-500:#45454F;
  --g-400:#626270; --g-300:#8A8A96; --g-200:#B4B4BE; --g-100:#D6D6DE; --g-050:#EBEBF0;

  /* Navy, 10 steps, anchored on the given #2E3366 at step 600 */
  --n-900:#0C0D1A; --n-800:#151833; --n-700:#1E2149; --n-600:#2E3366; --n-500:#414785;
  --n-400:#585EA3; --n-300:#7278BC; --n-200:#9BA0D2; --n-100:#C4C7E6; --n-050:#E6E7F5;

  /* On a dark ground the accent cannot stay at #2E3366: it measures 1.57:1
     against the page and carries no boundary. The brand navy keeps doing real
     work as the button FILL, while the readable accent moves up the same ramp. */
  --accent:var(--n-200);        /* text, links, kickers. 6.7:1 at the lightest point */
  --accent-hover:var(--n-100);
  --accent-line:var(--n-300);   /* borders and drawn lines. 4.1:1, above the 3:1 floor */
  --accent-fill:var(--n-600);   /* the given brand navy, as a fill behind light text */
  --accent-fill-hover:var(--n-500);
  --accent-muted:rgba(114,120,188,.30);

  --text-primary:var(--g-050);   /* 9.6:1 at the gradient's lightest point */
  --text-secondary:var(--g-200); /* 8.2:1 at the gradient's lightest point */
  /* Sits between g-300 and g-200 on purpose. g-400 was the light-theme value and
     measures 2.6:1 here; g-300 only reaches 4.57:1 against the gradient's
     lightest point, too tight for an 11.5px label once the glow layer lands on
     top. This measures 5.6:1 and still reads as the quietest step. */
  --text-quiet:#9C9CA8;

  /* Panels are translucent lifts, never solid colours. A solid panel fights the
     gradient underneath it and shows as a rectangle at every scroll position. */
  --panel:rgba(255,255,255,.045);
  --panel-lift:rgba(255,255,255,.075);
  --panel-solid:#12131F;         /* only where a real solid is needed: form fields */
  --line:rgba(196,199,230,.17);
  --line-soft:rgba(196,199,230,.10);

  --display:'ClashDisplay','Clash Display',system-ui,sans-serif;
  --body:'General Sans','General Sans Fallback',system-ui,sans-serif;
  --mono:'Space Mono','Space Mono Fallback',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shell:1180px;
  --gutter:clamp(20px,5vw,48px);
  --section:clamp(88px,11vw,168px);
  --radius:14px;
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#07070B}
body{
  margin:0;min-height:100%;
  /* The journey. Giving html its own background stops this one propagating to
     the canvas, so it paints in the body's box and therefore spans the whole
     document rather than one viewport. That is what makes the scroll continuous. */
  background:linear-gradient(180deg,
    #07070B 0%,
    #0A0A11 10%,
    #0D0E1C 22%,
    #111426 36%,
    #141833 50%,
    #12152B 64%,
    #0E101F 76%,
    #0C0D18 88%,
    #14183A 100%);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}

/* --- Accessibility -------------------------------------------------------- */
.skip{
  position:absolute;left:var(--gutter);top:-999px;z-index:200;
  background:var(--accent);color:var(--g-900);
  padding:12px 20px;border-radius:8px;font-family:var(--mono);font-size:13px;
}
.skip:focus{top:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- The environment layer ------------------------------------------------ */
/* Fixed behind everything: a slow navy drift plus grain, so the gradient has
   life in it instead of reading as a flat ramp. */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-30%;
  background:
    radial-gradient(46% 38% at 22% 18%,rgba(88,94,163,.16),transparent 68%),
    radial-gradient(40% 34% at 82% 72%,rgba(46,51,102,.20),transparent 70%);
  animation:drift 96s var(--ease) infinite alternate -22s;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
@keyframes drift{
  from{transform:translate3d(-2.2%,-1.4%,0) scale(1)}
  to{transform:translate3d(2.4%,1.8%,0) scale(1.06)}
}

/* --- Layout --------------------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
main{position:relative;z-index:1;display:block}
section{position:relative}
.band{padding-block:var(--section)}
.band-tight{padding-block:clamp(64px,7vw,104px)}

/* Divider: a hairline that breaks in the middle. On a gradient this cannot be a
   solid patch painted over the line, so the gap is cut into the gradient of the
   line itself. Same signature, and it now works at any scroll position. */
.rule{
  height:1px;border:0;margin:0;background:linear-gradient(90deg,
    transparent 0%,var(--line-soft) 14%,var(--line-soft) 45%,
    transparent 47%,transparent 53%,
    var(--line-soft) 55%,var(--line-soft) 86%,transparent 100%);
}

/* --- Type ----------------------------------------------------------------- */
.kicker{
  font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent);flex:none;opacity:.6}

h1,h2,h3,.h1,.h2,.h3,.h4,.heading-hero,.heading-section{font-family:var(--display)}
/* word-spacing puts back what the negative letter-spacing takes out of the gap
   between words. Clash Display's own space is narrow, and at -0.025em the
   headline was reading as "Yoursite ships". The supplied letter-spacing is
   untouched; only the word gap is compensated. */
h1,.h1,.heading-hero{font-weight:700;letter-spacing:-.025em;line-height:1.08;word-spacing:.09em}
h2,.h2,h3,.h3,.h4,.heading-section{font-weight:600;letter-spacing:-.02em;line-height:1.18;word-spacing:.08em}
h1,.h1{font-size:clamp(40px,6.4vw,78px)}
h2,.h2{font-size:clamp(30px,4.1vw,52px)}
h3,.h3{font-size:clamp(19px,1.7vw,23px)}
.h4{font-size:17px}

.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.58;color:var(--text-secondary);max-width:58ch;margin-top:22px}
.body-max{max-width:66ch}
p+p{margin-top:1.05em}
.muted{color:var(--text-secondary)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--text-secondary)}

.head{max-width:min(760px,100%)}
.head-split{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.head-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end}}
/* When the second column is an image rather than a line of text, ending it on
   the baseline drops it below the block it should sit beside. */
@media (min-width:900px){.head-split.mid{align-items:center}}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:10px;border:1px solid transparent;
  font-family:var(--body);font-weight:500;font-size:15.5px;letter-spacing:.005em;
  cursor:pointer;text-align:center;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
/* The brand navy is too close to the page to define its own edge, so the
   boundary is carried by the lighter border while the fill stays on brand. */
.btn-primary{background:var(--accent-fill);color:var(--g-050);border-color:var(--accent-line)}
.btn-primary:hover{background:var(--accent-fill-hover);border-color:var(--accent);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* An arrow link, used wherever a section hands off to its full page. */
.arrow{
  display:inline-flex;align-items:center;gap:9px;color:var(--accent);
  font-weight:500;font-size:15.5px;
  transition:gap .4s var(--ease),color .4s var(--ease);
}
.arrow::after{content:"";width:16px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.arrow:hover{gap:13px;color:var(--accent-hover)}
.arrow:hover::after{width:22px}

/* Touch targets, added without changing any element's layout role. Swapping a
   block link to inline-flex shrinks it to its text, which is why the panel
   links and the FAQ rows keep their own display values here. */
@media (pointer:coarse){
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .nav-toggle{min-height:44px}
  .nav-links a,.foot a,.arrow{min-height:44px;display:inline-flex;align-items:center}
  .nav-panel a{min-height:48px;display:flex;align-items:center}
  .nav-panel a:last-child{justify-content:center}
  .faq-q{min-height:44px}
}

/* --- The mark ------------------------------------------------------------- */
.mark{width:100%;height:100%;color:inherit}
.mark-lg{width:clamp(280px,42vw,560px);aspect-ratio:1}

/* --- Nav ------------------------------------------------------------------ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,8,13,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease),background-color .5s var(--ease);
}
.nav.stuck{border-bottom-color:var(--line-soft);background:rgba(8,8,13,.86)}
.nav-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.015em;flex:none;color:var(--g-050)}
.brand-mark{width:26px;height:26px;color:var(--accent);flex:none}
.brand em{font-style:normal;color:var(--accent)}
.nav-links{display:none;gap:clamp(14px,2vw,28px);margin-left:auto;align-items:center}
@media (min-width:1000px){.nav-links{display:flex}}
.nav-links a{font-size:15px;color:var(--text-secondary);transition:color .35s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--g-050)}
.nav-links a[aria-current="page"]{font-weight:500}
/* Below the nav breakpoint the bar holds the brand and the menu button only.
   Three items at 375px wrapped the button onto two lines. The call to action
   lives at the foot of the menu panel instead, styled as a real button. */
.nav-cta{display:none}
@media (min-width:1000px){
  .nav-cta{display:inline-flex;margin-left:8px;padding:11px 20px;font-size:14.5px}
}
.nav-toggle{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:none;
  border:1px solid var(--line);border-radius:9px;padding:9px 15px;cursor:pointer;
  color:var(--text-primary);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
@media (min-width:1000px){.nav-toggle{display:none}}
.nav-panel{display:none;border-top:1px solid var(--line-soft);padding-block:14px 22px}
.nav-panel.open{display:block}
@media (min-width:1000px){.nav-panel,.nav-panel.open{display:none}}
.nav-panel a{display:block;padding:11px 0;font-size:17px;border-bottom:1px solid var(--line-soft)}
.nav-panel a:last-child{
  border-bottom:0;margin-top:16px;background:var(--accent-fill);color:var(--g-050);
  border:1px solid var(--accent-line);
  border-radius:10px;padding:14px 18px;text-align:center;font-weight:500;
}

/* --- Hero (a scroll video drops into this stage later) -------------------- */
/* No background of its own now: the page gradient starts at its deepest here,
   so the hero is the mouth of the journey rather than a separate dark block. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Two scrims, not one. Live footage behind type is a background nobody controls
   frame to frame, and a worst-frame audit across the loop found the headline at
   2.0:1 and the lede at 1.1:1 when the bright liquid swept left. The directional
   scrim dims only the text lane and dies out before the right third, so the
   ribbon stays bright exactly where it is meant to be seen. */
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(97deg,
    rgba(7,7,11,.95) 0%,
    rgba(7,7,11,.93) 38%,
    rgba(7,7,11,.72) 56%,
    rgba(7,7,11,.34) 72%,
    rgba(7,7,11,.06) 88%,
    rgba(7,7,11,0) 100%);
}
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 122% 88% at 50% 42%,rgba(7,7,11,0) 30%,rgba(7,7,11,.74) 100%);
}
.hero-glow{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(1100px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(46,51,102,.55),transparent 62%);
  filter:blur(30px);
}
/* The ambient loop sits where the rotating mark was. Pushed right of centre so
   the headline's lane stays clear, which is the same reasoning the caption
   bands use: compose the layout around where the action actually lives. */
.hero-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% 50%;
  opacity:0;transition:opacity 1.4s var(--ease);
  will-change:opacity;
}
.hero-media.vid-ready .hero-vid{opacity:.55}

.hero-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(660px,86vw);aspect-ratio:1;color:var(--n-500);opacity:.36;
  transition:opacity 1s var(--ease);
}
/* The mark is the fallback, not a companion: whichever one is showing, only one
   is. It costs no bytes, so it is what phones and reduced motion get. */
.hero-media.vid-ready .hero-mark{opacity:0}
.hero-mark svg{animation:spin 96s linear infinite -24s}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-in{
  position:relative;z-index:1;
  min-height:min(88svh,860px);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(96px,15vh,150px);
}
.hero h1,.hero .lede,.hero .kicker,.hero-foot{text-shadow:var(--tshadow)}
.hero .btn{text-shadow:none}
.hero h1{color:var(--g-050);max-width:15ch}
.hero .lede{color:var(--text-secondary);max-width:52ch}
.hero-foot{
  margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
.hero-foot .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* The reserved video slot. Marked, so it reads as intent rather than a gap. */
.slot{
  margin-top:clamp(44px,6vw,72px);border:1px dashed var(--accent-muted);
  border-radius:var(--radius);padding:16px 20px;max-width:520px;
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);
}
.slot-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.slot-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);
  opacity:0;animation:ping 3.4s var(--ease) infinite -1s;
}
@keyframes ping{0%{opacity:.7;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.5)}}

/* --- Cards ---------------------------------------------------------------- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}

.card{
  position:relative;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(24px,2.6vw,34px);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .5s var(--ease),transform .5s var(--ease),background-color .5s var(--ease);
}
.card:hover{border-color:var(--accent-muted);background:var(--panel-lift);transform:translateY(-3px)}
.card h3{color:var(--g-050)}
.card p{color:var(--text-secondary);font-size:15.5px}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.card-n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}
.card-link{margin-top:auto;padding-top:8px}

/* "When this is the wrong choice" gets its own strip rather than a third
   column. Three cards holding eight items, four items and one paragraph left a
   hole under the short one, and this is the sentence that deserves the weight. */
.wrong{
  margin-top:clamp(16px,2vw,24px);
  background:var(--panel-lift);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(26px,3vw,40px);
  display:grid;gap:14px clamp(28px,4vw,56px);
}
@media (min-width:820px){.wrong{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}}
.wrong h3{color:var(--g-050)}
.wrong p{color:var(--text-secondary);font-size:15.5px;max-width:62ch}
.wrong .arrow{margin-top:14px}

/* Problem list: quoted buyer language, deliberately blunt. */
.quotes{display:grid;gap:0;margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line-soft)}
.quote{
  display:grid;gap:6px 26px;grid-template-columns:auto minmax(0,1fr);align-items:baseline;
  padding-block:clamp(20px,2.3vw,28px);border-bottom:1px solid var(--line-soft);
}
.quote span{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}
.quote q{
  font-family:var(--display);font-weight:600;font-size:clamp(19px,2.15vw,28px);
  line-height:1.22;letter-spacing:-.02em;word-spacing:.08em;quotes:'\201C' '\201D';color:var(--g-050);
}
.quotes-foot{margin-top:clamp(26px,3vw,38px);max-width:56ch;font-size:17px;color:var(--text-secondary)}

/* Pillars: a different skeleton from the cards above, so no two neighbours match. */
.pillars{display:grid;gap:0;margin-top:clamp(34px,4vw,56px)}
@media (min-width:820px){.pillars{grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,80px)}}
.pillar{padding-block:clamp(24px,2.6vw,32px);border-top:1px solid var(--line-soft)}
.pillar h3{margin-bottom:9px;color:var(--g-050)}
.pillar p{color:var(--text-secondary);font-size:15.5px;max-width:42ch}
.pillar-i{width:30px;height:30px;color:var(--accent);margin-bottom:16px;opacity:.9}

/* --- The orbit line (the signature) --------------------------------------- */
.orbit-wrap{position:relative}
/* isolate makes the shell its own stacking context, so the line and the content
   are ordered against each other and nothing else. Without it the line was a
   positioned element at z-index 0 while the headings were unpositioned flow
   content, which paints underneath: the line crossed in front of the type. */
.orbit-wrap .shell{position:relative;isolation:isolate}
.orbit-wrap .shell > *:not(.orbit-line){position:relative;z-index:1}
/* Sits in the same gutter the steps are indented by, so the line threads them. */
.orbit-line{
  position:absolute;left:var(--gutter);top:0;height:100%;width:clamp(56px,7vw,110px);
  z-index:0;pointer-events:none;color:var(--accent-line);overflow:visible;
}
.orbit-line path{
  fill:none;stroke:currentColor;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Three strokes rather than one: a soft bloom, the line itself, and a thinner
   trail that lags behind on the way down. The pair echoes the two-ring mark. */
.orbit-line .ol-glow{stroke-width:10;opacity:.13}
.orbit-line .ol-main{stroke-width:2.8;opacity:.95}
.orbit-line .ol-trail{stroke-width:1.2;opacity:.5}
@media (max-width:899px){.orbit-line{display:none}}

.steps{position:relative;z-index:1;display:grid;gap:0}
.step{
  display:grid;gap:6px 26px;grid-template-columns:auto minmax(0,1fr);
  padding-block:clamp(26px,3vw,40px);border-top:1px solid var(--line-soft);
}
@media (min-width:900px){
  .step{grid-template-columns:auto minmax(0,220px) minmax(0,1fr);align-items:baseline;column-gap:clamp(28px,3.6vw,56px)}
  .steps{margin-left:clamp(56px,7vw,110px)}
}
.step-ring{width:38px;height:38px;flex:none;color:var(--accent);position:relative;grid-row:span 2}
@media (min-width:900px){.step-ring{grid-row:auto;align-self:center}}
.step-ring svg{width:100%;height:100%;display:block}
.step-ring circle{
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-dasharray:var(--len,100);stroke-dashoffset:calc(var(--len,100) * (1 - var(--d,0)));
  transform:rotate(-90deg);transform-origin:50% 50%;
}
.step-ring b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--accent);
}
.step h3{letter-spacing:-.02em;color:var(--g-050)}
.step-when{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.07em;text-transform:uppercase;margin-top:5px}
.step p{color:var(--text-secondary);font-size:15.5px;max-width:52ch}
@media (max-width:899px){.step p,.step .step-when{grid-column:2}}

/* --- Stat tiles ----------------------------------------------------------- */
/* The 1px grid gap draws the rules between tiles, so the divider colour has to
   be the gap background rather than a border on each cell. */
.stats{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;margin-top:clamp(34px,4vw,52px)}
@media (min-width:640px){.stats{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--panel);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:8px}
.stat b{
  font-family:var(--mono);font-weight:700;font-size:clamp(30px,3.5vw,42px);
  line-height:1;letter-spacing:-.03em;color:var(--g-050);font-variant-numeric:tabular-nums;
}
.stat span{font-size:14px;color:var(--text-secondary);line-height:1.45;max-width:26ch}

/* --- The mark panel (About) ----------------------------------------------- */
.mark-panel{width:min(280px,70vw);aspect-ratio:1;margin-inline:auto;color:var(--accent)}
.mark-panel svg{width:100%;height:100%}

/* --- Pricing -------------------------------------------------------------- */
.price-card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:16px;
  transition:border-color .5s var(--ease),transform .5s var(--ease),background-color .5s var(--ease);
}
.price-card:hover{border-color:var(--accent-muted);transform:translateY(-3px)}
/* The lead card lifts toward the brand navy rather than dropping to black,
   which is what a highlight has to do once the whole page is dark. */
.price-card.lead{background:rgba(46,51,102,.34);border-color:var(--accent-line)}
.price-card h3,.price-card .price-fig{color:var(--g-050)}
.price-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.price-fig{font-family:var(--mono);font-weight:700;font-size:clamp(30px,3.5vw,44px);line-height:1;letter-spacing:-.05em}
/* Two prices per card now, so the recurring one gets its own line. Inline, it
   shared a line box with a 44px figure and "month" wrapped underneath alone. */
.price-fig sub{
  display:block;margin-top:9px;
  font-family:var(--body);font-weight:400;font-size:15px;letter-spacing:0;
  color:var(--text-secondary);vertical-align:baseline;bottom:0;
}
.price-note{font-size:15px;color:var(--text-secondary)}
.price-list{display:grid;gap:10px;margin-top:4px}
.price-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--text-secondary)}
.price-list li::before{content:"";width:13px;height:1px;background:var(--accent);margin-top:.72em;flex:none}
.price-card .btn{margin-top:auto}

.compare{width:100%;border-collapse:collapse;margin-top:clamp(30px,4vw,48px);font-size:15px}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare th,.compare td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.compare thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.compare tbody th{font-weight:500;color:var(--g-050);white-space:nowrap}
.compare td{color:var(--text-secondary)}

/* --- FAQ ------------------------------------------------------------------ */
.faq{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line-soft);max-width:78ch}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:clamp(18px,2vw,24px);color:var(--g-050);
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.55vw,21px);
  line-height:1.25;letter-spacing:-.02em;word-spacing:.08em;
  transition:color .35s var(--ease);
}
.faq summary:hover .faq-q{color:var(--accent)}
.faq-sign{position:relative;width:14px;height:14px;flex:none;color:var(--accent)}
.faq-sign::before,.faq-sign::after{
  content:"";position:absolute;left:0;top:6.5px;width:14px;height:1.4px;background:currentColor;
  transition:transform .45s var(--ease);
}
.faq-sign::after{transform:rotate(90deg)}
.faq details[open] .faq-sign::after{transform:rotate(0)}
.faq-a{padding-bottom:clamp(20px,2.4vw,28px);color:var(--text-secondary);max-width:64ch;font-size:15.5px}

/* --- Industry slots ------------------------------------------------------- */
.slots{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;margin-top:clamp(30px,4vw,48px)}
@media (min-width:620px){.slots{grid-template-columns:1fr 1fr}}
@media (min-width:940px){.slots{grid-template-columns:repeat(3,1fr)}}
.slot-cell{background:var(--panel);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:9px;min-height:150px}
.slot-cell .h4{color:var(--g-050)}
.slot-cell p{font-size:14.5px;color:var(--text-secondary)}
.slot-cell .mono{margin-top:auto;color:var(--text-quiet);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}

/* --- Final CTA ------------------------------------------------------------ */
/* The gradient's last stop is already its deepest navy, so this section adds a
   glow rather than a slab. It is the arrival, not a different room. */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(58% 78% at 50% 112%,rgba(65,71,133,.5),transparent 70%);
}
.cta-mark{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(420px,52vw);aspect-ratio:1;color:var(--n-500);opacity:.24;z-index:-1;
}
.cta-mark svg{animation:spin 110s linear infinite reverse -30s}
.cta h2{color:var(--g-050);max-width:16ch}
.cta p{color:var(--text-secondary);max-width:48ch;margin-top:20px;font-size:clamp(17px,1.35vw,20px)}

/* --- Form ----------------------------------------------------------------- */
.form{margin-top:clamp(30px,4vw,44px);display:grid;gap:20px;max-width:640px}
.field{display:grid;gap:8px}
.field label{font-size:14.5px;font-weight:500;color:var(--g-050)}
.field .hint{font-size:13.5px;color:var(--text-secondary)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-solid);color:var(--g-050);
  font-size:16px;transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-quiet)}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent-muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field-row{display:grid;gap:20px}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.form-note{font-size:13.5px;color:var(--text-secondary);max-width:52ch}
.form-done{
  display:none;border:1px solid var(--accent-line);background:rgba(46,51,102,.3);
  border-radius:var(--radius);padding:clamp(24px,3vw,34px);margin-top:clamp(30px,4vw,44px);max-width:640px;
}
.form-done.on{display:block}
.form-done h3{color:var(--accent);margin-bottom:10px}
.form-done p{color:var(--text-secondary);font-size:15.5px}

/* --- Prose (legal pages) -------------------------------------------------- */
.prose{max-width:72ch}
.prose h2{font-size:clamp(23px,2.3vw,30px);margin-top:clamp(40px,4vw,60px);margin-bottom:14px;color:var(--g-050)}
.prose h3{font-size:18px;margin-top:30px;margin-bottom:8px;color:var(--g-050)}
.prose p,.prose li{color:var(--text-secondary);font-size:16px}
.prose ul{display:grid;gap:9px;margin-top:12px}
.prose ul li{display:flex;gap:12px;align-items:flex-start}
.prose ul li::before{content:"";width:13px;height:1px;background:var(--accent);margin-top:.75em;flex:none}
.prose .stamp{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-quiet);
  border:1px dashed var(--line);border-radius:10px;padding:16px 18px;margin-top:30px;
}

/* --- Page header (inner pages) -------------------------------------------- */
.phead{padding-block:clamp(60px,8vw,110px) clamp(40px,5vw,64px)}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-quiet);margin-bottom:20px}
.crumbs a{color:var(--accent)}
.crumbs a:hover{text-decoration:underline}

/* --- Footer --------------------------------------------------------------- */
.foot{border-top:1px solid var(--line-soft);padding-block:clamp(48px,6vw,78px) 34px;position:relative;z-index:1}
.foot-grid{display:grid;gap:clamp(30px,4vw,52px)}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}}
.foot h4{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;color:var(--text-quiet);margin-bottom:15px}
.foot ul{display:grid;gap:10px}
.foot a{font-size:15px;color:var(--text-secondary);transition:color .35s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot-brand p{font-size:15px;color:var(--text-secondary);max-width:34ch;margin-top:14px}
.foot-base{
  margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-quiet);
}

/* --- Entrances ------------------------------------------------------------ */
/* Start and end states are container-prefixed so a later rule cannot cancel them. */
.rise .r{opacity:0;transform:translateY(18px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rise.in .r{opacity:1;transform:none}
.rise.in .r:nth-child(2){transition-delay:.08s}
.rise.in .r:nth-child(3){transition-delay:.16s}
.rise.in .r:nth-child(4){transition-delay:.24s}
.rise.in .r:nth-child(5){transition-delay:.32s}
.rise.in .r:nth-child(6){transition-delay:.4s}
/* Retire the stagger once the entrance is done, at matching specificity, so
   hovers on the later siblings do not lag by the stagger forever. */
.rise.in.settled .r,
.rise.in.settled .r:nth-child(2),
.rise.in.settled .r:nth-child(3),
.rise.in.settled .r:nth-child(4),
.rise.in.settled .r:nth-child(5),
.rise.in.settled .r:nth-child(6){transition-delay:0s}

/* Headline word rise, split at load. */
.split{display:inline-block}
.split .w{display:inline-block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.split .w i{
  display:inline-block;font-style:inherit;
  transform:translateY(110%);transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
.lift.in .split .w i{transform:none}

/* --- Pause rules ---------------------------------------------------------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* Short screens: the decorations have no room. */
@media (max-height:560px){.hero-mark,.slot{display:none}}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .rise .r,.rise.in .r{opacity:1;transform:none}
  .split .w i,.lift.in .split .w i{transform:none}
  /* Positional transforms are re-applied rather than wiped, so nothing lands off screen. */
  .hero-mark{transform:translate(-50%,-50%)}
  .cta-mark{transform:translateY(-50%)}
}
/* The same pinned state, applied by JS when the preference flips mid-session. */
.rm .rise .r,.rm .rise.in .r{opacity:1 !important;transform:none !important;transition:none !important}
.rm .split .w i{transform:none !important;transition:none !important}
.rm .env::before,.rm .hero-mark svg,.rm .cta-mark svg,.rm .slot-dot::after{animation:none !important}