html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--tusk); overflow-x: hidden; }
a { color: var(--boar); text-decoration: none; }
a:hover { color: var(--boar-deep); }
/* ambient light lifted from the brand panel */
.glow { position: fixed; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(760px 640px at 82% -6%, rgba(224,100,44,.26), transparent 66%),
radial-gradient(620px 620px at 4% 42%, rgba(90,75,214,.16), transparent 70%); }
.wrap { position: relative; z-index: 1; }
.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 28px; }
section { position: relative; }
/* ------- shared bits ------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
letter-spacing: .07em; text-transform: uppercase; color: var(--boar);
background: rgba(224,100,44,.12); border: 1px solid rgba(224,100,44,.26);
padding: 6px 13px; border-radius: 999px; }
.eyebrow.plain { color: rgba(251,248,243,.62); background: rgba(251,248,243,.05); border-color: rgba(251,248,243,.12); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--boar);
animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(224,100,44,.55);} 70%{box-shadow:0 0 0 9px rgba(224,100,44,0);} 100%{box-shadow:0 0 0 0 rgba(224,100,44,0);} }
.sec-head { max-width: 620px; margin: 0 0 44px; }
.sec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,4.2vw,42px);
letter-spacing: -.03em; line-height: 1.06; margin: 18px 0 0; text-wrap: balance; }
.sec-head p { font-size: clamp(15px,1.8vw,17px); line-height: 1.6; color: rgba(251,248,243,.66);
margin: 14px 0 0; max-width: 54ch; text-wrap: pretty; }
.btn { font-family: var(--font-ui); font-weight: 600; font-size: 15px; border-radius: var(--r-md);
padding: 12px 20px; cursor: pointer; white-space: nowrap; border: 1px solid transparent;
transition: background .15s, transform .08s, border-color .15s, color .15s; display: inline-flex;
align-items: center; gap: 9px; }
.btn-primary, a.btn-primary:hover { color: #fff; }
.btn-primary { background: var(--boar); }
.btn-primary:hover { background: var(--boar-deep); }
.btn-ghost, a.btn-ghost:hover { color: var(--tusk); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; border-color: rgba(251,248,243,.18); }
.btn-ghost:hover { background: rgba(251,248,243,.06); border-color: rgba(251,248,243,.3); }
/* mascot aside used all over — Codaban narrating */
.aside { display: flex; align-items: flex-start; gap: 13px; }
.aside .mug { width: 40px; height: 40px; border-radius: 12px; overflow: hidden; flex: none;
background: var(--tusk); box-shadow: var(--shadow-2); display: grid; place-items: center; }
/* Avatar crop: the mascot PNG has padding, so every avatar zooms past it.
Use scale() — it zooms from the element's centre, so the crop stays even on
all four sides. Sizing the img over 100% instead pins it to the box's
top-left and eats the right and bottom edges. */
.aside .mug img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.aside .say { font-style: italic; font-size: 14.5px; line-height: 1.55; color: rgba(251,248,243,.7); }
.aside .say b { font-style: normal; color: var(--boar); font-weight: 600; }
/* ============ NAV ============ */
nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px);
background: rgba(33,30,26,.66); border-bottom: 1px solid rgba(251,248,243,.07); }
nav .row { display: flex; align-items: center; gap: 22px; height: 66px; }
nav .logo { height: 28px; width: auto; display: block; }
nav .links { display: flex; gap: 26px; margin-left: 14px; }
nav .links a { color: rgba(251,248,243,.72); font-size: 14.5px; font-weight: 500; }
nav .links a:hover { color: var(--tusk); }
nav .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
nav .signin { color: rgba(251,248,243,.78); font-size: 14.5px; font-weight: 500; }
nav .signin:hover { color: var(--tusk); }
@media (max-width: 780px){ nav .links { display: none; } }
/* ============ HERO ============ */
.hero { padding: 74px 0 30px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px,6vw,64px);
letter-spacing: -.038em; line-height: 1.02; margin: 22px 0 0; max-width: 15ch; text-wrap: balance; }
.hero h1 .em { color: var(--boar); }
.hero .lede { font-size: clamp(16px,2vw,19px); line-height: 1.58; color: rgba(251,248,243,.72);
max-width: 46ch; margin: 20px 0 0; text-wrap: pretty; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .microcopy { font-size: 13px; color: rgba(251,248,243,.45); margin-top: 16px; }
.hero .microcopy b { color: rgba(251,248,243,.7); font-weight: 600; }
/* hero product visual — a review card mock */
.heromock { position: relative; }
.heromock .float-mug { position: absolute; top: -26px; left: -22px; z-index: 3;
width: 74px; height: 74px; border-radius: 20px; overflow: hidden; background: var(--tusk);
box-shadow: var(--shadow-3); animation: fadeUp .6s ease .1s both; }
.heromock .float-mug img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); }
/* ---- reusable "review card" mock ---- */
.mock { background: #262320; border: 1px solid rgba(251,248,243,.1); border-radius: var(--r-lg);
box-shadow: var(--shadow-3); overflow: hidden; }
.mock .bar { display: flex; align-items: center; gap: 9px; padding: 12px 15px;
border-bottom: 1px solid rgba(251,248,243,.08); background: rgba(251,248,243,.02); }
.mock .bar .tl { display: flex; gap: 6px; }
.mock .bar .tl i { width: 10px; height: 10px; border-radius: 50%; background: rgba(251,248,243,.16); display: block; }
.mock .bar .fname { font-family: var(--font-mono); font-size: 12px; color: rgba(251,248,243,.55); margin-left: 6px; }
.mock .bar .verdict { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
color: #ffcf9e; background: rgba(217,138,31,.16); border: 1px solid rgba(217,138,31,.34); }
.mock .code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; padding: 12px 0; }
.mock .code .ln { display: grid; grid-template-columns: 40px 1fr; padding: 0 14px; color: rgba(251,248,243,.72); }
.mock .code .ln .g { color: rgba(251,248,243,.28); text-align: right; padding-right: 14px; user-select: none; }
.mock .code .ln.add { background: rgba(30,158,106,.1); }
.mock .code .ln.add .g { color: #6bcf9f; }
.mock .code .ln.del { background: rgba(217,72,59,.1); }
.mock .code .ln.del .g { color: #e58a80; }
.mock .code .k { color: #d9a6ff; } .mock .code .s { color: #9fe0c4; } .mock .code .c { color: rgba(251,248,243,.35); }
.comment { margin: 4px 14px 14px; padding: 13px 14px; border-radius: var(--r-md);
background: rgba(90,75,214,.12); border: 1px solid rgba(90,75,214,.32); border-left: 3px solid var(--deep); }
.comment .who { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.comment .who .m { width: 22px; height: 22px; border-radius: 7px; overflow: hidden; background: var(--tusk); flex: none; display: grid; place-items: center; }
.comment .who .m img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.comment .who .nm { font-size: 12.5px; font-weight: 600; color: var(--tusk); }
.comment .who .tag { font-size: 10.5px; font-weight: 600; color: #c8bffa; background: rgba(90,75,214,.22);
padding: 2px 7px; border-radius: 6px; }
.comment .body { font-size: 13px; line-height: 1.55; color: rgba(251,248,243,.82); }
.comment .body code { font-family: var(--font-mono); font-size: 11.5px; background: rgba(251,248,243,.1); padding: 1px 5px; border-radius: 5px; }
/* mode chips row */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600; border: 1px solid rgba(251,248,243,.14); background: rgba(251,248,243,.04); }
.chip .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip .sub { color: rgba(251,248,243,.5); font-weight: 500; }
/* logos / platforms */
.platforms { padding: 22px 0 8px; }
.plat-row { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; justify-content: center;
padding: 22px 26px; border: 1px solid rgba(251,248,243,.08); border-radius: var(--r-lg);
background: rgba(251,248,243,.02); }
.plat-row .lbl { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(251,248,243,.42); font-weight: 600; }
.plat { display: inline-flex; align-items: center; gap: 10px; color: rgba(251,248,243,.82); font-weight: 600; font-size: 16px; }
.plat svg { width: 22px; height: 22px; flex: none; }
.plat.soon { color: rgba(251,248,243,.42); }
a.plat { color: rgba(251,248,243,.72); transition: color .15s; }
a.plat:hover { color: var(--tusk); }
.plat .pill.inst { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--boar); background: rgba(224,100,44,.14); border: 1px solid rgba(224,100,44,.3); padding: 2px 7px; border-radius: 6px; }
a.plat:hover .pill.inst { background: rgba(224,100,44,.24); border-color: rgba(224,100,44,.5); }
.plat.soon .pill { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--boar); background: rgba(224,100,44,.14); border: 1px solid rgba(224,100,44,.3); padding: 2px 7px; border-radius: 6px; }
/* ============ MODES ============ */
.modes { padding: 84px 0; }
.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mcard { background: rgba(251,248,243,.03); border: 1px solid rgba(251,248,243,.1); border-radius: var(--r-lg);
padding: 26px 24px; position: relative; overflow: hidden; transition: transform .18s, border-color .18s; }
.mcard:hover { transform: translateY(-3px); border-color: rgba(251,248,243,.2); }
.mcard .top { position: absolute; inset: 0 0 auto 0; height: 3px; }
.mcard .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.mcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: -.02em; margin: 16px 0 0; }
.mcard .tag { font-size: 13px; font-weight: 600; color: rgba(251,248,243,.5); margin-top: 3px; }
.mcard p { font-size: 14px; line-height: 1.6; color: rgba(251,248,243,.68); margin: 14px 0 0; text-wrap: pretty; }
.mcard ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 9px; }
.mcard li { display: flex; gap: 9px; font-size: 13px; line-height: 1.45; color: rgba(251,248,243,.74); }
.mcard li svg { flex: none; margin-top: 2px; }
/* ============ HOW IT WORKS ============ */
.how { padding: 20px 0 84px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
.step { padding: 22px 20px; border-radius: var(--r-lg); border: 1px solid rgba(251,248,243,.09);
background: rgba(251,248,243,.02); }
.step .n { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--boar);
width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
background: rgba(224,100,44,.14); border: 1px solid rgba(224,100,44,.28); }
.step h4 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 15px 0 0; letter-spacing: -.01em; }
.step p { font-size: 13.5px; line-height: 1.55; color: rgba(251,248,243,.64); margin: 8px 0 0; }
/* ============ AGENT SPOTLIGHT ============ */
.spot { padding: 84px 0; }
.spot-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 52px; align-items: center; }
.spot .kicker { color: var(--agent); background: rgba(181,71,30,.16); border-color: rgba(181,71,30,.36); }
.spot h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,4vw,40px);
letter-spacing: -.03em; line-height: 1.08; margin: 18px 0 0; text-wrap: balance; }
.spot p { font-size: 16px; line-height: 1.62; color: rgba(251,248,243,.7); margin: 16px 0 0; text-wrap: pretty; }
.agentflow { display: flex; flex-direction: column; gap: 0; }
.astep { display: flex; gap: 14px; padding: 14px 0; }
.astep .rail { display: flex; flex-direction: column; align-items: center; }
.astep .bullet { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
background: rgba(181,71,30,.16); border: 1px solid rgba(181,71,30,.4); color: #f2a985; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.astep .line { width: 2px; flex: 1; background: rgba(181,71,30,.28); margin-top: 4px; }
.astep:last-child .line { display: none; }
.astep .txt h5 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 4px 0 0; }
.astep .txt p { font-size: 13.5px; line-height: 1.5; color: rgba(251,248,243,.64); margin: 5px 0 0; }
/* ============ DASHBOARD SHOWCASE ============ */
.show { padding: 20px 0 90px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 999px;
cursor: pointer; background: rgba(251,248,243,.04); border: 1px solid rgba(251,248,243,.12);
color: rgba(251,248,243,.62); transition: all .15s; }
.tab:hover { color: var(--tusk); border-color: rgba(251,248,243,.26); }
.tab.on { background: var(--boar); border-color: var(--boar); color: #fff; }
.shot { display: none; }
.shot.on { display: block; animation: fadeUp .35s ease both; }
.shotcap { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; max-width: 660px; }
/* app window chrome */
.appwin { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-3), 0 0 0 1px rgba(251,248,243,.1);
background: var(--bg); }
.appwin .chrome { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #302B25;
border-bottom: 1px solid rgba(251,248,243,.08); }
.appwin .chrome .tl { display: flex; gap: 6px; }
.appwin .chrome .tl i { width: 10px; height: 10px; border-radius: 50%; background: rgba(251,248,243,.18); display: block; }
.appwin .chrome .url { font-family: var(--font-mono); font-size: 11.5px; color: rgba(251,248,243,.45);
background: rgba(251,248,243,.06); padding: 4px 12px; border-radius: 7px; margin: 0 auto; }
/* --- light app surface: dashboard vocabulary --- */
.app { background: var(--bg); color: var(--ink); font-family: var(--font-ui); display: grid;
grid-template-columns: 186px 1fr; }
.app .side { background: var(--surface); border-right: 1px solid var(--line); padding: 14px 10px; }
.app .side .ws { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: var(--r-sm);
background: var(--bg-tint); margin-bottom: 14px; }
.app .side .ws .av { width: 24px; height: 24px; border-radius: 7px; overflow: hidden; background: var(--tusk); flex: none; }
.app .side .ws .av img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.app .side .ws .wsi { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.app .side .ws .nm { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.app .side .ws .pl { display: block; font-size: 11px; color: var(--ink-3); }
.app .side .ws .cv { margin-left: auto; color: var(--ink-4); flex: none; }
.app .side .navi { display: flex; flex-direction: column; gap: 2px; }
.app .side .navi a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--r-sm);
font-size: 13px; font-weight: 500; color: var(--ink-2); }
.app .side .navi a.on { background: var(--boar-soft); color: var(--boar-deep); font-weight: 600; }
.app .side .navi a svg { flex: none; opacity: .62; }
.app .side .navi a.on svg { opacity: 1; }
.app .side .navi a .bdg { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
color: var(--ink-3); background: var(--bg-tint); padding: 1px 6px; border-radius: 5px; }
.app .side .navi a.on .bdg { color: var(--boar-deep); background: rgba(224,100,44,.16); }
.app .side .foot { margin-top: 16px; padding: 10px; display: flex; align-items: center; gap: 9px;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.app .side .foot .m { width: 28px; height: 28px; border-radius: 8px; overflow: hidden; background: var(--tusk); flex: none; }
.app .side .foot .m img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.app .side .foot .p1 { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.app .side .foot .p2 { display: block; font-size: 10.5px; color: var(--mane); }
.app .main { padding: 20px 22px 24px; min-width: 0; }
.app h1.pt { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.025em; color: var(--ink); }
.app .voice { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.app .voice .m { width: 20px; height: 20px; border-radius: 6px; overflow: hidden; background: var(--tusk); flex: none; }
.app .voice .m img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.app .voice span { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; margin: 18px 0 11px; }
.kpi { padding: 13px 14px; }
.kpi .l { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.kpi .v { font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: -.02em; color: var(--ink); margin-top: 3px; }
.kpi .s { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.kpi .v .up { font-size: 11px; font-weight: 600; color: var(--approve); margin-left: 5px; letter-spacing: 0; }
.outs { display: grid; grid-template-columns: repeat(5,1fr); gap: 11px; margin-bottom: 16px; }
.out { padding: 11px 13px; }
.out .l { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); font-weight: 500; }
.out .l i { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; }
.out .v { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin-top: 4px; }
.costrow { display: grid; grid-template-columns: 1fr 1.25fr; margin-bottom: 16px; overflow: hidden; }
.costrow .lt { padding: 18px; border-right: 1px solid var(--line);
background: linear-gradient(160deg, var(--boar-soft) 0%, var(--surface) 70%); }
.costrow .lt .cl { font-size: 11.5px; color: var(--mane); font-weight: 600; }
.costrow .lt .cv { font-family: var(--font-display); font-weight: 700; font-size: 38px; letter-spacing: -.03em; margin: 4px 0 2px; }
.costrow .lt .cs { font-size: 11.5px; color: var(--ink-3); }
.costrow .lt .ml { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.costrow .lt .ml div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.costrow .lt .ml i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.costrow .lt .ml b { margin-left: auto; color: var(--ink); font-weight: 600; }
.costrow .lt .ml em { font-family: var(--font-mono); font-style: normal; color: var(--ink-4); font-size: 11px; }
.costrow .rt { padding: 18px; }
.sect { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.sect span { font-family: var(--font-ui); font-weight: 400; font-size: 11.5px; color: var(--ink-4); margin-left: 8px; }
/* PR table */
.prt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.prt th { padding: 9px 10px; font-size: 10px; font-weight: 600; color: var(--ink-4); text-transform: uppercase;
letter-spacing: .04em; white-space: nowrap; text-align: left; border-bottom: 1px solid var(--line); }
.prt th.r, .prt td.r { text-align: right; }
.prt td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.prt tr:last-child td { border-bottom: none; }
.prt .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.prt .ttl { font-weight: 600; color: var(--ink); }
.prt .repo { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.mchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.mchip i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.vd { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.tbhead { padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.showscroll { overflow-x: auto; }
.gbtn { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--ink-2);
border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-sm); padding: 5px 10px; }
/* trace view */
.prhead { padding: 18px; margin-bottom: 12px; position: relative; overflow: hidden; }
.prhead .stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--deep); }
.prhead .crumb { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.prhead h2 { margin: 7px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.prhead h2 .n { font-family: var(--font-mono); color: var(--ink-4); font-weight: 500; font-size: 16px; }
.prhead .meta { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.prhead .say2 { margin-top: 14px; padding: 10px 13px; background: var(--deep-soft); border-radius: var(--r-md);
display: flex; gap: 10px; align-items: center; }
.prhead .say2 .m { width: 24px; height: 24px; border-radius: 7px; overflow: hidden; background: var(--tusk); flex: none; }
.prhead .say2 .m img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.prhead .say2 span { font-size: 12.5px; color: var(--ink-2); font-style: italic; }
.iter { display: flex; gap: 12px; }
.iter .rail2 { display: flex; flex-direction: column; align-items: center; flex: none; }
.iter .rail2 .b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
background: var(--surface); border: 2px solid var(--line-2); font-family: var(--font-display);
font-weight: 700; font-size: 12px; color: var(--ink-2); }
.iter .rail2 .l { flex: 1; width: 2px; background: var(--line); margin-top: 4px; }
.iter .body2 { flex: 1; min-width: 0; padding-bottom: 16px; }
.ihead { padding: 11px 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.ihead .h { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); background: var(--bg-tint); padding: 2px 6px; border-radius: 5px; }
.ihead .st { display: flex; gap: 12px; font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.ihead .st b { color: var(--ink); font-weight: 600; }
.ibody { padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 9px; }
.ibody .lbl { font-size: 10px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; }
.llm { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 11px 12px; }
.llm .top2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }
.llm .kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; }
.llm .tier { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--tier-senior); }
.llm .mdl { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.llm .sp { flex: 1; }
.llm .tk { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.llm .cst { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.llm .ok { font-size: 10px; font-weight: 700; color: var(--approve); background: var(--approve-soft); padding: 2px 6px; border-radius: 5px; }
.llm .tbar { margin-top: 9px; height: 4px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.llm .tbar i { display: block; height: 100%; border-radius: 999px; }
.tools { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.tool { display: flex; align-items: center; gap: 9px; padding: 6px 10px; background: var(--deep-soft); border-radius: var(--r-sm); }
.tool .tn { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--deep); }
.tool .ta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool .to { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.resp { margin-top: 10px; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
@media (max-width: 900px){
.app { grid-template-columns: 1fr; }
.app .side { display: none; }
.kpis, .outs { grid-template-columns: repeat(2,1fr); }
.qstats { grid-template-columns: repeat(2,1fr); }
.qgrid { grid-template-columns: 1fr; }
.costrow { grid-template-columns: 1fr; }
.costrow .lt { border-right: none; border-bottom: 1px solid var(--line); }
.quota .qtop { flex-direction: column; }
.quota .qright { text-align: left; }
}
/* --- quota overview (plan units, no USD) --- */
.quota { padding: 20px 22px; margin: 18px 0 12px; }
.quota .qtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.quota .pn { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.quota .pn i { width: 8px; height: 8px; border-radius: 50%; background: var(--boar); flex: none; }
.quota .ps { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.quota .qright { text-align: right; }
.quota .qright .r1 { font-size: 12px; color: var(--ink-2); }
.quota .qright .r1 b { color: var(--ink); font-weight: 600; }
.quota .qright .r2 { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.quota .qmid { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 16px 0 12px; }
.quota .big { font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.quota .big span { font-family: var(--font-ui); font-weight: 500; font-size: 15px; letter-spacing: 0; color: var(--ink-3); margin-left: 7px; }
.qbtn { font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface);
border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 14px; cursor: pointer; }
.qbtn.pri { background: var(--boar); border-color: var(--boar); color: #fff; }
.qbar { height: 9px; border-radius: 999px; background: var(--bg-tint); overflow: hidden; display: flex; }
.qbar i { display: block; height: 100%; }
.qlegend { display: flex; align-items: center; gap: 14px; margin-top: 11px; flex-wrap: wrap; }
.qlegend .li { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.qlegend .li i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.qlegend .note { margin-left: auto; font-size: 11px; color: var(--ink-4); }
.qnote { margin-top: 14px; padding: 10px 13px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.5; display: none; }
.qnote.show { display: block; }
.qnote b { font-weight: 600; color: var(--ink); }
.qstats { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; margin-bottom: 12px; }
.qstat { padding: 13px 15px; border-left: 3px solid var(--line-2); }
.qstat .l { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.qstat .v { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.025em; color: var(--ink); margin: 2px 0 1px; }
.qstat .s { font-size: 10.5px; color: var(--ink-4); }
.qgrid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 12px; }
.chartcard { padding: 16px 18px 14px; }
.chartcard .ch { display: flex; align-items: baseline; justify-content: space-between; }
.chartcard .ch .sub { font-size: 11px; color: var(--ink-4); }
.chartcard .cf { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.chartcard .cf .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.chartcard .cf .lg i { width: 11px; height: 3px; border-radius: 2px; background: var(--boar); }
.chartcard .cf .pk { font-size: 11px; color: var(--ink-4); }
.actcard { padding: 0; overflow: hidden; }
.actcard .ah { padding: 16px 18px 12px; display: flex; align-items: baseline; justify-content: space-between; }
.actcard .ah .sub { font-size: 11px; color: var(--ink-4); }
.act { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.act th { padding: 7px 14px; font-size: 10px; font-weight: 600; color: var(--ink-4); text-transform: uppercase;
letter-spacing: .04em; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.act th.r, .act td.r { text-align: right; }
.act td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.act tr:last-child td { border-bottom: none; }
.act .rp { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.act .rp svg { flex: none; opacity: .75; }
.act .pr { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.act .when { color: var(--ink-4); font-size: 11.5px; }
.memnote { font-size: 11.5px; color: var(--ink-4); margin-top: 14px; }
/* ============ REVIEWER BEHAVIOUR ============ */
.real { padding: 20px 0 88px; }
.real-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: start; }
.sev { display: flex; flex-direction: column; gap: 10px; }
.sevrow { display: flex; gap: 13px; padding: 16px 18px; border-radius: var(--r-lg);
border: 1px solid rgba(251,248,243,.1); background: rgba(251,248,243,.03); }
.sevrow .lv { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 4px 9px; border-radius: 6px; height: fit-content; flex: none; white-space: nowrap; }
.sevrow b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--tusk); }
.sevrow code { font-family: var(--font-mono); font-size: 11.5px; background: rgba(251,248,243,.08);
padding: 1px 5px; border-radius: 5px; color: rgba(251,248,243,.72); }
.sevrow .d { display: block; font-size: 13.5px; line-height: 1.55; color: rgba(251,248,243,.64); margin-top: 4px; text-wrap: pretty; }
.verdicts { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.vrow { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.5; color: rgba(251,248,243,.72); }
.vrow svg { flex: none; margin-top: 3px; }
.vrow b { color: var(--tusk); font-weight: 600; }
/* ============ PRICING TEASER ============ */
.pricing { padding: 20px 0 84px; }
.price-card { border: 1px solid rgba(251,248,243,.1); border-radius: var(--r-xl); padding: 44px 40px;
background: linear-gradient(180deg, rgba(224,100,44,.08), rgba(251,248,243,.02)); text-align: center; }
.price-card h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px,3.4vw,34px);
letter-spacing: -.02em; margin: 16px 0 0; }
.price-card p { font-size: 15.5px; line-height: 1.6; color: rgba(251,248,243,.66); margin: 12px auto 0; max-width: 46ch; }
.price-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.price-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
font-size: 13.5px; font-weight: 600; color: rgba(251,248,243,.8); border: 1px solid rgba(251,248,243,.14); background: rgba(251,248,243,.03); }
.draft { position: relative; border: 1px dashed rgba(251,248,243,.2); border-radius: calc(var(--r-xl) + 10px);
padding: 34px 24px 26px; margin-bottom: 26px; }
.draft-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: rgba(251,248,243,.72); background: var(--ink); border: 1px dashed rgba(251,248,243,.3); }
.draft-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--boar); flex: none; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.plan { position: relative; overflow: hidden; border: 1px solid rgba(251,248,243,.16); border-radius: var(--r-xl); padding: 32px 28px 34px;
background: linear-gradient(180deg, rgba(251,248,243,.07), rgba(251,248,243,.025)); box-shadow: 0 18px 44px rgba(0,0,0,.28);
display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.plan::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px;
background: linear-gradient(90deg, transparent, var(--boar), transparent); opacity: .65; }
.plan:hover { border-color: rgba(224,100,44,.45); transform: translateY(-3px); box-shadow: 0 24px 54px rgba(0,0,0,.36); }
.plan.feature { border-color: rgba(224,100,44,.42); background: linear-gradient(180deg, rgba(224,100,44,.08), rgba(251,248,243,.02)); }
.plan .tag { position: absolute; top: -11px; left: 28px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px;
font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tusk); background: var(--boar); }
.plan h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--tusk); margin: 0; }
.plan .amt { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 4px; }
.plan .amt b { font-family: var(--font-display); font-size: 42px; font-weight: 600; letter-spacing: -.03em; color: var(--tusk); line-height: 1; }
.plan .amt span { font-size: 14px; color: rgba(251,248,243,.55); }
.plan .quota { padding: 0; margin: 0 0 16px; border: 0; background: none; border-radius: 0; font-size: 15px; font-weight: 600; color: var(--boar); }
.plan .quota em { font-style: normal; color: rgba(251,248,243,.5); font-weight: 400; }
.plan .note { font-size: 13.5px; line-height: 1.55; color: rgba(251,248,243,.6); margin: 0; }
.plans-foot { max-width: 720px; margin: 0 auto; text-align: center; font-size: 14.5px; line-height: 1.65; color: rgba(251,248,243,.6); }
.pledges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 30px; }
.pledge { display: flex; gap: 13px; padding: 20px 22px; border: 1px solid rgba(251,248,243,.1);
border-radius: var(--r-lg); background: rgba(251,248,243,.02); }
.pledge .pc { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center;
background: rgba(30,158,106,.16); border: 1px solid rgba(30,158,106,.34); margin-top: 1px; }
.pledge b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px;
letter-spacing: -.01em; color: var(--tusk); }
.pledge span.d { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(251,248,243,.62); margin-top: 3px; }
/* ============ WAITLIST ============ */
.waitlist { padding: 78px 0 90px; }
.wl-card { border: 1px solid rgba(251,248,243,.1); border-radius: var(--r-xl); overflow: hidden;
display: grid; grid-template-columns: 1fr 1fr; }
.wl-left { padding: 48px 44px; background: rgba(251,248,243,.02); }
.wl-left h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,3.6vw,38px);
letter-spacing: -.03em; line-height: 1.05; margin: 18px 0 0; text-wrap: balance; }
.wl-left p { font-size: 15.5px; line-height: 1.6; color: rgba(251,248,243,.66); margin: 14px 0 0; text-wrap: pretty; }
.wl-right { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center;
background: radial-gradient(420px 320px at 78% 12%, rgba(224,100,44,.16), transparent 70%); }
.notify-label { font-size: 13.5px; font-weight: 600; color: rgba(251,248,243,.84); margin-bottom: 10px; }
form.wl { display: flex; flex-direction: column; gap: 18px; }
.wl-q { display: flex; flex-direction: column; gap: 9px; }
.wl-q > .q { font-size: 13.5px; font-weight: 600; color: rgba(251,248,243,.84); }
.wl-q > .q span { font-weight: 400; color: rgba(251,248,243,.45); }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
color: rgba(251,248,243,.66); border: 1px solid rgba(251,248,243,.16); background: rgba(251,248,243,.04);
transition: color .15s, border-color .15s, background .15s; }
.seg input:hover + span { color: var(--tusk); border-color: rgba(251,248,243,.3); }
.seg input:checked + span { color: var(--tusk); border-color: var(--boar); background: rgba(224,100,44,.18); }
.seg input:focus-visible + span { box-shadow: var(--ring); }
.consent { display: flex; gap: 11px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg);
border: 1px solid rgba(251,248,243,.13); background: rgba(251,248,243,.03); cursor: pointer; }
.consent input { appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 5px;
border: 1px solid rgba(251,248,243,.28); background: rgba(251,248,243,.05); cursor: pointer;
background-size: 12px; background-position: center; background-repeat: no-repeat; transition: background .15s, border-color .15s; }
.consent input:checked { border-color: var(--boar); background-color: var(--boar);
background-image: url("data:image/svg+xml;utf8,"); }
.consent input:focus-visible { box-shadow: var(--ring); }
.consent .ct { font-size: 13px; line-height: 1.55; color: rgba(251,248,243,.66); }
.consent .ct b { display: block; font-size: 13.5px; font-weight: 600; color: var(--tusk); margin-bottom: 3px; }
form.wl .btn { width: 100%; justify-content: center; }
.field { flex: 1; display: flex; align-items: center; background: rgba(251,248,243,.06);
border: 1px solid rgba(251,248,243,.16); border-radius: var(--r-md); padding: 0 13px;
transition: border-color .15s, box-shadow .15s, background .15s; }
.field:focus-within { border-color: var(--boar); background: rgba(251,248,243,.09); box-shadow: var(--ring); }
.field input { flex: 1; background: none; border: none; outline: none; color: var(--tusk);
font-family: var(--font-ui); font-size: 15px; padding: 13px 0; }
.field input::placeholder { color: rgba(251,248,243,.4); }
.hint { font-size: 12.5px; color: rgba(251,248,243,.58); margin-top: 12px; }
.thanks { display: none; align-items: center; gap: 12px; padding: 15px 16px; margin-top: 2px;
background: rgba(30,158,106,.14); border: 1px solid rgba(30,158,106,.34); border-radius: var(--r-md);
font-size: 14px; animation: popIn .3s ease both; }
.thanks.show { display: flex; }
.thanks .m { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; background: var(--tusk); flex: none; display: grid; place-items: center; }
.thanks .m img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.thanks i { font-style: italic; color: rgba(251,248,243,.78); }
.thanks span b { color: #7fe0b4; font-weight: 600; font-style: normal; }
/* the "database is down" variant of the same block — burnt red, not green */
.thanks.fault { background: rgba(217,72,59,.14); border-color: rgba(217,72,59,.34); }
.thanks.fault span b { color: #e58a80; }
/* inline validation / transport errors */
.formerr { display: none; margin-top: 12px; font-size: 13.5px; color: #e58a80; }
.formerr.show { display: block; }
/* honeypot: off-screen for humans, irresistible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* ============ FOOTER ============ */
footer { border-top: 1px solid rgba(251,248,243,.08); padding: 34px 0 46px; }
footer .row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
footer .logo { height: 24px; }
footer .flinks { display: flex; gap: 22px; margin-left: auto; }
footer .flinks a { color: rgba(251,248,243,.55); font-size: 13.5px; font-weight: 500; }
footer .flinks a:hover { color: var(--tusk); }
footer .legal-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(251,248,243,.07); }
footer .legal-row a { color: rgba(251,248,243,.5); font-size: 12.5px; font-weight: 500; }
footer .legal-row a:hover { color: var(--tusk); }
footer .copy { font-size: 12.5px; color: rgba(251,248,243,.58); margin-top: 16px; }
.reveal { animation: fadeUp .6s ease both; }
@media (max-width: 900px){
.hero-grid, .spot-grid { grid-template-columns: 1fr; gap: 38px; }
.mode-cards { grid-template-columns: 1fr; }
.real-grid { grid-template-columns: 1fr; gap: 34px; }
.steps { grid-template-columns: repeat(2, 1fr); }
.wl-card { grid-template-columns: 1fr; }
.plans { grid-template-columns: 1fr; }
.pledges { grid-template-columns: 1fr; }
.plans-foot { max-width: none; }
footer .flinks { margin-left: 0; }
}
@media (max-width: 700px){
.hero { padding: 44px 0 24px; }
.modes, .spot { padding: 60px 0; }
.how, .real, .pricing, .show { padding-bottom: 62px; }
.waitlist { padding: 56px 0 66px; }
.sec-head { margin-bottom: 32px; }
.plat-row { gap: 20px; padding: 18px 20px; }
.appwin { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.app { min-width: 560px; }
}
@media (max-width: 560px){
.container { padding: 0 20px; }
.steps { grid-template-columns: 1fr; }
.draft { padding: 30px 16px 22px; }
.draft-tag { font-size: 10.5px; letter-spacing: .05em; padding: 5px 11px; }
.plan { padding: 28px 22px 30px; }
form.wl { gap: 16px; }
.wl-left, .wl-right { padding: 34px 26px; }
.heromock .float-mug { width: 60px; height: 60px; top: -18px; left: -14px; }
.hero .actions { flex-direction: column; align-items: stretch; }
.hero .actions .btn { justify-content: center; }
.kpis, .outs, .qstats { grid-template-columns: 1fr 1fr; }
footer .flinks { gap: 14px 18px; }
}