/* =====================================================================
   kadux.io
   Colour and component values come from the Kadux app itself
   (sunset-arc/src/index.css Cobalt + Midnight schemes, src/styles/kadux.css).
   Page structure is locked to Auxia's "cobalt connected systems" (Refero
   d54fb7b8): low-left promise under a routed thread, a dark tension chapter,
   alternating chapters joined by a route, blue assurance tiles, a blue
   closing field that runs into a monumental name. See DESIGN.md.

   TYPE SCALE (phone -> desktop), Plus Jakarta Sans + JetBrains Mono:
     display 46/1.0 -> 96/.95   h2 34/1.04 -> 58/.98   h3 22/1.2
     lead 19/1.5   body 17/1.6   support 15/1.5   mono label 13 uppercase
   Nothing readable below 13px. Touch targets 44px minimum.
   ===================================================================== */

@font-face{font-family:"Jakarta";src:url(/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jakarta";src:url(/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jakarta";src:url(/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Jakarta";src:url(/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"KMono";src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* Cobalt scheme, verbatim from the app */
  --bg:#eef3fc; --surface:#ffffff; --surface-2:#f0f5ff; --surface-3:#e6eefc;
  --line:#dce5f3; --line-2:#bdcce3;
  --t1:#12223d; --t2:#50617b; --t3:#53647e;
  --accent:#2458e8; --accent-ink:#1944bd; --on-accent:#ffffff;
  --accent-soft:#e4ecff; --accent-line:#b3c7f4;
  --ok:#0a6b4b; --ok-soft:#e0f1e9;
  --warn:#96307c; --warn-soft:#f7e6f3;
  --bad:#b22c30; --bad-soft:#fce6e4;
  --cat-money:#493c76; --cat-money-bg:#e0daff;
  --cat-customers:#00525f; --cat-customers-bg:#bce9f2;
  --cat-messages:#004f6f; --cat-messages-bg:#bfe6fc;
  --cat-supplies:#6f360d; --cat-supplies-bg:#fbd7c4;
  --cat-numbers:#404952; --cat-numbers-bg:#dbe0e5;
  --shadow:0 2px 3px rgba(20,49,99,.025), 0 12px 28px -18px rgba(20,49,99,.22);
  /* Auxia's floating plate, re-tinted to the Kadux navy */
  --float:0 101px 101px 0 rgba(18,34,61,.06), 0 25px 56px 0 rgba(18,34,61,.10);

  /* Midnight scheme, for dark chapters */
  --m-bg:#08152b; --m-surface:#10233b; --m-surface-2:#142b46; --m-line:#253f5c; --m-line-2:#365675;
  --m-t1:#f3f7ff; --m-t2:#b1c5df; --m-t3:#a5bad4; --m-accent:#389dff; --m-accent-ink:#9cccff;

  /* The closing field. #1944bd (the app's accent-ink) so white body text
     clears 4.5:1 comfortably; the brighter #2458e8 stays the button fill. */
  --field:#1944bd; --field-ink:#ffffff; --field-muted:#dbe6ff;

  --font:"Jakarta",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"KMono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1232px; --pad:20px;
  --r-ctl:12px; --r-plate:24px; --r-card:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:17px;height:17px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--t3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--t1);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
@media (min-width:768px){:root{--pad:40px}}

/* ------------------------------------------------------------ buttons
   Auxia: compact rounded rectangles, 12px radius, never capsules.
   Ranked by importance: one primary per view, quiet beside it. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;
  border-radius:var(--r-ctl);border:1px solid transparent;font:inherit;font-size:16px;font-weight:600;line-height:1.2;
  text-decoration:none;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn--sm{min-height:44px;padding:0 16px;font-size:15px}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-ink)}
.btn--primary:active{background:#14379a}
.btn--quiet{background:var(--surface);color:var(--t1);border-color:var(--line-2)}
.btn--quiet:hover{border-color:var(--t3)}
.btn--quiet:active{background:var(--surface-2)}
.btn--reverse{background:#fff;color:var(--accent-ink)}
.btn--reverse:hover{background:var(--t1);color:#fff}
.btn--ghostrev{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghostrev:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.field :focus-visible,.tiles :focus-visible{outline-color:#fff}

/* ------------------------------------------------------------ nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.nav__in{max-width:1440px;margin:0 auto;padding:0 var(--pad);height:68px;display:flex;align-items:center;gap:16px}
.wordmark{font-size:26px;font-weight:700;letter-spacing:-.045em;text-decoration:none;color:var(--t1);line-height:1;
  min-height:44px;display:inline-flex;align-items:center}
.nav__links{display:none}
.nav__acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav__signin{display:none}
.menu{position:relative}
.menu__btn{list-style:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;color:var(--t1)}
.menu__btn::-webkit-details-marker{display:none}
.menu__btn::marker{content:""}
.menu__btn:hover{background:var(--surface-2)}
.menu[open] .menu__btn{background:var(--surface)}
.menu__panel{position:absolute;right:0;top:52px;width:min(280px,calc(100vw - 32px));background:var(--surface);border-radius:16px;
  box-shadow:var(--float);padding:8px;display:flex;flex-direction:column}
.menu__panel a{min-height:48px;display:flex;align-items:center;padding:0 14px;border-radius:10px;text-decoration:none;font-weight:500}
.menu__panel a:hover{background:var(--surface-2)}
@media (min-width:960px){
  .nav__links{display:flex;gap:4px;margin-left:24px}
  .nav__links a,.nav__signin{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;
    text-decoration:none;font-size:15px;font-weight:500;color:var(--t2)}
  .nav__links a:hover,.nav__signin:hover{color:var(--t1);background:var(--surface-2)}
  .menu{display:none}
}

/* ------------------------------------------------------------ hero
   Auxia "dedicated product opening": top-left promise, right-hand support
   and actions, then a lower product scene. A faint routed thread runs
   across the upper field. */
.hero{position:relative;padding:28px 0 0}
.thread{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;overflow:hidden}
.thread svg{width:100%;height:120px}
.thread path{fill:none;stroke:var(--line-2);stroke-width:2}
.thread .seg{stroke:var(--accent)}
.hero__in{position:relative;padding-top:96px}
.hero h1{font-size:clamp(46px,11.6vw,96px);line-height:1;font-weight:600;letter-spacing:-.045em;max-width:14ch;text-wrap:balance}
.hero__side{margin-top:24px;max-width:46ch}
.hero__lede{font-size:19px;line-height:1.5;color:var(--t2)}
.hero__lede strong{color:var(--t1);font-weight:600}
.hero__acts{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.hero__acts .btn{flex:1 1 180px}
.hero__fine{margin-top:16px;font-size:15px;color:var(--t2)}
@media (min-width:1024px){
  .hero__in{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:end;padding-top:150px}
  .hero h1{line-height:.95}
  .hero__side{margin:0 0 6px}
  .hero__acts .btn{flex:0 0 auto}
}

/* The scene: one sample job, sentence to running agent, as three app
   panels joined by the route. Panels are drawn with the app's own
   components (cards, pills, avatars, the How it decides block). */
.scene{position:relative;margin-top:64px;padding:28px 0 72px}
.scene__label{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.scene__label::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
.steps{display:grid;gap:40px;position:relative;list-style:none;padding:0;margin:0}
.step{position:relative;min-width:0}
.step__n{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.step__n b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:999px;min-width:34px;height:26px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
.step__n span{font-size:15px;font-weight:600;color:var(--t1);position:relative;z-index:1}
@media (min-width:1024px){.step__n span{background:var(--bg);padding-right:10px}}
.step__n b{position:relative;z-index:1;box-shadow:0 0 0 6px var(--bg)}
/* the vertical route on phones */
.steps::before{content:"";position:absolute;left:16px;top:30px;bottom:30px;width:2px;background:var(--line-2);z-index:0}
.step .plate{position:relative;z-index:1}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
  .steps::before{left:6%;right:6%;top:13px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--line-2) 0 62%,var(--accent) 62% 100%)}
  .step:nth-child(2){margin-top:56px}
  .step:nth-child(3){margin-top:112px}
}

/* ------------------------------------------------------------ app plates */
.plate{background:var(--surface);border-radius:var(--r-plate);box-shadow:var(--float);padding:18px;color:var(--t1);
  font-size:15px;line-height:1.45;max-width:440px}
.plate__bar{display:flex;align-items:center;gap:10px;min-height:36px;margin-bottom:12px}
.plate__bar .wm{font-size:16px;font-weight:700;letter-spacing:-.03em}
.plate__bar .sp{flex:1}
.ask{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:600}
.plate h4{margin:0;font-size:20px;line-height:1.25;font-weight:650;letter-spacing:-.01em}
.plate .sub{color:var(--t2);font-size:15px;margin-top:4px}
.bub{border-radius:18px;padding:12px 14px;font-size:15px;line-height:1.45;max-width:92%}
.bub--me{margin-left:auto;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.bub--k{background:var(--surface-2);border-bottom-left-radius:6px;margin-top:10px}
.qcard{margin-top:10px;border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.qcard p{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);font-size:14px;font-weight:600;color:var(--t1);background:var(--surface)}
.chip--on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.composer{margin-top:14px;display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:14px;padding:6px 6px 6px 14px;color:var(--t3);font-size:15px}
.composer span{flex:1}
.composer i{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--t2)}
.composer i.go{background:var(--accent);color:#fff}

.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:99px;background:currentColor;flex:none}
.pill--live{background:var(--ok-soft);color:var(--ok)}
.pill--wait{background:var(--warn-soft);color:var(--warn)}
.pill--wait i{border-radius:1px;transform:rotate(45deg)}
.pill--off{background:var(--surface-2);color:var(--t3)}
.pill--off i{background:none;box-shadow:inset 0 0 0 1.6px currentColor}
.pill--act{background:var(--accent-soft);color:var(--accent-ink)}
.pill--bad{background:var(--bad-soft);color:var(--bad)}
.pill--bad i{border-radius:1.5px}

.avat{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--surface-2);color:var(--t2)}
.avat--money{background:var(--cat-money-bg);color:var(--cat-money)}
.avat--customers{background:var(--cat-customers-bg);color:var(--cat-customers)}
.avat--messages{background:var(--cat-messages-bg);color:var(--cat-messages)}
.avat--supplies{background:var(--cat-supplies-bg);color:var(--cat-supplies)}
.avat--numbers{background:var(--cat-numbers-bg);color:var(--cat-numbers)}

.prop__head{display:flex;gap:12px;align-items:flex-start}
.prop__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.decides{margin-top:14px}
.decides__title{font-size:13px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);min-height:28px;display:flex;align-items:center}
.decides__row{padding:9px 0;border-top:1px solid var(--line)}
.decides__row:last-child{border-bottom:1px solid var(--line)}
.decides__q{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;font-weight:650;color:var(--t2)}
.decides__q .pill{height:22px;padding:0 8px;font-size:12px}
.decides__a{margin-top:3px;font-size:15px;line-height:1.45}
.decides__hint{margin-top:10px;font-size:13px;color:var(--t2)}
.make{margin-top:14px;width:100%;min-height:48px;border-radius:14px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px}

.rows{margin-top:4px}
.row{display:flex;align-items:center;gap:12px;padding:11px 4px}
.row + .row{border-top:1px solid var(--line)}
.row__mid{flex:1;min-width:0}
.row__t{font-weight:600;font-size:15px;line-height:1.3}
.row__m{font-size:13px;color:var(--t3);line-height:1.38;margin-top:2px}
.act{padding:11px 0;border-top:1px solid var(--line)}
.act:first-of-type{border-top:0}
.act__when{font-size:13px;color:var(--t3)}
.act__what{margin-top:2px;font-size:15px}
.act .pill{margin-top:6px}
.needs{margin-top:10px;background:var(--warn-soft);border-radius:14px;padding:12px 14px}
.needs b{display:flex;align-items:center;gap:8px;color:var(--warn);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:650}
.needs b i{width:7px;height:7px;background:currentColor;border-radius:1px;transform:rotate(45deg)}
.needs p{margin-top:4px;font-size:15px}

.filters{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.f{height:34px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;background:var(--surface-2);color:var(--t2)}
.f--on{background:var(--t1);color:#fff}
.shelf__cat{margin-top:14px}
.card{border:1px solid var(--line);border-radius:var(--r-card);padding:14px;margin-top:8px}
.card__top{display:flex;gap:12px;align-items:center}
.card__b{margin-top:8px;color:var(--t2);font-size:15px}
.card__foot{margin-top:10px;display:flex;align-items:center;gap:8px}
.card__foot .use{margin-left:auto;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);display:inline-flex;align-items:center;font-size:14px;font-weight:600}

/* ------------------------------------------------------------ dark chapter
   Auxia "tension and resolution", in the app's Midnight scheme. */
.dark{background:var(--m-bg);color:var(--m-t1);padding:88px 0}
.dark .mono{color:var(--m-t3)}
.split{display:grid;gap:28px}
.dark h2,.h2{font-size:clamp(34px,7.4vw,58px);line-height:1.04;font-weight:600;letter-spacing:-.04em;text-wrap:balance}
.dark h2 .dim{color:var(--m-t3)}
.dark .split p{color:var(--m-t2);font-size:17px;line-height:1.6;max-width:56ch}
.dark .split p + p{margin-top:14px}
.versus{display:grid;gap:12px;margin-top:48px}
.vpanel{border-radius:var(--r-plate);padding:28px 22px 26px;position:relative;overflow:hidden}
.vpanel--guess{border:1px solid var(--m-line);
  background-image:radial-gradient(circle,rgba(165,186,212,.16) 1.6px,transparent 1.8px);background-size:24px 24px}
.vpanel--ask{background:var(--accent);color:#fff;
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 1.6px,transparent 1.8px);background-size:24px 24px}
.vpanel h3{font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.vpanel--guess h3{color:var(--m-t2)}
.vlist{margin-top:20px;display:grid;gap:10px}
.vlist li{display:flex;gap:12px;align-items:flex-start;background:var(--m-bg);border:1px solid var(--m-line);border-radius:14px;padding:12px 14px;color:var(--m-t1);font-size:15px;line-height:1.45}
.vlist .x{flex:none;margin-top:3px;width:18px;height:18px;color:#f0776e}
.alist{margin-top:20px;display:grid;gap:10px}
.alist li{background:#fff;color:var(--t1);border-radius:14px;padding:12px 14px}
.alist .q{font-size:13px;font-weight:650;color:var(--t2)}
.alist .a{font-size:15px;line-height:1.45;margin-top:2px}
@media (min-width:1024px){
  .dark{padding:150px 0}
  .split{grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}
  .versus{grid-template-columns:1fr 1fr;gap:16px;margin-top:80px}
  .vpanel{padding:40px}
}

/* ------------------------------------------------------------ chapters */
.sec{padding:88px 0}
.sec__intro{max-width:780px}
.sec__intro p{margin-top:16px;color:var(--t2);font-size:19px;line-height:1.5;max-width:58ch}
.sec__intro p.mono{margin-top:0;font-size:13px;line-height:1.4;color:var(--t3)}
.chapters{margin-top:56px;display:grid;gap:0}
.chap{display:grid;gap:28px;padding:8px 0}
.chap__text .mono{color:var(--accent-ink)}
.chap h3{margin-top:12px;font-size:clamp(28px,5.6vw,44px);line-height:1.06;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.chap__text > p{margin-top:16px;color:var(--t2);max-width:52ch}
.points{margin-top:22px;display:grid;gap:12px}
.points li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5}
.points li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--accent)}
.chap .plate{width:100%;margin:0 auto}
/* the route between chapters */
.route{height:72px;margin:8px 0;position:relative}
.route::before{content:"";position:absolute;left:24%;right:24%;top:0;height:50%;border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);border-bottom-right-radius:28px}
.route::after{content:"";position:absolute;left:24%;right:76%;top:50%;bottom:0;border-left:2px solid var(--line-2);border-top:2px solid var(--line-2);border-top-left-radius:28px;width:0}
.route--rev::before{border-right:0;border-left:2px solid var(--line-2);border-bottom-right-radius:0;border-bottom-left-radius:28px}
.route--rev::after{left:76%;right:24%;border-left:0;border-right:2px solid var(--line-2);border-top-left-radius:0;border-top-right-radius:28px}
@media (min-width:1024px){
  .sec{padding:140px 0}
  .chap{grid-template-columns:504px 1fr;gap:80px;align-items:center}
  .chap--flip .chap__text{order:2}
  .chap .plate{max-width:460px}
  .route{height:110px}
}

/* ------------------------------------------------------------ suite grid
   Auxia "application cards": outlined, flat, icon high, one job each. */
.suite{display:grid;gap:12px;margin-top:48px}
.app{border:1px solid var(--line-2);border-radius:var(--r-plate);padding:22px;min-height:190px;display:flex;flex-direction:column}
.app .avat{width:44px;height:44px;border-radius:13px;background:var(--surface);color:var(--t1);border:1px solid var(--line)}
.app h3{margin-top:auto;padding-top:28px;font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.app p{margin-top:6px;color:var(--t2);font-size:15px;line-height:1.5}
@media (min-width:640px){.suite{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.suite{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:64px}}

/* ------------------------------------------------------------ assurance */
.assure{padding:0 0 88px}
.assure .sec__intro{text-align:left}
.tiles{display:grid;gap:4px;margin-top:40px}
.tile{background:var(--accent);color:#fff;border-radius:var(--r-plate);padding:30px 22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.6px,transparent 1.8px);background-size:22px 22px;box-shadow:var(--float)}
.tile .ic{width:30px;height:30px;stroke-width:1.5}
.tile p{margin-top:28px;font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.assure__fine{margin-top:28px;max-width:70ch;color:var(--t2);font-size:16px}
.assure__fine a{color:var(--accent-ink);font-weight:600;text-underline-offset:3px}
@media (min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr)}.assure{padding:0 0 140px}}

/* ------------------------------------------------------------ pricing */
.pricing{background:var(--surface);padding:88px 0;border-top:1px solid var(--line)}
.plans{display:grid;gap:12px;margin-top:44px}
.plan{border:1px solid var(--line-2);border-radius:var(--r-plate);padding:24px 22px;display:flex;flex-direction:column;background:var(--surface)}
.plan--free{background:var(--bg);border-color:var(--accent-line)}
.plan__name{font-size:20px;font-weight:650;letter-spacing:-.01em}
.plan__for{margin-top:4px;color:var(--t2);font-size:15px;line-height:1.5;min-height:3em}
.plan__price{margin-top:18px;display:flex;align-items:baseline;gap:6px}
.plan__price b{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan__price span{color:var(--t2);font-size:15px}
.plan__cred{margin-top:8px;font-weight:600;font-variant-numeric:tabular-nums}
.plan .btn{margin-top:20px;width:100%}
.plan__list{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:10px;font-size:15px;line-height:1.45}
.plan__list .lead{font-weight:600;color:var(--t2);font-size:14px}
.plan__list li{display:flex;gap:10px}
.plan__list li .ic{width:17px;height:17px;margin-top:2px;color:var(--ok)}
.plan__list li.lead{display:block}
.ent{margin-top:12px;border:1px solid var(--line-2);border-radius:var(--r-plate);padding:24px 22px;display:grid;gap:16px;align-items:center}
.ent h3{font-size:20px;font-weight:650}
.ent p{color:var(--t2);font-size:15px;margin-top:4px}
.yard{margin-top:28px;display:grid;gap:4px;max-width:78ch;color:var(--t2);font-size:15px}
.yard strong{color:var(--t1)}
@media (min-width:720px){.plans{grid-template-columns:1fr 1fr}.ent{grid-template-columns:1fr auto}}
@media (min-width:1180px){.plans{grid-template-columns:repeat(4,1fr);gap:16px}.pricing{padding:140px 0}}

/* ------------------------------------------------------------ faq */
.faq{padding:88px 0}
.faq__grid{display:grid;gap:32px}
.qa{border-top:1px solid var(--line-2)}
.qa:last-child{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none;display:flex;align-items:center;gap:16px;min-height:64px;cursor:pointer;font-size:18px;font-weight:600;padding:8px 0}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:""}
.qa summary .ic{margin-left:auto;color:var(--t2);transition:transform .2s ease}
.qa[open] summary .ic{transform:rotate(45deg)}
.qa summary:hover{color:var(--accent-ink)}
.qa > p{padding:0 0 22px;color:var(--t2);max-width:64ch}
.qa a{color:var(--accent-ink);font-weight:600;text-underline-offset:3px}
@media (min-width:1024px){.faq{padding:140px 0}.faq__grid{grid-template-columns:1fr 1.4fr;gap:80px}}

/* ------------------------------------------------------------ closing + footer
   One continuous blue territory: the call, then the name, then links. */
.field{background:var(--field);color:var(--field-ink);position:relative;isolation:isolate}
.field::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.6px,transparent 1.8px);background-size:40px 40px;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);mask-image:linear-gradient(180deg,#000 30%,transparent 100%)}
.close{padding:96px 0 40px}
.close h2{font-size:clamp(38px,8vw,64px);line-height:1.02;font-weight:600;letter-spacing:-.04em;max-width:15ch;text-wrap:balance}
.close p{margin-top:18px;font-size:19px;color:var(--field-muted);max-width:44ch}
.close__acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.foot{background:var(--field);color:var(--field-ink);padding:24px 0 48px}
.foot__name{font-size:clamp(96px,30vw,400px);line-height:.8;font-weight:700;letter-spacing:-.06em;color:#fff;margin:0 0 0 -.04em;white-space:nowrap}
.foot__grid{margin-top:64px;display:grid;gap:32px;grid-template-columns:1fr 1fr}
.foot__legal{grid-column:1/-1;color:var(--field-muted);font-size:15px;display:grid;gap:4px}
.foot__legal a{color:#fff;text-underline-offset:3px}
.foot__col{display:flex;flex-direction:column;gap:2px}
.foot__col .mono{color:var(--field-muted);margin-bottom:8px;font-size:13px}
.foot__col a{min-height:40px;display:flex;align-items:center;text-decoration:none;font-size:17px;font-weight:500;color:#fff}
.foot__col a:hover{text-decoration:underline;text-underline-offset:4px}
.foot :focus-visible{outline-color:#fff}
@media (min-width:900px){
  .close{padding:150px 0 64px}
  .foot__grid{grid-template-columns:2fr 1fr 1fr 1fr;margin-top:96px}
  .foot__legal{grid-column:auto;align-self:end}
}
/* On the legal and contact pages there is no closing call; the footer
   itself opens the blue territory. */
.foot--solo{padding-top:72px}

/* ------------------------------------------------------------ text pages */
.doc{padding:48px 0 96px}
.doc__head{max-width:760px}
.doc h1{font-size:clamp(40px,9vw,72px);line-height:1;font-weight:600;letter-spacing:-.045em}
.doc__meta{margin-top:14px;color:var(--t2);font-size:15px}
.draft{margin-top:24px;background:var(--warn-soft);color:var(--t1);border-radius:16px;padding:16px 18px;font-size:15px;line-height:1.5}
.draft b{color:var(--warn)}
.doc__body{max-width:720px;margin-top:40px}
.doc__body h2{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-top:52px}
.doc__body h3{font-size:19px;font-weight:600;margin-top:28px}
.doc__body p,.doc__body li{color:var(--t2);font-size:17px;line-height:1.65}
.doc__body p{margin-top:14px}
.doc__body ul{margin-top:12px;display:grid;gap:8px}
.doc__body ul li{display:flex;gap:12px}
.doc__body ul li::before{content:"";flex:none;width:7px;height:7px;margin-top:11px;border-radius:2px;background:var(--line-2)}
.doc__body strong{color:var(--t1);font-weight:600}
.doc__body a{color:var(--accent-ink);font-weight:600;text-underline-offset:3px}
.callout{margin-top:22px;background:var(--surface);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow)}
.callout p{margin:0}
.toc{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.toc a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:600;color:var(--t2)}
.toc a:hover{color:var(--t1);border-color:var(--line-2)}
.table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--t2)}
.table th{color:var(--t1);font-weight:600}
.tablewrap{overflow-x:auto}

.contact{display:grid;gap:12px;margin-top:40px}
.cbox{background:var(--surface);border-radius:var(--r-plate);padding:26px 22px;box-shadow:var(--shadow)}
.cbox h2{font-size:22px;font-weight:600;letter-spacing:-.01em}
.cbox p{margin-top:8px;color:var(--t2)}
.cbox .btn{margin-top:18px}
.email{font-size:clamp(24px,6vw,36px);font-weight:600;letter-spacing:-.03em;color:var(--accent-ink);text-decoration:none;overflow-wrap:anywhere;display:inline-block;margin-top:12px}
.email:hover{text-decoration:underline;text-underline-offset:5px}
.cbox ul{margin-top:12px;display:grid;gap:8px}
.cbox li{display:flex;gap:12px;color:var(--t2)}
.cbox li::before{content:"";flex:none;width:7px;height:7px;margin-top:10px;border-radius:2px;background:var(--accent)}
@media (min-width:900px){.contact{grid-template-columns:1.3fr 1fr;gap:16px}.doc{padding:80px 0 140px}}
/* the connected-data table stacks on a phone instead of scrolling sideways */
@media (max-width:639px){
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .table td{display:block;border:0;padding:3px 0}
}