/* VisionXt site. Tokens and rules follow the VisionXt Design System export (project 0ccd0389):
   black-first canvas, square corners, white solid primary button with uppercase tracked label,
   mist #87AFAE as the single accent, aurora gradient as the only colour surface.
   Dark is the only mode: the site ignores the OS light setting on purpose. */

@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Raleway";src:url(/fonts/raleway-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Raleway";src:url(/fonts/raleway-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --black:#000;--ink-900:#0A0A0A;--ink-800:#111213;--ink-700:#1A1C1D;--ink-600:#242729;
  --ink-400:#4D5457;--ink-300:#7A8286;--ink-200:#A8AFB2;--ink-100:#D4D8DA;--white:#fff;
  --mist:#87AFAE;

  --canvas:var(--black);--raised:var(--ink-900);--card:var(--ink-800);
  --text:var(--white);--text-2:var(--ink-200);--text-3:var(--ink-300);
  --accent:var(--mist);--focus:var(--mist);
  --hair:rgba(255,255,255,.12);--line:rgba(255,255,255,.20);--line-strong:rgba(255,255,255,.28);
  --wash:rgba(255,255,255,.08);--field:rgba(255,255,255,.04);--veil:rgba(0,0,0,.9);
  --btn-bg:var(--white);--btn-fg:var(--black);--btn-bg-hover:var(--ink-100);--btn-bg-active:var(--ink-200);
  --danger:#E5806F;

  --display:"Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(20px,5vw,48px);
  --section:clamp(56px,7vw,88px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --fast:140ms;--base:220ms;
}
/* aurora hero and closing band: light-on-dark tokens */
.on-dark,.final .wrap{
  --text:var(--white);--text-2:var(--ink-100);--text-3:var(--ink-200);--accent:var(--mist);
  --hair:rgba(255,255,255,.12);--line:rgba(255,255,255,.20);--line-strong:rgba(255,255,255,.28);--wash:rgba(255,255,255,.08);
  --btn-bg:var(--white);--btn-fg:var(--black);--btn-bg-hover:var(--ink-100);--btn-bg-active:var(--ink-200);
  color:var(--text);
}
.on-dark{--focus:var(--white)}
.final .wrap{--focus:var(--mist)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important} /* author display rules (grid, block) must not override the hidden attribute */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font:400 1rem/1.58 var(--body);letter-spacing:-.004em;font-feature-settings:"lnum";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0;text-wrap:pretty}
strong,b{font-weight:700;color:var(--text)}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--mist);color:var(--black)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--btn-bg);color:var(--btn-fg);padding:.6rem 1rem;font:700 .8125rem var(--display);letter-spacing:.12em;text-transform:uppercase;z-index:100}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:min(100% - 2*var(--gutter),1200px);margin-inline:auto}
.section{padding-block:var(--section)}
main>section:not(.hero):not(.final){border-top:1px solid var(--hair)}
.measure{max-width:62ch}
.h2+.measure,.h2+.note{margin-top:1.25rem}
.muted{color:var(--text-2)}

/* type ------------------------------------------------------------------ */
.h2{font-size:clamp(1.875rem,3.6vw,2.5rem);line-height:1.06;letter-spacing:-.024em}
.em{font-style:italic;font-weight:700}
.eyebrow{display:block;margin-bottom:1rem;font:500 .6875rem/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.eyebrow a{color:var(--text-2);border-bottom:1px solid var(--line)}
.eyebrow a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.note{margin-top:2.5rem;color:var(--text-2);max-width:62ch}
.note .link{white-space:nowrap}
.caption{margin-top:1rem;font-size:.875rem;color:var(--text-3);max-width:62ch}

/* header ---------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--veil);border-bottom:1px solid var(--hair)}
.bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav cta";align-items:center;gap:1.5rem;min-height:68px}
.logo{grid-area:logo;font:700 1.375rem/1 var(--display);letter-spacing:-.03em}
.site-header nav{grid-area:nav}
.site-header nav ul{display:flex;gap:1.75rem;justify-content:center}
.site-header nav a{font-size:.9375rem;font-weight:500;color:var(--text-2);padding:.5rem 0;transition:color var(--fast) var(--ease)}
.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--text)}
.site-header nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.45em}
.bar .btn{grid-area:cta}
@media (max-width:959px){
  html{scroll-padding-top:16px}
  .site-header{position:static}
  .bar{grid-template-columns:1fr auto;grid-template-areas:"logo cta" "nav nav";gap:.25rem 1rem;padding-top:.75rem}
  .site-header nav ul{justify-content:flex-start;flex-wrap:wrap;gap:0 1.5rem}
  .site-header nav a{padding:.65rem 0}
}
@media (max-width:380px){.bar .btn{white-space:normal;text-align:center;line-height:1.2;padding:.5rem .75rem;letter-spacing:.08em}}

/* buttons: primary solid, tertiary label over a 2px rule ----------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:0 1.75rem;border:0;border-radius:0;
  background:var(--btn-bg);color:var(--btn-fg);
  font:700 .8125rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.btn:hover{background:var(--btn-bg-hover)}
.btn:active{background:var(--btn-bg-active)}
.btn:disabled,.btn[aria-disabled=true]{background:var(--ink-700);color:var(--ink-400);cursor:not-allowed}
.btn-sm{min-height:44px;padding:0 1.25rem;font-size:.75rem}
.link{
  display:inline-flex;gap:.5rem;align-items:center;padding-bottom:4px;
  font:700 .8125rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);border-bottom:2px solid var(--text);transition:border-color var(--fast) var(--ease);
}
.link:hover{border-bottom-color:var(--accent)}
.tile .link{margin-top:1rem}
/* inline links inside running text keep the body voice */
p .link,dd .link,li .link{display:inline;padding:0;font:inherit;font-weight:600;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--line-strong)}
p .link:hover,dd .link:hover,li .link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.prose a,.faq a,.status a,.check a,.legal a{color:var(--text);border-bottom:1px solid var(--line-strong);transition:var(--fast) var(--ease)}
.prose a:hover,.faq a:hover,.status a:hover,.check a:hover,.legal a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* hero ------------------------------------------------------------------ */
.hero{padding-top:clamp(40px,6vw,88px);padding-bottom:calc(var(--section)*.6)}
.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);line-height:.98;letter-spacing:-.032em;text-wrap:balance;overflow-wrap:break-word}
.hero .lead{margin-top:clamp(1.5rem,3vw,2rem);font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.5;letter-spacing:-.008em;color:var(--text-2);max-width:52ch;text-wrap:pretty}
.cta{margin-top:clamp(2rem,4vw,2.5rem);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.cta-price{margin-top:1.25rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hero+article.section{padding-top:0}
.aurora{
  position:relative;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.92) 100%),url(/img/aurora.webp?v=5f4431da) center/cover;
}
.hero.aurora{padding-block:clamp(48px,6vw,80px);min-height:clamp(480px,66vh,640px);display:flex;align-items:center}
.hero-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero-split h1{font-size:clamp(2.5rem,4.8vw,4.25rem)}
.hero-eyebrow{display:flex;align-items:center;gap:1rem;margin:0 0 1.25rem;font:500 .8125rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.hero-eyebrow .hero-ico{display:block;width:56px;height:56px}
.hero-eyebrow .of{margin-left:.5rem;color:var(--text-3);letter-spacing:.08em}
.hero-eyebrow .of a{color:var(--accent);border-bottom:1px solid var(--accent)}
.hero-shot{margin:0}
.hero-shot img{width:100%;height:auto;border:1px solid var(--line);background:var(--card)}
.hero-shot .caption{margin-top:.6rem}
@media (max-width:899px){
  .hero-split{grid-template-columns:minmax(0,1fr)}
  .hero-shot{max-width:34rem}
}

/* closing band: aurora ---------------------------------------------------- */
.final{padding-block:0 var(--section)}
.final .wrap{padding:clamp(40px,7vw,80px) clamp(24px,5vw,64px);background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url(/img/aurora.webp?v=5f4431da) center/cover}
.final h2{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1;letter-spacing:-.028em;max-width:20ch}
.final p{margin-top:1.5rem;color:var(--text-2);max-width:48ch}
.final .btn{margin-top:2rem}

/* facts band under a product hero ----------------------------------------- */
.facts{border-block:1px solid var(--hair);background:var(--raised)}
.facts .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:stretch}
.facts .wrap>div{padding:1.25rem 1.5rem 1.25rem 0}
.facts .wrap>div+div{padding-left:1.5rem;border-left:1px solid var(--hair)}
.facts-k{display:block;font:500 .6875rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.facts p{margin:.5rem 0 0;color:var(--text);font-size:1rem;line-height:1.4}
.facts .facts-price{font:700 1.25rem/1.25 var(--display);letter-spacing:-.012em;color:var(--accent)}
.facts-link{align-self:center;padding-left:1.5rem;border-left:1px solid var(--hair);font:500 .75rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
@media (max-width:999px){
  .facts .wrap{grid-template-columns:minmax(0,1fr)}
  .facts .wrap>div,.facts .wrap>div+div{padding:1rem 0;border-left:0;border-top:1px solid var(--hair)}
  .facts .wrap>div:first-child{border-top:0}
  .facts-link{padding:1rem 0;border-left:0;border-top:1px solid var(--hair)}
}

/* lists and definitions --------------------------------------------------- */
.rows{margin-top:clamp(2.5rem,5vw,4rem)}
.rows>li{display:grid;grid-template-columns:5fr 7fr;gap:1rem 3rem;padding-block:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--hair)}
.rows>li:last-child{border-bottom:1px solid var(--hair)}
.rows h3{font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.2;letter-spacing:-.016em}
.rows p{color:var(--text-2);max-width:56ch}
.defs{margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,6vw,5rem)}
.defs>div{padding-block:1.75rem;border-top:1px solid var(--hair)}
.defs dt{font:700 clamp(1.125rem,1.8vw,1.375rem)/1.2 var(--display);letter-spacing:-.016em}
.defs dd{margin:.6rem 0 0;color:var(--text-2);max-width:44ch}
.lines>div{padding-block:1.4rem;border-top:1px solid var(--hair)}
.lines>div:last-child{border-bottom:1px solid var(--hair)}
.lines dt{font:700 clamp(1.0625rem,1.7vw,1.25rem)/1.25 var(--display);letter-spacing:-.012em}
.lines dd{margin:.5rem 0 0;color:var(--text-2);max-width:56ch}
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.split .h2{max-width:14ch}
.split .lines{margin:0}
.split .stack{display:grid;gap:1.5rem}
.fit{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem)}
.fit h3{font-size:1.375rem;letter-spacing:-.016em;margin-bottom:1.25rem}
.fit li{padding-block:.9rem;border-top:1px solid var(--hair);color:var(--text-2)}
.tagwrap{margin-top:clamp(2rem,4vw,3rem)}
.code{display:block;overflow-x:auto;white-space:pre;padding:1.25rem 1.5rem;background:var(--raised);border:1px solid var(--hair);border-radius:0;font:400 .8125rem/1.6 var(--mono);color:var(--text)}
.code:focus-visible{outline-offset:2px}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags li{padding:.6rem 1rem;border:1px solid var(--line);border-radius:0;font:500 .875rem/1.2 var(--body);color:var(--text);transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.tags li:hover{border-color:var(--accent);background:var(--wash)}
.stats{margin-top:clamp(2.5rem,5vw,4rem);display:flex;flex-wrap:wrap;gap:2rem clamp(2rem,7vw,6rem)}
.stats>div{min-width:9rem}
.stats dt{font:700 clamp(3rem,7vw,5.5rem)/1 var(--display);letter-spacing:-.04em}
.stats dd{margin:.5rem 0 0;color:var(--text-2)}
@media (max-width:899px){.split{grid-template-columns:1fr}}
@media (min-width:900px){.split>.h2{position:sticky;top:104px;align-self:start}}
@media (max-width:719px){.rows>li,.defs,.fit{grid-template-columns:1fr}}

/* price rows -------------------------------------------------------------- */
.price-rows{margin-top:clamp(2rem,4vw,3rem)}
.price-rows>li{display:grid;grid-template-columns:1fr auto;gap:.5rem 2rem;align-items:baseline;padding-block:1.6rem;border-top:1px solid var(--hair)}
.price-rows>li:last-child{border-bottom:1px solid var(--hair)}
.price-rows h3{font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.016em}
.price-rows p{grid-column:1;color:var(--text-2);max-width:52ch}
.price-rows .amount{grid-column:2;grid-row:1;font:700 clamp(1.25rem,2.2vw,1.75rem) var(--display);letter-spacing:-.02em;text-align:right;white-space:nowrap}
.price-rows .amount small{display:block;font:400 .8125rem var(--body);color:var(--text-3);letter-spacing:0}
@media (max-width:599px){.price-rows>li{grid-template-columns:1fr}.price-rows .amount{grid-column:1;grid-row:auto;text-align:left}}

/* faq --------------------------------------------------------------------- */
.faq{margin-top:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--hair)}
.faq details{border-top:1px solid var(--hair)}
.faq summary{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.4rem 0;font:700 clamp(1.0625rem,1.7vw,1.25rem)/1.3 var(--display);letter-spacing:-.012em;cursor:pointer;list-style:none;transition:color var(--fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.75rem/1 var(--mono);color:var(--accent);transition:transform var(--base) var(--ease)}
.faq summary:hover{color:var(--accent)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.5rem;color:var(--text-2);max-width:62ch}

/* form: square, filled, hairline; focus swaps the hairline to mist -------- */
.form{display:grid;gap:1.5rem;max-width:640px}
.field{display:grid;gap:.5rem}
.field label{font-weight:600;font-size:.9375rem}
.field .hint{font-size:.875rem;color:var(--text-3)}
.field .err{font-size:.875rem;color:var(--danger)}
.field .err:empty{display:none}
.field-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem;align-items:start;padding-top:1.25rem;border-top:1px solid var(--hair)}
.gq{grid-column:1/-1;font:700 .9375rem/1.3 var(--body)}
.gq span{margin-left:.5rem;font:500 .6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
input,select,textarea{
  width:100%;min-height:52px;padding:.8rem 1rem;border-radius:0;
  border:1px solid var(--text-3);background:var(--field);color:var(--text);
  font:400 1rem/1.4 var(--body);transition:border-color var(--fast) var(--ease);
}
/* the open list of a select is drawn by the browser: give it an opaque dark ground, or white text lands on white */
select{background-color:var(--ink-800);color-scheme:dark}
select option{background-color:var(--ink-800);color:var(--white)}
select option:checked,select option:hover{background-color:var(--ink-600);color:var(--white)}
textarea{min-height:140px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--focus);outline-offset:0;border-color:var(--focus)}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
.check{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.check input{width:22px;min-height:22px;height:22px;margin:.15rem 0 0;appearance:none;-webkit-appearance:none;border:1px solid var(--line-strong);background:transparent;cursor:pointer}
.check input:checked{background:var(--mist);box-shadow:inset 0 0 0 4px var(--black)}
.check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.check label{font-weight:400;font-size:.9375rem;color:var(--text-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status{padding:1.25rem 1.5rem;border:1px solid var(--line-strong);border-radius:0;max-width:640px}
.status.ok{border-color:var(--accent)}
.status.fail{border-color:var(--danger)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.contact .wrap>.form,.contact .wrap>.status{grid-column:1}
.contact .wrap>.after{grid-column:2;grid-row:1}
.after-steps{counter-reset:s;margin:1rem 0 0;display:grid;gap:1.25rem}
.after-steps li{counter-increment:s;position:relative;padding-left:2.5rem;color:var(--text-2)}
.after-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;font:500 .75rem/1.6 var(--mono);color:var(--accent)}
.after-steps strong{display:block;color:var(--text)}
@media (max-width:899px){.contact .wrap{grid-template-columns:minmax(0,1fr)}.contact .wrap>.after{grid-column:1;grid-row:auto}}
@media (max-width:599px){.field-group{grid-template-columns:minmax(0,1fr)}}

/* prose pages and blog articles ------------------------------------------- */
.prose h2{font-size:1.5rem;letter-spacing:-.016em;margin:2.5rem 0 .75rem}
.prose h3{font-size:1.25rem;letter-spacing:-.012em;margin:2rem 0 .5rem}
.prose h4{font-size:1.0625rem;margin:1.5rem 0 .4rem}
.prose p,.prose li{color:var(--text-2);max-width:68ch}
.prose ul{list-style:disc;padding-left:1.25rem}
.prose li{margin-top:.4rem}
.prose ul+p{margin-top:1rem}
.prose p+p,.prose ul+p,.prose ol+p,.prose p+ul,.prose p+ol,.prose blockquote{margin-top:1.1rem}
.prose blockquote{padding-left:1.25rem;border-left:2px solid var(--accent);color:var(--text-2);max-width:68ch}
.posts{margin:1.5rem 0 3rem;border-top:1px solid var(--hair)}
.posts li{border-bottom:1px solid var(--hair)}
.post{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.5rem 2rem;padding:1.5rem 0;color:var(--text)}
.post time{font:500 .75rem/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.post h3{font:700 1.25rem/1.25 var(--display);letter-spacing:-.012em;transition:color var(--fast) linear}
.post p{margin-top:.4rem;color:var(--text-2);font-size:.9375rem;line-height:1.5;max-width:70ch}
.post:hover h3,.post:focus-visible h3{color:var(--accent)}
@media (max-width:699px){.post{grid-template-columns:minmax(0,1fr)}}

/* footer ------------------------------------------------------------------ */
.site-footer{border-top:1px solid var(--hair);padding-block:3.5rem 2.5rem;color:var(--text-2);font-size:.9375rem}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem 2rem}
.foot .logo{color:var(--text);display:inline-block;margin-bottom:.75rem}
.foot-brand p{max-width:30ch}
.foot-brand p+p{margin-top:.75rem}
.foot h2{font:500 .6875rem/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:1rem}
.foot li+li{margin-top:.6rem}
.foot a{transition:color var(--fast) var(--ease)}
.foot a:hover{color:var(--accent)}
.legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hair);font-size:.8125rem;color:var(--text-3)}
@media (max-width:959px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:479px){.foot{grid-template-columns:minmax(0,1fr)}}

/* flows: block diagrams in plain HTML, hairlines and one accent ----------- */
.flow{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));counter-reset:step}
.flow-3{--cols:3}.flow-4{--cols:4}.flow-5{--cols:5}
.node{position:relative;padding:clamp(1.1rem,2vw,1.5rem);border:1px solid var(--line);background:var(--card);margin-left:-1px}
.flow>.node{display:flex;flex-direction:column;counter-increment:step}
.flow>.node:first-child{margin-left:0}
.flow>.node>p{flex:1 1 auto}
.node-k{display:block;margin-bottom:.6rem;font:500 .6875rem/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);font-variant-numeric:lining-nums}
.flow>.node .node-k::before{content:counter(step,decimal-leading-zero);margin-right:.7rem;font-family:var(--mono);letter-spacing:.04em;color:var(--accent)}
.node-t{display:block;font:700 1.125rem/1.2 var(--display);letter-spacing:-.012em;color:var(--text)}
.node p{margin-top:.5rem;color:var(--text-2);font-size:.9375rem;line-height:1.5}
.node-accent{border-color:var(--accent)}
.flow>.node+.node::before{content:"\2192";position:absolute;left:0;top:50%;transform:translate(-50%,-50%);padding:.15rem .25rem;background:var(--canvas);color:var(--accent);font:700 1rem/1 var(--display);z-index:1}
@media (max-width:899px){
  .flow-3{grid-template-columns:minmax(0,1fr)}
  .flow-3>.node{margin-left:0;margin-top:-1px}
  .flow-3>.node:first-child{margin-top:0}
  .flow-3>.node+.node::before{content:"\2193";left:50%;top:0}
}
@media (max-width:1019px){
  .flow-4{grid-template-columns:minmax(0,1fr)}
  .flow-4>.node{margin-left:0;margin-top:-1px}
  .flow-4>.node:first-child{margin-top:0}
  .flow-4>.node+.node::before{content:"\2193";left:50%;top:0}
}
@media (max-width:1119px){
  .flow-5{grid-template-columns:minmax(0,1fr)}
  .flow-5>.node{margin-left:0;margin-top:-1px}
  .flow-5>.node:first-child{margin-top:0}
  .flow-5>.node+.node::before{content:"\2193";left:50%;top:0}
}

/* tiles ------------------------------------------------------------------- */
.tiles{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.tiles-2{--cols:2}.tiles-3{--cols:3}.tiles-4{--cols:4}
.tile{padding:clamp(1.1rem,2vw,1.5rem);background:var(--card)}
.tile h3{font-size:1.0625rem;letter-spacing:-.012em}
.tile p{margin-top:.5rem;color:var(--text-2);font-size:.9375rem;line-height:1.5}
.tile-accent{box-shadow:inset 0 2px 0 var(--accent)}
.tile .ai{margin-top:.9rem}
@media (max-width:1019px){.tiles-4{--cols:2}}
@media (max-width:759px){.tiles-2,.tiles-3,.tiles-4{--cols:1}}

/* the parts of AI Studio, under one accent rule --------------------------- */
.parts{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-top:2px solid var(--accent);background:var(--line)}
.part{position:relative;display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.25rem,2.4vw,1.75rem);background:var(--card);transition:background var(--fast) linear}
.part:hover,.part:focus-within{background:var(--ink-700)}
.part:focus-within{outline:2px solid var(--focus);outline-offset:-2px}
.part-ico{width:72px;height:72px;box-shadow:0 12px 26px rgba(0,0,0,.6)}
.part h3{font:700 1.375rem/1.15 var(--display);letter-spacing:-.02em}
.part p{color:var(--text-2);font-size:.9375rem;line-height:1.5}
p.part-price{font:700 1.125rem/1.3 var(--display);color:var(--text)}
.part-a{margin-top:auto;padding-top:.5rem;font:500 .75rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.part-a::after{content:"";position:absolute;inset:0}
.part:hover .part-a,.part:focus-within .part-a{color:var(--accent)}
.part-a:focus-visible{outline:none}
.ai{align-self:flex-start;display:inline-block;padding:.25rem .55rem;border:1px solid var(--line-strong);font:500 .6875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.ai-up{border-color:var(--accent);color:var(--accent)}
@media (max-width:1119px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.parts{grid-template-columns:minmax(0,1fr)}}

/* comparison: the muted side against the highlighted one ------------------ */
.vs{margin-top:clamp(2rem,4vw,3rem);border:1px solid var(--line);background:var(--card)}
.vs-row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr) minmax(0,1.5fr);border-top:1px solid var(--hair)}
.vs-row:first-child{border-top:0}
.vs-k{align-self:center;padding:1rem 1.25rem;font:500 .6875rem/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.vs-a,.vs-b{position:relative;padding:1rem 1.25rem 1rem 3.1rem;font-size:.9375rem;line-height:1.45}
.vs-a{background:var(--raised);color:var(--text-3)}
.vs-b{background:rgba(135,175,174,.11);color:var(--text);font-weight:600}
.vs-head .vs-a,.vs-head .vs-b{padding:1rem 1.25rem;font:700 1rem/1.25 var(--display);letter-spacing:-.01em}
.vs-head .vs-a{background:var(--ink-700);color:var(--text-2)}
.vs-head .vs-b{background:var(--accent);color:var(--black)}
.vs i{position:absolute;left:1.25rem;top:1.1rem;width:18px;height:18px}
.vs i.x::before,.vs i.x::after{content:"";position:absolute;left:8px;top:1px;width:2px;height:16px;background:var(--danger);transform:rotate(45deg)}
.vs i.x::after{transform:rotate(-45deg)}
.vs i.ok::before{content:"";position:absolute;left:2px;top:2px;width:13px;height:7px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
@media (max-width:759px){
  .vs-head{display:none}
  .vs-row{grid-template-columns:minmax(0,1fr)}
  .vs-k{padding-bottom:.4rem}
  .vs-a::before,.vs-b::before{content:attr(data-k);display:block;margin-bottom:.2rem;font:500 .6875rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
}

/* cost calculator --------------------------------------------------------- */
.calc{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);background:var(--card)}
.calc-in{display:grid;gap:1.25rem;padding:clamp(1.25rem,2.4vw,1.75rem)}
.calc-out{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.25rem,2.4vw,1.75rem);border-left:1px solid var(--accent);background:rgba(135,175,174,.11)}
.calc-k{font:500 .6875rem/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.calc-v{margin-bottom:1rem;font:700 clamp(1.75rem,3vw,2.25rem)/1.1 var(--display);letter-spacing:-.02em;color:var(--text)}
.calc-empty,.calc-n{color:var(--text-2);font-size:.9375rem;line-height:1.5}
@media (max-width:759px){.calc{grid-template-columns:minmax(0,1fr)}.calc-out{border-left:0;border-top:1px solid var(--accent)}}

/* motion ------------------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fillx{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead,.hero .cta{animation:enter 700ms var(--ease) both}
  .hero .lead{animation-delay:80ms}
  .hero .cta{animation-delay:160ms}
  .hero-shot{animation:enter 800ms var(--ease) 220ms both}
  @supports (animation-timeline:view()){
    /* forwards only: outside the entry range the element stays visible (crawlers, print, full-page capture) */
    .reveal,.lines>div{animation:rise linear forwards;animation-timeline:view();animation-range:entry 0% entry min(70%,240px)}
    /* the flow fills its top rule step by step while it scrolls into view */
    .flow>.node::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:fillx linear both;animation-timeline:view();animation-range:entry 35% cover 30%}
    .flow>.node:nth-child(2)::after{animation-range:entry 45% cover 35%}
    .flow>.node:nth-child(3)::after{animation-range:entry 55% cover 40%}
    .flow>.node:nth-child(4)::after,.flow>.node:nth-child(5)::after{animation-range:entry 65% cover 45%}
  }
}

/* home: research atlas in the hero (the fields take turns, a click picks one) */
.atlas{width:100%;max-width:700px;justify-self:end}
.atlas-stage{margin:0;aspect-ratio:8/5;border:1px solid var(--line);background:radial-gradient(70% 90% at 50% 0%,rgba(135,175,174,.14),transparent 70%),#050505;overflow:hidden}
.atlas-stage img{width:100%;height:100%;object-fit:contain;transition:opacity 160ms linear}
.atlas-stage img.out{opacity:0}
.atlas-list{margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}
.atlas-list a{position:relative;display:block;padding:.65rem 0;border-top:1px solid var(--hair);font:500 .75rem/1.3 var(--mono);letter-spacing:.03em;color:var(--text-3);transition:color var(--fast) linear}
.atlas-list a:hover,.atlas-list a:focus-visible,.atlas-list a[aria-current]{color:var(--text)}
.atlas-list a::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.atlas-list a[aria-current]::before{animation:fillx 6s linear forwards}
.atlas.paused .atlas-list a[aria-current]::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.atlas-list a[aria-current]::before{animation:none;transform:none}.atlas-stage img{transition:none}}
@media (max-width:899px){.atlas{justify-self:center;max-width:34rem}}
@media (max-width:479px){.atlas-list{grid-template-columns:minmax(0,1fr)}}

/* home: the product, a large wordmark and five numbered parts */
.product{overflow:hidden}
.ghost{margin:0 0 clamp(1rem,3vw,2rem);font:700 clamp(4.5rem,15vw,12rem)/.85 var(--display);letter-spacing:-.045em;color:rgba(255,255,255,.07);white-space:nowrap;user-select:none}
.product-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.numbered{counter-reset:n;border-top:1px solid var(--line)}
.numbered li{counter-increment:n;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.25rem 1rem;padding:1.25rem 0;border-bottom:1px solid var(--hair)}
.numbered li::before{content:counter(n,decimal-leading-zero);grid-row:1/3;font:500 .75rem/1.9 var(--mono);color:var(--accent)}
.numbered b{font:700 1.125rem/1.25 var(--display);letter-spacing:-.012em;color:var(--text)}
.numbered li:first-child b{color:var(--accent)}
.numbered span{color:var(--text-2);font-size:.9375rem;line-height:1.5;max-width:52ch}
@media (max-width:899px){.product-grid{grid-template-columns:minmax(0,1fr)}}

/* research page: every field, with its drawing */
.rfields{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line)}
.rfield{padding-bottom:1.25rem;background:var(--card)}
.rfield img{width:100%;aspect-ratio:8/5;border-bottom:1px solid var(--hair);background:radial-gradient(70% 90% at 50% 0%,rgba(135,175,174,.14),transparent 70%),#050505}
.rfield h3{margin:1rem 1.25rem 0;font:700 1.0625rem/1.2 var(--display);letter-spacing:-.012em}
.rfield p{margin:.5rem 1.25rem 0;color:var(--text-2);font-size:.9375rem;line-height:1.5}
.rfield:target{box-shadow:inset 0 2px 0 var(--accent)}
@media (max-width:1119px){.rfields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.rfields{grid-template-columns:minmax(0,1fr)}}

/* menu: the product stands out; cookie banner; legal links; outline button */
.site-header nav a.key{padding:.4rem .85rem;border:1px solid var(--accent);color:var(--text);font-weight:700;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.site-header nav a.key:hover{background:var(--accent);color:var(--black)}
.site-header nav a.key[aria-current]{text-decoration:none;background:var(--accent);color:var(--black)}
.legal-links{margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.8125rem}
.legal-links a{transition:color var(--fast) var(--ease)}
.legal-links a:hover{color:var(--accent)}
.consent{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:80;max-width:46rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;padding:1.1rem 1.25rem;background:var(--ink-800);border:1px solid var(--line-strong);box-shadow:0 18px 40px rgba(0,0,0,.6)}
.consent p{flex:1 1 20rem;font-size:.875rem;line-height:1.5;color:var(--text-2)}
.consent a{color:var(--text);border-bottom:1px solid var(--line-strong)}
.consent-act{display:flex;gap:.75rem}
.consent[hidden]{display:none}
.legal-page h2{scroll-margin-top:96px}
.prefs{margin-top:1rem}