/* Landing v7 prototype: light Paper (services/api/web/packages/paper-tokens)
   with washed, dithered artwork from dither.js. Calm type, white sheets,
   olive-gray rules, sparse vermilion; green only for confirmed success. */
@font-face { font-family: Chalet; src: url('fonts/Chalet-LondonNineteenSixty.ttf'); font-display: swap; }
@font-face { font-family: Onest; font-weight: 400; src: url('fonts/Onest-400.ttf'); font-display: swap; }
@font-face { font-family: Onest; font-weight: 500; src: url('fonts/Onest-500.ttf'); font-display: swap; }
@font-face { font-family: Onest; font-weight: 600; src: url('fonts/Onest-600.ttf'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: url('fonts/JetBrainsMono-400.ttf'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: url('fonts/JetBrainsMono-500.ttf'); font-display: swap; }
:root {
  --canvas: #f7f5e8; --sheet: #fffdf6; --sunk: #eef0dc; --tint: #f3efd2; --butter: #f6ecc2;
  --ink: #22251c; --ink-soft: #343b2a; --text-2: #5f6a4d; --muted: #75805f;
  --line: #d9dcc4; --line-faint: #e8ead6; --line-strong: #bcc5a0;
  --accent: #e8622a; --accent-text: #b44a1c; --accent-soft: #fff0e2; --accent-line: #eea57c;
  --success: #4e6d43; --mint: #e8f0dc; --mint-ink: #3c5a36;
  --tg: #2aabee;
  --sans: Onest, Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 1px 2px rgba(40, 48, 28, .06), 0 12px 32px -12px rgba(52, 64, 36, .2);
}
* { box-sizing: border-box; }
html { color-scheme: light; overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.025em; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
.over { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
canvas.art { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

/* header */
.head { position: sticky; top: 0; z-index: 20; background: rgba(247, 245, 232, .86); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--line-faint); }
.nav { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { font: 32px/.7 Chalet, var(--sans); letter-spacing: -.02em; }
.links { display: flex; gap: 26px; margin: 0 auto; font-size: 15px; color: var(--ink-soft); }
.links a:hover { color: var(--ink); }
.signin { padding: 12px 0; font-size: 15px; color: var(--ink-soft); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; font: 500 15px var(--sans); cursor: pointer; transition: transform 150ms var(--ease), background 150ms; }
.btn:hover { transform: translateY(-1px); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #000; }
.btn.soft { background: var(--butter); color: var(--ink); }
.btn.line { background: var(--sheet); border-color: var(--line-strong); color: var(--ink); }
.btn.big { min-height: 50px; padding: 0 24px; font-size: 16px; }
.menu-btn { display: none; place-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--sheet); cursor: pointer; }
.menu-btn i { display: block; width: 16px; height: 2px; background: var(--ink); transition: transform 200ms var(--ease); }
.head.open .menu-btn i:first-child { transform: translateY(4px) rotate(45deg); }
.head.open .menu-btn i:last-child { transform: translateY(-4px) rotate(-45deg); }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }

/* hero */
.hero { display: grid; justify-items: center; text-align: center; padding-top: 88px; padding-bottom: 48px; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); font-size: 14px; color: var(--ink-soft); }
.badge .new { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; }
.hero h1 { margin: 26px 0 0; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.035em; }
.sub { max-width: 640px; margin: 22px 0 0; font-size: 19px; line-height: 1.5; color: var(--text-2); }
.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }

/* hero panel: dithered landscape with product cards on top */
.panel { position: relative; overflow: hidden; min-height: 600px; border-radius: 20px; border: 1px solid var(--line); background: var(--sunk); display: grid; place-items: center; padding: 76px 40px 84px; }
.hm-tabs { position: absolute; z-index: 3; top: 18px; left: 18px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .88); box-shadow: var(--shadow); }
.hm-tabs button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: 500 14px var(--sans); color: var(--text-2); cursor: pointer; }
.hm-tabs button.on { background: var(--accent); color: #fff; }
.stage { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(880px, 100%); }
.stage[hidden] { display: none; }
.card { position: relative; padding: 18px; border-radius: 14px; background: var(--sheet); border: 1px solid rgba(216, 219, 206, .8); box-shadow: var(--shadow); text-align: left; }
.card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-faint); }
.card-head b { display: block; font-size: 15px; font-weight: 500; }
.card-head small { font-size: 13px; color: var(--muted); }
.ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-soft); }
.ic.tg { background: var(--tg); border-color: var(--tg); color: #fff; }
.flow-card .over { margin: 14px 0 6px; }
.flow { margin: 0; padding: 0; list-style: none; }
.flow li { position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; opacity: .35; transition: opacity 300ms var(--ease); }
.flow li.on { opacity: 1; }
.flow li:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 26px; bottom: -8px; width: 1px; background: var(--line); }
.flow li i { width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: var(--line-strong); }
.flow li.active i { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.flow li.done i { background: var(--success); }
.flow b { display: block; font-size: 14px; font-weight: 500; }
.flow small { display: block; font-size: 13px; color: var(--muted); }
.flow .tagline { font: 12px/1.45 var(--mono); color: var(--accent-text); }
.flow time { font: 12px var(--mono); color: var(--muted); }
.resolved { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mint-line, #d2dfc6); background: var(--mint); opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.resolved.on { opacity: 1; transform: none; }
.resolved span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--success); color: var(--success); font-size: 12px; }
.resolved b { display: block; font-size: 14px; font-weight: 500; color: var(--mint-ink); }
.resolved small { font-size: 13px; color: var(--success); }
.chat { display: grid; gap: 10px; padding-top: 14px; }
.chat > * { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.chat > .on { opacity: 1; transform: none; }
.bub { max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.bub small { display: block; margin-top: 4px; font: 12px var(--mono); color: var(--muted); }
.bub.in { background: var(--sunk); }
.bub.bot { border: 1px dashed var(--line-strong); }
.bub.bot .over { display: block; margin-bottom: 6px; color: var(--accent-text); }
.bub.out { justify-self: end; background: var(--mint); }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btns b, .btns i { padding: 8px 11px; border-radius: 8px; background: var(--sunk); font: normal 500 13px var(--sans); }
.btns b { background: var(--ink); color: #fff; transition: transform 120ms; }
.btns b.pressed { transform: scale(.94); background: var(--success); }
.cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; }
.ripple { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 2px solid var(--success); opacity: 0; pointer-events: none; }
.ctrl { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(520px, calc(100% - 36px)); padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: var(--shadow); }
.ctrl[hidden] { display: none; }
.pp-btn { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; cursor: pointer; }
.scrub { position: relative; flex: 1; height: 36px; cursor: pointer; touch-action: none; }
.scrub::before, .scrub .fill { content: ''; position: absolute; left: 0; top: 17px; height: 3px; border-radius: 3px; }
.scrub::before { right: 0; background: var(--line); }
.scrub .fill { width: 0; background: var(--accent); }
.scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.tc { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }

/* try-it card (same behaviour as v6) */
.hero-card { position: relative; z-index: 2; display: grid; gap: 10px; width: min(520px, 100%); padding: 20px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); text-align: left; }
.hero-card[hidden] { display: none; }
.hero-card > * { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.hero-card > .on, .hero-card > .try, .hero-card > .hc-top { opacity: 1; transform: none; }
.try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line-faint); }
.pill { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); font: 500 14px var(--sans); color: var(--ink); cursor: pointer; }
.pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.hc-top { display: flex; align-items: center; gap: 10px; }
.hc-top b { display: block; font-size: 14px; font-weight: 500; }
.hc-top small { font-size: 13px; color: var(--muted); }
.hc-time, .stamp { font: 12px var(--mono); color: var(--muted); }
.hc-time { margin-left: auto; }
.stamp { display: block; margin-top: 4px; text-align: right; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.avatar.s { width: 28px; height: 28px; font-size: 13px; }
.msg { max-width: 85%; padding: 10px 13px; border-radius: 12px; font-size: 15px; }
.msg.in { background: var(--sunk); }
.msg.out { justify-self: end; background: var(--mint); }
.typing { display: flex; align-items: center; gap: 4px; font: 12px var(--mono); color: var(--muted); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dots 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.typing span { margin-left: 6px; }
@keyframes dots { 50% { opacity: .2; } }
.draft { padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.draft p { min-height: 2.6em; margin: 8px 0 0; font-size: 17px; line-height: 1.35; }
.draft-top { display: flex; justify-content: space-between; align-items: center; }
.conf { display: inline-flex; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--muted); }
.conf-bar { width: 64px; height: 4px; border-radius: 4px; background: var(--line-faint); overflow: hidden; }
.conf-bar i { display: block; height: 100%; width: 0; background: var(--success); transition: width 900ms var(--ease); }
.route { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.route .over { color: var(--accent-text); }
.route p { margin: 6px 0 0; font-size: 15px; }
.approve-row { display: flex; align-items: center; justify-content: space-between; }
.approve { min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font: 500 14px var(--sans); transition: transform 150ms, background 150ms; }
.approve.press { background: var(--success); transform: scale(.95); }
.sent { justify-self: end; font: 12px var(--mono); color: var(--success); }
.hero-card[data-mode='complaint'] :is([data-h='draft'], [data-h='approve'], [data-h='out'], [data-h='sent']) { display: none; }
.hero-card:not([data-mode='complaint']) [data-h='route'] { display: none; }

/* strip */
.strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-faint); }
.strip p { margin: 0; color: var(--muted); font-size: 15px; }
.strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; color: var(--ink-soft); }

/* section heads */
.sec-head { margin-bottom: 44px; }
.sec-head.center { display: grid; justify-items: center; text-align: center; }
.sec-head h2, .price-head h2 { margin: 16px 0 0; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; }
.sec-head p { max-width: 520px; margin: 14px 0 0; color: var(--text-2); font-size: 17px; }
.chip-label { display: inline-block; padding: 5px 12px; border: 1px solid #e3d9a6; border-radius: 999px; background: var(--butter); font-size: 13px; color: var(--ink-soft); }

/* bento: Native-style cards — a sunk art area on top, words below */
.bento-section { padding: 110px 0 60px; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 20px; }
.feat h3 { margin: 18px 0 6px; font-size: 18px; letter-spacing: -.01em; }
.feat > p { margin: 0; font-size: 15px; color: var(--text-2); }
.feat-art { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 250px; padding: 44px 20px 20px; border-radius: 12px; border: 1px solid var(--line-faint);
  background: radial-gradient(circle at 1px 1px, rgba(94, 122, 79, .22) 1px, transparent 0) 0 0 / 14px 14px, var(--sunk); transition: background-color 400ms var(--ease); }
.feat-art > .over { position: absolute; top: 16px; left: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; transition: background 150ms, color 150ms; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mini-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--sheet); box-shadow: var(--shadow); }
.mini-card.col { display: grid; gap: 6px; }
.mini-card p { flex: 1; margin: 0; font-size: 15px; }
.inb-kind { font: 12px var(--mono); color: var(--accent-text); white-space: nowrap; }
.seg { display: inline-flex; gap: 2px; width: max-content; padding: 3px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.seg button:hover:not(.on) { background: var(--sunk); }
.seg button.on { background: var(--accent); color: #fff; }
.big-line { font-size: 19px !important; line-height: 1.3; transition: opacity 150ms; }
.never { font: 12px var(--mono) !important; color: var(--muted); }
.cmp { display: flex; align-items: center; gap: 10px; }
.cmp .bad { padding: 9px 12px; border-radius: 10px; background: var(--sheet); box-shadow: var(--shadow); font-size: 14px; }
.cmp .path { position: relative; flex: 1; height: 2px; background: var(--line-strong); }
.cmp .path i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: 0; }
.cmp.go .path i { animation: travel 900ms var(--ease) forwards; }
@keyframes travel { 0% { left: 0; opacity: 1; } 100% { left: calc(100% - 10px); opacity: 1; } }
.person { position: relative; padding: 9px 12px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 14px; }
.ping { position: absolute; top: -8px; right: -8px; display: none; min-width: 20px; height: 20px; border-radius: 10px; background: var(--accent); color: #fff; font: 12px/20px var(--mono); text-align: center; font-style: normal; }
.cmp.done .ping { display: block; }
.mini { align-self: flex-start; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--sheet); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.mini:hover { border-color: var(--ink); }
.feat-art.night { background-color: #e2e8d3; }
.feat-art.night.day { background-color: var(--butter); }
.tile-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.clock { font: 500 16px var(--mono); }
.night-line { margin: 0; color: var(--text-2); }
.range-wrap { display: grid; }
.range { width: 100%; height: 36px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.range-scale { position: relative; height: 16px; margin: 0 8px; font: 12px var(--mono); color: var(--muted); }
.range-scale span { position: absolute; left: calc(var(--p) * 100%); transform: translateX(-50%); }
.chart { display: grid; gap: 10px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.bars > * { flex: 1; height: var(--h); padding: 0; border: 0; border-radius: 4px 4px 0 0; background: #c9d4ae; cursor: pointer; transform-origin: bottom; transform: scaleY(.1); transition: transform 700ms var(--ease), background 150ms; }
.bars.grow > * { transform: none; }
.bars > :hover, .bars > .on { background: var(--accent); }
.bars button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chart-tip { font: 13px var(--mono); color: var(--ink-soft); }

/* story */
.story { padding: 100px 0 40px; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.story-stick { position: sticky; top: 100px; align-self: start; }
.device-frame { position: relative; overflow: hidden; padding: 40px 32px; border-radius: 20px; border: 1px solid var(--line); }
.device { position: relative; padding: 20px; border-radius: 14px; background: var(--sheet); box-shadow: var(--shadow); }
.d-head { display: flex; justify-content: space-between; font: 12px var(--mono); color: var(--muted); margin-bottom: 14px; }
.d-clock { color: var(--accent-text); }
.rail { display: flex; gap: 6px; margin-bottom: 16px; }
.rail i { flex: 1; height: 3px; border-radius: 3px; background: var(--line-faint); transition: background 250ms; }
.device[data-state='0'] .rail i:nth-child(-n+1), .device[data-state='1'] .rail i:nth-child(-n+2), .device[data-state='2'] .rail i:nth-child(-n+3), .device[data-state='3'] .rail i:nth-child(-n+4), .device[data-state='4'] .rail i { background: var(--accent); }
.d-body { display: grid; gap: 10px; }
.d-body > * { opacity: .12; filter: blur(1px); transform: translateY(6px); transition: opacity 400ms var(--ease), filter 400ms var(--ease), transform 400ms var(--ease); }
.device[data-state='0'] .d-msg.in,
.device[data-state='1'] :is(.d-msg.in, .d-draft),
.device[data-state='2'] :is(.d-msg.in, .d-draft, .d-checks),
.device[data-state='3'] :is(.d-msg.in, .d-draft, .d-checks, .d-tg),
.device[data-state='4'] :is(.d-msg.in, .d-draft, .d-checks, .d-tg, .d-msg.out, .d-log) { opacity: 1; filter: none; transform: none; }
.d-msg { max-width: 85%; padding: 10px 13px; border-radius: 12px; background: var(--sunk); font-size: 15px; }
.d-msg.out { justify-self: end; background: var(--mint); }
.d-draft { padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.d-draft .over { color: var(--accent-text); }
.d-draft p { margin: 6px 0 0; font-size: 17px; line-height: 1.35; transition: opacity 150ms; }
.d-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.d-checks span { padding: 5px 9px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font: 12px var(--mono); }
.d-tg { padding: 12px 14px; border-radius: 12px; background: var(--sunk); }
.d-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.d-btns button { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.d-btns .d-approve { background: var(--ink); border-color: var(--ink); color: #fff; }
.device[data-state='4'] .d-approve { background: var(--success); border-color: var(--success); }
.d-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.d-log p { margin: 6px 0 0; font: 13px var(--mono); color: var(--ink-soft); }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { min-height: min(42vh, 380px); display: flex; flex-direction: column; justify-content: center; padding: 28px 0; border-top: 1px solid var(--line-faint); opacity: .35; transition: opacity 400ms var(--ease); }
.steps li:first-child { border-top: 0; }
.steps { padding-bottom: 12vh; }
.steps li.on { opacity: 1; }
.step-btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.step-btn:hover h3 { color: var(--accent-text); }
.n { font: 13px var(--mono); color: var(--accent-text); }
.steps h3 { margin: 10px 0 8px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; }
.steps p { margin: 0; font-size: 18px; color: var(--text-2); }

/* control */
.control-section { padding: 90px 0; }
.control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.toggle-card { padding: 24px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--line-faint); box-shadow: var(--shadow); }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.toggle-row b { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.toggle-card > p { margin: 10px 0 0; color: var(--text-2); }
.switch { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 15px; background: var(--line-strong); cursor: pointer; transition: background 250ms var(--ease); }
.switch::before { content: ''; position: absolute; inset: -7px; }
.switch i { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; font: normal 12px/1 var(--sans); transition: transform 250ms var(--ease); }
.switch.on { background: var(--success); }
.switch.on i { transform: translateX(22px); }
.switch.locked { cursor: not-allowed; }
.switch.shake { animation: shake 300ms; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.log { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--tint); list-style: none; font: 13px/1.9 var(--mono); }
.log span { color: var(--muted); margin-right: 8px; }

/* pricing: two plans */
.pricing { padding: 90px 0; }
.price-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; margin-bottom: 40px; }
.price-head > p { margin: 0; justify-self: end; max-width: 380px; font-size: 18px; color: var(--text-2); }
.plans { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.plan { position: relative; padding: 40px; background: var(--sheet); }
.plan.paid { overflow: hidden; }
.plan-body { position: relative; }
.plan.paid .plan-body { margin: -16px; padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(2px); }
.plan h3 { margin: 0; font-size: 24px; }
.plan-sub { margin: 6px 0 0; color: var(--text-2); }
.price { margin: 26px 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-faint); font-size: 52px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.price span { font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.plan .btn { width: 100%; }
.checks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.checks li::before { content: '✓'; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; }

/* faq */
.faq { max-width: 820px; padding-top: 70px; padding-bottom: 90px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; list-style: none; font-size: 18px; font-weight: 500; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 22px/1 var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 20px; color: var(--text-2); }

/* cta */
.cta { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 460px; padding: 60px 24px; border-radius: 20px; border: 1px solid var(--line); }
.cta-card { position: relative; width: min(560px, 100%); padding: 36px; border-radius: 16px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); text-align: center; }
.cta-card h2 { margin: 16px 0 0; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; }
.cta-sub { margin: 12px 0 0; color: var(--text-2); }
.mini-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 24px; }
.mini-form input { min-height: 50px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--sheet); font: inherit; color: var(--ink); }
.mini-form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.mini-form input.bad { border-color: var(--accent); outline-color: var(--accent); }
.mini-form small { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.mini-form.sent input { opacity: .55; }
/* the pilot application (#455): details, then the e-mail code, then received */
.apply-form { grid-template-columns: 1fr 1fr; text-align: left; }
.apply-form .wide { grid-column: 1 / -1; }
.apply-form[hidden], .apply-done[hidden], .apply-form [hidden] { display: none; }
.apply-field { display: grid; gap: 4px; align-content: start; min-width: 0; }
.apply-form input, .mini-form select { width: 100%; min-width: 0; }
.mini-form select { min-height: 50px; padding: 0 40px 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2322251c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center; font: inherit; color: var(--ink); appearance: none; -webkit-appearance: none; }
.mini-form select:invalid { color: var(--muted); }
.mini-form select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.mini-form select.bad { border-color: var(--accent); outline-color: var(--accent); }
.apply-form .apply-error { padding: 0 18px; font-size: 13px; color: var(--accent-text); }
.apply-alert { margin: 0; padding: 10px 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-size: 14px; }
.apply-notice { margin: 0 0 4px; font-size: 15px; color: var(--ink-soft); }
.apply-form button[disabled] { cursor: progress; opacity: .7; transform: none; }
.apply-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.apply-links small { flex: 1 1 auto; }
.apply-link { padding: 0; border: 0; background: none; font: 500 14px var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.apply-link[disabled] { color: var(--muted); text-decoration: none; cursor: default; }
.apply-done { margin-top: 24px; padding: 20px; border-radius: 14px; background: var(--mint); color: var(--mint-ink); }
.apply-done h3 { margin: 0; font-size: 22px; outline: none; }
.apply-done p { margin: 8px 0 0; font-size: 15px; }

/* footer: an engraved harbour where the messages arrive; links sit in its sky */
.foot { position: relative; overflow: hidden; margin-top: 110px; height: clamp(560px, 42.4vw, 1000px); background: #fbf8ea; color: var(--ink); }
.foot-art { position: absolute; inset: 0; }
.foot-art img, .foot-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.foot-art video { opacity: 0; transition: opacity 800ms var(--ease); }
.foot-art video.ready { opacity: 1; }
.foot-art::after { content: ''; position: absolute; inset: 0 0 auto; height: 18%; background: linear-gradient(var(--canvas), rgba(247, 245, 232, 0)); }
.foot-grid { position: relative; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 28px; max-width: min(62vw, 1200px); margin: 0 0 0 max(32px, calc((100vw - 1136px) / 2)); padding: 64px 0 0; }
.foot-brand .logo { font-size: 34px; }
.foot-brand p { margin: 14px 0 0; font-size: 15px; color: var(--text-2); }
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255, 253, 246, .75); font-size: 15px; }
.foot-col { display: grid; align-content: start; gap: 2px; font-size: 15px; }
.foot-col b { margin-bottom: 8px; font-weight: 600; }
.foot-col a { padding: 6px 0; color: var(--ink-soft); }
.foot-col a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.foot-copy { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0 auto; font: 12px var(--mono); color: var(--text-2); }

@media (max-width: 900px) {
  .wrap { padding-inline: 16px; }
  .nav { gap: 12px; }
  .nav .logo { margin-right: auto; }
  .nav > .btn { display: none; }
  .links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px 16px 16px; background: var(--canvas); border-bottom: 1px solid var(--line); font-size: 18px; }
  .links { display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 220ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms; box-shadow: 0 18px 30px -20px rgba(40, 48, 28, .35); }
  .head.open .links { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity 220ms var(--ease), transform 280ms var(--ease), visibility 0s; }
  .links a { opacity: 0; transform: translateY(-4px); transition: opacity 220ms var(--ease), transform 280ms var(--ease); }
  .head.open .links a { opacity: 1; transform: none; }
  .head.open .links a:nth-child(2) { transition-delay: 30ms; } .head.open .links a:nth-child(3) { transition-delay: 60ms; } .head.open .links a:nth-child(4) { transition-delay: 90ms; } .head.open .links a:nth-child(5) { transition-delay: 120ms; }
  .links a { padding: 14px 0; border-bottom: 1px solid var(--line-faint); }
  .menu-btn { display: grid; }
  .hero { padding-top: 56px; }
  .sub br { display: none; }
  .panel { min-height: 0; padding: 70px 12px 76px; }
  .stage { grid-template-columns: 1fr; }
  .flow-card .flow li:not(.on) { display: none; }
  .bento, .control-grid, .plans, .price-head { grid-template-columns: 1fr; }
  .price-head > p { justify-self: start; }
  .plan { padding: 28px 22px; }
  .story-grid { grid-template-columns: 1fr; gap: 24px; }
  .story-stick { top: 72px; z-index: 2; }
  .device-frame { padding: 14px; }
  .device .d-body > :not(.d-msg.in) { display: none; }
  .device[data-state='1'] .d-body > .d-draft, .device[data-state='2'] .d-body > .d-draft, .device[data-state='3'] .d-body > .d-tg,
  .device[data-state='4'] .d-body > :is(.d-msg.out, .d-log) { display: block; }
  .device[data-state='2'] .d-body > .d-checks { display: flex; }
  .steps li { min-height: 55vh; }
  .mini-form, .apply-form { grid-template-columns: 1fr; }
  .cta-card { padding: 26px 18px; }
  .foot { height: auto; padding-bottom: 50vw; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; max-width: none; margin: 0; padding: 48px 16px 0; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-art { top: auto; height: 58vw; }
  .foot-art::after { height: 40%; background: linear-gradient(#fbf8ea, rgba(251, 248, 234, 0)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; } html { scroll-behavior: auto; } }

/* ---- generated art (set 2, 2026-09-23) + prototype variant picker */
.art-slot { position: relative; margin: 0; }
.art-slot > img { display: block; width: 100%; height: auto; }
.art-pick { position: absolute; z-index: 4; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(34, 37, 28, .82); color: #fff; font: 12px var(--mono); white-space: nowrap; opacity: 0; transition: opacity 150ms; }
.art-slot:hover > .art-pick, .art-slot:focus-within > .art-pick, .picking .art-pick { opacity: 1; }
.art-pick button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: #fff; font: 16px/1 var(--sans); cursor: pointer; }
.art-pick button:hover { background: rgba(255, 255, 255, .15); }
.art-pick span { padding: 0 4px; }
@media (hover: none) { .art-pick { opacity: 1; } }
/* how it works: a vignette beside each step fills the column */
.steps li { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; }
.step-art { width: 150px; }
/* feature spots sit in the art area's top-right */
/* control: the scene beside the three switches */
.sec-head .seal { width: 110px; margin-bottom: 8px; }
.control-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center; }
.control-layout .control-grid { grid-template-columns: 1fr; gap: 14px; }
.scene { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-faint); background: #fbf8ea; }
/* pricing stamps: the price is printed in the stamp's blank band */
.plan .stamp { position: absolute; top: 22px; right: 26px; width: 112px; transform: rotate(4deg); z-index: 2; }
.plan.paid .stamp { transform: rotate(-3deg); }
.stamp-price { position: absolute; left: 0; right: 0; bottom: 11%; text-align: center; font: 600 17px var(--mono); color: var(--ink-soft); }
.cta-card .envelope { width: 190px; margin: -12px auto 6px; }
.foot-img { position: absolute; inset: 0; }
.foot-img > img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.foot-img > .art-pick { bottom: auto; top: 12px; left: auto; right: 16px; transform: none; opacity: 1; }
@media (max-width: 900px) {
  .steps li { grid-template-columns: 96px 1fr; gap: 16px; }
  .step-art { width: 96px; }
  .control-layout { grid-template-columns: 1fr; }
  .plan .stamp { width: 84px; top: 16px; right: 16px; }
  .stamp-price { font-size: 13px; }
}

/* ---- how it works: a clean chat thread that grows with the steps */
.thread { padding: 20px; border-radius: 18px; background: var(--sheet); border: 1px solid var(--line-faint); box-shadow: var(--shadow); }
.t-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.t-who { display: flex; align-items: center; gap: 10px; }
.t-who b { display: block; font-size: 15px; font-weight: 500; }
.t-who small { font-size: 13px; color: var(--muted); }
.av { flex: none; width: 42px; }
.av.sm { width: 30px; align-self: flex-end; }
.av .art-pick { bottom: -34px; }
.thread .d-clock { font: 12px var(--mono); color: var(--accent-text); }
.thread .d-body { display: grid; gap: 8px; }
.t-day { justify-self: center; margin: 6px 0 2px; font: 12px var(--mono); color: var(--muted); }
.t-row { display: flex; align-items: flex-end; gap: 8px; }
.t-row.us { justify-content: flex-end; }
.bub { max-width: 82%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--sunk); font-size: 15px; line-height: 1.4; }
.t-row.us .bub { border-radius: 16px 16px 4px 16px; background: var(--mint); }
.t-row.old .bub { opacity: .6; }
.bub.draft { background: var(--sheet) !important; border: 1px dashed var(--line-strong); }
.bub.draft .over { display: block; margin-bottom: 4px; color: var(--accent-text); }
.bub.draft p { margin: 0; transition: opacity 150ms; }
.thread .d-checks { justify-content: flex-end; }
.thread .d-log { justify-self: end; font: 12px var(--mono); color: var(--success); }
.thread .d-tg { margin-left: auto; width: 88%; }
/* reveal: each step adds its line to the thread */
.thread .d-body > :is(.d-in, .d-draft, .d-checks, .d-tg, .d-out, .d-log) { opacity: 0; transform: translateY(8px); max-height: 0; overflow: hidden; margin: -4px 0; transition: opacity 400ms var(--ease), transform 400ms var(--ease), max-height 500ms var(--ease), margin 400ms; }
.thread[data-state='0'] .d-in,
.thread[data-state='1'] :is(.d-in, .d-draft),
.thread[data-state='2'] :is(.d-in, .d-draft, .d-checks),
.thread[data-state='3'] :is(.d-in, .d-draft, .d-checks, .d-tg),
.thread[data-state='4'] :is(.d-in, .d-draft, .d-checks, .d-tg, .d-out, .d-log) { opacity: 1 !important; transform: none !important; max-height: 260px !important; overflow: visible !important; margin: 0 !important; }
.thread[data-state='0'] .rail i:nth-child(-n+1), .thread[data-state='1'] .rail i:nth-child(-n+2), .thread[data-state='2'] .rail i:nth-child(-n+3), .thread[data-state='3'] .rail i:nth-child(-n+4), .thread[data-state='4'] .rail i { background: var(--accent); }
.thread[data-state='4'] .d-approve { background: var(--success); border-color: var(--success); }
.steps { padding-bottom: 0; }
.story { padding-bottom: 20px; }

/* ---- control: two-panel card; the dark side wears Claude's warm charcoal */
.control-section { padding: 70px 0 80px; }
.duo { display: grid; grid-template-columns: 1fr 1.08fr; gap: 14px; padding: 14px; border-radius: 30px; background: var(--sheet); border: 1px solid var(--line-faint); box-shadow: 0 30px 60px -30px rgba(52, 64, 36, .35); }
.duo-left { display: flex; flex-direction: column; gap: 14px; padding: 34px; border-radius: 20px; background: var(--sunk); border: 1px solid var(--line-faint); }
.kick { font-size: 14px; color: var(--success); }
.duo-left h2 { margin: 0; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; }
.duo-left h2 .dim { color: #a3a98f; }
.duo-left > p { margin: 0; max-width: 460px; color: var(--text-2); }
.duo-left .scene { margin-top: auto; border: 0; background: transparent; mix-blend-mode: multiply; }
.duo-right { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: #262624; color: #e8e6df; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .45); }
.tui-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid #3d3c38; align-self: flex-start; }
.tui-tabs button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #9b988f; font: 500 13px var(--sans); cursor: pointer; }
.tui-tabs button.on { background: #3a3935; color: #f0eee8; }
.tui { flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 14px; border: 1px solid #3d3c38; background: #1f1e1d; overflow: hidden; }
.tui-bar { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #33322e; font: 12px var(--mono); color: #9b988f; }
.tui-bar span:first-child::before { content: '● '; color: #86b37a; }
.tui-screen { height: 440px; overflow-y: auto; padding: 10px 14px; font: 12.5px/1.75 var(--mono); scrollbar-width: thin; scrollbar-color: #3d3c38 transparent; }
.tl { display: grid; grid-template-columns: auto auto 1fr; column-gap: 10px; white-space: nowrap; }
.tl time { color: #6f6d66; }
.tl b { font-weight: 400; color: #d97757; }
.tl .tx { overflow: hidden; text-overflow: ellipsis; color: #e8e6df; }
.tl .tail { grid-column: 3; color: #9b988f; overflow: hidden; text-overflow: ellipsis; padding-left: 14px; }
.tl.out b, .tl.out .tx { color: #b9b6ad; }
.tl.ok b, .tl.audit b { color: #86b37a; }
.tl.audit .tx { color: #cfe5c4; }
.tl.warn b, .tl.warn .tx { color: #d9b25f; }
.tl.wait b, .tl.wait .tx { color: #6f6d66; font-style: italic; }
.tl:last-child .tx::after { content: '▍'; margin-left: 4px; color: #d97757; animation: blink .9s steps(1) infinite; }
.tui-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill-lock { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #3f5a37; background: #243020; color: #bfe0b0; font: 500 13px var(--sans); cursor: not-allowed; }
.pill-lock.shake { animation: shake 300ms; }
.tui-go { margin-left: auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: linear-gradient(#fbfaf7, #e4e2dc); color: #1f1e1d; font: 500 14px var(--sans); cursor: pointer; box-shadow: 0 2px 0 rgba(255, 255, 255, .4) inset, 0 6px 16px -6px rgba(0, 0, 0, .6); }
.tui-go[aria-pressed='true'] { background: #d97757; color: #fff; }
.tui-note { margin: 0; font: 12px var(--mono); color: #8a877f; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; padding: 8px; border-radius: 22px; }
  .duo-left { padding: 22px; }
  .tui-screen { height: 320px; font-size: 12px; }
  .tui-go { margin-left: 0; }
  .story-stick { position: sticky; top: 72px; z-index: 2; }
  .thread .t-row.old, .thread .t-day { display: none; }
}

/* ---- thread: crisp, centred in the viewport */
.thread .d-body > * { filter: none !important; }
.thread .d-body > .t-row.old, .thread .d-body > .t-day { opacity: 1; transform: none; }
.thread .d-draft { padding: 0; border: 0; border-radius: 0; }
.story-stick { top: var(--stick-top, 100px); transition: top 400ms var(--ease); }
.story-grid { align-items: start; }
@media (max-width: 900px) { .story-stick { top: 72px !important; } }

/* ---- feature cards: prototype layout picker */
.layout-pick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: -18px auto 30px; font-size: 13px; color: var(--muted); }
.layout-pick button { min-height: 34px; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: 999px; background: none; color: var(--ink-soft); font: 500 13px var(--sans); cursor: pointer; }
.layout-pick button[aria-pressed='true'] { border-style: solid; border-color: var(--ink); background: var(--ink); color: #fff; }
.title-ic { display: none; }
/* A: a quiet watermark in the corner */
/* B: a small icon beside the title, none inside the card */
/* C: vertical slices; one opens to the full card */

/* ---- thread: approval channel is a choice; Approve waits until someone presses it */
.via { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.via-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); }
.via-seg button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: none; font: 500 12px var(--sans); color: var(--ink-soft); cursor: pointer; }
.via-seg button.on { background: var(--ink); color: #fff; }
.via-where { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.d-tg[data-via='auto'] .d-btns { display: none; }
.d-tg[data-via='workspace'] { background: var(--tint); }
.thread .d-btns .d-approve { background: var(--sheet); border-color: var(--line-strong); color: var(--ink); }
.thread .d-btns .d-approve.ready { border-color: var(--success); animation: ready 1.4s var(--ease) infinite; }
@keyframes ready { 0% { box-shadow: 0 0 0 0 rgba(78, 109, 67, .35); } 70% { box-shadow: 0 0 0 10px rgba(78, 109, 67, 0); } 100% { box-shadow: 0 0 0 0 rgba(78, 109, 67, 0); } }
.thread[data-state='4'] .d-btns .d-approve { background: var(--success); border-color: var(--success); color: #fff; animation: none; }
.thread .d-btns .d-another.press { animation: press 700ms var(--ease); }
@keyframes press { 0% { transform: none; } 20% { transform: scale(.92); background: var(--butter); } 60% { transform: none; background: var(--butter); } 100% { background: var(--sheet); } }
.thread .d-another.press + * { }
.bub.draft p { transition: opacity 150ms, filter 150ms; }

/* ---- control card: text and picture sit together; mode switch on the dark side */
.duo-left { justify-content: flex-start; gap: 16px; }
.duo-left .scene { margin: 4px -10px -10px; mix-blend-mode: normal; background: none; border: 0; }
.mode-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid #3d3c38; background: #1f1e1d; }
.mode-seg button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: #9b988f; font: 500 13px var(--sans); cursor: pointer; }
.mode-seg button.on { background: #d97757; color: #fff; }
.tui-note { color: #9b988f; }

/* ---- hero demo: avatars, no scrub bar, one quiet pause button */
.hav { flex: none; width: 34px; height: 34px; object-fit: contain; }
.pp-btn.corner { position: absolute; z-index: 3; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 253, 246, .9); color: var(--ink); font-size: 12px; box-shadow: var(--shadow); cursor: pointer; }
.panel { padding-bottom: 56px; }

/* ---- try it on your own account */
.try-sec { padding-top: 34px; }
.try-box { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; padding: 34px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--line-faint); box-shadow: var(--shadow); }
.try-box.done { grid-template-columns: 1fr; }
.try-intro h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; }
.try-intro p { margin: 12px 0 0; color: var(--text-2); max-width: 420px; }
.try-form { display: grid; gap: 14px; }
.try-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.try-form input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--canvas); font: 16px var(--sans); color: var(--ink); }
.try-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: #fff; }
.at { position: relative; display: block; }
.at::before { content: '@'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.at input { padding-left: 32px; }
.try-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.try-ideas button { min-height: 34px; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: 999px; background: none; font: 500 13px var(--sans); color: var(--ink-soft); cursor: pointer; }
.try-ideas button:hover { border-style: solid; border-color: var(--accent); color: var(--accent-text); }
.try-form .btn { justify-self: start; }
.try-form .btn:disabled { opacity: .7; cursor: progress; }
.try-err { min-height: 1.2em; margin: 0; font-size: 14px; color: var(--accent-text); }
.try-out { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; }
.try-out.reveal > * { animation: rise 600ms var(--ease) both; }
.try-out.reveal > :nth-child(2) { animation-delay: 250ms; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.try-out .bub { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.try-out .bub.in { background: var(--sunk); border-radius: 16px 16px 16px 4px; }
.try-out .bub.draft { display: block; margin-top: 8px; padding: 14px 16px; border-radius: 16px 16px 4px 16px; font-size: 16px; line-height: 1.45; }
.try-out .bub.out { margin-top: 10px; margin-left: auto; background: var(--mint); border-radius: 16px 16px 4px 16px; }
.try-out mark { padding: 1px 6px; border-radius: 6px; background: var(--butter); color: var(--ink); border: 1px dashed #d8c47a; }
.try-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.try-tags span { padding: 6px 9px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); font: 12px var(--mono); color: var(--accent-text); animation: rise 400ms var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.try-tags b { font-weight: 500; color: var(--ink); }
.try-route { margin: 12px 0 0; font: 13px var(--mono); color: var(--success); }
.try-card { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); }
.try-card .d-btns .d-approve { background: var(--sheet); border-color: var(--success); animation: ready 1.4s var(--ease) infinite; }
.try-card .d-btns .d-approve.done { background: var(--success); color: #fff; animation: none; }
.route-card { margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.route-card p { margin: 6px 0 0; }
.try-foot { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.try-foot a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- interlude */
.interlude { display: grid; justify-items: center; gap: 18px; padding-top: 30px; padding-bottom: 20px; text-align: center; }
.branch { width: min(720px, 90%); }
.interlude p { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; color: var(--ink-soft); }
.interlude em { font-style: normal; color: var(--success); }

/* ---- control heading: exactly two lines */
.duo-left h2 { font-size: clamp(24px, 2.35vw, 38px); }
.duo-left h2 .dim, .duo-left h2 .line2 { white-space: nowrap; }
@media (max-width: 900px) {
  .try-box, .try-out { grid-template-columns: 1fr; padding: 22px; }
  .duo-left h2 .dim, .duo-left h2 .line2 { white-space: normal; }
}

/* ---- hero demo: bubbles join the chat and the card grows (resize.js) */
.stage { align-items: start; }
.chat > * { transition: none; }
.chat > :not(.on) { display: none; }
.chat > .on { animation: bubIn 460ms var(--ease) both; }
@keyframes bubIn { from { opacity: 0; transform: translateY(6px) scale(.98); filter: blur(2px); } }
.typed-wrap { display: grid; }
.typed-wrap > * { grid-area: 1 / 1; }
.typed-wrap .ghost { visibility: hidden; }
.btns b { background: var(--sheet); color: var(--ink); border: 1px solid var(--line-strong); }
.btns b.pressed { transform: scale(.94); background: var(--success); color: #fff; border-color: var(--success); }
.btns b.done { background: var(--success); color: #fff; border-color: var(--success); }
.flow .tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- try it (dealership): form left, live understanding right, draft below */
.try-box, .try-box.done { grid-template-columns: 1fr 1fr; align-items: start; }
.try-lead { margin: 12px 0 22px; color: var(--text-2); max-width: 460px; }
.try-left h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; }
.try-panel { padding: 22px; border-radius: 18px; background: var(--canvas); border: 1px solid var(--line-faint); }
.try-panel .bub { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--sunk); }
.try-panel .bub .muted { color: var(--muted); }
.try-tags { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 6px; margin-top: 12px; }
.try-tags span { animation: tagIn 320ms var(--ease) both; }
.try-tags span.leaving { animation: tagOut 200ms var(--ease) forwards; }
@keyframes tagIn { from { opacity: 0; transform: translateY(4px) scale(.96); filter: blur(2px); } }
@keyframes tagOut { to { opacity: 0; transform: scale(.94); } }
.try-route:empty, .try-facts:empty { display: none; }
.try-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.try-facts i { font-style: normal; padding: 3px 8px; border-radius: 6px; background: var(--butter); border: 1px dashed #d8c47a; color: var(--ink); }
.try-ideas button.on { border-style: solid; border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.try-ideas button:disabled { opacity: .45; cursor: default; }
.try-form input[readonly] { background: var(--sunk); color: var(--text-2); }
.try-out { grid-column: 1 / -1; display: block; max-width: 760px; }
.try-out .bub.draft { margin-top: 8px; }
.try-foot { margin: 12px 0 0; }
.try-foot + .try-foot { margin-top: 4px; }
@media (max-width: 900px) { .try-box, .try-box.done { grid-template-columns: 1fr; } .try-tags { grid-template-columns: repeat(2, minmax(0, max-content)); } }

/* ---- global fixes */
[hidden] { display: none !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- text selection: a highlighter pass in the brand's butter, vermilion on headings, Claude orange in the dark panel */
::selection { background: #f3dc8f; color: var(--ink); }
h1::selection, h2::selection, h3::selection, h1 *::selection, h2 *::selection { background: var(--accent); color: #fff; }
.duo-right ::selection, .tui ::selection { background: #d97757; color: #1f1e1d; }
mark::selection { background: var(--accent); color: #fff; }

/* ---- sliding pills (motion.js) */
.has-pill { position: relative; isolation: isolate; }
.slide-pill { position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 0; border-radius: 999px; background: var(--pill, var(--accent)); opacity: 0; pointer-events: none;
  transition: transform 250ms cubic-bezier(.22, 1, .36, 1), width 250ms cubic-bezier(.22, 1, .36, 1), height 250ms cubic-bezier(.22, 1, .36, 1), opacity 150ms; will-change: transform, width; }
.has-pill > button { position: relative; transition: color 250ms cubic-bezier(.22, 1, .36, 1), border-color 250ms; }
.has-pill > button.on, .has-pill > button[aria-pressed='true'], .has-pill > button[aria-selected='true'] { background: transparent !important; }
.seg.has-pill, .chips.has-pill { --pill: var(--accent); }
.via-seg.has-pill { --pill: var(--ink); }
.mode-seg.has-pill { --pill: #d97757; }
.tui-tabs.has-pill { --pill: #3a3935; }
.layout-pick.has-pill { --pill: var(--ink); }
.chips.has-pill > .chip.on { border-color: transparent; }
.layout-pick.has-pill > button[aria-pressed='true'] { border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .slide-pill, .has-pill > button { transition: none !important; } }

/* ---- buttons: pressed feel and a loader inside */
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn.loading { gap: 10px; cursor: progress; opacity: 1 !important; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- try card: Approve keeps its label; the reply streams in */
.try-card .d-btns .d-approve { color: var(--ink) !important; }
.try-card .d-btns .d-approve.done { color: #fff !important; }
.streaming::after { content: '▍'; margin-left: 2px; color: var(--accent); animation: blink .8s steps(1) infinite; }

/* ---- try draft: fillable facts, one-shot approval */
.slot { display: inline; padding: 1px 6px; border-radius: 6px; background: var(--butter); border: 1px dashed #d8c47a; color: var(--ink); outline: none; cursor: text; transition: background 200ms, border-color 200ms, box-shadow 200ms; }
.slot.empty { color: #8a7a3c; font-style: italic; }
.slot:focus { background: #fff; border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); font-style: normal; }
.slot:not(.empty) { border-style: solid; border-color: #cdbb73; }
.slot.need { animation: need 1.2s var(--ease) 2; }
@keyframes need { 30% { box-shadow: 0 0 0 4px rgba(232, 98, 42, .25); border-color: var(--accent); } }
.slot.filled { cursor: default; background: transparent; border-color: transparent; padding: 0; font-style: normal; color: inherit; }
.bub.draft.editing { outline: 2px solid var(--accent); outline-offset: 2px; background: #fff !important; }
.try-card .d-btns button { transition: background 200ms, border-color 200ms, color 200ms, transform 150ms; }
.try-card .d-btns .d-approve, .try-card .d-btns .d-approve.ready { background: var(--sheet); border: 1px solid var(--line-strong); color: var(--ink) !important; animation: none; box-shadow: none; }
.try-card .d-btns .d-approve:hover:not(:disabled) { border-color: var(--success); color: var(--success) !important; }
.try-card .d-btns .d-approve.waiting { opacity: .75; }
.try-card .d-btns .d-approve.done { background: var(--success); border-color: var(--success); color: #fff !important; opacity: 1; }
.try-card .d-btns button:disabled { cursor: default; }
.try-card.locked .d-btns button:not(.d-approve) { opacity: .45; }
.try-card .d-btns .shake { animation: shake 300ms; }
.sent-wrap { margin-top: 10px; }
.sent-wrap .bub.out { margin: 0 0 0 auto; }
.sent-meta { margin: 6px 0 0; text-align: right; font: 12px var(--mono); color: var(--success); min-height: 1.2em; }

/* ---- every inbound: tabs with a progress fill + a living Instagram mock */
.inbound-sec { padding-top: 28px; }
.inbound { display: grid; grid-template-columns: 1fr 1.05fr; gap: 14px; padding: 14px; border-radius: 30px; background: var(--sheet); border: 1px solid var(--line-faint); box-shadow: 0 30px 60px -30px rgba(52, 64, 36, .3); }
.inb-left { padding: 30px 26px 26px; }
.inb-left h2 { margin: 12px 0 22px; font-size: clamp(28px, 3vw, 42px); line-height: 1.05; }
.inb-left h2 .dim { color: #a3a98f; }
.inb-tabs { display: grid; gap: 6px; }
.inb-tabs button { position: relative; display: grid; gap: 3px; padding: 14px 16px 16px; border: 1px solid transparent; border-radius: 14px; background: none; text-align: left; cursor: pointer; overflow: hidden; transition: background 250ms var(--ease), border-color 250ms; }
.inb-tabs button b { font-size: 17px; font-weight: 500; color: var(--muted); transition: color 250ms; }
.inb-tabs button small { font-size: 14px; color: var(--muted); max-height: 0; opacity: 0; transition: max-height 400ms var(--ease), opacity 300ms; }
.inb-tabs button:hover b { color: var(--ink); }
.inb-tabs button.on { background: var(--canvas); border-color: var(--line-faint); }
.inb-tabs button.on b { color: var(--ink); }
.inb-tabs button.on small { max-height: 3em; opacity: 1; }
.inb-tabs .prog { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--line-faint); opacity: 0; }
.inb-tabs .prog::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--accent); border-radius: 2px; }
.inbound:not(.touched) .inb-tabs button.on .prog { opacity: 1; }
.inb-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inb-right { position: relative; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 14px; padding: 40px 30px; border-radius: 20px; border: 1px solid var(--line-faint); min-height: 420px; }
.ig { position: relative; width: min(360px, 100%); border-radius: 20px; background: var(--sheet); box-shadow: 0 20px 40px -18px rgba(52, 64, 36, .35), 0 1px 2px rgba(0, 0, 0, .05); overflow: hidden; }
.ig-top { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-faint); font-size: 14px; }
.ig-top .hav { width: 28px; height: 28px; }
.ig-top span { margin-left: auto; font: 12px var(--mono); color: var(--muted); }
.ig-body { display: grid; gap: 10px; padding: 14px; transition: opacity 260ms var(--ease), filter 260ms; }
.ig-body.swap { opacity: 0; filter: blur(3px); }
.ig-dm { display: flex; gap: 8px; align-items: flex-end; }
.ig-dm .hav { width: 26px; height: 26px; }
.ig-b { padding: 9px 12px; border-radius: 16px 16px 16px 4px; background: var(--sunk); font-size: 15px; }
.ig-photo { height: 150px; border-radius: 12px; background: linear-gradient(135deg, #dfe7c2, #f4ecc6 55%, #f3c9a0); }
.ig-photo.tall { height: 220px; background: linear-gradient(160deg, #a9c08e, #dfe7c2 50%, #f4ecc6); }
.ig-cap, .ig-comment p { margin: 0; font-size: 14px; }
.ig-comment { display: flex; gap: 8px; align-items: center; padding-top: 6px; border-top: 1px solid var(--line-faint); }
.ig-comment .hav { width: 24px; height: 24px; }
.ig-story { position: relative; }
.ig-story .ig-tag { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .85); font: 500 13px var(--sans); color: var(--accent-text); }
.ig-story p { position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(34, 37, 28, .55); color: #fff; font-size: 14px; }
.ig-reply { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ig-mini { width: 34px; height: 54px; border-radius: 6px; background: linear-gradient(160deg, #a9c08e, #f4ecc6); }
.ig-then { position: relative; width: min(360px, 100%); display: grid; gap: 4px; }
.ig-then p { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 253, 246, .88); font: 12.5px var(--mono); color: var(--ink-soft); animation: rise 420ms var(--ease) both; animation-delay: calc(var(--n) * 140ms + 120ms); }
.ig-then p + p { color: var(--success); }
.bento .feat:last-child { grid-column: span 2; }
@media (max-width: 900px) {
  .inbound { grid-template-columns: 1fr; padding: 8px; border-radius: 22px; }
  .inb-left { padding: 20px 14px 10px; }
  .inb-right { min-height: 0; padding: 26px 14px; }
  .bento .feat:last-child { grid-column: auto; }
}

/* ---- try: five-step walk */
.stepper { display: flex; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; flex-wrap: wrap; }
.stepper li { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--sunk); color: var(--muted); font-size: 13px; font-weight: 500; transition: background 300ms var(--ease), color 300ms; }
.stepper li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--line); font: normal 600 11px var(--mono); transition: background 300ms, border-color 300ms, color 300ms; }
.stepper li.now { background: var(--accent-soft); color: var(--accent-text); }
.stepper li.now i { border-color: var(--accent); color: var(--accent-text); animation: ready 1.4s var(--ease) infinite; }
.stepper li.done { color: var(--success); }
.stepper li.done i { background: var(--success); border-color: var(--success); color: #fff; font-size: 0; }
.stepper li.done i::after { content: '✓'; font-size: 12px; }
.step-panes { display: grid; gap: 12px; }
.pane.enter { animation: rise 460ms var(--ease) both; }
.pane-say { margin: 0 0 10px; color: var(--ink-soft); }
.pane.passed { display: none; }

/* ---- every inbound, fixed: one frame size for all four kinds, flat paper background */
.inb-right { background: radial-gradient(circle at 1px 1px, rgba(94, 122, 79, .2) 1px, transparent 0) 0 0 / 16px 16px, var(--sunk); height: 560px; min-height: 0; align-content: start; padding-top: 36px; }
.ig { height: 400px; display: flex; flex-direction: column; }
.ig-body { flex: 1; overflow: hidden; align-content: start; }
.ig-then { height: 76px; align-content: start; }
.ig-photo { height: 120px; }
.ig-photo.tall { height: 150px; }
.ig-dm.us { justify-content: flex-end; }
.ig-dm.us .ig-b { background: var(--mint); border-radius: 16px 16px 4px 16px; }
.ig-comment.us { border-top: 0; padding: 0 0 0 26px; }
.ig-meta { margin: 0; text-align: right; font: 11.5px var(--mono); color: var(--success); }
.ig-top .av.brand { width: 30px; }
.ig-top .av.brand .art-pick { bottom: -34px; }
.inb-tabs button small { max-height: none; opacity: .75; }
.inb-tabs button.on small { opacity: 1; }
.ig-body .hav { width: 26px; height: 26px; }
@media (max-width: 900px) { .inb-right { height: 540px; padding: 24px 12px; } }

/* ---- try: stepper with a running clock; facts pulled from settings */
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.step-head .stepper { margin: 0; }
.clock { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-items: end; column-gap: 4px; min-width: 150px; text-align: right; }
.clock b { font: 500 44px/1 var(--mono); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.clock span { font: 500 18px var(--mono); color: var(--muted); }
.clock small { grid-column: 1 / -1; font: 12px var(--mono); color: var(--accent-text); }
.fact-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fact { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 11px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--line-faint); box-shadow: var(--shadow); animation: tagIn 320ms var(--ease) both; }
.fact i { font: normal 12px var(--mono); color: var(--muted); }
.fact b { font-weight: 500; font-size: 14px; background: var(--butter); padding: 1px 6px; border-radius: 6px; }
.bub.draft mark { padding: 1px 6px; border-radius: 6px; background: var(--butter); border: 1px solid #d8c47a; color: var(--ink); }
@media (max-width: 900px) { .step-head { flex-direction: column-reverse; align-items: flex-start; } .clock { justify-items: start; text-align: left; } }

/* ---- try result: steps on the left, the clock in the free space on the right */
.try-out { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr); gap: 36px; align-items: start; }
.try-main { min-width: 0; grid-row: 1; grid-column: 1; }
.try-clock { grid-row: 1; grid-column: 2; position: sticky; top: 110px; padding: 26px; border-radius: 18px; background: var(--canvas); border: 1px solid var(--line-faint); }
.try-clock .clock { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; min-width: 0; }
.try-clock .clock b { font: 500 64px/1 var(--mono); }
.try-clock .clock span { font-size: 22px; }
.try-clock small { display: block; margin-top: 10px; font: 13px/1.45 var(--mono); color: var(--accent-text); }
.stepper { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.stepper li { flex: none; }
.stepper li i { display: inline-grid; place-items: center; line-height: 1; }
.stepper li.done i { font-size: 0; }
.stepper li.done i::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
@media (max-width: 900px) {
  .try-out { grid-template-columns: 1fr; gap: 16px; }
  .try-clock { grid-row: 1; grid-column: 1; position: static; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 16px; }
  .try-clock .over { width: 100%; margin: 0; }
  .try-clock .clock { margin: 0; }
  .try-clock .clock b { font-size: 36px; }
  .try-clock small { margin: 0; }
  .try-main { grid-row: 2; }
}

/* ---- menu button: lines morph into a cross, the button answers the tap */
.menu-btn { transition: background 200ms var(--ease), border-color 200ms, transform 150ms var(--ease); }
.menu-btn:active { transform: scale(.92); }
.menu-btn i { transition: transform 320ms cubic-bezier(.34, 1.36, .64, 1), opacity 200ms; }
.head.open .menu-btn { background: var(--ink); border-color: var(--ink); }
.head.open .menu-btn i { background: #fff; }
@media (prefers-reduced-motion: reduce) { .links, .links a, .menu-btn, .menu-btn i { transition: none !important; } }

/* ---- one vertical rhythm for every section (audit 2026-09-24) */
:root { --sec: clamp(72px, 9vw, 128px); }
main > section:not(.hero) { padding-block: calc(var(--sec) / 2) !important; }
main > section.hero + section { padding-top: 0 !important; }
.hero { padding-bottom: 48px !important; }
.ig-meta { font-size: 12px; }
/* touch screens: nothing tappable under 44px */
@media (pointer: coarse) {
  .try-ideas button, .layout-pick button, .seg button, .via-seg button, .mode-seg button, .tui-tabs button, .chip, .pill, .mini, .pp-btn.corner, .d-btns button { min-height: 44px; }
  .pp-btn.corner { width: 44px; height: 44px; }
  .foot-col a { padding: 10px 0; }
  .badge { min-height: 44px; }
}
.hero .tagline { margin: 22px 0 0; font: 500 15px var(--mono); letter-spacing: .04em; color: var(--accent-text); }
.hero h1 { margin-top: 12px; font-size: clamp(38px, 5.4vw, 72px); text-wrap: balance; }
.hero h1 .dim { color: #a3a98f; }
.hero .sub { max-width: 620px; text-wrap: pretty; }

/* ---- hero demo on phones: one fixed card, a rolling status line, pills */
.ticker { display: none; }
@media (max-width: 900px) {
  .panel .stage { display: none !important; }
  .panel { padding: 64px 12px 18px; min-height: 0; }
  .ticker { position: relative; z-index: 2; display: grid; gap: 12px; width: 100%; padding: 16px; border-radius: 16px; background: var(--sheet); box-shadow: var(--shadow); }
  .tk-head { display: flex; align-items: center; gap: 10px; }
  .tk-head b { display: block; font-size: 15px; font-weight: 500; }
  .tk-head small { font-size: 13px; color: var(--muted); }
  .tk-clock { margin-left: auto; font: 13px var(--mono); color: var(--muted); }
  .tk-clock b { display: inline; font: 500 22px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
  .tk-q { justify-self: start; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--sunk); font-size: 15px; }
  .tk-slot { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line-faint); overflow: hidden; }
  .tk-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: ready 1.4s var(--ease) infinite; }
  .tk-dot.done { background: var(--success); box-shadow: 0 0 0 4px var(--mint); animation: none; }
  .tk-roll { position: relative; flex: 1; height: 22px; overflow: hidden; }
  .tk-line { position: absolute; inset: 0; font: 13.5px/22px var(--mono); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 420ms var(--ease), opacity 420ms var(--ease), filter 420ms; }
  .tk-line.in { transform: translateY(100%); opacity: 0; filter: blur(2px); }
  .tk-line.out { transform: translateY(-100%); opacity: 0; filter: blur(2px); }
  .tk-pills { display: flex; gap: 6px; height: 32px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent); }
  .tk-pills::-webkit-scrollbar { display: none; }
  .tk-pill { flex: none; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); font: 12px var(--mono); color: var(--accent-text); opacity: 0; transform: translateX(14px) scale(.96); transition: opacity 360ms var(--ease), transform 420ms var(--ease); }
  .tk-pill.on { opacity: 1; transform: none; }
  .tk-pill:last-child:nth-child(n+7) { background: var(--butter); border-color: #d8c47a; color: var(--ink); }
  .tk-draft { padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line-strong); opacity: .35; transition: opacity 400ms var(--ease), border-color 400ms, background 400ms; }
  .ticker.is-drafted .tk-draft { opacity: 1; }
  .ticker.is-sent .tk-draft { border-style: solid; border-color: var(--mint-line, #d2dfc6); background: var(--mint); }
  .tk-draft .over { color: var(--accent-text); }
  .tk-draft p { display: grid; margin: 6px 0 0; font-size: 16px; line-height: 1.4; }
  .tk-draft p > * { grid-area: 1 / 1; }
  .tk-draft .ghost { visibility: hidden; }
  .tk-by { height: 18px; margin-top: 6px; font: 12px var(--mono); color: var(--success); }
}

/* ---- phone: the page never pans sideways; ticker pills light up in place */
html, body { overflow-x: clip; }
body { overscroll-behavior-x: none; }
@media (max-width: 900px) {
  .tk-pills { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; height: auto; overflow: visible; mask-image: none; }
  .tk-pill { height: 28px; padding: 0 9px; font-size: 12px; opacity: 1; transform: none; color: rgba(180, 74, 28, .45); border-color: rgba(238, 165, 124, .45);
    background: linear-gradient(90deg, var(--mint) 0 50%, var(--accent-soft) 50% 100%) 100% 0 / 200% 100% no-repeat, transparent;
    background-color: transparent; transition: color 380ms var(--ease), border-color 380ms var(--ease), background-position 700ms var(--ease), box-shadow 380ms var(--ease); }
  .tk-pill:not(.now):not(.done) { background-image: none; }
  .tk-pill.now { color: var(--accent-text); border-color: var(--accent); background-position: 100% 0; box-shadow: 0 0 0 3px var(--accent-soft); }
  .tk-pill.done { color: var(--mint-ink); border-color: #b9cfaa; background-position: 0 0; box-shadow: none; }
  .tk-pill.fact:not(.now):not(.done) { color: rgba(110, 96, 40, .5); border-color: rgba(216, 196, 122, .5); }
  .tk-pill:last-child:nth-child(n+7) { background: none; }
}

/* ---- every inbound on phones: icon switches on top, the chosen text in the middle, the example below */
.ic-k { display: none; }
.inb-detail { display: none; }
@media (max-width: 900px) {
  .inb-left { padding: 20px 12px 6px; }
  .inb-left h2 { margin-bottom: 16px; }
  .inb-tabs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .inb-tabs button { justify-items: center; gap: 6px; padding: 10px 4px 12px; border: 1px solid var(--line-faint); background: var(--canvas); text-align: center; }
  .inb-tabs button small { display: none; }
  .inb-tabs button b { font-size: 12px; line-height: 1.2; }
  .inb-tabs button.on { background: var(--sheet); border-color: var(--accent-line); box-shadow: var(--shadow); }
  .ic-k { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sunk); color: var(--muted); transition: background 250ms var(--ease), color 250ms; }
  .ic-k svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .inb-tabs button.on .ic-k { background: var(--accent-soft); color: var(--accent-text); }
  .inb-tabs .prog { left: 10px; right: 10px; bottom: 4px; }
  .inb-detail { display: grid; gap: 4px; height: 76px; align-content: start; margin-top: 14px; padding: 0 4px; }
  .inb-detail b { font-size: 17px; font-weight: 500; }
  .inb-detail p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-2); }
  .inb-right { height: 520px; }
}
@media (pointer: coarse) { .av .art-pick { display: none; } }

/* feature cards (2026-09-24): a modern SaaS bento — an etched scene fills the
   card, the live control floats over its lower half, words sit inside the card */
.bento { gap: 20px; }
.bento .feat { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-faint); background: var(--sheet); box-shadow: 0 1px 0 rgba(40, 44, 30, .04), 0 18px 40px -24px rgba(40, 44, 30, .25); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.bento .feat:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(40, 44, 30, .04), 0 26px 50px -24px rgba(40, 44, 30, .32); }
.feat-art, .feat-art.night, .feat-art.night.day { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: 18px; border: 0; border-radius: 0; background: #f6f1df; overflow: hidden; gap: 0; }
.feat-art > .scene { position: absolute; inset: 0; margin: 0; }
.feat-art > .scene > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: filter 600ms var(--ease), transform 900ms var(--ease); }
.bento .feat:hover .scene > img { transform: scale(1.03); }
.feat-art > .scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(246, 241, 223, 0) 35%, rgba(246, 241, 223, .55) 70%, rgba(246, 241, 223, .9)); }
.feat-art > .scene .art-pick { top: 12px; right: 12px; bottom: auto; left: auto; transform: none; z-index: 3; }
.feat-art.night .scene > img { object-position: center 8%; }
.feat-art.night:not(.day) .scene > img { filter: brightness(.9) saturate(.85) sepia(.12); }
.feat-art.night:not(.day) > .scene::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(58, 72, 96, .22), rgba(58, 72, 96, 0) 60%); }
.feat-ui { position: relative; z-index: 2; display: grid; gap: 10px; justify-items: start; }
.feat-ui > .mini-card, .feat-ui > .chart, .feat-ui > .range-wrap, .feat-ui > .cmp { width: 100%; }
.feat-ui .mini-card, .feat-ui .seg, .feat-ui .cmp .bad, .feat-ui .mini { box-shadow: 0 10px 28px -12px rgba(40, 44, 30, .35); }
.feat-ui .chart { padding: 12px 14px 10px; border-radius: 14px; background: rgba(255, 253, 246, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 28px -12px rgba(40, 44, 30, .35); }
.feat-ui .bars { height: 110px; }
.feat-ui .range-wrap { padding: 4px 10px 2px; border-radius: 12px; background: rgba(255, 253, 246, .85); }
.feat-txt { padding: 18px 22px 22px; }
.feat-txt h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.feat-txt p { margin: 0; font-size: 15px; color: var(--text-2); }
.bento .feat:last-child .feat-art { min-height: 380px; }
.bento .feat:last-child .feat-ui { justify-items: end; }
.bento .feat:last-child .feat-ui > .chart { width: min(460px, 100%); }
@media (max-width: 900px) {
  .feat-art, .feat-art.night, .feat-art.night.day { min-height: 320px; padding: 14px; }
  .feat-txt { padding: 16px 18px 20px; }
}
/* ---- the team's side: the Telegram group, drawn like Telegram */
.tg-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; margin-top: 44px; }
.tg-points { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: p; }
.tg-points li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; counter-increment: p; }
.tg-points li::before { content: counter(p, decimal-leading-zero); grid-row: span 2; font: 500 13px/28px var(--mono); color: var(--accent-text); }
.tg-points b { font-size: 19px; letter-spacing: -.01em; }
.tg-points span { margin-top: 4px; color: var(--text-2); font-size: 15.5px; }
.tg-alt { max-width: 640px; margin: 28px auto 0; text-align: center; color: var(--text-2); font-size: 15px; }
.tg { --tg-link: #3a7bd5; --tg-q: #3a7bd5; overflow: hidden; border-radius: 24px; border: 1px solid var(--line-faint); background: #fff; box-shadow: var(--shadow); font-family: -apple-system, 'SF Pro Text', 'Onest', system-ui, sans-serif; }
.tg-head { display: grid; grid-template-columns: 28px 1fr 38px; align-items: center; gap: 8px; padding: 10px 14px; background: #fbfbfa; border-bottom: 1px solid #ecece8; }
.tg-back { font-size: 30px; line-height: 1; color: var(--tg-link); }
.tg-title { display: grid; justify-items: center; text-align: center; min-width: 0; }
.tg-title b { font-size: 15.5px; font-weight: 600; color: #111; }
.tg-title small { overflow: hidden; max-width: 100%; color: #8a8f98; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.tg-ava { display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 600; }
.tg-ava.group { width: 36px; height: 36px; background: linear-gradient(160deg, #e8622a, #c9521f); font-size: 15px; }
.tg-ava.bot { width: 30px; height: 30px; align-self: flex-end; background: linear-gradient(160deg, #6f8f5f, #4e6d43); font: 600 14px var(--sans); }
.tg-topics { display: flex; gap: 2px; padding: 0 8px; background: #fbfbfa; border-bottom: 1px solid #ecece8; }
.tg-topics button { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; min-height: 42px; padding: 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; color: #8a8f98; font-weight: 500; font-size: 13.5px; font-family: inherit; cursor: pointer; transition: color 200ms, border-color 200ms; }
.tg-topics button.on { color: var(--tg-link); border-bottom-color: var(--tg-link); }
.tg-topics i { font-style: normal; }
.tg-topics em { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #a8b0bb; color: #fff; font-weight: 600; font-size: 11px; line-height: 18px; font-family: inherit; font-style: normal; }
.tg-topics button.on em { background: var(--tg-link); }
.tg-body { height: 560px; padding: 10px 10px 8px; overflow: hidden; transition: opacity 160ms;
  background: radial-gradient(circle at 1px 1px, rgba(78, 109, 67, .16) 1px, transparent 0) 0 0 / 16px 16px, linear-gradient(160deg, #dfe7c2, #cfdcb2 60%, #e6e3bf); }
.tg-body.swap { opacity: 0; }
.tg-feed { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; }
.tg-day { align-self: center; margin: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: rgba(60, 72, 40, .28); color: #fff; font-size: 12.5px; font-weight: 500; }
.tg-row { display: flex; align-items: flex-end; gap: 6px; max-width: 92%; animation: rise 360ms var(--ease) both; }
.tg-row.me { align-self: flex-end; }
.tg-stack { display: grid; gap: 4px; min-width: 0; }
.tg-bub { position: relative; padding: 6px 10px 18px; border-radius: 16px 16px 16px 4px; background: #fff; color: #111; font-size: 14.5px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.tg-bub.me { padding-bottom: 18px; border-radius: 16px 16px 4px 16px; background: #e1f7cb; }
.tg-bub p { margin: 4px 0 0; }
.tg-bub b { font-weight: 600; }
.tg-name { display: block; margin-bottom: 2px; color: #4e8a3a; font-size: 13.5px; font-weight: 600; }
.tg-bub blockquote { margin: 5px 0 2px; padding: 4px 8px 4px 10px; border-left: 3px solid var(--tg-q); border-radius: 4px; background: rgba(58, 123, 213, .08); }
.tg-bub.alert blockquote { --tg-q: #e8622a; background: rgba(232, 98, 42, .08); }
.tg-time { position: absolute; right: 9px; bottom: 4px; color: #9aa19a; font-size: 11.5px; }
.tg-bub.me .tg-time { color: #5fa04a; }
.tg-reply { display: block; margin-bottom: 3px; padding: 2px 8px; border-left: 3px solid #4e8a3a; border-radius: 4px; background: rgba(78, 138, 58, .1); color: #4e8a3a; font-size: 13px; }
.tg-end { font-weight: 500; }
.tg-kb { display: grid; gap: 4px; }
.tg-kb-row { display: flex; gap: 4px; }
.tg-kbtn { position: relative; flex: 1; min-height: 38px; padding: 0 8px; border: 0; border-radius: 10px; background: rgba(60, 72, 40, .34); color: #fff; font-weight: 500; font-size: 13.5px; font-family: inherit; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 150ms, transform 120ms; display: flex; align-items: center; justify-content: center; }
.tg-kbtn:hover { background: rgba(60, 72, 40, .48); }
.tg-kbtn:active { transform: scale(.97); }
.tg-kbtn.busy { opacity: .6; }
.tg-kbtn.link i { position: absolute; top: 3px; right: 6px; font-style: normal; font-size: 10px; }
.tg-bub.media { overflow: hidden; padding: 0; }
.tg-photo { padding: 12px 12px 8px; background: #fffdf6; border-bottom: 1px solid #ecece8; font-family: var(--sans); }
.tg-photo-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink); }
.tg-photo-head span { font: 500 12px var(--mono); color: var(--accent-text); }
.tg-photo-bars { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin: 8px 0 4px; }
.tg-photo-bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: #a9c08e; transform-origin: bottom; animation: grow 600ms var(--ease) both; animation-delay: calc(var(--i) * 12ms); }
.tg-photo-bars i:nth-child(n+23):nth-child(-n+24) { background: var(--accent); }
.tg-photo-foot { display: flex; justify-content: space-between; font: 10.5px var(--mono); color: var(--muted); }
.tg-cap { position: relative; padding: 6px 10px 18px; }
@keyframes grow { from { transform: scaleY(.1); } }
.tg-compose { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; padding: 8px 12px; background: #fbfbfa; border-top: 1px solid #ecece8; color: #8a8f98; font-size: 18px; }
.tg-input { padding: 7px 14px; border: 1px solid #e3e3df; border-radius: 18px; background: #fff; font-size: 14px; }
@media (max-width: 900px) {
  .tg-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .tg { order: -1; border-radius: 20px; }
  .tg-topics { padding: 0 2px; }
  .tg-topics button { flex-direction: column; gap: 1px; min-height: 52px; padding: 4px 2px; font-size: 11.5px; }
  .tg-topics i { font-size: 17px; line-height: 1; }
  .tg-topics em { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
  .tg-body { height: 640px; padding: 8px 6px 6px; }
  .tg-row { max-width: 97%; }
  .tg-bub { font-size: 14px; }
  .tg-kbtn { font-size: 12.5px; min-height: 36px; }
  .tg-points { gap: 16px; }
  .tg-points b { font-size: 17px; }
}

/* hero chat: typing indicator while the left card works */
.chat .typing { display: flex; align-items: center; gap: 10px; justify-self: start; }
.chat .typing.out { justify-self: end; }
.chat .typing .dots { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--sunk); }
.chat .typing.out .dots { border-radius: 18px 18px 6px 18px; background: var(--mint); }
.chat .typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .35; animation: typing 1.2s ease-in-out infinite; }
.chat .typing .dots i:nth-child(2) { animation-delay: .15s; }
.chat .typing .dots i:nth-child(3) { animation-delay: .3s; }
.chat .typing small { font: 12px var(--mono); color: var(--muted); }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chat .typing .dots i { animation: none; opacity: .7; } }

/* ---- hero «hands»: postman and customer reach for one letter */
.hands { --near: 0; position: relative; width: 100vw; height: clamp(300px, 34vw, 470px); margin: 36px calc(50% - 50vw) 0; }
.hand { position: absolute; bottom: 4%; width: min(46vw, 700px); cursor: crosshair; touch-action: pan-y; transition: transform 1.2s var(--ease); }
.hand canvas { display: block; width: 100%; height: auto; }
.hand.left { left: -3vw; animation: reachL 7s ease-in-out infinite alternate; }
.hand.right { right: -3vw; bottom: 10%; animation: reachR 7s ease-in-out infinite alternate; }
@keyframes reachL { from { transform: translateX(calc(var(--near) * 60px)); } to { transform: translateX(calc(18px + var(--near) * 60px)) translateY(-4px); } }
@keyframes reachR { from { transform: translateX(calc(var(--near) * -60px)); } to { transform: translateX(calc(-18px + var(--near) * -60px)) translateY(3px); } }
.env { position: absolute; left: 50%; top: 42%; z-index: 3; display: grid; justify-items: center; gap: 10px; width: clamp(130px, 13vw, 200px); padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); perspective: 800px; }
.env-in { position: relative; display: block; width: 100%; aspect-ratio: 640 / 600; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; animation: floaty 5s ease-in-out infinite; filter: drop-shadow(0 22px 22px rgba(60, 60, 30, .18)); transition: filter 300ms; }
.env:hover .env-in { filter: drop-shadow(0 28px 26px rgba(60, 60, 30, .24)); }
.env-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.env-open { opacity: 0; transform: scale(.94); }
@keyframes floaty { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -10px; rotate: 2deg; } }
.env-hint { padding: 5px 12px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); font: 500 12.5px var(--mono); color: var(--accent-text); transition: opacity 300ms; }
.env:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 12px; }
.ask { position: absolute; right: 13vw; top: 6%; z-index: 2; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--sheet); box-shadow: var(--shadow); font-size: 15px; text-align: left; }
.ask small { display: block; margin-top: 2px; font: 11.5px var(--mono); color: var(--muted); }
.letter { position: absolute; left: 50%; top: 42%; z-index: 4; display: grid; gap: 8px; justify-items: start; width: min(340px, 86vw); padding: 16px 18px; border-radius: 16px; background: var(--sheet); box-shadow: 0 24px 60px -20px rgba(40, 44, 30, .4); text-align: left; opacity: 0; pointer-events: none; transform: translate(-50%, -30%) scale(.6); transition: opacity 420ms var(--ease), transform 620ms cubic-bezier(.2, 1.2, .3, 1); }
.letter p { margin: 0; font-size: 17px; line-height: 1.35; }
.letter small { font: 12px var(--mono); color: var(--success); }
.letter .btn { min-height: 40px; }
.letter .btn.busy { opacity: .7; }
.sent-note { position: absolute; left: 50%; bottom: 6%; z-index: 4; display: flex; gap: 10px; align-items: center; margin: 0; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font: 12.5px var(--mono); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 300ms, transform 300ms; }
.sent-note button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--sheet); color: var(--ink); font: 500 12.5px var(--sans); cursor: pointer; }
.hands[data-state='open'] .env-closed, .hands[data-state='sent'] .env-closed { opacity: 0; transform: scale(1.04); }
.hands[data-state='open'] .env-open { opacity: 1; transform: none; }
.hands:not([data-state='closed']) .env-hint { opacity: 0; }
.hands[data-state='open'] .env { cursor: default; }
.hands[data-state='open'] .letter { opacity: 1; pointer-events: auto; transform: translate(-50%, -112%) scale(1); }
.hands[data-state='sent'] .letter { opacity: 0; transform: translate(calc(-50% + 30vw), -150%) scale(.3) rotate(8deg); transition-duration: 500ms, 800ms; }
.hands[data-state='sent'] .env-open { opacity: .0; }
.hands[data-state='sent'] .sent-note { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.hands[data-state='sent'] .ask { box-shadow: 0 0 0 2px var(--success), var(--shadow); }
@media (max-width: 900px) {
  .hands { height: 300px; margin-top: 24px; }
  .hand { width: 64vw; }
  .hand.left { left: -14vw; bottom: 6%; }
  .hand.right { right: -14vw; bottom: 26%; }
  .env { top: 46%; width: 118px; }
  .ask { right: 4vw; top: 0; font-size: 13.5px; padding: 8px 12px; }
  .letter { top: 50%; }
  .hands[data-state='open'] .letter { transform: translate(-50%, -80%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hand, .env-in { animation: none; } }

/* ---- pricing: two separate cards; Pro carries a slow meadow-gradient rim and a soft glow
   (after reactbits Pro's «Ultimate» card, redrawn in our palette) */
.plans { gap: 22px; overflow: visible; border: 0; border-radius: 0; isolation: isolate; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: 22px; }
.plan.paid { overflow: visible; border: 1.5px solid transparent; transform: translateY(-10px);
  --rim: linear-gradient(120deg, #e8622a, #f6d27a, #a9c08e, #e8f0dc, #f6d27a, #e8622a);
  background: linear-gradient(var(--sheet), var(--sheet)) padding-box, var(--rim) border-box; background-size: 100% 100%, 300% 300%; animation: rimFlow 9s linear infinite; }
.plan.paid::before { content: ''; position: absolute; inset: -14px; z-index: -1; border-radius: 34px; background: var(--rim); background-size: 300% 300%; filter: blur(34px); opacity: .42; animation: rimFlow 9s linear infinite; pointer-events: none; }
.plan.paid > canvas.art { border-radius: 20px; }
@keyframes rimFlow { 0% { background-position: 0% 50%, 0% 50%; } 50% { background-position: 0% 50%, 100% 50%; } 100% { background-position: 0% 50%, 0% 50%; } }
.plan.paid::before { animation-name: glowFlow; }
@keyframes glowFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (max-width: 900px) { .plan.paid { transform: none; } }
@media (prefers-reduced-motion: reduce) { .plan.paid, .plan.paid::before { animation: none; } }
.plan.paid > canvas.art { opacity: .5; -webkit-mask: radial-gradient(120% 90% at 100% 100%, #000 0%, transparent 62%); mask: radial-gradient(120% 90% at 100% 100%, #000 0%, transparent 62%); }
.plan.paid .plan-body { background: none; backdrop-filter: none; }
.plan.paid::before { opacity: .55; }
.plan.paid { border-width: 2px; --rim: linear-gradient(120deg, #e8622a, #f0b44c, #7f9e68, #4e6d43, #f0b44c, #e8622a); }
.plan.paid::before { opacity: .38; filter: blur(28px); }
.plan.paid { transform: none; top: -10px; }
@media (max-width: 900px) { .plan.paid { top: 0; } }

/* hero «hands» in WebGL (hero3d.js): one canvas, DOM stays for clicks and text */
.hands { height: clamp(380px, 38vw, 540px); }
.gl-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hands.gl .hand { display: none; }
.hands.gl .env { left: var(--ex); top: var(--ey); width: var(--ew); height: var(--eh); display: block; animation: none; }
.hands.gl .env-in { visibility: hidden; position: absolute; inset: 0; animation: none; }
.hands.gl .env-hint { position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translateX(-50%); white-space: nowrap; }
.hands.gl .ask { left: var(--ax); top: var(--ay); right: auto; }
.hands.gl .letter { left: var(--ex); top: var(--ey); }
.hands.gl[data-state='open'] .letter { transform: translate(-50%, calc(-100% - var(--eh) * .35)) scale(1); }
.hands.gl .sent-note { top: calc(var(--ey) + var(--eh) * .5 + 24px); bottom: auto; }
@media (max-width: 900px) { .hands { height: 380px; } .hands.gl[data-state='open'] .letter { transform: translate(-50%, calc(-100% - var(--eh) * .2)) scale(1); } }

/* ---- «thinking»: matrix-dot loader (matrix.js) */
.mx { --mx-dot: 3px; --mx-base: #dcd8c0; --mx-active: var(--accent); display: inline-grid; grid-template-columns: repeat(4, var(--mx-dot)); grid-auto-rows: var(--mx-dot); gap: 2px; vertical-align: middle; }
.mx i { display: block; border-radius: 1px; background: var(--mx-base); animation: mxPulse 1200ms ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1ms); }
.mx i.gap { visibility: hidden; animation: none; }
.mx i.still { background: var(--mx-active); opacity: .35; animation: none; }
@keyframes mxPulse { 0%, 45%, 100% { background-color: var(--mx-base); } 15% { background-color: var(--mx-active); } }
@media (prefers-reduced-motion: reduce) { .mx i { animation: none; } }
.chat .typing .mx-bub { display: inline-flex; align-items: center; padding: 11px 13px; border-radius: 18px 18px 18px 6px; background: var(--sunk); }
.chat .typing.out .mx-bub { border-radius: 18px 18px 6px 18px; background: var(--mint); }
.chat .typing.out .mx { --mx-active: var(--success); --mx-base: #cfdcbf; }
.tk-dot.mx { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; animation: none; }
.tk-dot.mx.done i { animation: none; background: var(--success); }
.tg-typing .mx { margin-right: 6px; }
.stepper li i .mx { display: none; --mx-dot: 2px; gap: 1.5px; }
.stepper li.now i b { display: none; }
.stepper li.now i .mx { display: inline-grid; --mx-active: #fff; --mx-base: rgba(255, 255, 255, .35); }

/* ---- numbers strip under the hero, rolled by reel.js */
.reel-col { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); }
.reel-strip { display: flex; flex-direction: column; will-change: transform; }
.reel-d { display: block; height: 1em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.reel-ch { display: inline-block; line-height: 1; vertical-align: top; }
.facts { padding-block: 8px 40px !important; }
.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); }
.facts-row > div { padding: 26px 24px; border-left: 1px solid var(--line-faint); }
.facts-row > div:first-child { border-left: 0; }
.facts-row dt { display: flex; align-items: baseline; gap: 4px; font: 500 clamp(40px, 4.6vw, 60px)/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.facts-row dt small { font-size: .42em; letter-spacing: 0; color: var(--text-2); }
.facts-row dd { margin: 10px 0 0; max-width: 240px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
@media (max-width: 900px) {
  .facts-row { grid-template-columns: 1fr 1fr; }
  .facts-row > div { padding: 20px 16px; }
  .facts-row > div:nth-child(3) { border-left: 0; }
  .facts-row > div:nth-child(n+3) { border-top: 1px solid var(--line-faint); }
}

/* ---- the letter's journey (hero3d.js): overlay canvas, dimmed page, action bar, reply bubble */
/* at rest the overlay is a page element over the hero, so it scrolls with the page on the compositor; hero3d.js
   sets its top and size. For the journey it is fixed to the viewport (.view) and above the dimmed page (.front). */
.gl-overlay { position: absolute; left: 0; top: 0; z-index: 15; display: block; pointer-events: none; }
.gl-overlay.view { position: fixed; }
.gl-overlay.front { z-index: 62; }
.x-ui .x-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(247, 245, 232, .74); -webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9); opacity: 0; pointer-events: none; transition: opacity 450ms var(--ease); }
.x-ui.on .x-backdrop { opacity: 1; pointer-events: auto; cursor: zoom-out; }
/* the room dims while the seal gathers its light, so the light can be seen, and comes back as the letter rises */
.x-ui .x-backdrop { transition: opacity 450ms var(--ease), background-color 700ms var(--ease); }
.x-ui.dim .x-backdrop { background-color: rgba(28, 25, 18, .72); }
.x-bar { position: fixed; left: 50%; top: 70%; z-index: 64; display: grid; justify-items: center; gap: 10px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.x-ui.writing .x-bar, .x-ui.decide .x-bar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.x-writing { display: none; align-items: center; gap: 10px; margin: 0; padding: 7px 8px 7px 14px; border-radius: 999px; background: var(--sheet); box-shadow: var(--shadow); font: 13px var(--mono); color: var(--ink-soft); white-space: nowrap; }
.x-writing button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--sunk); color: var(--ink); font: 500 12.5px var(--sans); cursor: pointer; }
.x-ui.writing .x-writing { display: inline-flex; }
.x-btns { display: none; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255, 253, 246, .92); box-shadow: 0 18px 40px -18px rgba(40, 44, 30, .45); }
.x-ui.decide .x-btns { display: inline-flex; }
.x-btns .btn { min-height: 44px; }
.x-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); font-size: 16px; cursor: pointer; }
.x-close:hover { background: var(--sunk); }
.x-lock, .x-lock body { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hands.gl .letter, .hands.gl .sent-note { display: none; }
.hands.gl:not([data-state='closed']) .env { pointer-events: none; }
.hands.gl .env-hint { opacity: 0; transition: opacity 400ms var(--ease); }
.hands.gl.ready[data-state='closed']:not(.replied) .env-hint { opacity: 1; }
.hands.gl .ask { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 420ms var(--ease), transform 520ms cubic-bezier(.2, 1.3, .4, 1); }
.hands.gl.asked .ask { opacity: 1; transform: none; }
.hands .reply { position: absolute; left: var(--ax); top: calc(var(--ay) + 70px); z-index: 2; max-width: 250px; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--mint); box-shadow: var(--shadow); font-size: 14px; line-height: 1.4; text-align: left; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 420ms var(--ease), transform 520ms cubic-bezier(.2, 1.3, .4, 1); pointer-events: none; }
.hands .reply small { display: block; margin-top: 4px; font: 11.5px var(--mono); color: var(--success); }
.hands .reply.in { opacity: 1; transform: none; }
@media (max-width: 900px) { .hands .reply { max-width: 190px; font-size: 13px; top: calc(var(--ay) + 62px); } .x-btns .btn { padding-inline: 14px; font-size: 14px; } }
.x-bar { width: max-content; max-width: calc(100vw - 24px); }
.x-btns .btn { white-space: nowrap; }
@media (max-width: 480px) { .x-lg { display: none; } .x-btns { gap: 4px; } .x-btns .btn { padding-inline: 16px; } }

/* ---- beta: the pencil sketch while WebGL loads (hero-sketch.js) */
.hands .sk { position: absolute; z-index: 1; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 700ms var(--ease) 150ms; }
.hands.sketching .sk { opacity: 1; }
.hands .sk-env3d { left: 0; top: 0; z-index: 1; }                   /* the envelope's own 3D model, in pencil (hero-sketch.js) */
.hands .sk path { fill: none; stroke: #676b58; stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.hands .sk path.s { stroke-width: .9px; opacity: .55; }
.hands.sketching .sk path { animation: skDraw 1100ms cubic-bezier(.45, .05, .25, 1) forwards; animation-delay: var(--d, 0ms); }   /* from the arm's edge to the fingertip */
@keyframes skDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hands .sk path { animation: none !important; stroke-dashoffset: 0; } }
.hands.nogl .sk, .hands.inked .sk-hand, .hands.materialized .sk-env3d { opacity: 0; transition-duration: 380ms; transition-delay: 0ms; }
.hands.seen .sk path { animation-duration: 380ms; animation-delay: 0ms; }
.hands .gl-stage { z-index: 2; }                       /* the printed hands cover the pencil lines as they arrive */
/* the DOM version only when there is no WebGL */
.hands:not(.nogl) .hand, .hands:not(.nogl) .env-in { visibility: hidden; }
.hands:not(.nogl):not(.ready) .env-hint { opacity: 0; }
.hands.gl.waiting .env-hint { opacity: 1; }                  /* tapped while the letter is still loading */

/* ---- beta: on phones the scene is the first screen, the copy follows it */
@media (max-width: 700px) {
  .hero { padding-top: 28px; }
  .hero .badge { order: 0; }
  .hero .tagline { order: 1; margin-top: 16px; }
  .hero h1 { order: 2; margin-top: 8px; font-size: 34px; }
  .hero .hands { order: 3; height: 420px; margin-top: 4px; }
  .hero .sub { order: 4; margin-top: 4px; font-size: 16px; }
  .hero .row { order: 5; }
  .hands .reply { max-width: 200px; }
  .hands .reply .rt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* the credit line stays outside the clamp */
}

/* ---- beta: the action dock under the open letter — our buttons, not chat buttons */
.x-btns { display: none !important; }
.x-dock { display: none; align-items: center; gap: 10px; padding: 8px; border-radius: 999px; background: rgba(255, 253, 246, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 50px -20px rgba(40, 44, 30, .5); }
.x-ui.decide .x-dock { display: inline-flex; animation: dockIn 420ms cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes dockIn { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.x-approve, .x-rewrite { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; border: 0; border-radius: 999px; font: 600 15px var(--sans); cursor: pointer; transition: transform 220ms cubic-bezier(.2, 1.4, .4, 1), box-shadow 220ms, background 200ms; white-space: nowrap; }
.x-approve { padding: 0 22px 0 8px; overflow: hidden; background: linear-gradient(180deg, #2f3328, #1f2219); color: #fbf6e6; box-shadow: 0 10px 24px -10px rgba(20, 22, 14, .8), 0 1px 0 rgba(255, 255, 255, .12) inset; }
.x-approve::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 210, .28) 48%, transparent 62%); transform: translateX(-120%); animation: shine 3.4s ease-in-out 1.2s infinite; }
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.x-seal { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0874f, #cf4f1c 55%, #9e3614 100%); box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 0 3px rgba(207, 79, 28, .22); transition: transform 420ms cubic-bezier(.2, 1.5, .4, 1); }
.x-seal::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(255, 220, 190, .45); }
.x-seal::after { content: ''; position: absolute; left: 13px; top: 10px; width: 8px; height: 14px; border: solid #ffe9d6; border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.x-approve:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(20, 22, 14, .85), 0 1px 0 rgba(255, 255, 255, .12) inset; }
.x-approve:hover .x-seal { transform: rotate(-16deg) scale(1.06); }
.x-approve:active { transform: translateY(0) scale(.97); }
.x-rewrite { padding: 0 20px 0 16px; background: #fffdf6; color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset, 0 8px 18px -12px rgba(40, 44, 30, .5); }
.x-rewrite svg { width: 20px; height: 20px; transition: transform 300ms; }
.x-rewrite:hover { transform: translateY(-2px); background: #fff; }
.x-rewrite:hover svg { animation: pen 700ms ease-in-out; }
@keyframes pen { 25% { transform: rotate(-12deg) translateX(-2px); } 50% { transform: rotate(6deg) translateX(2px); } 75% { transform: rotate(-6deg) translateX(-1px); } }
.x-rewrite:active { transform: scale(.97); }
.x-approve:focus-visible, .x-rewrite:focus-visible, .x-shut:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.x-shut { position: fixed; z-index: 64; left: calc(100vw - 40px); top: calc(40px + env(safe-area-inset-top, 0px)); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fffdf6; color: var(--ink-soft); box-shadow: 0 6px 16px -8px rgba(40, 44, 30, .6); cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.8); transition: opacity 240ms, transform 320ms cubic-bezier(.2, 1.4, .4, 1); }
.x-shut svg { width: 16px; height: 16px; transition: transform 300ms; }
.x-shut:hover svg { transform: rotate(90deg); }
.x-ui.on .x-shut { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }   /* it can be put back at any moment */
.x-ui.on .x-shut { transition: opacity 240ms, transform 320ms cubic-bezier(.2, 1.4, .4, 1), left 420ms var(--ease), top 420ms var(--ease); }
.x-writing { background: rgba(255, 253, 246, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 480px) { .x-approve { font-size: 14px; padding-right: 16px; } .x-rewrite { font-size: 14px; padding: 0 14px 0 12px; } .x-dock { gap: 6px; padding: 6px; } }
/* the question pops in with the scene (it stays put in the DOM version) */
.hands:not(.asked):not(.nogl) .ask { opacity: 0; transform: translateY(10px) scale(.96); }

/* ---- the desk: a sketched desk under the whole hero, lit by a window with plants (the light moves) */
.hero { position: relative; }
.hero::before { content: ''; position: absolute; inset: -10px calc(50% - 50vw) 0; z-index: -1; pointer-events: none;
  background: url('art/hero-desk.webp') center 42% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 80%, transparent 100%); }
/* one group multiplied over the desk, the hands, the envelope and the words: two leaf shadows drifting at
   different speeds (so the light shimmers), and a warm cast where the sun falls */
.hero-light { position: absolute; inset: -10px calc(50% - 50vw) 0; z-index: 16; overflow: hidden; pointer-events: none; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%); }
.hero-light i { position: absolute; inset: -14% -10%; background: url('art/hero-light.webp') center / cover no-repeat; opacity: .46; transform-origin: 70% 10%; animation: leafSway 16s ease-in-out infinite alternate; will-change: transform; }
.hero-light i + i { opacity: .2; filter: blur(3px); transform-origin: 20% 0; animation: leafSway2 9.5s ease-in-out infinite alternate; }   /* a farther plant: mirrored, softer */
.hero-light b { position: absolute; inset: 0; background: radial-gradient(60% 55% at 62% 38%, rgba(255, 226, 180, .35), rgba(255, 226, 180, 0) 70%); }
@keyframes leafSway { from { transform: rotate(-1.2deg) translate(-1.5%, -.8%) scale(1.02); } to { transform: rotate(1.4deg) translate(1.5%, .9%) scale(1.05); } }
@keyframes leafSway2 { from { transform: rotate(1.6deg) translate(1%, -1.2%) scale(-1.12, 1.12); } to { transform: rotate(-1.8deg) translate(-1.2%, 1%) scale(-1.08, 1.08); } }
@media (max-width: 700px) {
  .hero::before { background-image: url('art/hero-desk-sm.webp'); background-position: center 30%; }
  .hero-light i { background-image: url('art/hero-light-sm.webp'); inset: -8% -60%; }
}
@media (prefers-reduced-motion: reduce) { .hero-light i { animation: none; } }

/* Public release: honest demo provenance and deferred applications. */
.hero-demo-note{margin:16px 0 0;color:var(--muted,#626955);font:400 13px/1.5 Onest,sans-serif}
.mini-form :disabled{cursor:not-allowed;opacity:.6}
#application-note{font:400 13px/1.5 Onest,sans-serif}