/* Loopfinch landing page.
   Brief: dark, glass, ice and frost, cool off-whites, one striking icy blue; chic and minimal.
   Polar night background, Newsreader headlines (sturdy at every size), Hanken Grotesk text, Icefall blue for action.
   The live demo is the one bold element; everything else stays quiet. */

:root {
  --night: #081322;         /* background: deep glacial blue */
  --night-2: #0a1828;
  --glacier: #10243a;       /* raised surfaces */
  --frost: #eaf3f9;         /* primary text */
  --rime: #9db4c8;          /* secondary text */
  --rime-2: #7f97ad;        /* tertiary text */
  --icefall: #5fbdf5;       /* the one striking blue */
  --icefall-deep: #1268b8;
  --on-ice: #04121f;
  --ice-soft: rgba(95, 189, 245, 0.11);
  --ice-line: rgba(95, 189, 245, 0.32);
  --line: rgba(205, 228, 245, 0.1);
  --glass: rgba(16, 36, 58, 0.5);
  --glass-strong: rgba(18, 39, 62, 0.88);
  --glass-edge: rgba(234, 243, 249, 0.09);
  --shadow: 0 30px 80px -40px rgba(0, 4, 12, 0.85);
  --allow: #2da06c; --allow-ink: #6fcf9f; --allow-soft: rgba(45, 160, 108, 0.15);
  --review: #bd8a2e; --review-ink: #e3b35e; --review-soft: rgba(189, 138, 46, 0.15);
  --block: #d66378; --block-ink: #f0909f; --block-soft: rgba(214, 99, 120, 0.14);
  --display: "Newsreader", Georgia, serif;
  --text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --code: ui-monospace, "SF Mono", Menlo, monospace;
  /* radius follows hierarchy: page-level panels > inner blocks > controls */
  --r-panel: 30px;
  --r-block: 16px;
  --r-control: 12px;
  /* frost: a very fine grain laid over glass */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font: 400 17px/1.6 var(--text);
  color: var(--frost);
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(47, 108, 160, 0.32), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(31, 78, 124, 0.22), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: var(--icefall); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--icefall); outline-offset: 3px; }
a:not(.btn):focus-visible { border-radius: 4px; }
code { font-family: var(--code); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(234, 243, 249, 0.06), var(--shadow);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: var(--grain); opacity: 0.035; mix-blend-mode: overlay;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p, li { text-wrap: pretty; }
h2 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; }
.lede { color: var(--rime); font-size: 19px; line-height: 1.6; max-width: 34em; margin: 16px 0 0; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px;
  border-radius: var(--r-control); border: 1px solid var(--line); background: transparent; color: var(--frost);
  font: 600 15.5px var(--text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s;
}
.btn:hover { border-color: var(--ice-line); background: rgba(95, 189, 245, 0.06); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--icefall); color: var(--on-ice); border-color: transparent; }
.btn.primary:hover { background: #7ccaf8; }
.btn.small { height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn:disabled { opacity: .55; cursor: default; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px var(--text); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.allow { color: var(--allow-ink); background: var(--allow-soft); }
.chip.review { color: var(--review-ink); background: var(--review-soft); }
.chip.block { color: var(--block-ink); background: var(--block-soft); }
.chip.ice { color: var(--icefall); background: var(--ice-soft); }
.chip.plain { color: var(--rime); border: 1px solid var(--line); }
.chip.plain::before { display: none; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; padding: 16px 0; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.nav.scrolled { background: rgba(8, 19, 34, 0.74); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 36px; width: auto; }
.nav-links { display: flex; gap: 26px; font-size: 15px; }
.nav-links a { color: var(--rime); text-decoration: none; }
.nav-links a:hover { color: var(--frost); }
.nav .spacer { flex: 1; }

/* ---------- hero ---------- */
.hero { padding: 92px 0 40px; }
.hero h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; }
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 44px; }
.hero .lede { font-size: 20px; margin-top: 0; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero .works { margin: 26px 0 0; font-size: 14.5px; color: var(--rime-2); }

/* the checkpoint log: real decisions resolving once, on load */
.log { border-radius: var(--r-panel); padding: 26px 26px 18px; }
.log-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.log-head h3 { font-size: 24px; }
.log-head span { font-size: 13px; color: var(--rime-2); }
.log ol { list-style: none; margin: 0; padding: 0; }
.log li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: center;
  transition: opacity .5s ease, transform .5s ease;
}
.log li:first-child { border-top: 0; }
.log li.enter { opacity: 0; transform: translateY(6px); }
.log .what { font-size: 16px; font-weight: 500; line-height: 1.4; }
.log .why { grid-column: 1 / -1; font-size: 14px; color: var(--rime); line-height: 1.45; transition: opacity .4s ease; }
/* the pending and resolved states share one cell, so nothing reflows when a check resolves */
.log .state { display: grid; justify-items: end; }
.log .state > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--rime-2); transition: opacity .25s ease; }
.log li:not(.done) .result, .log li.done .pending, .log li:not(.done) .why { opacity: 0; }
.log-foot { margin: 10px 0 0; font-size: 13px; color: var(--rime-2); }
.log-foot a { color: var(--rime); }

/* ---------- sections ---------- */
section.block { padding: 120px 0 0; }

/* the problem, said plainly */
.problem { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.problem ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 26px; }
.problem li b { display: block; font: 600 18px/1.35 var(--text); margin-bottom: 4px; }
.problem li span { color: var(--rime); }

/* ---------- demo: the bold element ---------- */
.demo-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 30px; }
.demo-shell { border-radius: var(--r-panel); display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; border-color: var(--ice-line); }
.scenarios { border-right: 1px solid var(--line); padding: 18px 14px; display: grid; gap: 4px; align-content: start; background: rgba(8, 19, 34, 0.35); }
.scenarios .s-label { font-size: 13.5px; color: var(--rime-2); padding: 4px 12px 10px; }
.scenario {
  text-align: left; border: 1px solid transparent; background: transparent; color: var(--frost); border-radius: var(--r-block);
  padding: 13px 14px; cursor: pointer; display: grid; gap: 5px; font: inherit;
}
.scenario:hover { background: rgba(234, 243, 249, 0.04); }
.scenario[aria-pressed="true"] { background: var(--glass-strong); border-color: var(--ice-line); }
.scenario b { font-size: 15.5px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.scenario span { font-size: 14px; color: var(--rime-2); line-height: 1.45; }
.scenario .chip { height: 20px; font-size: 11px; padding: 0 8px; }

.stage { padding: 28px 32px 24px; min-height: 660px; display: flex; flex-direction: column; }
.stage-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.stage-top h3 { font-size: 34px; line-height: 1.05; }
.toggle { display: inline-flex; padding: 4px; border-radius: 14px; background: rgba(8, 19, 34, 0.5); border: 1px solid var(--line); }
.toggle button { border: 0; background: transparent; color: var(--rime); height: 34px; padding: 0 15px; border-radius: 10px; font: 600 13.5px var(--text); cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--glacier); color: var(--frost); }
.toggle button[data-mode="without"][aria-pressed="true"] { color: var(--block-ink); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; flex: 1; align-content: start; transition: opacity .2s ease; }
.timeline.leaving { opacity: 0; }
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.step.in { opacity: 1; transform: none; }
.step .ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--ice-soft); color: var(--icefall); }
.step .ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step .who { font-size: 13.5px; color: var(--rime-2); margin-bottom: 6px; }
.bubble { padding: 13px 16px; border-radius: 4px var(--r-block) var(--r-block) var(--r-block); background: var(--glacier); border: 1px solid var(--line); font-size: 16px; max-width: 40em; }
.read { padding: 11px 15px; border-radius: var(--r-block); border: 1px dashed rgba(205, 228, 245, 0.18); font-size: 14.5px; color: var(--rime); }
.read mark { background: var(--block-soft); color: var(--block-ink); border-radius: 4px; padding: 0 4px; }
.attempt { display: grid; gap: 5px; }
.attempt .title { font: 500 28px/1.12 var(--display); }
.attempt code { font-size: 12.5px; color: var(--rime-2); word-break: break-word; }
.typing { display: inline-flex; gap: 5px; padding: 12px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--rime-2); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .25; } }

.checks { display: grid; gap: 8px; }
.check-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--r-block); border: 1px solid var(--line); background: rgba(8, 19, 34, 0.35); font-size: 15px; }
.check-row .layer { font-weight: 600; font-size: 14px; color: var(--rime); }
.check-row .t { font-size: 13px; color: var(--rime-2); white-space: nowrap; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--icefall); animation: spin .8s linear infinite; display: inline-block; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.scores { display: grid; gap: 8px; margin-top: 12px; }
.score { display: grid; grid-template-columns: 210px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; color: var(--rime); }
.score .bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.score .bar span { display: block; height: 100%; border-radius: inherit; width: 0; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.score .v { font-size: 13px; color: var(--rime-2); text-align: right; }
.bar .ok { background: var(--allow); } .bar .mid { background: var(--review); } .bar .bad { background: var(--block); }

.verdict { padding: 18px 20px; border-radius: var(--r-block); border: 1px solid var(--line); display: grid; gap: 10px; }
.verdict.allow { border-color: rgba(45, 160, 108, .38); background: var(--allow-soft); }
.verdict.review { border-color: rgba(189, 138, 46, .38); background: var(--review-soft); }
.verdict.block { border-color: rgba(214, 99, 120, .38); background: var(--block-soft); }
.verdict .big { font: 600 18px var(--text); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.verdict ul { margin: 0; padding-left: 20px; color: var(--rime); font-size: 15px; display: grid; gap: 4px; }

.outcome { padding: 18px 20px; border-radius: var(--r-block); font-size: 16.5px; border: 1px solid var(--line); background: var(--glacier); }
.outcome b { display: block; font-size: 13.5px; font-weight: 600; color: var(--rime-2); margin-bottom: 4px; }
.outcome.bad { border-color: rgba(214, 99, 120, .42); }
.outcome.bad b { color: var(--block-ink); }
.outcome.good b { color: var(--allow-ink); }

.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--rime-2); flex-wrap: wrap; }
.stage-foot .btns { display: flex; gap: 8px; }
.proof { margin: 22px 0 0; color: var(--rime); font-size: 15.5px; max-width: 52em; }
.proof small { display: block; color: var(--rime-2); font-size: 13px; margin-top: 4px; }

/* ---------- try your own: a live check ---------- */
.try { margin-bottom: 22px; padding: 18px 20px; border-radius: var(--r-block); border: 1px solid var(--ice-line); background: rgba(95, 189, 245, 0.05); }
.try form { display: grid; gap: 16px; }
.try .ask { margin: 0; color: var(--rime); font-size: 15.5px; }
.try .ctl { display: grid; gap: 8px; }
.try .ctl > span { font-size: 13.5px; color: var(--rime-2); }
.try .ctl em { font-style: normal; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opts button { border: 1px solid var(--line); background: transparent; color: var(--rime); min-height: 34px; padding: 4px 14px; border-radius: 999px; font: 600 13.5px var(--text); cursor: pointer; }
.opts button:hover { border-color: var(--ice-line); color: var(--frost); }
.opts button[aria-pressed="true"] { background: var(--frost); color: var(--night); border-color: var(--frost); }
.slide { display: flex; align-items: center; gap: 16px; }
.slide input { flex: 1; accent-color: var(--icefall); }
.slide .amt { font: 500 24px/1 var(--display); min-width: 4.5em; text-align: right; }
.try .go-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.try .go-row small { font-size: 13px; color: var(--rime-2); }
.try .err { margin: 0; color: var(--block-ink); font-size: 14.5px; }
.chat-top .ws { color: #ababad; font-weight: 600; margin-right: 8px; }

/* ---------- approver channels inside the demo ---------- */
.approver { border: 1px solid var(--ice-line); border-radius: var(--r-block); overflow: hidden; }
.approver-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: rgba(95, 189, 245, 0.06); flex-wrap: wrap; }
.approver-head .you { font-size: 14px; color: var(--rime); }
.tabs { display: inline-flex; gap: 4px; }
.tabs button { border: 1px solid var(--line); background: transparent; color: var(--rime); height: 32px; padding: 0 13px; border-radius: 999px; font: 600 13px var(--text); cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--frost); color: var(--night); border-color: var(--frost); }
.channel { padding: 16px; position: relative; }

.chat { background: #1a1d21; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.chat-top { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; font-size: 14px; color: #e8e8e8; }
.chat-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 14px; color: #d1d2d3; font-size: 14.5px; line-height: 1.5; }
.chat-msg .av { width: 36px; height: 36px; border-radius: 8px; background: #213c40; display: grid; place-items: center; }
.chat-msg .av img { width: 24px; height: auto; display: block; }
.chat-msg .name { font-weight: 800; color: #fff; }
.chat-msg .app { font-size: 10px; font-weight: 700; background: rgba(255,255,255,.12); color: #ababad; padding: 1px 4px; border-radius: 3px; margin: 0 6px; vertical-align: 1px; }
.chat-msg .when { font-size: 12px; color: #ababad; }
.chat-msg .ctx { font-size: 12.5px; color: #ababad; margin: 4px 0; }
.chat-msg h4 { font: 800 18px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #fff; margin: 6px 0 4px; }
.chat-msg p { margin: 4px 0; }
.chat-msg blockquote { margin: 6px 0; padding-left: 10px; border-left: 4px solid rgba(255,255,255,.2); color: #d1d2d3; }
.chat-msg ul { margin: 4px 0; padding-left: 18px; }
.chat-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chat-btns button { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #e8e8e8; font: 700 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.chat-btns button.go { background: #007a5a; border-color: #007a5a; color: #fff; }
.chat-modal { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; border-radius: 12px; }
.chat-modal .box { width: min(420px, 100%); background: #1a1d21; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 18px; color: #d1d2d3; }
.chat-modal h5 { font: 800 18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #fff; margin: 0 0 8px; }
.chat-modal .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.mail { background: #f4f6f9; border-radius: 12px; overflow: hidden; color: #0d1b2a; }
.mail-head { padding: 12px 16px; background: #fff; border-bottom: 1px solid #e2e9f0; font-size: 13px; color: #44566b; display: grid; gap: 2px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.mail-head b { color: #0d1b2a; }
.mail iframe { width: 100%; height: 640px; border: 0; display: block; background: #eef3f8; }

.web-card { padding: 20px; border-radius: var(--r-block); background: var(--glass-strong); border: 1px solid var(--ice-line); display: grid; gap: 12px; }
.web-card h4 { font: 500 30px/1.1 var(--display); margin: 0; }
.web-card .why { color: var(--rime); font-size: 15px; }
.web-card .row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.web-card .note { font-size: 13px; color: var(--rime-2); }
.confirm-box { padding: 15px 17px; border-radius: var(--r-block); border: 1px solid var(--ice-line); background: var(--ice-soft); display: grid; gap: 12px; font-size: 15.5px; }
.answered { display: flex; gap: 10px; align-items: center; padding: 15px 17px; border-radius: 12px; font-size: 15.5px; }
.answered svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.answered.yes { background: var(--allow-soft); color: var(--allow-ink); }
.answered.no { background: rgba(234, 243, 249, .05); color: var(--rime); }

/* ---------- what you get: quiet, typographic ---------- */
.gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 64px; margin-top: 48px; }
.get { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; }
.get svg { width: 22px; height: 22px; margin-top: 3px; fill: none; stroke: var(--icefall); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.get h3 { font: 600 19px/1.35 var(--text); letter-spacing: 0; margin-bottom: 6px; }
.get p { margin: 0; color: var(--rime); max-width: 30em; }

/* ---------- how it works: a real sequence, so it's numbered ---------- */
.how { border-radius: var(--r-panel); padding: 40px 44px; margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: s; }
.how div { counter-increment: s; position: relative; }
.how div::before { content: counter(s); display: block; font: 500 52px/1 var(--display); color: var(--icefall); margin-bottom: 14px; }
.how h3 { font: 600 19px var(--text); letter-spacing: 0; margin-bottom: 8px; }
.how p { margin: 0; color: var(--rime); }

/* ---------- signup ---------- */
.signup { border-radius: var(--r-panel); padding: 52px; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; border-color: var(--ice-line); }
.signup .lede { margin-top: 14px; }
.perks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; color: var(--rime); font-size: 16px; }
.perks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.perks svg { width: 18px; height: 18px; margin-top: 4px; fill: none; stroke: var(--icefall); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
form.signup-form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 14px; color: var(--rime); }
.field .opt { color: var(--rime-2); }
.input, select.input, textarea.input {
  height: 50px; padding: 0 15px; border-radius: var(--r-control); border: 1px solid var(--line); background: rgba(8, 19, 34, 0.6);
  color: var(--frost); font: 16px var(--text); outline: none; width: 100%; transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: 92px; padding: 13px 15px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--icefall); box-shadow: 0 0 0 4px var(--ice-soft); }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239db4c8' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 10px; background-position: right 15px center; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--rime); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--icefall); flex: none; }
.consent { font-size: 13px; color: var(--rime-2); margin: 0; }
.form-error { color: var(--block-ink); font-size: 14.5px; margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.thanks { display: grid; gap: 10px; padding: 28px; border-radius: var(--r-block); background: var(--allow-soft); border: 1px solid rgba(45,160,108,.38); }
.thanks h3 { font-size: 34px; }
.thanks p { margin: 0; color: var(--rime); }

/* ---------- questions ---------- */
.faq { margin-top: 36px; max-width: 880px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 22px 4px; }
.faq summary { cursor: pointer; font: 600 18px var(--text); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--icefall); font-weight: 400; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 12px 0 0; color: var(--rime); max-width: 44em; }

/* ---------- magnetic cards ----------
   With a mouse, a card leans a few pixels toward the pointer and springs back when it leaves
   (site.js moves it; data-magnet is the pull in pixels). Light catches the frost where the pointer is. */
[data-magnet] { position: relative; transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease; }
[data-magnet]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle 280px at var(--hx, 50%) var(--hy, 30%), rgba(190, 225, 250, 0.075), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  [data-magnet]:hover::after { opacity: 1; }
  .glass[data-magnet]:hover { border-color: rgba(234, 243, 249, 0.16); box-shadow: inset 0 1px 0 rgba(234, 243, 249, 0.09), 0 40px 90px -40px rgba(0, 4, 12, 0.95); }
}
/* the "what changes" items rest as plain type; a frost plate rises under the pointer */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .get { padding: 20px 22px; margin: -20px -22px; border: 1px solid transparent; border-radius: var(--r-block); }
  .get:hover { background-color: var(--glass); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 rgba(234, 243, 249, 0.06), var(--shadow); }
}

footer { padding: 110px 0 56px; color: var(--rime-2); font-size: 14.5px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 28px; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .hero-body, .problem { grid-template-columns: 1fr; gap: 44px; }
  .demo-shell { grid-template-columns: 1fr; }
  .scenarios { border-right: 0; border-bottom: 1px solid var(--line); grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; }
  .scenarios .s-label { display: none; }
  .signup { grid-template-columns: 1fr; padding: 34px; }
  .how { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .hero { padding-top: 48px; }
  section.block { padding-top: 88px; }
  .nav-links { display: none; }
  .gets { grid-template-columns: 1fr; gap: 30px; }
  .stage { padding: 20px 16px; min-height: 0; }
  .stage-top h3 { font-size: 28px; }
  .check-row { grid-template-columns: 1fr auto; }
  .check-row .layer { grid-column: 1 / -1; }
  .score { grid-template-columns: 1fr 48px; }
  .score .bar { grid-column: 1 / -1; grid-row: 2; }
  .two { grid-template-columns: 1fr; }
  .web-card .row-btns { grid-template-columns: 1fr; }
  .signup { padding: 24px; }
  .log { padding: 20px 18px 14px; }
  .log li { grid-template-columns: minmax(0, 1fr); }
  .log .state { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* privacy and terms */
.legal { padding: 40px 0 0; }
.prose { max-width: 820px; margin: 0 auto; padding: 44px 48px; }
.prose h1 { font: 450 clamp(34px, 5vw, 48px)/1.08 var(--display); letter-spacing: -0.015em; margin: 0 0 8px; }
.prose .updated { color: var(--rime-2); font-size: 15px; margin: 0 0 30px; }
.prose h2 { font: 450 26px/1.2 var(--display); letter-spacing: -0.01em; margin: 38px 0 10px; }
.prose p, .prose li { color: var(--rime); font-size: 16.5px; }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--frost); font-weight: 600; }
.prose a { color: var(--icefall); }
.legal-links a { color: inherit; }
.consent a { color: inherit; }
@media (max-width: 720px) { .prose { padding: 30px 22px; } }

/* "Try to trick our AI agent" */
.trick-head { max-width: 760px; }
.live { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 600 13px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--icefall); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--allow-ink); box-shadow: 0 0 0 0 rgba(111, 207, 159, .6); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(111, 207, 159, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 207, 159, 0); } }
.roles { display: flex; gap: 12px; margin: 26px 0 18px; flex-wrap: wrap; }
.role { text-align: left; display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--r-block); border: 1px solid var(--line); background: rgba(16, 36, 58, .35); color: var(--rime); cursor: pointer; font: inherit; min-width: 240px; transition: border-color .2s, background .2s; }
.role b { color: var(--frost); font-weight: 600; font-size: 16px; }
.role span { font-size: 14px; }
.role[aria-pressed="true"] { border-color: var(--ice-line); background: var(--ice-soft); }
.role:hover { border-color: var(--ice-line); }
.trick-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.chat-panel { padding: 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.chat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat-who { display: grid; } .chat-who b { font-weight: 600; } .chat-who small { color: var(--rime-2); font-size: 12.5px; }
.chat-log { list-style: none; margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; height: 520px; overflow-y: auto; scroll-behavior: smooth; }
.cmsg { display: flex; }
.cmsg.user { justify-content: flex-end; }
.cbubble { max-width: 86%; padding: 11px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmsg.assistant .cbubble { background: rgba(234, 243, 249, 0.07); border: 1px solid var(--line); color: var(--frost); border-bottom-left-radius: 6px; }
.cmsg.user .cbubble { background: var(--icefall); color: var(--on-ice); border-bottom-right-radius: 6px; }
.cmsg.system { justify-content: center; } .cmsg.system .cbubble { color: var(--review-ink); font-size: 14px; text-align: center; background: var(--review-soft); }
.cnote { align-self: center; max-width: 92%; text-align: center; color: var(--rime-2); font-size: 13.5px; }
.clookup { display: flex; gap: 10px; align-items: center; color: var(--rime-2); font-size: 13.5px; }
.typing { display: flex; align-items: center; gap: 10px; color: var(--rime-2); font-size: 14px; }
.dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(234, 243, 249, 0.07); border: 1px solid var(--line); }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rime); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* the checkpoint card: the moment Loopfinch steps in */
.cp { align-self: stretch; margin: 2px 0; padding: 14px 16px 15px; border-radius: 18px; border: 1px solid var(--ice-line); background: linear-gradient(180deg, rgba(95, 189, 245, .08), rgba(16, 36, 58, .55)); animation: cp-in .35s ease-out; }
@keyframes cp-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.cp.block { border-color: rgba(214, 99, 120, .55); background: linear-gradient(180deg, rgba(214, 99, 120, .12), rgba(16, 36, 58, .55)); }
.cp.review { border-color: rgba(189, 138, 46, .55); background: linear-gradient(180deg, rgba(189, 138, 46, .12), rgba(16, 36, 58, .55)); }
.cp.allow { border-color: rgba(45, 160, 108, .45); background: linear-gradient(180deg, rgba(45, 160, 108, .09), rgba(16, 36, 58, .5)); }
.cp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.cp-brand { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--icefall); }
.cp-brand svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.cp-ms { font: 600 13px var(--code); color: var(--frost); }
.cp.checking .cp-ms { color: var(--rime-2); font-family: var(--text); font-weight: 500; }
.cp-try { margin: 0; color: var(--rime-2); font-size: 13.5px; }
.cp-title { margin: 2px 0 0; font: 450 21px/1.25 var(--display); color: var(--frost); }
.cp-sentence { margin: 4px 0 10px; color: var(--rime); font-size: 14.5px; overflow-wrap: anywhere; }
.cp-scan { height: 3px; margin-top: 12px; border-radius: 3px; background: rgba(95, 189, 245, .15); overflow: hidden; }
.cp-scan i { display: block; height: 100%; width: 35%; border-radius: 3px; background: var(--icefall); animation: scan .65s ease-in-out infinite; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.cp-verdict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.stamp { display: inline-block; font: 700 13px var(--text); letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 10px; border: 1.5px solid currentColor; animation: stamp .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp { from { opacity: 0; transform: scale(1.6) rotate(-6deg); } }
.stamp.block { color: var(--block-ink); background: var(--block-soft); } .stamp.review { color: var(--review-ink); background: var(--review-soft); } .stamp.allow { color: var(--allow-ink); background: var(--allow-soft); }
.cp-by { color: var(--rime); font-size: 13.5px; }
.cp-fine { margin: 0; color: var(--rime); font-size: 14px; }
.cp-why { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.cp-why .chip { flex: none; margin-top: 1px; }
.cp-why ul { margin: 0; padding-left: 0; list-style: none; color: var(--frost); font-size: 14.5px; } .cp-why li { margin-bottom: 3px; }
.cp-without { margin-top: 10px; font-size: 14.5px; }
.cp-without summary { cursor: pointer; color: var(--block-ink); font-weight: 600; }
.cp-without p { margin: 6px 0 0; color: var(--frost); }
.cp-approve { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(8, 19, 34, .45); border: 1px solid var(--line); }
.cp-approve p { margin: 0; font-size: 14.5px; color: var(--rime); } .cp-approve b { color: var(--frost); }
.cp-approve .approved { color: var(--allow-ink); } .cp-approve .declined { color: var(--rime); }
.cp-btns { display: flex; gap: 8px; margin-top: 10px; }

.chat-page { margin: 0 18px; border: 1px dashed var(--line); border-radius: 14px; padding: 10px 14px; }
.chat-page summary { cursor: pointer; color: var(--rime); font-size: 14.5px; } .chat-page summary span { color: var(--rime-2); }
.chat-page textarea { margin-top: 10px; }
.chat-form { display: flex; gap: 10px; padding: 12px 18px 0; }
.chat-form .input { flex: 1; min-width: 0; }
.chat-fine { color: var(--rime-2); font-size: 12.5px; margin: 10px 18px 16px; line-height: 1.5; }

/* missions and score */
.missions-panel { padding: 18px; position: sticky; top: 84px; }
.score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score div { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.score b { display: block; font: 450 34px/1 var(--display); }
.score div:first-child b { color: var(--allow-ink); }
.score span { font-size: 12.5px; color: var(--rime-2); }
.bump { animation: bump .45s ease-out; } @keyframes bump { 40% { transform: scale(1.25); } }
.missions-panel h3 { font: 450 21px/1.2 var(--display); margin: 18px 0 8px; }
.missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mission { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; }
.mission:hover { border-color: var(--line); }
.m-mark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rime-2); }
.mission.stopped .m-mark { border-color: var(--allow-ink); background: var(--allow-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23081322' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.mission.held .m-mark { border-color: var(--review-ink); background: var(--review-ink); }
.mission.through .m-mark { border-color: var(--block-ink); background: var(--block-ink); }
.m-text { display: grid; min-width: 0; } .m-text b { font-weight: 600; font-size: 14.5px; } .m-text small { color: var(--rime-2); font-size: 12.5px; }
.mission.stopped small { color: var(--allow-ink); } .mission.held small { color: var(--review-ink); } .mission.through small { color: var(--block-ink); }
.m-try, .m-more { border: 1px solid var(--line); background: transparent; color: var(--frost); border-radius: 999px; padding: 5px 12px; font: 600 12.5px var(--text); cursor: pointer; }
.m-try:hover, .m-more:hover { border-color: var(--ice-line); background: var(--ice-soft); }
.m-try:disabled, .m-more:disabled { opacity: .45; cursor: default; }
.more { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px 0; color: var(--rime-2); font-size: 12.5px; }
.saved { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.saved h4 { margin: 0 0 8px; font: 600 12px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--rime-2); }
.saved dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: 14px; }
.saved dt { color: var(--rime); } .saved dd { margin: 0; text-align: right; font-weight: 600; color: var(--frost); font-variant-numeric: tabular-nums; }
.share { margin-top: 14px; width: 100%; }
.layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.layers div { padding: 0 4px; } .layers p { margin: 8px 0 0; color: var(--rime); font-size: 14.5px; } .layers b { color: var(--frost); font-weight: 600; }
@media (max-width: 940px) {
  .trick-grid { grid-template-columns: minmax(0, 1fr); }
  .missions-panel { position: static; order: -1; padding: 14px; min-width: 0; }
  .score b { font-size: 26px; }
  .missions-panel h3 { margin: 12px 0 8px; font-size: 18px; }
  .missions { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
  .missions::-webkit-scrollbar { display: none; }
  .mission { flex: 0 0 212px; scroll-snap-align: start; grid-template-columns: 18px 1fr; border-color: var(--line); background: rgba(8, 19, 34, .35); align-items: start; }
  .mission .m-try { grid-column: 2; justify-self: start; }
  .more { flex: 0 0 auto; flex-direction: column; align-items: flex-start; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 12px; }
  .saved dl { grid-template-columns: 1fr auto 1fr auto; font-size: 13px; }
  .layers { grid-template-columns: 1fr; }
  .chat-log { height: 460px; }
}
@media (max-width: 560px) {
  .roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 14px; }
  .role { min-width: 0; padding: 10px 12px; } .role b { font-size: 14.5px; } .role span { font-size: 12.5px; }
  .chat-log { padding: 14px; height: 420px; }
  .chat-bar, .chat-form { padding-left: 14px; padding-right: 14px; } .chat-page { margin: 0 14px; } .chat-fine { margin: 10px 14px 14px; }
  .cbubble { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) { .cp, .stamp, .bump, .live-dot, .dots i, .cp-scan i { animation: none; } }