/* WhittleBrowser site. One primary colour (green), ink, and warm paper. */
:root {
  --paper: #fbfaf7; --paper-2: #f3f1ec; --card: #ffffff;
  --ink: #141414; --ink-2: #2a2a2a; --muted: #67645e; --faint: #a19d95; --line: #e5e1d9; --line-2: #d6d1c6;
  --primary: #0a7d5a; --primary-ink: #075c42; --primary-soft: #e7f2ec; --primary-tint: #6fd3ad;
  --code: #151515; --code-text: #e9e6df; --code-muted: #8d8a83;
  --serif: "Iowan Old Style", "New York", ui-serif, "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --r: 10px; --w: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; counter-reset: sec; }
a { color: inherit; }
::selection { background: var(--primary); color: #fff; }
code { font: .86em var(--mono); background: var(--paper-2); border: 1px solid var(--line); padding: .05em .35em; border-radius: 4px; }
em { font-style: italic; color: var(--primary); }
h1 em, h2 em { font-family: var(--serif); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 max(20px, calc((100vw - var(--w)) / 2)); background: rgba(251,250,247,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav nav { display: flex; gap: 24px; flex: 1; }
.nav nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; transition: color .15s; }
.nav nav a:hover, .nav nav a.cur { color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; text-decoration: none; font-size: 16px; }
.logo { width: 24px; height: 24px; border-radius: 6px; background: var(--primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M22 15l24 17-10.5 2.1 6.2 11.8-4.6 2.4-6.2-11.9L22 44z' fill='white'/></svg>") center/100% no-repeat; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 8px; background: var(--primary); color: #fff; font: 600 15px var(--sans); text-decoration: none; border: 1px solid var(--primary); transition: background .15s, transform .15s; }
.btn:hover { background: var(--primary-ink); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn.small { height: 36px; padding: 0 16px; font-size: 14px; }
@media (max-width: 900px) { .nav nav { display: none; } .nav { justify-content: space-between; } }

/* ---------- hero ---------- */
.hero { max-width: var(--w); margin: 0 auto; padding: 88px 20px 40px; }
.hero-copy { max-width: 1040px; }
.eyebrow { margin: 0 0 22px; font: 500 13px var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--primary); border-radius: 2px; vertical-align: 1px; }
h1 { font: 400 clamp(44px, 6.6vw, 84px)/1.02 var(--serif); letter-spacing: -.025em; margin: 0 0 26px; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 680px; margin: 0; line-height: 1.55; }
.lead b { color: var(--ink); font-weight: 600; }
.cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- hero demo ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 20px; margin-top: 64px; }
@media (max-width: 980px) { .demo { grid-template-columns: 1fr; } }
.win { position: relative; border-radius: 12px; background: #fff; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 24px 60px -24px rgba(20,20,20,.22); }
.chrome { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 13px; }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.addr { flex: 1; height: 26px; display: flex; align-items: center; padding: 0 12px; border-radius: 6px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.aidot { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink-2); font-size: 12px; } .aidot i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.xchip { padding: 2px 8px; border-radius: 4px; font: 600 11px var(--mono); color: #fff; background: var(--ink); opacity: 0; transition: opacity .3s; }
.win.xray .xchip { opacity: 1; }
.page { position: relative; height: 380px; overflow: hidden; }
.pg { position: absolute; inset: 0; padding: 28px 32px; transition: opacity .45s, transform .45s; }
.pg h3 { margin: 0 0 18px; font: 400 28px var(--serif); letter-spacing: -.01em; }
.pg label { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: 14px; color: var(--ink-2); }
.inp { display: inline-flex; align-items: center; justify-content: space-between; min-width: 230px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; font-size: 14px; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.inp.focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.inp em { font-style: normal; color: var(--ink); } .inp b { color: var(--faint); font-weight: 400; }
.inp.focus em::after { content: "|"; color: var(--primary); animation: blink .9s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.row { display: flex; gap: 24px; margin: 14px 0; font-size: 14px; color: var(--ink-2); }
.chk { display: inline-flex; align-items: center; gap: 8px; } .chk i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--faint); background: #fff; transition: all .2s; position: relative; }
.chk.rad i { border-radius: 50%; }
.chk.on i { background: var(--primary); border-color: var(--primary); } .chk.on i::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: #fff; transform: scale(.55); }
.pbtn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; margin-top: 8px; transition: transform .1s; }
.pbtn.press { transform: scale(.96); }
.review-pg { opacity: 0; transform: translateX(30px); }
.page.review .form-pg { opacity: 0; transform: translateX(-30px); } .page.review .review-pg { opacity: 1; transform: none; }
.review-pg p { color: var(--muted); }
.approve { position: absolute; right: 22px; bottom: 22px; width: 250px; padding: 12px 14px; border-radius: 8px; background: #fff; border: 1px solid var(--line-2); border-left: 3px solid var(--primary); box-shadow: 0 12px 30px -10px rgba(0,0,0,.25); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(12px); transition: all .35s; }
.approve.show { opacity: 1; transform: none; }
.approve em { align-self: flex-start; margin-top: 6px; font-style: normal; background: var(--primary); color: #fff; padding: 4px 10px; border-radius: 5px; font-weight: 600; }
.badges { position: absolute; inset: 0; pointer-events: none; }
.badge { position: absolute; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 3px; background: var(--ink); color: #fff; font: 600 10.5px var(--mono); transform: translate(-6px, -60%); opacity: 0; transition: opacity .3s; }
.box { position: absolute; border: 1.5px solid var(--ink); border-radius: 5px; opacity: 0; transition: opacity .3s; }
.win.xray .badge, .win.xray .box { opacity: 1; }
.cursor { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); will-change: transform; }
.cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.ring { position: absolute; border: 2px solid var(--primary); border-radius: 7px; box-shadow: 0 0 0 5px var(--primary-soft); opacity: 0; transition: all .35s cubic-bezier(.2,.9,.3,1); pointer-events: none; }
.cap { position: absolute; left: 0; top: 0; z-index: 6; padding: 4px 9px; border-radius: 5px; background: var(--ink); color: #fff; font: 500 12px var(--sans); white-space: nowrap; opacity: 0; transition: opacity .2s; will-change: transform; }
.rip { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--primary); z-index: 4; animation: rip .55s ease-out forwards; }
@keyframes rip { to { transform: scale(3.4); opacity: 0; } }

.side { display: flex; flex-direction: column; gap: 16px; }
.meters { padding: 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.meter .mh { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.meter .mh b { font: 500 26px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.meter.ab .mh b { color: var(--primary); }
.bar { height: 8px; border-radius: 2px; background: var(--paper-2); overflow: hidden; margin: 6px 0 4px; }
.bar i { display: block; height: 100%; width: 0; transition: width .6s cubic-bezier(.2,.9,.3,1); }
.pw .bar i { background: var(--line-2); } .ab .bar i { background: var(--primary); }
.meter small { color: var(--faint); font-size: 12px; }
.saved { align-self: flex-start; padding: 6px 12px; border-radius: 6px; background: var(--paper-2); color: var(--muted); font-size: 14px; transition: all .4s; }
.saved.pop { background: var(--primary); color: #fff; }
.saved b { font-family: var(--mono); }
.feed { flex: 1; padding: 16px 18px; border-radius: var(--r); background: var(--code); color: var(--code-text); min-height: 170px; }
.fh { display: flex; align-items: center; gap: 8px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--code-muted); margin-bottom: 10px; }
.fh i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-tint); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.feed ol { list-style: none; margin: 0; padding: 0; font: 12.5px/1.75 var(--mono); color: var(--code-muted); }
.feed li { animation: up .3s ease-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed li:last-child { color: var(--code-text); }
.feed li .t { color: var(--primary-tint); } .feed li .w { color: #fff; font-weight: 600; }
@keyframes up { from { opacity: 0; transform: translateY(5px); } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); max-width: var(--w); margin: 56px auto 0; padding: 0 20px; }
.stat { padding: 26px 22px 26px 0; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 8px; }
.stat + .stat { padding-left: 22px; border-left: 1px solid var(--line); }
.stat b { font: 400 46px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat:first-child b { color: var(--primary); }
.stat span { color: var(--muted); font-size: 14px; line-height: 1.45; } .stat small { color: var(--faint); font-size: 12.5px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat + .stat { border-left: 0; padding-left: 0; } }

/* ---------- sections ---------- */
.sec { max-width: var(--w); margin: 0 auto; padding: 104px 20px 0; counter-increment: sec; }
.sec-head { max-width: 760px; margin: 0 0 44px; }
.sec-head.left { margin: 0; }
.kicker { display: flex; align-items: center; gap: 12px; font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.kicker::before { content: counter(sec, decimal-leading-zero); color: var(--primary); font-weight: 600; }
.kicker::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--line-2); }
h2 { font: 400 clamp(32px, 4vw, 50px)/1.08 var(--serif); letter-spacing: -.02em; margin: 0 0 18px; }
.sec-head p { color: var(--muted); font-size: 17.5px; margin: 0; }
.sec-head p b { color: var(--ink); font-weight: 600; }
.split2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.split2.rev { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 980px) { .split2, .split2.rev { grid-template-columns: 1fr; gap: 36px; } }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); font-size: 15.5px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 12px; height: 2px; background: var(--primary); transform: translateY(-4px); }
.ticks li:has(.sw)::before { content: none; }
.sw { width: 18px; height: 12px; border-radius: 2px; flex: none; border: 2px solid; transform: translateY(1px); }
.sw.ctl { border-color: var(--ink); } .sw.mask { border-color: var(--ink); border-style: dotted; } .sw.hid { border-color: var(--primary); border-style: dashed; } .sw.inj { border-color: var(--primary); background: var(--primary-soft); }
.note { color: var(--faint); font-size: 14px; margin-top: 22px; } .note a { color: var(--muted); }

/* ---------- code panes ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .vs { grid-template-columns: 1fr; } }
.pane, .term, .digest { border-radius: var(--r); background: var(--code); color: var(--code-text); overflow: hidden; }
.ph { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-bottom: 1px solid #2a2a2a; font: 500 12.5px var(--mono); color: var(--code-muted); }
.tok { font: 600 12.5px var(--mono); padding: 2px 9px; border-radius: 4px; background: #262626; color: var(--code-text); }
.good .tok, .term .tok, .digest .tok { background: var(--primary); color: #fff; }
.pane pre, .term pre { margin: 0; height: 430px; overflow: hidden; padding: 16px 18px; font: 12px/1.6 var(--mono); color: var(--code-text); white-space: pre; }
.pane.bad pre { color: var(--code-muted); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.term pre { height: auto; min-height: 220px; white-space: pre-wrap; }
pre .k { color: var(--primary-tint); } pre .ch { color: #fff; font-weight: 600; } pre .ad { color: var(--primary-tint); } pre .rm { color: var(--code-muted); text-decoration: line-through; }
pre .at { color: var(--code-muted); } pre .ok { color: var(--code-text); } pre .wa { color: #fff; font-weight: 600; } pre .s { color: inherit; }

/* ---------- bars ---------- */
.bars { display: flex; flex-direction: column; gap: 20px; }
.brow { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.brow .nm { font-size: 15px; color: var(--ink-2); }
.bpair { display: flex; flex-direction: column; gap: 6px; }
.bline { display: flex; align-items: center; gap: 12px; font: 500 12.5px var(--mono); color: var(--muted); }
.bline i { display: block; height: 12px; border-radius: 2px; width: 0; transition: width 1.4s cubic-bezier(.2,.9,.25,1); }
.bline.pw i { background: var(--line-2); } .bline.ab i { background: var(--primary); min-width: 4px; }
.bline.ab { color: var(--primary); font-weight: 600; } .bline.ab span { color: var(--muted) !important; font-weight: 400; }
.legend2 { display: flex; gap: 22px; margin-bottom: 4px; font-size: 13.5px; color: var(--muted); }
.legend2 span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.legend2 .p::before { background: var(--line-2); } .legend2 .a::before { background: var(--primary); }
@media (max-width: 700px) { .brow { grid-template-columns: 1fr; } }

/* ---------- pipeline ---------- */
.pipe { position: relative; }
.flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow .track { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
.flow .dash { stroke: var(--primary); stroke-width: 2; fill: none; stroke-dasharray: 4 20; animation: flow 1.4s linear infinite; }
.flow stop { stop-color: var(--primary); }
.flow .dash.back { animation-direction: reverse; }
@keyframes flow { to { stroke-dashoffset: -48; } }
.nodes { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.nodes.bottom { margin-top: 56px; }
.node { padding: 16px 14px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.node b { font-size: 14.5px; font-weight: 600; } .node small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.node.hl { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.node.llm { background: var(--ink); border-color: var(--ink); color: #fff; } .node.llm small { color: #a8a6a0; }
@media (max-width: 900px) { .nodes { grid-template-columns: repeat(2, 1fr); } .flow { display: none; } }

/* ---------- x-ray demo ---------- */
.win.small .page.xp { height: auto; padding: 24px 28px 70px; }
.xp h3 { margin: 0 0 12px; font: 400 24px var(--serif); } .xp p { margin: 8px 0; font-size: 14px; color: var(--ink-2); position: relative; border-radius: 4px; transition: all .4s; padding: 2px 4px; }
.x-hidden { color: #fff !important; } .x-tiny { font-size: 2px !important; line-height: 4px; color: #fff !important; }
.xp .x-pw { margin: 12px 0; } .xp .inp { min-width: 160px; }
.xtoggle { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px 0 3px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: 600 12px var(--sans); color: var(--ink-2); cursor: pointer; }
.xtoggle i { width: 20px; height: 20px; border-radius: 50%; background: var(--line-2); transition: background .3s; }
.xdemo.on .xtoggle { border-color: var(--ink); } .xdemo.on .xtoggle i { background: var(--primary); }
.xdemo.on .xp p.x-inj, .xdemo.on .xp p.x-hidden, .xdemo.on .xp p.x-tiny { margin-top: 22px; }
.xdemo.on .x-pw { margin-top: 24px; }
.xdemo.on .x-inj { outline: 2px solid var(--primary); background: var(--primary-soft); }
.xdemo.on .x-hidden, .xdemo.on .x-tiny { outline: 1.5px dashed var(--primary); color: var(--primary-ink) !important; font-size: 13px !important; line-height: 1.5; }
.xdemo.on .x-pw .inp { outline: 1.5px dotted var(--ink); outline-offset: 2px; } .xdemo.on .x-btn { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.xp p::before, .x-pw::before, .x-btn::before { position: absolute; left: -2px; top: -17px; padding: 0 5px; height: 15px; line-height: 15px; border-radius: 3px; font: 600 10px var(--mono); color: #fff; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.x-inj::before { content: "looks like injection"; background: var(--primary); } .x-hidden::before, .x-tiny::before { content: "hidden from AI"; background: var(--primary); }
.x-pw { position: relative; } .x-pw::before { content: "masked"; background: var(--ink); left: 64px; }
.x-btn { position: relative; } .x-btn::before { content: "81"; background: var(--ink); }
.xdemo.on .xp p.x-inj::before, .xdemo.on .xp p.x-hidden::before, .xdemo.on .xp p.x-tiny::before, .xdemo.on .x-pw::before, .xdemo.on .x-btn::before { opacity: 1; }
.x-legend { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 5px; background: var(--ink); color: #d9d6cf; font: 500 12px var(--mono); opacity: 0; transform: translateY(6px); transition: all .35s; } .x-legend b { color: #fff; }
.xdemo.on .x-legend { opacity: 1; transform: none; }

/* ---------- screenshots ---------- */
.shot img, .gallery img { width: 100%; display: block; border-radius: 10px; border: 1px solid var(--line-2); box-shadow: 0 24px 60px -28px rgba(20,20,20,.35); }
.shot.wide { margin-top: 40px; }
.shot.zoomy { overflow: hidden; border-radius: 10px; } .shot.zoomy img { transform-origin: 46% 48%; }
.shot.zoomy.in img { animation: kb 10s ease-in-out 1s infinite alternate; }
@keyframes kb { 0%, 15% { transform: scale(1); } 55%, 100% { transform: scale(1.28) translate(-3%, 1%); } }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
.gallery figure { margin: 0; } .gallery figcaption { color: var(--muted); font-size: 14.5px; margin-top: 12px; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }

/* ---------- research demo ---------- */
.rdemo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .rdemo { grid-template-columns: 1fr; } }
.lanes { grid-column: 1 / -1; padding: 20px 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.lane-h { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin: 6px 0 8px; } .lane-h b { font: 500 13px var(--mono); color: var(--ink); }
.lane { position: relative; height: 26px; border-radius: 4px; background: var(--paper-2); margin-bottom: 12px; overflow: hidden; }
.lane.par { height: 70px; }
.seg { position: absolute; height: 18px; top: 4px; border-radius: 3px; width: 0; transition: width linear; font: 600 10.5px/18px var(--mono); color: #fff; padding-left: 6px; overflow: hidden; white-space: nowrap; }
.lane.seq .seg { background: var(--faint) !important; } .lane.par .seg { background: var(--primary) !important; }
.illus { color: var(--faint); font-size: 12.5px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
.tile { border-radius: 8px; background: var(--card); overflow: hidden; border: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: all .4s; }
.tile.show { opacity: 1; transform: none; }
.tile .tc { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11.5px; border-bottom: 1px solid var(--line); color: var(--ink-2); } .tile .tc i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: pulse 1s infinite; } .tile.done .tc i { background: var(--primary); animation: none; }
.tile .tb { padding: 9px; display: flex; flex-direction: column; gap: 6px; height: 84px; } .tile .tb span { height: 6px; border-radius: 2px; background: var(--paper-2); } .tile .tb span:first-child { height: 10px; width: 70%; background: var(--line); }
.tile .pr { height: 2px; background: var(--paper-2); } .tile .pr i { display: block; height: 100%; width: 0; background: var(--primary); transition: width linear; }
.digest table { width: 100%; border-collapse: collapse; font-size: 13px; } .digest th, .digest td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #262626; vertical-align: top; } .digest th { color: var(--code-muted); font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.digest td { color: #bdbab3; } .digest td b { color: #fff; font-weight: 600; } .digest td small { color: var(--code-muted); } .digest tr { animation: up .35s ease-out; }

/* ---------- messy pages chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips span { padding: 7px 12px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; } .chips b { color: var(--ink); font-weight: 600; }
#soup pre { height: 380px; }

/* ---------- safety cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); counter-reset: card; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card { padding: 24px 22px 28px 0; border-bottom: 1px solid var(--line); counter-increment: card; }
.card:not(:nth-child(4n+1)) { padding-left: 22px; border-left: 1px solid var(--line); }
.card::before { content: counter(card, decimal-leading-zero); font: 600 12px var(--mono); color: var(--primary); }
.card h4 { margin: 14px 0 8px; font: 600 16.5px var(--sans); letter-spacing: -.01em; } .card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- compare ---------- */
.tablewrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 920px; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--muted); }
.cmp thead th { color: var(--ink); font-size: 13px; font-weight: 600; background: var(--paper); position: sticky; top: 0; } .cmp th small { color: var(--faint); font-weight: 400; }
.cmp td:first-child { color: var(--ink); font-weight: 500; width: 210px; padding-left: 0; } .cmp td small { color: var(--faint); }
.cmp .us { background: var(--primary-soft); color: var(--ink); } .cmp thead .us { color: var(--primary-ink); background: var(--primary-soft); }
.cmp .us b { color: var(--primary-ink); } .cmp .bad { color: var(--ink-2); }
.cmp tbody tr:hover td { background: rgba(0,0,0,.015); } .cmp tbody tr:hover td.us { background: #dcede4; }

/* ---------- quick start ---------- */
.qs { max-width: 860px; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.tabs button { height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--muted); font: 500 14.5px var(--sans); cursor: pointer; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--primary); }
.code { position: relative; border-radius: var(--r); background: var(--code); } .code pre { margin: 0; padding: 22px 24px; font: 13.5px/1.8 var(--mono); color: var(--code-text); overflow-x: auto; } .code .c { color: var(--code-muted); } .code .s { color: var(--primary-tint); }
.copy { position: absolute; right: 12px; top: 12px; height: 28px; padding: 0 10px; border-radius: 5px; border: 1px solid #333; background: #1f1f1f; color: #bdbab3; font: 12px var(--sans); cursor: pointer; } .copy:hover { color: #fff; }

/* ---------- footer ---------- */
.foot { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; max-width: var(--w); margin: 120px auto 0; padding: 40px 20px 56px; border-top: 1px solid var(--ink); color: var(--muted); }
.foot p { margin: 10px 0 0; font-size: 14px; } .foot .cols { display: flex; gap: 64px; } .foot .cols div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .foot .cols b { color: var(--ink); font-weight: 600; } .foot a { text-decoration: none; } .foot a:hover { color: var(--ink); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .flow .dash, .fh i, .shot.zoomy.in img { animation: none; } }

/* ---------- charts ---------- */
figure.chart { margin: 0 0 40px; padding: 22px 24px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
figure.chart figcaption { font: 600 16px var(--sans); color: var(--ink); margin-bottom: 4px; }
figure.chart .chart-desc { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.chart-plot { width: 100%; overflow: hidden; }
.chart-plot svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.chart-axis { font: 11px var(--mono); fill: var(--faint); font-variant-numeric: tabular-nums; }
.chart-label { font-size: 13px; fill: var(--ink-2); }
.chart-label.us { font-weight: 600; fill: var(--ink); }
.chart-value { font: 600 12px var(--mono); fill: var(--ink); font-variant-numeric: tabular-nums; }
.chart-value.us { fill: var(--primary-ink); }
.chart-sub { font: 11px var(--mono); fill: var(--muted); }
.chart-row:hover line, .chart-row:focus-within line { stroke: var(--line-2); }
.chart-plot [tabindex]:focus { outline: none; } .chart-plot [tabindex]:focus-visible { outline: 2px solid var(--primary); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.chart-date { display: block; margin-top: 10px; font: 11.5px var(--mono); color: var(--faint); }
.chart-table { margin-top: 10px; font-size: 13px; }
.chart-table summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.chart-table summary:hover { color: var(--ink); }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: 8px; display: block; overflow-x: auto; }
.chart-table th, .chart-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.chart-table td.n, .chart-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.chart-tip { position: fixed; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .12s; min-width: 190px; padding: 10px 12px; border-radius: 8px; background: var(--ink); color: #e9e6df; font: 12.5px/1.5 var(--sans); box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); }
.chart-tip > b { display: block; color: #fff; margin-bottom: 4px; }
.chart-tip div { display: flex; justify-content: space-between; gap: 16px; } .chart-tip div b { font: 600 12px var(--mono); color: #fff; } .chart-tip div b.g { color: var(--primary-tint); }
.chart-tip div.t { border-top: 1px solid #333; margin-top: 4px; padding-top: 4px; }
.chart-tip small { color: #8d8a83; }
.chart-err { color: var(--muted); font-size: 14px; }
/* safety dot matrix */
.dm { margin-bottom: 18px; } .dm-h { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.dm-row { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.dm-row.us { color: var(--ink); font-weight: 600; } .dm-row b { font: 600 12.5px var(--mono); text-align: right; } .dm-row.us b { color: var(--primary-ink); }
.dots { display: flex; gap: 5px; }
.dots i, .dm-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.dots i.on, .dm-key.on { background: var(--ink); border-color: var(--ink); }
.dots i.us { border-color: var(--primary); }
.dots i.na { border-style: dotted; }
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); margin-top: 8px; }
.method div { padding: 20px 22px 22px 0; border-bottom: 1px solid var(--line); }
.method div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.method b { display: block; font-size: 15px; margin-bottom: 6px; } .method p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 860px) { .method { grid-template-columns: 1fr; } .method div + div { padding-left: 0; border-left: 0; } }

/* "coming soon" note under the hero buttons */
.soon { margin: 22px 0 0; max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.soon b { color: var(--ink); font-weight: 600; }
.soon-pill { display: inline-block; font: 600 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--primary-ink); background: var(--primary-soft); border: 1px solid #bfdccf; border-radius: 99px; padding: 2px 9px; margin-right: 6px; vertical-align: 1px; }

/* =====================================================================================================
   Mock-up polish: the demo windows, live steps, X-ray page, research tiles, charts and screenshot frames.
   These sit after the base rules on purpose, so they override them.
   ===================================================================================================== */
:root { --shop: #0a7d5a; --shop-soft: #e7f2ec; --shop-line: #d6d1c6; --shadow-card: 0 1px 2px rgba(20, 24, 40, .04), 0 14px 34px -22px rgba(20, 24, 40, .22); }

/* ---- browser window chrome ---- */
.win { border-radius: 16px; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 44px 90px -40px rgba(20, 28, 22, .38), 0 14px 34px -20px rgba(20, 28, 22, .2); }
.chrome { height: 48px; padding: 0 14px; gap: 12px; background: linear-gradient(#f9f7f2, #efece4); border-bottom: 1px solid var(--line-2); }
.chrome .dots { gap: 7px; } .chrome .dots i { width: 11px; height: 11px; }
.chrome .dots i:nth-child(1) { background: #ff6159; } .chrome .dots i:nth-child(2) { background: #ffbd2e; } .chrome .dots i:nth-child(3) { background: #27c93f; }
.addr { height: 30px; gap: 8px; border-radius: 9px; border-color: var(--line); color: var(--ink-2); font-size: 13px; box-shadow: inset 0 1px 0 rgba(0,0,0,.03); }
.addr::before { content: ""; width: 12px; height: 12px; flex: none; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.aidot { padding: 4px 11px; border-radius: 99px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.aidot i { box-shadow: 0 0 0 3px rgba(10, 125, 90, .18); }

/* ---- hero demo: a believable store checkout ---- */
.demo .page { height: 440px; background: radial-gradient(900px 420px at 15% -10%, #eef6f2, transparent 60%), #f7f6f2; }
.store { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 24px; background: #fff; border-bottom: 1px solid #e5e1d9; font-size: 14px; }
.store .mark { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #34c79a, #0a7d5a); }
.store b { letter-spacing: -.01em; color: #141414; }
.store .steps { display: flex; gap: 6px; margin: 0 auto; font-size: 12.5px; color: #a19d95; }
.store .steps i { font-style: normal; padding: 4px 12px; border-radius: 99px; transition: all .3s; }
.store .steps i:nth-child(1) { background: var(--shop-soft); color: var(--shop); font-weight: 600; }
.page.review .store .steps i:nth-child(1) { background: transparent; color: #12805c; font-weight: 500; } .page.review .store .steps i:nth-child(1)::before { content: "✓ "; }
.page.review .store .steps i:nth-child(2) { background: var(--shop-soft); color: var(--shop); font-weight: 600; }
.store .cart { padding: 4px 11px; border: 1px solid #e1ddd4; border-radius: 99px; font-size: 12.5px; color: #67645e; }
.summary { position: absolute; right: 22px; top: 76px; width: 232px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #e5e1d9; box-shadow: 0 12px 26px -20px rgba(20, 28, 22, .4); font-size: 13px; color: #2a2a2a; }
.summary h4 { margin: 0 0 12px; font-size: 13px; color: #141414; }
.summary .li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.summary .thumb { width: 38px; height: 38px; border-radius: 9px; flex: none; } .thumb.t1 { background: linear-gradient(135deg, #ffd9b0, #f2a05a); } .thumb.t2 { background: linear-gradient(135deg, #d4ecdc, #7cc4a0); }
.summary .li b { display: block; font-size: 13px; color: #141414; } .summary small { color: #a19d95; } .summary .li em { margin-left: auto; font-style: normal; font-weight: 600; color: #141414; }
.summary .tot { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid #eeebe4; } .summary .tot.sum { padding-top: 10px; font-weight: 700; font-size: 14px; color: #141414; }
.demo .pg { padding: 78px 280px 24px 28px; }
.form-pg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-content: start; }
.form-pg h3, .form-pg .row, .form-pg label:first-of-type { grid-column: 1 / -1; } .form-pg #d-continue { justify-self: start; }
.pg h3 { margin: 0 0 4px; font: 700 22px/1.2 var(--sans); letter-spacing: -.02em; color: #141414; }
.pg h3::before { display: block; margin-bottom: 7px; font: 700 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--shop); }
.form-pg h3::before { content: "STEP 1 OF 3"; } .review-pg h3::before { content: "STEP 2 OF 3"; }
.pg label { flex-direction: column; align-items: stretch; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: #67645e; }
.inp { width: 100%; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border-color: var(--shop-line); font-size: 14px; font-weight: 400; }
.inp.focus { border-color: var(--shop); box-shadow: 0 0 0 3px #cfe8dc; } .inp.focus em::after { color: var(--shop); }
.demo .row { margin: 0; gap: 10px; flex-wrap: wrap; }
.chk { padding: 7px 14px; border: 1px solid var(--shop-line); border-radius: 99px; background: #fff; font-size: 13px; color: #141414; transition: all .2s; }
.chk i { border-color: #b8b3a8; } .chk.on { border-color: var(--shop); background: var(--shop-soft); } .chk.on i { background: var(--shop); border-color: var(--shop); }
.demo .pbtn { height: 42px; padding: 0 22px; border-radius: 11px; background: var(--shop); box-shadow: 0 10px 20px -12px rgba(10, 125, 90, .85); margin-top: 0; }
.review-pg p { margin: 12px 0 14px; font-size: 18px; font-weight: 600; color: #141414; }
.approve { border-radius: 14px; border: 1px solid #e1ddd4; border-left: 3px solid var(--primary); box-shadow: 0 22px 44px -16px rgba(20, 28, 22, .4); }
.approve b { color: #141414; }

/* ---- ghost cursor, ring and caption ---- */
.cursor { width: 28px; height: 28px; filter: drop-shadow(0 6px 10px rgba(10, 125, 90, .45)) drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.trail { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(10, 125, 90, .5), rgba(10, 125, 90, 0) 70%); animation: trailfade .55s ease-out forwards; }
@keyframes trailfade { to { transform: scale(2.4); opacity: 0; } }
.cap { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 9px; background: rgba(20, 20, 20, .92); backdrop-filter: blur(4px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.55); font-weight: 500; }
.cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-tint); }
.ring { border-radius: 10px; }

/* ---- token meters ---- */
.meters { padding: 22px; border-radius: 16px; border-color: var(--line); box-shadow: var(--shadow-card); }
.bar { height: 10px; border-radius: 99px; } .bar i { border-radius: 99px; }
.pw .bar i { background: linear-gradient(90deg, #d6d1c6, #bdb7aa); } .ab .bar i { background: linear-gradient(90deg, #0a7d5a, #34c79a); }
.saved { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; }
.saved.pop { box-shadow: 0 12px 22px -12px rgba(10, 125, 90, .75); }

/* ---- live steps ---- */
.feed { padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #181818, #101010); border: 1px solid #262626; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 40px -28px rgba(0,0,0,.6); }
.fh { justify-content: space-between; margin: 2px 4px 12px; } .fh span { display: inline-flex; align-items: center; gap: 8px; }
.fh b { font: 600 10.5px var(--mono); letter-spacing: .04em; color: #bdb9b0; background: #232323; border: 1px solid #2e2e2e; border-radius: 99px; padding: 2px 9px; text-transform: none; }
.feed ol { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.5; }
.feed li { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; color: #a8a59d; }
.feed li::before { content: "›"; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; background: #262626; color: #bdb9b0; font: 600 11px var(--mono); }
.feed li.k-call::before { content: "▶"; font-size: 8px; background: #123a2c; color: var(--primary-tint); }
.feed li.k-xray::before { content: "◎"; background: #16342b; color: #9be8c8; }
.feed li.k-diff::before { content: "Δ"; background: #16342b; color: #9be8c8; }
.feed li.k-warn { color: #ffd98a; background: rgba(255, 200, 87, .08); } .feed li.k-warn::before { content: "!"; background: #4a3410; color: #ffc857; }
.feed li.k-ok { color: #d7f3e7; } .feed li.k-ok::before { content: "✓"; background: #123a2c; color: var(--primary-tint); }
.feed li:last-child { background: rgba(255,255,255,.06); color: #fff; }
.feed li .t { background: #123a2c; color: var(--primary-tint); padding: 1px 8px; border-radius: 99px; font-size: 11.5px; }
.feed li .w { color: inherit; }

/* ---- x-ray: a real-looking recipe page ---- */
.win.small .page.xp { padding: 0 28px 76px; background: linear-gradient(#fff, #fbfaf7); }
.xp::before { content: "Pancake Lab"; display: block; margin: 0 -28px 18px; padding: 13px 28px; background: #fff; border-bottom: 1px solid var(--line); font-weight: 700; letter-spacing: -.01em; color: #141414; }
.xp h3 { margin: 0 0 12px; font: 700 26px/1.15 var(--serif); letter-spacing: -.02em; color: #141414; }
.xp h3::before { content: "RECIPE · 20 MIN"; display: block; margin-bottom: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--primary); }
.xp h3::after { content: ""; display: block; height: 84px; margin: 14px 0 4px; border-radius: 12px; background: radial-gradient(circle at 70% 35%, #fff1cf, transparent 55%), linear-gradient(135deg, #ffd89a, #f3b062 60%, #e39a4a); }
.xp .x-pw .inp { height: 34px; border-radius: 9px; }
.xp .x-btn { border-radius: 10px; }

/* ---- research tiles ---- */
.lanes { border-radius: 16px; box-shadow: var(--shadow-card); }
.lane { height: 28px; border-radius: 99px; } .seg { border-radius: 99px; top: 5px; padding-left: 9px; }
.tile { border-radius: 12px; box-shadow: var(--shadow-card); }
.tile .tc { padding: 8px 10px; background: var(--paper); font-weight: 500; }
.tile .tb { height: 96px; padding: 10px; gap: 7px; }
.tile .tb::before { content: ""; height: 34px; border-radius: 7px; background: linear-gradient(135deg, #e3f1ea, #c7e3d5); }
.tile .tb span { height: 6px; border-radius: 99px; } .tile .tb span:first-child { height: 9px; }
.tile.done .tc i { background: var(--primary); animation: none; }
.digest { border-radius: 16px; box-shadow: 0 22px 44px -30px rgba(0,0,0,.6); }

/* ---- benchmark charts ---- */
figure.chart { padding: 26px 28px 20px; border-radius: 16px; box-shadow: var(--shadow-card); }
figure.chart figcaption { font-size: 17px; letter-spacing: -.01em; }
.chart-legend { gap: 8px 10px; } .chart-legend span { padding: 3px 11px 3px 9px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); }
.chart-plot svg rect { transform-box: fill-box; transform-origin: left center; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes grow { from { transform: scaleX(0); } }
.chart-row:hover line { stroke: var(--primary-tint); }
.chart-table summary { display: inline-flex; padding: 5px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); }
.dm { padding: 4px 0; } .dm-row { border-radius: 8px; transition: background .15s; } .dm-row:hover { background: var(--paper); }
.dm-row.us { background: var(--primary-soft); }

/* ---- screenshots of the real app ---- */
.shot, .gallery figure { position: relative; }
.shot::before, .gallery figure::before { content: ""; position: absolute; inset: -12px; z-index: -1; border-radius: 26px; background: radial-gradient(65% 60% at 50% 45%, rgba(10, 125, 90, .06), transparent 75%); pointer-events: none; }
.shot img, .gallery img { border-radius: 14px; border-color: rgba(20, 24, 40, .12); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 40px 80px -42px rgba(20, 28, 22, .5), 0 12px 28px -18px rgba(20, 28, 22, .25); }
.gallery figure { transition: transform .25s; } .gallery figure:hover { transform: translateY(-4px); }
.gallery figcaption { display: flex; align-items: center; gap: 8px; } .gallery figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none; }
@media (max-width: 980px) { .demo .page { height: 470px; } .demo .pg { padding-right: 24px; } .summary { display: none; } }
/* the approval card sits under the button, so it never covers the order total */
.review-pg .approve { left: 28px; right: auto; bottom: 30px; width: 280px; }

/* ---------- products, Cloud waitlist, Mac page ---------- */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .products { grid-template-columns: 1fr; } }
.product { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 24px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); }
.product h3 { margin: 0; font: 400 28px/1.15 var(--serif); letter-spacing: -.01em; }
.product p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.product pre { margin: 0; width: 100%; padding: 12px 14px; background: var(--code); color: var(--code-text); border-radius: 8px; overflow-x: auto; font: 12.5px/1.6 var(--mono); }
.product pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; white-space: pre-wrap; word-break: break-word; }
.product .more { margin-top: auto; padding-top: 6px; color: var(--primary-ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.product .more:hover { text-decoration: underline; text-underline-offset: 3px; }
.pill { display: inline-block; font: 600 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 99px; padding: 2px 9px; }
.pill.live { color: var(--primary-ink); background: var(--primary-soft); border-color: #bfdccf; }
.soon a { text-decoration: none; } .soon a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.nav nav a.cur { color: var(--ink); font-weight: 600; }

.page-hero { max-width: var(--w); margin: 0 auto; padding: 88px 20px 0; }
.page-hero > div { max-width: 820px; }
.plain { max-width: 760px; margin: 40px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.65; }
.plain b { color: var(--ink); } .plain a { color: var(--primary-ink); text-underline-offset: 3px; }

.waitlist { margin-top: 36px; max-width: 560px; }
.waitlist label { display: block; margin-bottom: 8px; font: 500 12.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist input[type="email"] { flex: 1 1 260px; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font: 16px var(--sans); }
.waitlist input[type="email"]:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.waitlist .btn { cursor: pointer; } .waitlist .btn:disabled { opacity: .65; cursor: default; }
.waitlist .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-note { margin: 12px 0 0; color: var(--faint); font-size: 14px; }
.wl-msg { margin: 8px 0 0; min-height: 1.4em; font-size: 14.5px; } .wl-msg.err { color: #b3261e; }
.wl-done { margin: 0; padding: 16px 18px; border: 1px solid #bfdccf; border-radius: 10px; background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; font-size: 16px; line-height: 1.5; }

/* ---------- motion: progress bar, aurora, pointer glow ---------- */
.progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 100; background: linear-gradient(90deg, var(--primary), var(--primary-tint)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.glow-zone { position: relative; isolation: isolate; }
.glow-zone::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(460px circle at var(--mx, 72%) var(--my, 18%), rgba(10, 125, 90, .09), transparent 70%); }
.aurora { position: absolute; inset: -70px 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 62%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 22%, #000 62%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.aurora i { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(80px); opacity: .55; background: radial-gradient(circle, rgba(111, 211, 173, .55), transparent 65%); animation: drift 20s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: 2%; top: -6%; }
.aurora i:nth-child(2) { right: 0; top: 18%; background: radial-gradient(circle, rgba(10, 125, 90, .3), transparent 65%); animation-duration: 26s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translate(90px, 50px) scale(1.15); } }

.product { position: relative; overflow: hidden; }
.product::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%), rgba(10, 125, 90, .11), transparent 70%); }
.product:hover::after { opacity: 1; }
.product.in:hover { transform: translateY(-4px); }

/* ---------- hero install command ---------- */
.hero-cmd { max-width: 660px; margin-top: 30px; box-shadow: 0 18px 40px -22px rgba(20, 28, 22, .55); }
.hero-cmd pre { padding: 18px 92px 18px 22px; font-size: 13.5px; }
.hero-cmd pre::before { content: "$ "; color: var(--primary-tint); }
.cmd-note { margin: 12px 0 0; font-size: 13.5px; color: var(--faint); }
.hero-cmd + .cmd-note + .cta { margin-top: 24px; }

/* ---------- token savings ---------- */
.savings { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 920px) { .savings { grid-template-columns: 1fr; } }
.sv-race, .sv-calc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-card); }
.sv-race { display: grid; gap: 22px; }
.sv-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sv-h b { font: 400 38px/1 var(--serif); letter-spacing: -.02em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-col.ab .sv-h b { color: var(--primary); }
.dotgrid { display: flex; flex-wrap: wrap; gap: 4px; }
.dotgrid i { width: 9px; height: 9px; border-radius: 2px; background: #bdb7aa; opacity: 0; transform: scale(.3); transition: opacity .3s, transform .3s; }
.sv-col.ab .dotgrid i { background: var(--primary); width: 11px; height: 11px; border-radius: 3px; }
.savings.go .dotgrid i { opacity: 1; transform: none; }
.sv-race small { color: var(--faint); font-size: 13px; line-height: 1.55; } .sv-race small a { color: var(--primary-ink); }
.sv-calc { display: grid; gap: 20px; }
.sv-ctl label, .sv-lab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font: 500 12.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sv-ctl output { font: 400 26px/1 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-ctl input[type="range"] { width: 100%; accent-color: var(--primary); height: 28px; cursor: pointer; }
.sv-price { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-price button { height: 38px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 600 14.5px var(--sans); cursor: pointer; transition: border-color .15s, background .15s; }
.sv-price button:hover { border-color: var(--ink); }
.sv-price button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sv-out { display: grid; gap: 14px; }
.sv-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.sv-row span { color: var(--muted); font-size: 14.5px; } .sv-row b { font: 400 30px/1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sv-row i { grid-column: 1 / -1; display: block; height: 10px; border-radius: 5px; background: #bdb7aa; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.sv-row.ab i { background: var(--primary); } .sv-row.ab b { color: var(--primary); }
.sv-save { margin-top: 4px; padding: 16px 18px; border-radius: 12px; background: var(--primary-soft); border: 1px solid #bfdccf; color: var(--primary-ink); font-size: 15.5px; line-height: 1.4; }
.sv-save b { font: 400 34px/1.1 var(--serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sv-save small { display: block; margin-top: 6px; font-size: 13px; opacity: .85; }
.sv-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--faint); } .sv-note a { color: var(--primary-ink); }

/* ---------- split heroes (Cloud, Mac) ---------- */
.page-hero.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.page-hero.split > div { max-width: none; }
.page-hero.split h1 { font-size: clamp(38px, 4.6vw, 62px); }
@media (max-width: 960px) { .page-hero.split { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Cloud: live-view handoff demo ---------- */
.hdemo .win { box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 50px 90px -40px rgba(20, 28, 22, .45), 0 16px 34px -20px rgba(20, 28, 22, .22); }
.hdemo .live { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #b3261e; }
.hdemo .live i { width: 7px; height: 7px; border-radius: 50%; background: #d93025; animation: pulse 1.4s ease-in-out infinite; }
.hpage { position: relative; height: 330px; padding: 22px; background: linear-gradient(#fbfaf7, #f3f1ec); overflow: hidden; }
.hcard { display: none; width: min(320px, 82%); margin: 34px auto 0; padding: 20px 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); }
.hcard.on { display: block; animation: up .35s ease-out; }
.hcard h4 { margin: 0 0 14px; font: 600 16px var(--sans); }
.hf { margin-bottom: 12px; } .hf small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.hf span { display: flex; align-items: center; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 14px; letter-spacing: .02em; }
.hf.code span { font: 600 18px var(--mono); letter-spacing: .3em; }
.hbtn { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transition: transform .1s; }
.hbtn.press { transform: scale(.94); }
.hrow { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; } .hrow b { font-weight: 600; }
.hbanner { position: absolute; left: 14px; right: 14px; top: 12px; z-index: 4; padding: 9px 14px; border-radius: 9px; background: #fff4d6; border: 1px solid #e8cf86; color: #6a4e00; font: 600 13px var(--sans); transform: translateY(-70px); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s, background .3s; }
.hbanner.on { transform: none; opacity: 1; }
.hbanner.on::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: #e0a800; animation: pulse 1s ease-in-out infinite; }
.hbanner.ok { background: var(--primary-soft); border-color: #bfdccf; color: var(--primary-ink); } .hbanner.ok::before { background: var(--primary); animation: none; }
.hcur { position: absolute; left: 0; top: 0; width: 24px; height: 24px; z-index: 5; opacity: 0; transform: translate(-40px, 40px); transition: transform .75s cubic-bezier(.4, 0, .2, 1), opacity .25s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.hcur.on { opacity: 1; }
.hcur.agent path { fill: var(--ink); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.hcur.you path { fill: #3b5bdb; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.hlab { position: absolute; left: 0; top: 0; z-index: 6; padding: 2px 8px; border-radius: 5px; color: #fff; font: 600 11px var(--mono); opacity: 0; transform: translate(-40px, 40px); transition: transform .75s cubic-bezier(.4, 0, .2, 1), opacity .25s; }
.hlab.on { opacity: 1; } .hlab.agent { background: var(--ink); } .hlab.you { background: #3b5bdb; }
.hfeed { list-style: none; margin: 14px 0 0; padding: 14px 16px; min-height: 132px; border-radius: var(--r); background: var(--code); color: var(--code-text); font: 12.5px/1.8 var(--mono); }
.hfeed li { animation: up .3s ease-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfeed .agent { color: var(--primary-tint); } .hfeed .you { color: #9db0ff; } .hfeed em { font-style: normal; color: var(--code-muted); }

/* ---------- Mac: tilting app window with floating chips ---------- */
.mac-visual { position: relative; perspective: 1400px; --rx: 0deg; --ry: 0deg; }
.mac-visual img { display: block; width: 100%; border-radius: 14px; border: 1px solid rgba(20, 24, 40, .14); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; box-shadow: 0 60px 90px -40px rgba(20, 28, 22, .55), 0 18px 34px -20px rgba(20, 28, 22, .3); }
.chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border: 1px solid var(--line-2); box-shadow: 0 14px 30px -14px rgba(20, 28, 22, .4); font: 600 13px var(--sans); color: var(--ink); animation: bob 5s ease-in-out infinite; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); } .chip b { color: var(--primary); font-variant-numeric: tabular-nums; }
.chip.c1 { left: -4%; top: 10%; } .chip.c2 { right: -3%; top: 34%; animation-delay: -1.7s; } .chip.c3 { left: 6%; bottom: -4%; animation-delay: -3.2s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 960px) { .chip.c1 { left: 2%; } .chip.c2 { right: 2%; } }

/* ---------- waitlist confetti ---------- */
.confetti { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 10; }
.confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: confetti 1.2s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 90px)) rotate(var(--r)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .chip, .hdemo .live i, .hbanner.on::before { animation: none; }
  .mac-visual img, .hcur, .hlab { transition: none; }
}
@media (max-width: 720px) { .foot .cols { flex-wrap: wrap; gap: 28px 40px; } }
@media (max-width: 720px) { .hero-cmd pre { white-space: pre-wrap; word-break: break-all; padding-right: 84px; } }