/* The cloud landing page (templates/landing/index.html). Fonts are the bundled Geist files,
   so the page makes no request to a font CDN. */
@font-face { font-family: "Geist"; src: url("/assets/Geist-Variable.adfa80ab.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/GeistMono-Variable.ba592e4d.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- tokens: light (default) ---------- */
:root {
  color-scheme: light;
  --bg: #F4F4F0; --bg-2: #EFEFEA; --surface: #FFFFFF; --surface-2: #F7F7F4; --surface-3: #F1F2EE;
  --line: #E2E4DE; --line-2: #EEEFEA; --line-strong: #D6DAD2;
  --ink: #111613; --ink-strong: #0E1A17; --ink-2: #4C544F; --ink-3: #5B635E; --ink-4: #646C67;
  --yellow: #F0C42C; --yellow-h: #E5B51A; --on-yellow: #0E1A17; --yellow-ink: #7A5E00;
  --yellow-bg: #FBF6DF; --yellow-line: #EFE2AE; --mark: rgba(240,196,44,.55); --mark-ink: inherit;
  --link: #1A0DAB; --red: #C5221F; --amber: #9A5B00; --green: #137333; --grey: #8C948F;
  --st-crawl: #5B9BF8; --st-warn: #E0AE14; --st-err: #E5533D; --st-ok: #2FA36B; --st-idle: #5E6B66; --st-brand: #F0C42C;
  --s2-fg: #137333; --s2-bg: #E6F4EA; --s3-fg: #9A5B00; --s3-bg: #FEF3E0; --s4-fg: #C5221F; --s4-bg: #FCE8E6; --s5-fg: #8430CE; --s5-bg: #F3E8FD;
  --fresh: #E7F3EA; --dots: #DADDD5; --glow: transparent;
  --header-bg: rgba(244,244,240,.86);
  --band: #EAEDE5; --band-line: #DCE2D8;
  --solid-bg: #111613; --solid-ink: #FFFFFF; --solid-h: #2A302C;
  --ic-y-fg: #1F6B3E; --ic-y-bg: #DDF0E3; --ic-n-fg: #646C67; --ic-n-bg: #ECEFE9;
  --tag-ship-fg: #1F6B3E; --tag-ship-bg: #DDF0E3; --tag-plan-fg: #5B635E; --tag-plan-bg: #E8EBE4;
  --shadow-1: 0 1px 2px rgba(17,22,19,.05), 0 12px 32px -18px rgba(17,22,19,.20);
  --shadow-2: 0 1px 2px rgba(17,22,19,.05), 0 40px 80px -40px rgba(17,22,19,.28);
  --shadow-h: 0 2px 4px rgba(17,22,19,.06), 0 18px 40px -20px rgba(17,22,19,.28);
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ---------- tokens: dark (only when chosen) ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A1411; --bg-2: #0E1A17; --surface: #13221E; --surface-2: #182B26; --surface-3: #1E342E;
  --line: #2C443C; --line-2: #213530; --line-strong: #3A574C;
  --ink: #F2F5F0; --ink-strong: #FBFBF9; --ink-2: #C3CCC6; --ink-3: #A9B3AD; --ink-4: #8E9A94;
  --yellow: #F0C42C; --yellow-h: #F7D24E; --on-yellow: #0E1A17; --yellow-ink: #F0C42C;
  --yellow-bg: rgba(240,196,44,.07); --yellow-line: rgba(240,196,44,.26); --mark: rgba(240,196,44,.13); --mark-ink: #F0C42C;
  --link: #8AB8FF; --red: #F2735E; --amber: #F0A33C; --green: #3DBE7E; --grey: #7A8882;
  --st-crawl: #5B9BF8; --st-warn: #F0C42C; --st-err: #E5533D; --st-ok: #3DBE7E; --st-idle: #7A8882; --st-brand: #F0C42C;
  --s2-fg: #4FD08F; --s2-bg: rgba(61,190,126,.15); --s3-fg: #F5B451; --s3-bg: rgba(240,163,60,.15); --s4-fg: #FF826E; --s4-bg: rgba(229,83,61,.17); --s5-fg: #C89BFF; --s5-bg: rgba(168,110,255,.17);
  --fresh: rgba(61,190,126,.16); --dots: #1C2E29; --glow: rgba(240,196,44,.09);
  --header-bg: rgba(10,20,17,.84);
  --band: #0E1A17; --band-line: #24392F;
  --solid-bg: #F2F5F0; --solid-ink: #0E1A17; --solid-h: #FFFFFF;
  --ic-y-fg: #4FD08F; --ic-y-bg: rgba(61,190,126,.16); --ic-n-fg: #8E9A94; --ic-n-bg: #1E342E;
  --tag-ship-fg: #4FD08F; --tag-ship-bg: rgba(61,190,126,.15); --tag-plan-fg: #A9B3AD; --tag-plan-bg: #1E342E;
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 16px 40px -20px rgba(0,0,0,.7);
  --shadow-2: 0 1px 0 rgba(255,255,255,.03) inset, 0 40px 90px -40px rgba(0,0,0,.85);
  --shadow-h: 0 1px 0 rgba(255,255,255,.04) inset, 0 22px 50px -22px rgba(0,0,0,.85);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { background: var(--bg); color: var(--ink); font-family: 'Geist', system-ui, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- wordmark: C◉d◉SEO ---------- */
.wm { display: inline-flex; align-items: baseline; font-weight: 600; letter-spacing: -.04em; color: var(--ink); line-height: 1; white-space: nowrap; }
.wm .o { width: .68em; height: .68em; margin: .15em .025em 0; flex: none; overflow: visible; align-self: baseline; transform: translateY(.02em); }
.wo-p { transform: translate(var(--gx, 0px), var(--gy, 0px)); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.wo-b { transform-box: fill-box; transform-origin: center; transform: scaleY(var(--bl, 1)); transition: transform .09s ease-in; }
.wm:hover, .wm:focus-visible { --gx: -2.4px; --gy: -1.6px; }
.wm.blink { --bl: .12; }

/* ---------- mascot (one template, see mascot() in the script) ---------- */
.mascot { display: block; overflow: visible; color: var(--ink); --sx: 0px; --sy: 0px; --pr: 5; --pc: var(--st-brand); --rc: currentColor; }
.mascot .rg { fill: none; stroke: var(--rc); stroke-width: 5; transition: stroke .5s ease; }
.mascot.sm .rg { stroke-width: 7; }
.mascot .pp { transform: translate(var(--sx), var(--sy)); transition: transform .7s cubic-bezier(.34,1.3,.5,1); }
.mascot .lk { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .55s cubic-bezier(.3,1.2,.5,1); }
.mascot.follow .lk { transition-duration: .14s; transition-timing-function: ease-out; }
.mascot .pu { fill: var(--pc); transform: scale(var(--pr)); transition: transform .6s cubic-bezier(.34,1.4,.5,1), fill .5s ease; }
.mascot .bl { transform-box: fill-box; transform-origin: center; }
.mascot.blink .bl { animation: blink .17s ease-in-out; }
@keyframes blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.08); } }
.mascot[data-state="crawl"] { --pr: 4.5; --pc: var(--st-crawl); }
.mascot[data-state="crawl"] .sw { animation: sweep 2.4s ease-in-out infinite; }
.mascot[data-state="ok"]    { --sy: -2px; --pr: 5; --pc: var(--st-ok); }
@keyframes sweep { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(5.5px); } 75% { transform: translateX(-5.5px); } }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); }
.bar { display: flex; align-items: center; gap: 36px; padding: 12px 0; }
.brand { font-size: 21px; padding: 2px 0; }
nav { display: flex; gap: 24px; font-size: 14px; flex: 1; min-width: 0; }
nav a { color: var(--ink-3); transition: color .15s; } nav a:hover { color: var(--ink); }
.bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ghost { font-size: 13.5px; padding: 7px 11px; border-radius: 8px; display: flex; align-items: center; gap: 8px; color: var(--ink-2); transition: background .15s, color .15s; }
.ghost:hover { background: var(--surface-3); color: var(--ink); }
.solid { font-size: 13.5px; color: var(--solid-ink); background: var(--solid-bg); border-radius: 8px; padding: 8px 14px; font-weight: 500; transition: background .15s, transform .15s; }
.solid:hover { background: var(--solid-h); transform: translateY(-1px); }
.theme { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); transition: border-color .15s, color .15s, background .15s; }
.theme:hover { border-color: var(--line-strong); color: var(--ink); }
.theme svg { width: 17px; height: 17px; grid-area: 1 / 1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: rotate(-40deg) scale(.6); transition: opacity .25s, transform .35s; }
[data-theme-pref="light"] .theme .i-light, [data-theme-pref="dark"] .theme .i-dark, [data-theme-pref="system"] .theme .i-system { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { background-color: var(--bg-2); background-image: radial-gradient(700px 360px at 78% 8%, var(--glow), transparent 70%), radial-gradient(var(--dots) 1px, transparent 1px); background-size: auto, 22px 22px; background-position: 0 0, -11px -11px; border-bottom: 1px solid var(--line-2); }
.hero .wrap { padding-top: 84px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 56px; align-items: center; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pills span { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.pills .hot { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
h1 { font-size: clamp(44px, 6.2vw, 80px); line-height: .98; letter-spacing: -.045em; font-weight: 600; margin-top: 26px; text-wrap: balance; color: var(--ink-strong); }
mark { background: linear-gradient(transparent 64%, var(--mark) 64%); color: var(--mark-ink); padding: 0 .05em; }
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); margin-top: 24px; max-width: 46ch; text-wrap: pretty; }
/* the audit box: one URL field that starts the no-signup audit */
.audit-form { margin-top: 30px; max-width: 540px; }
.audit { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 5px; box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s; }
.audit:focus-within { border-color: var(--ink-4); box-shadow: 0 0 0 3px var(--mark), var(--shadow-1); }
.audit input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 10px 12px; outline: none; }
.audit input::placeholder { color: var(--ink-4); }
.audit input[aria-invalid="true"] { color: var(--red); }
.audit-form .ts { margin-top: 12px; min-height: 65px; }
.err { display: flex; gap: 8px; align-items: baseline; margin-top: 12px; font-size: 14px; color: var(--red); }
.err::before { content: '!'; flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--surface); background: var(--red); transform: translateY(2px); }
.btn { border: 0; font: inherit; font-weight: 600; font-size: 14.5px; border-radius: 8px; padding: 10px 18px; cursor: pointer; white-space: nowrap; background: var(--yellow); color: var(--on-yellow); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, transform .18s, box-shadow .18s, border-color .15s; }
.btn:hover { background: var(--yellow-h); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(224,174,20,.7); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .ar { transition: transform .2s; } .btn:hover .ar { transform: translateX(3px); }
.btn.out { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); font-weight: 500; }
.btn.out:hover { background: var(--surface-2); border-color: var(--ink-4); box-shadow: var(--shadow-1); }
.btn.dis, .btn.dis:hover { cursor: default; background: transparent; color: var(--ink-3); border: 1px dashed var(--line-strong); box-shadow: none; transform: none; }
.notes { display: flex; gap: 10px 20px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.notes a { color: var(--link); } .notes a:hover { text-decoration: underline; }

/* the hero mascot peeks over the sample-crawl panel */
.stage { position: relative; padding-top: 92px; min-width: 0; }
.peek { position: absolute; top: 0; right: 36px; width: 200px; z-index: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.peek .mascot { width: 100%; height: auto; }
.stage .panel { position: relative; z-index: 1; }

/* ---------- panel ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; }
.shot { box-shadow: var(--shadow-2); }
.ptop { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.url { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; background: var(--surface-2); border-radius: 7px; padding: 6px 10px; font-family: var(--mono); font-size: 12.5px; overflow: hidden; white-space: nowrap; }
.url .mascot { width: 22px; height: auto; flex: none; }
.state { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); }
.stats div { padding: 12px 14px; border-right: 1px solid var(--line-2); }
.stats div:last-child { border-right: 0; }
.stats small { display: block; font-size: 11.5px; color: var(--ink-4); }
.stats b { display: block; font-family: var(--mono); font-size: 17px; font-weight: 500; margin-top: 3px; letter-spacing: -.02em; }
.prog { height: 3px; background: var(--surface-3); } .prog i { display: block; height: 3px; background: var(--st-crawl); width: 0; transition: width .3s, background .4s; }
.prog.done i { background: var(--st-ok); }
.row { display: grid; grid-template-columns: minmax(0, 1.5fr) 52px 104px 56px; gap: 12px; align-items: center; padding: 0 14px; height: 42px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.row.head { height: auto; padding: 9px 14px; font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .05em; }
.row .p { font-family: var(--mono); font-size: 12.5px; color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .s { font-family: var(--mono); font-size: 11.5px; font-weight: 500; border-radius: 4px; padding: 2px 6px; justify-self: start; }
.row .i { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .t { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.ix-ok { color: var(--ink-2); } .ix-bad { color: var(--red); } .ix-warn { color: var(--amber); }
.feed { height: 378px; overflow: hidden; }
.feed .row:first-child.fresh { animation: rowin .9s ease-out; }
@keyframes rowin { from { background: var(--fresh); } to { background: transparent; } }
.s2 { color: var(--s2-fg); background: var(--s2-bg); } .s3 { color: var(--s3-fg); background: var(--s3-bg); } .s4 { color: var(--s4-fg); background: var(--s4-bg); } .s5 { color: var(--s5-fg); background: var(--s5-bg); }

/* ---------- sections ---------- */
section.blk { padding-top: 120px; }
.shead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px 56px; align-items: end; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--yellow-ink); text-transform: uppercase; margin-bottom: 14px; }
h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; text-wrap: balance; color: var(--ink-strong); }
.shead p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.shead p a { color: var(--link); } .shead p a:hover { text-decoration: underline; }
.mt { margin-top: 44px; }
code.k { font-family: var(--mono); font-size: .88em; }

/* ---------- products: four ways in ---------- */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.way { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.3,1.2,.5,1), box-shadow .25s, border-color .2s; }
.way:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); border-color: var(--line-strong); }
.way-k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow-ink); }
.way h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin-top: 12px; }
.way p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; flex: 1; }
.way code { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 18px; font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; color: var(--ink-2); }

/* ---------- features ---------- */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.feat { padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
.fi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow-bg); border: 1px solid var(--yellow-line); color: var(--ink); }
.fi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-top: 16px; }
.feat p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-top: 6px; max-width: 42ch; }
.feat p a { color: var(--link); } .feat p a:hover { text-decoration: underline; }

/* ---------- terminal ---------- */
.term { font-family: var(--mono); font-size: 13px; line-height: 1.75; }
.term .tabs { display: flex; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--ink-4); }
.term .tabs span:first-child { color: var(--ink); }
.term pre { padding: 18px 20px; overflow-x: auto; font: inherit; color: var(--ink); }
.c-dim { color: var(--ink-4); } .c-y { color: var(--yellow-ink); } .c-r { color: var(--red); } .c-a { color: var(--amber); } .c-g { color: var(--green); } .c-l { color: var(--link); }
.cmds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cmds code { font-family: var(--mono); font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; color: var(--ink-2); transition: border-color .15s, transform .15s; }
.cmds code:hover { border-color: var(--line-strong); transform: translateY(-1px); }

/* ---------- checks ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); border-top: 1px solid var(--line); }
.cat { padding: 24px 24px 28px 0; border-bottom: 1px solid var(--line); }
.cat .ch { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cat h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cat .n { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.cat ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cat li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.cat li::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c); transform: translateY(-1px); }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.legend a { margin-left: auto; color: var(--link); } .legend a:hover { text-decoration: underline; }
.r { --c: var(--st-err); } .a { --c: var(--st-warn); } .n0 { --c: var(--grey); }

/* ---------- diff ---------- */
.band { background: var(--band); border: 1px solid var(--band-line); border-radius: 20px; padding: clamp(24px, 4.5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px; align-items: center; }
.band h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.04; }
.band p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-top: 20px; max-width: 46ch; }
.dhead { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.diff { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.diff:last-child { border-bottom: 0; }
.diff .t { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 500; font-size: 14.5px; }
.diff .t::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.diff .t em { font-style: normal; margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--link); }
.diff .l { margin-top: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.7; overflow-x: auto; white-space: nowrap; }
.diff .l div:first-child { color: var(--ink-4); }

/* ---------- split sections (CI, AI agents) ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center; }
.split h2 { margin-bottom: 22px; }
.split > div > p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; margin-top: 40px; }
.facts div { border-top: 1px solid var(--ink); padding-top: 14px; }
.facts b { display: block; font-weight: 600; font-size: 15.5px; }
.facts span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); margin-top: 6px; }

/* ---------- pricing ---------- */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.price { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; }
.price.hl { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), var(--shadow-1); }
.price.soon { background: var(--surface-2); border-style: dashed; border-color: var(--line-strong); }
.ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ph h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.tag { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; padding: 3px 7px; border-radius: 4px; text-transform: uppercase; }
.tag.ship { background: var(--tag-ship-bg); color: var(--tag-ship-fg); } .tag.plan { background: var(--tag-plan-bg); color: var(--tag-plan-fg); }
.amt { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; min-height: 46px; }
.amt b { font-size: 46px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink-strong); }
.amt b.tbd { font-size: 30px; color: var(--ink-3); }
.amt span { font-size: 14px; color: var(--ink-3); }
.price > p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; }
.price ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 22px 0 26px; padding-top: 20px; border-top: 1px solid var(--line-2); flex: 1; }
.price li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.price li::before { content: '✓'; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 9px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ic-y-fg); background: var(--ic-y-bg); }
.price.soon li::before { color: var(--ic-n-fg); background: var(--ic-n-bg); }
.price .btn { width: 100%; }
.fine { font-size: 13.5px; color: var(--ink-3); margin-top: 18px; }
.fine a { color: var(--link); } .fine a:hover { text-decoration: underline; }

/* ---------- docs ---------- */
.docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.doc { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, transform .15s, box-shadow .2s; }
.doc:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.doc b { font-size: 15.5px; font-weight: 600; padding-right: 24px; }
.doc span { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.doc::after { content: '↗'; position: absolute; top: 16px; right: 18px; font-size: 14px; color: var(--ink-4); transition: transform .15s, color .15s; }
.doc:hover::after { color: var(--ink); transform: translate(2px, -2px); }
.get { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px 40px; align-items: center; margin-top: 16px; }
.get h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.get p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 8px; max-width: 44ch; }
.crates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.crates a { font-family: var(--mono); font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; transition: border-color .15s, transform .15s; }
.crates a:hover { border-color: var(--ink); transform: translateY(-1px); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-family: var(--mono); font-size: 20px; font-weight: 400; line-height: 1; color: var(--ink-3); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ink-strong); }
.faq details p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); padding: 0 40px 22px 0; max-width: 72ch; }
.faq details a { color: var(--link); } .faq details a:hover { text-decoration: underline; }

/* ---------- cta ---------- */
.cta { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 40px; margin-top: 140px; position: relative; }
.cta h2 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1; letter-spacing: -.045em; max-width: 16ch; }
.cta .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cta .btn { padding: 12px 20px; font-size: 15px; border-radius: 9px; }
.cta-eyes { position: absolute; top: -49px; left: 0; width: 92px; background: var(--bg); padding: 0 10px 0 0; }
.cta-eyes .mascot { width: 100%; height: auto; }

/* ---------- footer ---------- */
footer { padding: 112px 0 40px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 36px 32px; padding-top: 44px; border-top: 1px solid var(--line); }
.fbrand .wm { font-size: 20px; }
.fbrand p { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin-top: 14px; max-width: 34ch; }
.fh { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.fcol a { display: block; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.fbot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-3); }
.fbot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- scroll reveal (JS adds .js on <html>) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 1020px) {
  .fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fbrand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  nav { display: none; } .bar { gap: 12px; } .hero .wrap { padding-top: 48px; padding-bottom: 64px; gap: 40px; }
  section.blk { padding-top: 88px; } .wrap { padding: 0 16px; } .stats b { font-size: 15px; }
  .row { grid-template-columns: minmax(0, 1fr) 52px 56px; } .row .i { display: none; }
  .legend a { margin-left: 0; } .facts { grid-template-columns: 1fr; }
  .stage { padding-top: 72px; } .peek { width: 150px; right: 20px; }
  .cta { margin-top: 120px; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq details p { padding-right: 0; }
}
@media (max-width: 480px) {
  .gh { display: none; } .brand { font-size: 19px; }
  .audit input { padding: 10px 8px; } .audit .btn { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}