:root {
  --paper:#f6f1e5; --sheet:#fffdf6; --platinum:#e4dfd3; --gray:#c8c8c8; --blue:#123fe8; --yellow:#fff15a; --ink:#171717; --muted:#5f5f5f; --line:rgba(23,23,23,.14);
  --app-bg:#fffdf9; --app-fill:#f0e9df; --coral:#e87963; --coral-strong:#b4432b;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif:Georgia, 'Times New Roman', serif;
  --radius:16px;
  --shadow:4px 4px 0 var(--ink);
}
* { box-sizing:border-box; }
html { overflow-x:clip; scroll-padding-top:5.5rem; -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); background-color:var(--paper); background-image:radial-gradient(#d7d0bf .75px, transparent .75px); background-size:12px 12px; font:1.0625rem/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--blue); text-underline-offset:3px; }
button, input, textarea, select { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
h1, h2, h3, p { margin-top:0; }
h1, h2 { font-weight:700; letter-spacing:-.025em; text-wrap:balance; }
h1 { margin-bottom:1.25rem; font-size:clamp(2.75rem, 6.2vw, 4.75rem); line-height:1.04; }
h2 { margin-bottom:1rem; font-size:clamp(2rem, 4.4vw, 3rem); line-height:1.08; }
h3 { margin-bottom:.4rem; font-size:1.3125rem; letter-spacing:-.015em; line-height:1.2; }
.visually-hidden, .honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.skip-link { position:fixed; top:.75rem; left:1rem; z-index:20; padding:.5rem 1rem; border:2px solid var(--ink); border-radius:999px; transform:translateY(-200%); background:var(--yellow); color:var(--ink); }
.skip-link:focus { transform:none; }

.site-header { position:sticky; top:0; z-index:10; border-bottom:2px solid var(--ink); background:rgba(246,241,229,.85); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
.site-header-inner, .site-shell { width:min(1080px, 100% - 2.5rem); margin:auto; }
.site-header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.25rem; }
.wordmark { margin:0; color:var(--ink); font:700 clamp(2rem, 4vw, 2.7rem) var(--serif); letter-spacing:-.1em; text-decoration:none; }

.button { display:inline-block; padding:.7rem 1.35rem; border:2px solid var(--ink); border-radius:999px; box-shadow:3px 3px 0 var(--ink); color:var(--ink); font-size:1.0625rem; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; }
.button:hover { transform:translate(1px, 1px); box-shadow:2px 2px 0 var(--ink); }
.button:active { transform:translate(3px, 3px); box-shadow:none; }
.button.primary { background:var(--yellow); }
.button.secondary { background:#fff; }
.button.small { padding:.45rem .95rem; font-size:.9375rem; }
.button:disabled { cursor:progress; opacity:.6; transform:none; }

.hero { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:4rem; padding:5rem 0 4.5rem; }
.lead { max-width:31rem; margin-bottom:2rem; color:var(--muted); font-size:clamp(1.1875rem, 2vw, 1.375rem); line-height:1.45; }
.hero-actions { margin-bottom:1.75rem; }
.dev-status { max-width:31rem; margin:0; padding:.7rem .95rem; border:2px dashed var(--ink); border-radius:12px; background:var(--sheet); color:var(--muted); font-size:.9375rem; }
.dev-status strong { color:var(--ink); font-weight:600; }
.dev-dot { display:inline-block; width:.7rem; height:.7rem; margin-right:.55rem; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); vertical-align:-.05em; }
.hero-figure { display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin:0; }
.hero-figure figcaption { color:var(--muted); font-size:.875rem; }

.phone { position:relative; width:300px; max-width:100%; height:620px; padding:11px; border-radius:54px; background:#1c1c1e; box-shadow:inset 0 0 0 2px #3a3a3c, 0 2px 4px rgba(23,23,23,.08), 0 40px 70px -24px rgba(23,23,23,.35); }
.phone::before { position:absolute; top:26px; left:50%; z-index:1; width:84px; height:24px; border-radius:20px; background:#000; transform:translateX(-50%); content:""; }
.screen { display:flex; flex-direction:column; height:100%; overflow:hidden; padding:.9rem 1.15rem 1.15rem; border-radius:43px; background:var(--app-bg); text-align:left; }
.status-bar { display:grid; grid-template-columns:1fr 5.25rem 1fr; align-items:center; justify-items:center; height:1.6rem; font-size:.875rem; font-weight:600; }
.status-icons { display:flex; grid-column:3; align-items:center; gap:.3rem; }
.status-icons svg { display:block; }
.app-title { margin:.9rem 0 .15rem; font-size:.9375rem; font-weight:600; text-align:center; }
.app-to { margin-bottom:.75rem; color:var(--muted); font-size:.8125rem; text-align:center; }
.examples { display:grid; flex:1; }
.example { grid-area:1 / 1; }
.example:not(.is-shown) { visibility:hidden; }
.voice { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; padding:.4rem .8rem .4rem .4rem; border-radius:999px; background:var(--app-fill); color:var(--muted); font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums; }
.play { position:relative; flex:none; width:1.75rem; height:1.75rem; border-radius:50%; background:var(--coral); }
.play::before { position:absolute; top:50%; left:55%; border-top:.32rem solid transparent; border-bottom:.32rem solid transparent; border-left:.5rem solid #fff; transform:translate(-50%, -50%); content:""; }
.wave { flex:1; height:1.1rem; background:repeating-linear-gradient(90deg, #b9b1a6 0 2px, transparent 2px 5px); clip-path:polygon(0 40%, 8% 10%, 16% 55%, 24% 0, 32% 45%, 40% 20%, 48% 60%, 56% 5%, 64% 40%, 72% 25%, 80% 55%, 88% 15%, 100% 45%, 100% 100%, 0 100%); }
.photo { height:8.5rem; margin-bottom:.9rem; overflow:hidden; border-radius:16px; }
.photo svg { display:block; width:100%; height:100%; }
.letter-title { margin-bottom:.2rem; font:700 1.375rem/1.15 var(--serif); letter-spacing:-.01em; }
.letter-date { margin-bottom:.5rem; color:var(--muted); font-size:.8125rem; }
.letter-text { margin:0; font-size:.9375rem; line-height:1.45; }
.send { margin:.9rem 0 0; padding:.75rem; border-radius:999px; background:var(--coral-strong); color:#fff; font-size:.9375rem; font-weight:600; text-align:center; }

fieldset { min-width:0; margin:0 0 1.5rem; padding:0; border:0; }
legend { margin-bottom:.75rem; padding:0; font-weight:600; }
label { display:block; margin:1.25rem 0 .5rem; font-weight:600; }
label span, legend span { color:var(--muted); font-weight:400; }
.chip-input { position:absolute; width:1px; height:1px; margin:0; padding:0; border:0; opacity:0; pointer-events:none; }
.segmented { margin:0; }
.segmented-track { display:flex; padding:3px; border-radius:11px; background:rgba(118,118,128,.14); }
.segmented label { margin:0; padding:.4rem .9rem; border-radius:8px; font-size:.875rem; white-space:nowrap; cursor:pointer; }
.segmented .chip-input:checked + label { background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
.segmented .chip-input:focus-visible + label { outline:3px solid var(--blue); outline-offset:1px; }

.section { padding:clamp(3.5rem, 8vw, 6.5rem) 0; }
.section > h2 { margin-bottom:2.5rem; text-align:center; }
.card, .window { border:2px solid var(--ink); border-radius:var(--radius); background:var(--sheet); box-shadow:var(--shadow); }
.window { overflow:hidden; }
.window-bar { position:relative; display:flex; align-items:center; justify-content:center; height:1.875rem; border-bottom:2px solid var(--ink); background:repeating-linear-gradient(rgba(23,23,23,.5) 0 1px, transparent 1px 3px) center / calc(100% - 1.75rem) 13px no-repeat, var(--platinum); }
.close-box { position:absolute; left:1.25rem; width:13px; height:13px; border:1.5px solid var(--ink); background:var(--platinum); box-shadow:0 0 0 3px var(--platinum); }
.window-title { margin:0; padding:0 .6rem; background:var(--platinum); font-size:.8125rem; font-weight:600; letter-spacing:0; line-height:1.2; }
.window-body { padding:clamp(1.5rem, 4vw, 2.25rem); }

.story-card { max-width:52rem; margin:auto; }
.eyebrow { margin-bottom:1rem; color:var(--blue); font-size:1.3125rem; letter-spacing:-.01em; line-height:1.2; }
.story-text { font:clamp(1.25rem, 2.2vw, 1.5rem)/1.5 var(--serif); }
.story-text p:last-child { margin-bottom:0; }

.steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.5rem; margin:0; padding:0; list-style:none; }
.steps li { padding:2rem; }
.step-icon { display:grid; place-items:center; width:3rem; height:3rem; margin-bottom:1.5rem; border:2px solid var(--ink); border-radius:12px; background:var(--yellow); }
.steps p { margin:0; color:var(--muted); }
.section-note { margin:2.5rem 0 0; color:var(--muted); font-size:1.1875rem; text-align:center; }

.plan-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.5rem; }
.rows { margin:0; padding-top:.5rem; padding-bottom:.5rem; }
.rows div { display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:baseline; padding:1.1rem 0; }
.rows div + div { border-top:1px solid var(--line); }
.rows dt { justify-self:start; padding:.1rem .65rem; border:1.5px solid var(--ink); border-radius:999px; background:#fff; font-size:.875rem; font-weight:600; white-space:nowrap; }
.plan-rows div:first-child dt { background:var(--yellow); }
.rows dd { margin:0; }
.rows p { margin:0; }
.said { color:var(--muted); font-family:var(--serif); font-style:italic; }
.did { font-weight:600; }
.idea-next { margin:3rem 0 0; font-size:clamp(1.75rem, 3.6vw, 2.5rem); font-weight:700; letter-spacing:-.025em; line-height:1.2; text-align:center; text-wrap:balance; }
.idea-next span { padding:0 .15em; background:linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break:clone; box-decoration-break:clone; }

.feedback-copy { max-width:36rem; margin:0 auto 2.5rem; text-align:center; }
.feedback-copy p { margin:0; color:var(--muted); font-size:1.1875rem; }
.form-window { max-width:42rem; margin:auto; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { display:inline-block; margin:0; padding:.5rem .95rem; border:1.5px solid var(--ink); border-radius:999px; background:#fff; font-size:.9375rem; font-weight:500; line-height:1.3; cursor:pointer; }
.chip:hover { background:var(--paper); }
.chip-input:checked + .chip { background:var(--yellow); }
.chip-input:checked + .chip::before { content:"✓ "; }
.chip-input:focus-visible + .chip { outline:3px solid var(--blue); outline-offset:2px; }
input, textarea { display:block; width:100%; padding:.8rem 1rem; border:1.5px solid var(--ink); border-radius:10px; background:#fff; }
input:focus, textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,63,232,.22); }
textarea { resize:vertical; }
textarea::placeholder { color:#767676; }
.form-status, .form-error { margin:.75rem 0 0; font-size:.9375rem; }
.form-status:empty, .form-error:empty { display:none; }
.form-status { color:var(--muted); }
.form-error { color:#a32116; }
#idea-form > .button { margin-top:1.5rem; }
.form-privacy { margin:1.25rem 0 0; color:var(--muted); font-size:.875rem; }
.received { margin-top:1.5rem; padding:1.25rem 1.5rem; border:2px solid var(--ink); border-radius:12px; background:var(--yellow); }
.received p { margin-bottom:.75rem; }

.site-footer { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; padding:2rem 0 3rem; border-top:2px solid var(--ink); color:var(--muted); font-size:.9375rem; }
.site-footer p:last-child { margin:0; }

@media (max-width:860px) {
  .site-header-inner, .site-shell { width:min(100% - 2rem, 640px); }
  .site-header-inner { min-height:3.75rem; }
  .hero { grid-template-columns:1fr; gap:3rem; padding:3rem 0 3.5rem; text-align:center; }
  .lead, .dev-status { margin-left:auto; margin-right:auto; }
  .steps, .plan-grid { grid-template-columns:1fr; }
  .steps li { padding:1.5rem; }
}
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
  .button { transition:transform .12s ease, box-shadow .12s ease; }
  .chip, .segmented label { transition:background-color .2s ease, box-shadow .2s ease; }
}