/* Landing page shell. Source of truth: Claude Design project "eCom Solutions Waitlist.dc.html" (8 Oct 2026).
   Near-black and cream sections alternate, Figtree light for copy, Inter inside the product frames,
   one orange accent, square corners outside the frames. */

:root {
  --bg: #0F0F0F;
  --cream: #F4F1EC;
  --ink: #fff;
  --orange: #FD6E21;
  --orange-2: #FC5130;
  --font: 'Figtree', Helvetica, Arial, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --pad-x: clamp(20px, 6vw, 96px);
  --pad-y: clamp(56px, 8vw, 112px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-2); }
input, select, button { font-family: inherit; }
input::placeholder { color: rgba(255,255,255,0.4); }
img, svg { display: block; }
h1, h2, p { margin: 0; }
button { font-weight: inherit; }

/* Layout: one centred column, sections stacked with a steady rhythm */
.wrap { max-width: 1200px; margin: 0 auto; }
section { padding: clamp(72px, 9vw, 120px) 24px; color: #fff; background: var(--bg); }
section.cream { background: var(--cream); color: var(--bg); }
.intro { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.intro.tight { margin-bottom: 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.eyebrow::before { content: ""; display: block; width: 24px; height: 2px; background: var(--orange); }
.cream .eyebrow { color: rgba(15,15,15,0.6); }
h2 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 300; line-height: 1.1; letter-spacing: -0.025em; text-wrap: pretty; }
.acc { color: var(--orange); }
.lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.72); }
.cream .lead { color: rgba(15,15,15,0.72); }
.lead b, .pains b { font-weight: 600; color: #fff; }
.cream .pains b { color: var(--bg); }
.cap { font-size: 14px; color: rgba(255,255,255,0.55); }
.cream .cap { color: rgba(15,15,15,0.55); }
.fw { display: flex; flex-direction: column; gap: 12px; }
.white { color: #fff; }
.g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 64px; }
.g2.w420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.g2.w400 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px 64px; }
.g2.start { align-items: start; }
.g2.center { align-items: center; }

/* Sticky nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(15,15,15,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0 24px; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.nav .logo img { height: 22px; width: auto; }
.nav .links { display: flex; gap: 28px; }
.nav .links a { font-size: 14px; color: rgba(255,255,255,0.72); transition: color .2s; }
.nav .links a:hover { color: #fff; }
.toplink { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 9px 16px; white-space: nowrap; transition: border-color .2s, color .2s; }
.toplink:hover { border-color: var(--orange); color: var(--orange); }

/* Hero */
.hero { background: radial-gradient(ellipse 70% 80% at 90% 10%, rgba(253,110,33,0.42) 0%, rgba(252,81,48,0.18) 35%, rgba(15,15,15,0) 70%), radial-gradient(ellipse 60% 60% at 0% 100%, rgba(120,25,20,0.5) 0%, rgba(15,15,15,0) 70%), var(--bg); padding: clamp(72px, 10vw, 128px) 24px; min-height: calc(100svh - 64px); display: flex; align-items: center; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 72px; align-items: center; width: 100%; }
.hero h1 { font-size: clamp(36px, 4.4vw, 64px); font-weight: 300; line-height: 1.06; letter-spacing: -0.03em; text-wrap: pretty; }
.hero-right { display: flex; flex-direction: column; gap: 24px; }
.hero-right .lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; }

/* Forms */
.form-hero { display: flex; flex-wrap: wrap; gap: 12px; }
.inp { height: 56px; padding: 0 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 17px; outline: none; border-radius: 0; text-transform: none; letter-spacing: 0; font-weight: 300; }
.inp:focus { border-color: var(--orange); }
.form-hero .inp { flex: 1 1 260px; min-width: 0; }
.cta { height: 56px; padding: 0 28px; background: var(--orange); color: var(--bg); border: 0; font-size: 17px; font-weight: 500; cursor: pointer; transition: background .2s; border-radius: 0; }
.cta:hover { background: var(--orange-2); }
.cta[disabled] { opacity: .6; cursor: default; }
.form-hero .cta { flex: 1 0 auto; }
.form-msg { font-size: 14px; color: var(--orange); min-height: 1.4em; flex-basis: 100%; }
.form-msg:empty { display: none; }
.done-box { padding: 20px 24px; border: 1px solid var(--orange); font-size: 18px; line-height: 1.5; }
.form-hide { display: none !important; }

/* Pain: three cards */
.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.pains p { background: rgba(255,255,255,0.55); border: 1px solid rgba(15,15,15,0.12); padding: 32px 28px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; }

/* How it works */
.steps .step { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.steps .step:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.steps .n { font-size: 15px; letter-spacing: 0.14em; color: var(--orange); padding-top: 6px; }
.steps .t { font-size: 24px; font-weight: 400; margin-bottom: 6px; }
.steps .d { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.7); }

/* Product frames (v8 styling) */
.fr { position: relative; overflow: hidden; background: #f8f9fb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; font-family: var(--font-ui); font-size: 12px; color: #1f2937; line-height: 1.45; font-weight: 400; min-height: 340px; }
.fr b { color: #0f172a; font-weight: 700; }
.cur { position: absolute; pointer-events: none; z-index: 5; transition: left .6s, top .6s; }
.wc { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; }
.lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #5c6878; font-weight: 700; }
.kbd { display: inline-block; font-size: 11px; background: #f1f5f9; color: #475569; border-radius: 4px; padding: 1px 6px; font-weight: 600; }
.pl { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700; white-space: nowrap; }
.sg { display: flex; background: #f1f5f9; border-radius: 8px; padding: 3px; }
.sg span { padding: 5px 9px; font-size: 12px; border-radius: 6px; font-weight: 600; color: #5c6878; transition: all .3s; white-space: nowrap; }
.bo { border: 1px solid #e5e7eb; background: #fff; border-radius: 6px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: #374151; transition: all .3s; }
.bp { border: 1px solid #f69400; border-radius: 6px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: #fff; background: #f69400; transition: background .3s; }
.ph { padding: 9px 12px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-size: 12px; color: #475569; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.ph .muted { font-weight: 500; color: #5c6878; white-space: nowrap; }
.gc { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 8px 10px; }
.gc .lab { color: #047857; margin-bottom: 3px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.tag { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }

/* A-harness: the Codex preview demo, verbatim styles (demo.css), inside a 960x660 stage scaled to the frame */
.hframe { padding: 0; min-height: 0; aspect-ratio: 960 / 660; }
.hstage { position: absolute; left: 0; top: 0; width: 960px; height: 660px; padding: 32px; background: #f8f9fb; overflow: hidden; transform-origin: 0 0; font-family: var(--font-ui); color: #1f2937; }
.hstage h1 { font-family: var(--font-ui); font-size: 24px; color: #0f172a; font-weight: 700; margin: 0; }
.demo-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.demo-heading p { font-size: 12px; line-height: 1.5; color: #5c6878; margin: 5px 0 0; }
.demo-tag { font-size: 11px; color: #64748b; letter-spacing: .03em; white-space: nowrap; }
.harness-diagram { position: relative; height: 430px; margin-top: 24px; }
.harness-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.harness-lines path { stroke: #d1d5db; stroke-width: 2; fill: none; transition: stroke .5s; }
.harness-lines path.active { stroke: #f69400; stroke-width: 3; stroke-dasharray: 10 8; animation: flow 1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.harness-accounts, .harness-agents { position: absolute; top: 0; display: flex; flex-direction: column; gap: 12px; }
.harness-accounts { left: 0; width: 180px; }
.harness-agents { right: 0; width: 185px; }
.harness-node { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px 14px; font-size: 13px; font-weight: 600; transition: all .4s; }
.harness-node.active { border-color: #f69400; background: #fffbeb; }
.harness-core { position: absolute; left: 355px; top: 138px; width: 184px; height: 100px; border: 1px solid #ec4d12; background: linear-gradient(135deg, #ec4d12, #f69400); border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; gap: 8px; }
.harness-core small { font-size: 11px; font-weight: 500; }
.harness-core.active { box-shadow: 0 0 0 8px #f6940020; }
.harness-brief { position: absolute; left: 235px; right: 225px; top: 408px; padding: 17px; border: 1px solid #e5e7eb; background: #fff; border-radius: 6px; font-size: 12px; line-height: 1.55; opacity: 0; transform: translateY(-14px); transition: opacity .5s, transform .5s; }
.harness-brief.visible { opacity: 1; transform: none; }
.harness-brief strong { display: block; color: #047857; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.hstage.demo-static * { transition: none !important; animation: none !important; }

/* What makes it different */
.diff { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.dc { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid rgba(15,15,15,0.15); }
.dc .n { font-size: 14px; letter-spacing: 0.14em; color: var(--orange); }
.dc .t { font-size: 26px; font-weight: 400; line-height: 1.2; }
.dc p { font-size: 17px; line-height: 1.55; color: rgba(15,15,15,0.72); }
.dc.dark { background: var(--bg); color: #fff; border-color: var(--bg); grid-row: span 2; }
.dc.dark p { color: rgba(255,255,255,0.72); }
.dc.dark .cap { color: rgba(255,255,255,0.55); }
/* A-gate */
.gate { margin-top: 12px; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.gate-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 40px; padding: 0 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; transition: all .6s; }
.gate-r .l { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.gate-r .l b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-line { position: absolute; left: 0; right: 0; height: 2px; background: #f69400; transition: top .6s, opacity .4s; }
.gate-line span { position: absolute; left: 10px; top: -9px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #b45309; background: #fff4e3; border: 1px solid #fed7aa; border-radius: 4px; padding: 1px 6px; line-height: 14px; white-space: nowrap; }

/* Timeline */
.timeline { background: radial-gradient(ellipse 80% 70% at 0% 100%, rgba(252,81,48,0.3) 0%, rgba(90,25,15,0.25) 35%, rgba(15,15,15,0) 70%), var(--bg); }
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin-bottom: 40px; }
.tab { position: relative; text-align: left; background: rgba(255,255,255,0.03); color: #fff; cursor: pointer; padding: 18px 44px 20px 20px; border: 1px solid rgba(255,255,255,0.14); border-top: 2px solid rgba(255,255,255,0.2); transition: border-color .2s, background .2s, transform .2s; font-family: inherit; }
.tab::after { content: ""; position: absolute; top: 16px; right: 16px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.35); transition: all .2s; }
.tab:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.tab .d { font-size: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--orange); margin-bottom: 6px; }
.tab .t { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.72); line-height: 1.35; }
.tab[aria-selected=true] { border-color: var(--orange); border-top-color: var(--orange); background: rgba(253,110,33,0.08); }
.tab[aria-selected=true]::after { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 3px rgba(253,110,33,0.25); }
.tab[aria-selected=true] .t { color: #fff; }
.tpanel { display: none; }
.tpanel.on { display: block; }
.aud { display: flex; gap: 8px; flex-wrap: wrap; }
.aud button { cursor: pointer; font-size: 15px; padding: 10px 18px; border: 1px solid rgba(255,255,255,0.25); transition: all .3s; background: transparent; color: #fff; font-weight: 300; }
.aud button[aria-selected=true] { background: #fff; color: var(--bg); }
.side { display: none; }
.side.on { display: contents; }
.novwrap { display: flex; flex-direction: column; gap: 32px; }

/* A-mcp */
.mcp { padding: 0; background: #fbfbfc; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mcp-chat { display: flex; flex-direction: column; border-right: 1px solid #ececec; }
.mcp-head { padding: 10px 14px; border-bottom: 1px solid #ececec; font-size: 12px; font-weight: 700; color: #1f2937; display: flex; align-items: center; gap: 6px; }
.mcp-head small { font-weight: 500; color: #5c6878; font-size: 11px; margin-left: auto; }
.mcp-log { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.msg { display: flex; gap: 10px; }
.msg .avi { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: #334155; }
.msg .avi.a { background: #f69400; }
.msg .body { flex: 1; min-width: 0; }
.msg .who { font-size: 11px; font-weight: 600; color: #475569; margin-bottom: 3px; }
.msg .who span { color: #5c6878; font-weight: 400; margin-left: 6px; }
.msg .text { font-size: 12px; line-height: 1.55; color: #1f2937; }
.m-tab { margin-top: 6px; }
.m-row { display: grid; grid-template-columns: 1.4fr repeat(6, 1fr); gap: 4px; font-size: 11.5px; padding: 3px 0; border-bottom: 1px dashed #d1fae5; color: #374151; }
.m-row.h { font-size: 11px; color: #065f46; font-weight: 700; padding: 0 0 3px; }
.m-row.h span { transition: color .3s; }
.m-tip { display: inline-block; margin-top: 8px; background: #1c1512; color: #e2e8f0; border-radius: 8px; padding: 6px 10px; font-size: 11.5px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: opacity .4s; }
.m-tip b { color: #fff; }
.mcp-in { padding: 10px 14px 12px; border-top: 1px solid #ececec; }
.mcp-in div { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.mcp-in span:first-child { flex: 1; font-size: 12.5px; color: #9aa5b8; }
.mcp-in .send { background: #f69400; color: #fff; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.mcp-acc { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f8f9fb; }
.mcp-acc .t { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.acct { padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.acct .ci { width: 28px; height: 28px; border-radius: 6px; background: #d1fae5; color: #065f46; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10.5px; flex-shrink: 0; }
.acct .grow { flex: 1; min-width: 0; }
.acct .n { font-weight: 600; color: #0f172a; font-size: 11.5px; }
.acct .d { color: #5c6878; font-size: 10.5px; }
.acct .pl { background: #d1fae5; color: #065f46; }
.acct.new { border-color: #f69400; transition: all .5s; }
.acct.new .ci { background: #fff4e3; color: #b45309; }
.acct.new .pl { background: #fef3c7; color: #92400e; }
.m-add { text-align: center; }

/* A-nov */
.nov { display: flex; flex-direction: column; gap: 10px; }
.nov-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 8px; }
.stat { padding: 8px 10px; }
.stat .v { font-size: 16px; font-weight: 700; color: #0f172a; margin-top: 2px; }
.stat .v.green { color: #047857; }
.n-row { border-bottom: 1px dashed #f1f5f9; transition: background .3s; }
.n-row .r { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 12px; }
.n-row .rot { color: #5c6878; font-size: 11px; margin-right: 8px; display: inline-block; transition: transform .2s; }
.n-row .v { font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }
.n-row .v span { color: #5c6878; font-weight: 500; }
.n-sub { padding: 0 12px 8px 32px; display: none; }
.n-sub .l { display: flex; justify-content: space-between; font-size: 12px; color: #475569; padding: 3px 0; border-bottom: 1px dashed #f8fafc; }
.n-sub .l:last-of-type { border-bottom: 0; }
.n-sub .l span:last-child { font-weight: 600; color: #0f172a; }
.n-sub .warn { font-size: 11.5px; color: #b45309; padding-top: 4px; }
.n-dialog { position: absolute; right: 14px; bottom: 14px; width: min(280px, 80%); background: #fff; border-radius: 8px; box-shadow: 0 14px 36px rgba(0,0,0,0.2); overflow: hidden; transition: all .4s; }
.n-dialog .h { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; font-size: 13px; font-weight: 700; color: #0f172a; }
.n-dialog .h div { font-size: 11.5px; color: #5c6878; font-weight: 500; margin-top: 2px; }
.n-dialog .g { padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 11.5px; color: #5c6878; }
.n-dialog .g .k { font-weight: 600; margin-bottom: 3px; }
.n-dialog .g .v { border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 7px; color: #0f172a; font-weight: 500; background: #fff; }
.n-dialog .f { padding: 10px 14px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; gap: 8px; }
.n-pdf { position: absolute; right: 24px; top: 60px; width: 120px; height: 160px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; box-shadow: 0 8px 20px rgba(15,23,42,0.15); padding: 10px; display: flex; flex-direction: column; gap: 5px; transition: all .5s; }
.n-pdf i { display: block; height: 3px; background: #e5e7eb; }
.n-pdf i.t { height: 6px; width: 60%; background: #0f172a; border-radius: 2px; }
.n-pdf i.o { background: #f69400; }
.n-pdf .lab { margin-top: auto; font-size: 9px; }

/* A-dec */
.dec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; align-items: start; }
.dec .gh { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; font-size: 12px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 7px; }
.dec .gh .cnt { background: #fee2e2; color: #991b1b; border-radius: 4px; padding: 1px 7px; font-size: 11px; }
.dec .gh .cnt.grey { background: #e2e8f0; color: #475569; }
.dec .gh .muted { margin-left: auto; font-weight: 500; color: #5c6878; font-size: 11.5px; }
.d-list { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.d-card { border: 1px solid #e5e7eb; background: #fff; border-radius: 6px; overflow: hidden; transition: all .4s; }
.d-card .dh { display: flex; align-items: center; gap: 9px; padding: 9px 10px; flex-wrap: wrap; }
.d-card .dt { flex: 1; font-size: 12.5px; font-weight: 700; color: #0f172a; line-height: 1.35; }
.d-card .ag { font-size: 10.5px; color: #5c6878; background: #f1f5f9; border-radius: 4px; padding: 1px 6px; font-weight: 600; display: inline-block; margin-top: 4px; }
.d-card .chev { color: #5c6878; font-size: 12px; margin-left: auto; transition: transform .15s; }
.d-card .when { flex-basis: 100%; font-size: 11.5px; color: #5c6878; padding-left: 17px; margin-top: -4px; }
.d-body { padding: 2px 10px 12px; display: none; }
.d-body .why { font-size: 12px; color: #5c6878; line-height: 1.5; margin-bottom: 8px; }
.d-body .gc { font-size: 12px; margin: 6px 0; }
.ev { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 4px; font-size: 11.5px; padding: 3px 6px; border-bottom: 1px dashed #d1fae5; color: #374151; }
.ev.h { font-size: 11px; color: #065f46; font-weight: 700; }
.ev:last-child { border-bottom: 0; }
.d-diff { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; font-size: 12px; margin: 6px 0; line-height: 1.5; }
.d-diff .lab { margin-bottom: 3px; }
.d-diff .ins { background: #d1fae5; color: #065f46; padding: 0 2px; }
.d-by { font-size: 11.5px; color: #5c6878; margin-top: 8px; }
.d-acts { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.d-acts .rej { border: 1px solid #fecaca; background: #fff; border-radius: 6px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: #b91c1c; }
.d-done { padding: 4px 12px 8px; }
.d-dn { padding: 8px 0; border-bottom: 1px dashed #f1f5f9; line-height: 1.45; color: #374151; }
.d-dn .w { color: #5c6878; font-size: 11.5px; margin-top: 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.d-dn .tag { background: #d1fae5; color: #065f46; }

/* A-may */
.may { display: flex; flex-direction: column; gap: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.y-tile { border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; min-height: 104px; transition: all .5s; background: #fff; }
.y-tile .n { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #0f172a; }
.y-tile .d { font-size: 11.5px; color: #5c6878; margin-top: 4px; line-height: 1.45; flex: 1; }
.y-tile .f { font-size: 11.5px; color: #374151; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.y-tile .f b { color: #0f172a; }
.y-tile .f span:last-child { color: #5c6878; white-space: nowrap; }
.y-ag { display: grid; grid-template-columns: 18px 1.4fr 1.6fr 44px; gap: 10px; align-items: center; padding: 7px 12px; border-bottom: 1px dashed #f1f5f9; transition: opacity .4s; }
.y-ag .dt { width: 10px; height: 10px; border-radius: 50%; }
.y-ag b { font-size: 12px; }
.y-ag .w { color: #5c6878; font-size: 11.5px; }
.y-ag .tg { width: 34px; height: 18px; border-radius: 999px; position: relative; display: inline-block; transition: background .3s; }
.y-ag .tg i { position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .25s; }

/* A-mkt */
.mkt { display: flex; flex-direction: column; gap: 12px; }
.k-tile { border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; transition: all .5s; }
.k-tile .n { font-size: 13px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k-tile .d { font-size: 12px; color: #5c6878; margin-top: 4px; line-height: 1.5; }
.k-tile .f { font-size: 11.5px; color: #374151; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.k-tile .f span:first-child { color: #5c6878; }
.k-tile .bo { padding: 3px 8px; font-size: 11.5px; }
.k-chips { flex-wrap: wrap; }
.k-chips span { transition: all .4s; }
.k-al { border-bottom: 1px dashed #f1f5f9; transition: background .4s; background: #fff; }
.k-al .r { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; }
.k-al .dot { margin-top: 5px; }
.k-al .tx { flex: 1; font-size: 12px; color: #374151; line-height: 1.45; }
.k-al .m { color: #5c6878; font-size: 11px; margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.k-sub { padding: 0 12px 10px 30px; display: none; }
.k-sub .gc { font-size: 12px; line-height: 1.5; color: #374151; }

/* A-permissions */
.perm { overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.p-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; flex-wrap: wrap; }
.p-top .sg { display: inline-flex; border-radius: 6px; padding: 2px; }
.p-top .sg span { padding: 3px 8px; font-size: 11px; border-radius: 4px; }
.p-top .hint { font-size: 11.5px; color: #5c6878; }
.p-head, .p-row { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 1fr 1fr; gap: 8px; min-width: 640px; }
.p-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: #5c6878; padding-bottom: 2px; }
.p-row { padding: 8px 0; border-top: 1px solid #e5e7eb; }
.p-row .ag { font-size: 12.5px; font-weight: 700; color: #0f172a; padding-top: 6px; }
.p-row .ag small { display: block; font-weight: 500; color: #5c6878; font-size: 11px; margin-top: 2px; }
.p-col { border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px; min-height: 48px; display: flex; flex-direction: column; gap: 4px; }
.p-col.g { background: #f6fdf9; }
.p-col.a { background: #fffbf0; }
.p-col.r { background: #fef6f6; }
.p-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; padding: 5px 6px 5px 8px; font-size: 11.5px; color: #374151; display: flex; align-items: center; gap: 6px; line-height: 1.35; transition: all .4s; }
.p-card.co { color: #5c6878; }
.p-card .nm { flex: 1; }
.p-card .nm small { font-size: 10px; color: #b45309; font-weight: 700; }
.p-card .al, .p-card .ar { color: #5c6878; }
.p-col.g .p-card .al { color: #e2e8f0; }
.p-col.r .p-card .ar { color: #e2e8f0; }

/* Watch first */
.watch { background: linear-gradient(160deg, #2B1109 0%, #140E0D 45%, var(--bg) 100%); }

/* Founder */
.founder-s { border-top: 1px solid rgba(255,255,255,0.1); }
.founder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), max-content)); gap: 40px; align-items: center; max-width: 900px; margin: 0 auto; justify-content: center; }
.photo { width: min(240px, 100%); aspect-ratio: 1; background: repeating-linear-gradient(135deg, #1C1715 0 10px, #171311 10px 20px); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: flex-end; padding: 12px; font-family: monospace; font-size: 12px; color: rgba(255,255,255,0.5); overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.founder .bio { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.founder .name { font-size: 26px; font-weight: 400; }
.founder p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.72); }

/* FAQ */
.faq { border-top: 1px solid rgba(15,15,15,0.15); max-width: 800px; margin: 0 auto; }
.faq-i { border-bottom: 1px solid rgba(15,15,15,0.15); }
.faq-q { width: 100%; text-align: left; background: transparent; border: 0; padding: 20px 0; cursor: pointer; color: var(--bg); display: flex; justify-content: space-between; gap: 24px; align-items: center; font-size: clamp(17px, 1.3vw, 20px); font-weight: 400; line-height: 1.3; font-family: inherit; }
.faq-q .plus { font-size: 28px; font-weight: 300; color: var(--orange); line-height: 1; transition: transform .3s; }
.faq-i.open .plus { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 48px 24px 0; font-size: 17px; line-height: 1.55; color: rgba(15,15,15,0.72); }
.faq-i.open .faq-a { display: block; }

/* Waiting list */
.join { background: radial-gradient(ellipse 75% 85% at 15% 20%, rgba(252,81,48,0.4) 0%, rgba(140,35,20,0.22) 35%, rgba(15,15,15,0) 70%), radial-gradient(ellipse 50% 50% at 100% 100%, rgba(253,110,33,0.3) 0%, rgba(15,15,15,0) 70%), var(--bg); }
.join h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; }
.join-box { max-width: 640px; margin: 0 auto; }
.form-join { display: flex; flex-direction: column; gap: 24px; }
.form-join label, .form-join .fl { display: flex; flex-direction: column; gap: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.form-join .inp { width: 100%; }
.sel { height: 56px; padding: 0 14px; background: #1A1513; border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 17px; outline: none; text-transform: none; letter-spacing: 0; border-radius: 0; font-weight: 300; }
.sel:focus { border-color: var(--orange); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form-join label.chip { cursor: pointer; font-size: 15px; padding: 10px 16px; border: 1px solid rgba(255,255,255,0.25); transition: all .2s; background: transparent; color: #fff; text-transform: none; letter-spacing: 0; user-select: none; display: block; }
.chip input { display: none; }
.chip:has(input:checked) { background: var(--orange); color: var(--bg); }
.form-join .cta { align-self: stretch; }
.note { font-size: 14px; color: rgba(255,255,255,0.5); text-align: center; }
.done-box.big { padding: 32px; font-size: 22px; }

/* Footer */
footer { background: var(--bg); color: rgba(255,255,255,0.6); padding: 32px 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
footer img { height: 16px; width: auto; opacity: 0.85; }
footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
footer nav a { color: rgba(255,255,255,0.6); }
footer nav a:hover { color: var(--orange); }

@media (max-width: 860px) { .nav .links { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }