/* Core+ showcase — "Hold the thought". Presentation-stage language: near-black field, charcoal bands and tiles, off-white display type, one restrained blue. Light mode mirrors it on white. Motion is staged once on load and tied to scroll, never looping. */
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.47;font-optical-sizing:auto;scroll-behavior:smooth;scroll-padding-top:var(--nav);-webkit-font-smoothing:antialiased;--nav:52px;--ease:cubic-bezier(.28,.11,.32,1);--ease-out:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html[data-theme=dark]{--bg:#000;--band:#161617;--surface:#1d1d1f;--field:#0a0a0b;--raised:#2a2a2d;--glass:rgba(22,22,23,.78);--ink:#f5f5f7;--muted:#a1a1a6;--faint:#86868b;--line:#2c2c2e;--line-strong:#6e6e73;--accent:#2997ff;--cobalt:#0071e3;--cobalt-hover:#0077ed;--cobalt-ink:#fff;--glow:rgba(41,151,255,.26);--subtle:rgba(41,151,255,.14);--shadow:rgba(0,0,0,.7);--panel-top:#1c1c1e;--panel-bottom:#0d0d0e;--edge:rgba(255,255,255,.1);--grad-a:#b4dcff;--grad-b:#2997ff;--grad-c:#7f7bff;--ok:#30d158;--warn:#ff9f0a}
html[data-theme=light]{--bg:#fff;--band:#f5f5f7;--surface:#f5f5f7;--field:#fff;--raised:#e8e8ed;--glass:rgba(255,255,255,.78);--ink:#1d1d1f;--muted:#6e6e73;--faint:#6e6e73;--line:#d2d2d7;--line-strong:#86868b;--accent:#0066cc;--cobalt:#0071e3;--cobalt-hover:#0077ed;--cobalt-ink:#fff;--glow:rgba(0,113,227,.16);--subtle:rgba(0,113,227,.08);--shadow:rgba(0,0,0,.14);--panel-top:#fff;--panel-bottom:#f2f2f5;--edge:rgba(255,255,255,1);--grad-a:#0071e3;--grad-b:#3a5bd9;--grad-c:#6b4fd8;--ok:#1a7f37;--warn:#9a6508}
body{margin:0;background:var(--bg);color:var(--ink);transition:background .3s,color .3s;overflow-x:hidden}
::selection{background:var(--cobalt);color:#fff}
button,textarea{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}
.wrap{width:min(1180px,calc(100% - 64px));margin-inline:auto}
.skip{position:absolute;left:1rem;top:-5rem;padding:.7rem 1rem;background:var(--surface);z-index:30;border-radius:10px}
.skip:focus{top:1rem}
/* Full-bleed band behind a .wrap element without extra markup. */
.intro,footer{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}

/* Compact sticky local nav, translucent like a product sub-nav */
.topbar{position:sticky;top:0;z-index:20;height:var(--nav);display:flex;align-items:center;gap:2rem}
.topbar::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:var(--glass);border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.brand{font-size:1.3rem;font-weight:700;letter-spacing:-.05em;line-height:1}
.brand span{color:var(--accent);padding-left:.02em}
.topbar nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.topbar nav a{font-size:.76rem;color:var(--muted);transition:color .2s}
.topbar nav a:hover{color:var(--ink)}
.topbar .nav-cta{color:var(--cobalt-ink);background:var(--cobalt);border-radius:999px;padding:.3rem .8rem;min-height:28px;display:inline-flex;align-items:center;transition:background .2s}
.topbar .nav-cta:hover{color:var(--cobalt-ink);background:var(--cobalt-hover)}
.theme{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;border:1px solid var(--line-strong);color:var(--ink);background:transparent;border-radius:999px;padding:.3rem .75rem;white-space:nowrap;min-height:30px;transition:border-color .2s,background .2s}
.theme::before{content:"";width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.theme:hover{border-color:var(--accent)}

/* Hero: a staged artwork up top, editorial copy anchored bottom-left, action pill bottom-right */
.hero{min-height:calc(100dvh - var(--nav));display:grid;grid-template-rows:1fr auto;gap:1.5rem;padding-block:1.5rem 4.5rem}
.hero-copy{grid-row:2;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3rem;align-items:end;animation:rise 1s var(--ease-out) .35s both}
.hero-copy>*{grid-column:1}
.kicker{font-size:clamp(1.15rem,1.9vw,1.65rem);font-weight:600;letter-spacing:-.012em;line-height:1.2;color:var(--ink);margin:0 0 .45rem}
.eyebrow{color:var(--muted);font-size:1rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .6rem}
.hero h1{font-size:clamp(3.2rem,7vw,6.6rem);line-height:1.02;letter-spacing:-.03em;margin:0;font-weight:600;white-space:nowrap}
.hero h1 span{color:var(--accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 span{background:linear-gradient(100deg,var(--grad-a) 0,var(--grad-b) 55%,var(--grad-c) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
}
.lead{font-size:clamp(1.08rem,1.55vw,1.4rem);color:var(--muted);max-width:34ch;margin:1.1rem 0 0;line-height:1.4;letter-spacing:-.005em}
.hero-actions{grid-column:2;grid-row:1/span 3;align-self:end;display:flex;flex-direction:row-reverse;align-items:center;gap:1.4rem;padding:.5rem .5rem .5rem 1.4rem;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.hero-note{display:flex;align-items:center;gap:.55rem;margin:0;font-size:.82rem;font-weight:500;color:var(--ink)}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;background:var(--cobalt);color:var(--cobalt-ink);border:0;padding:.75rem 1.35rem;border-radius:999px;font-weight:500;font-size:1rem;white-space:nowrap;min-height:46px;transition:transform .2s var(--ease),background .2s}
.primary span{transition:transform .25s var(--ease)}
.primary:hover{background:var(--cobalt-hover)}
.primary:hover span{transform:translateX(2px)}
.jump:hover span{transform:translateY(2px)}
button:active,.primary:active{transform:scale(.97)}

/* Hero artwork (original): a raw thought on the left resolves into a lit outline on the right.
   The panel lifts open once on load; illustration only, not a logo or a device. */
.hero-art{grid-row:1;position:relative;min-height:clamp(280px,46vh,500px);display:grid;place-items:center;perspective:1600px}
.halo{position:absolute;left:50%;bottom:4%;width:min(96%,920px);height:42%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,var(--glow) 0,transparent 68%);filter:blur(28px);animation:glow-in 2.2s var(--ease) .6s both}
.thought{position:relative;width:min(100%,820px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;padding:clamp(1.4rem,3vw,2.4rem);border-radius:22px;background:linear-gradient(180deg,var(--panel-top),var(--panel-bottom));border:1px solid var(--line);box-shadow:inset 0 1px var(--edge),0 60px 120px -20px var(--shadow);transform-origin:50% 100%;animation:lift 1.5s var(--ease-out) .1s both}
.thought::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.8}
.thought-head,.fade-lines{grid-column:1;padding-right:clamp(1.2rem,3.5vw,3rem)}
.thought-head{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--ink);margin-bottom:1.2rem}
.thought-head i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.thought-head b{font-weight:600;letter-spacing:-.01em}
.fade-lines i,.shape-lines i{display:block;height:8px;border-radius:8px}
.fade-lines i{margin-bottom:.7rem;background:var(--line-strong);transform-origin:left;animation:jot 1.6s var(--ease) both}
.fade-lines i:nth-child(1){width:92%;opacity:.85;animation-delay:.5s}
.fade-lines i:nth-child(2){width:74%;opacity:.45;animation-delay:.65s}
.fade-lines i:nth-child(3){width:48%;opacity:.2;animation-delay:.8s}
.shape-lines{grid-column:2;grid-row:1/3;position:relative;display:grid;align-content:center;gap:.85rem;padding-left:clamp(1.2rem,3.5vw,3rem);border-left:1px solid var(--line)}
.shape-lines::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:45%;background:linear-gradient(transparent,var(--accent),transparent);opacity:0;animation:seam 1.4s var(--ease) 1s both}
.shape-lines div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.8rem}
.shape-lines em{font-style:normal;font-size:.7rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;animation:glow-in .6s var(--ease) both}
.shape-lines i{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));transform-origin:left;animation:grow .9s var(--ease-out) both}
.shape-lines div:nth-child(1) i{width:70%}
.shape-lines div:nth-child(2) i{width:88%}
.shape-lines div:nth-child(3) i{width:62%}
.shape-lines div:nth-child(4) i{width:44%}
.shape-lines div:nth-child(1) *{animation-delay:1.35s}
.shape-lines div:nth-child(2) *{animation-delay:1.47s}
.shape-lines div:nth-child(3) *{animation-delay:1.59s}
.shape-lines div:nth-child(4) *{animation-delay:1.71s}
.art-caption{position:absolute;bottom:0;right:0;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--faint);text-align:right}
/* Every keyframe animates *from* a hidden state, so with motion off the base style is the finished picture. */
@keyframes lift{from{opacity:0;transform:rotateX(26deg) translateY(40px) scale(.96)}}
@keyframes jot{from{opacity:0;transform:scaleX(.15)}45%{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes seam{40%{opacity:1}to{opacity:0;transform:translateY(120%)}}
@keyframes glow-in{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* Statement band */
.intro{padding-block:7rem}
.intro p{max-width:960px;font-size:clamp(1.9rem,3.6vw,3.4rem);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:0;color:var(--faint)}
.intro strong{color:var(--ink);font-weight:600}

/* Studio + composer tile */
.studio{padding-block:7rem}
.section-head{max-width:680px;margin-bottom:2.6rem}
.section-head h2,.journey h2,.status h2{font-size:clamp(2.3rem,4.4vw,4rem);line-height:1.05;letter-spacing:-.028em;margin:0 0 1rem;font-weight:600}
.section-head>p:last-child,.journey-title>p:last-child,.status>div>p:last-child{color:var(--muted);font-size:1.1rem;max-width:52ch;margin:0}
.composer{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(1.25rem,3.6vw,3rem)}
.assurances{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.assurances li{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--muted);background:var(--field);border:1px solid var(--line);border-radius:999px;padding:.32rem .8rem}
.assurances li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.step{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;margin-right:.65rem;border-radius:50%;font-size:.72rem;font-weight:600;color:var(--cobalt-ink);background:var(--cobalt);vertical-align:.1em;font-variant-numeric:tabular-nums}
form>label{display:block;font-size:1.2rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.85rem}
textarea{width:100%;min-height:140px;resize:vertical;color:var(--ink);background:var(--field);border:1px solid var(--line-strong);border-radius:14px;padding:1rem 1.1rem;line-height:1.5;font-size:1rem;transition:border-color .2s,box-shadow .2s}
textarea:hover{border-color:var(--muted)}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--subtle)}
textarea:focus-visible{outline:none}
textarea::placeholder{color:var(--faint);opacity:1}
.field-meta{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.8rem}
.field-meta p{margin:.7rem 0 0}
.field-meta span{flex:none;margin-top:.7rem;font-variant-numeric:tabular-nums}
.error{color:#ff8a8a;font-weight:600;margin:.5rem 0 0}
html[data-theme=light] .error{color:#b3261e}
textarea[aria-invalid=true]{border-color:#e5484d;box-shadow:0 0 0 4px rgba(229,72,77,.15)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.2rem}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:600;letter-spacing:-.01em;margin-bottom:.85rem;padding:0}
.choices{display:flex;gap:.5rem;flex-wrap:wrap}
.choices label{position:relative;cursor:pointer}
.choices input{position:absolute;opacity:0;width:100%;height:100%;margin:0;pointer-events:none}
.choices span{display:flex;align-items:center;min-height:44px;padding:.55rem 1.1rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--field);color:var(--ink);font-size:.9rem;transition:border-color .2s,background .2s,box-shadow .2s,transform .15s var(--ease)}
.choices label:hover span{border-color:var(--ink)}
.choices label:active span{transform:scale(.97)}
.choices input:checked+span{border-color:var(--accent);background:var(--subtle);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}
.choices input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.form-bottom{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.form-bottom p{color:var(--muted);font-size:.82rem;margin:0}

/* Output */
.output{margin-top:2rem;padding:clamp(1.25rem,3vw,2.2rem);border-radius:20px;background:var(--field);border:1px solid var(--line);outline:none;animation:rise .6s var(--ease-out) both}
.output:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.output-top{display:flex;justify-content:space-between;gap:2rem;align-items:start}
.output-label{color:var(--accent);font-size:.85rem;font-weight:600;margin:0 0 .4rem}
.output h3{font-size:clamp(1.35rem,2.5vw,2rem);font-weight:600;letter-spacing:-.025em;line-height:1.2;margin:0;overflow-wrap:anywhere}
.output-top>span{white-space:nowrap;color:var(--muted);font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem}
.outline-items{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 3rem;margin-block:1.8rem;counter-reset:part}
.outline-items section{border-top:1px solid var(--line);padding-top:1rem;counter-increment:part}
.outline-items h4{margin:0 0 .55rem;font-size:1rem;font-weight:600}
.outline-items h4::before{content:"0" counter(part);color:var(--accent);font-size:.75rem;margin-right:.7rem;font-variant-numeric:tabular-nums}
.outline-items p,.outline-items ul{color:var(--muted);margin:0;line-height:1.6}
.outline-items ul{padding-left:1.2rem}
.outline-items li+li{margin-top:.35rem}
.output-note{color:var(--muted);font-size:.82rem;margin:0 0 1.2rem}
.output-actions{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.secondary{border:1px solid var(--line-strong);background:var(--raised);color:var(--ink);border-radius:999px;padding:.65rem 1.2rem;min-height:44px;font-weight:500;transition:border-color .2s}
.secondary:hover{border-color:var(--accent)}
.text-button{background:none;border:0;color:var(--accent);font-weight:500;padding:.6rem 0;min-height:44px}
.text-button:hover{text-decoration:underline;text-underline-offset:4px}
.output-actions span{color:var(--muted);font-size:.82rem}

/* Journey */
.journey{padding-block:7rem;border-top:1px solid var(--line)}
.journey-title{max-width:680px;margin-bottom:3.4rem}
.journey ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;counter-reset:stage}
.journey li{position:relative;padding-top:1.6rem;counter-increment:stage}
.journey li::before{content:"";position:absolute;top:0;left:0;right:-1.25rem;height:1px;background:var(--line)}
.journey li:last-child::before{right:0}
.journey li::after{content:"";position:absolute;top:-5px;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-strong)}
.journey li.here::after{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--subtle),0 0 16px var(--accent)}
.journey li span{color:var(--accent);font-size:.78rem;font-weight:600}
.journey li span::before{content:"0" counter(stage) "  ";white-space:pre;color:var(--faint)}
.journey li strong{display:block;font-size:1.12rem;font-weight:600;letter-spacing:-.018em;margin:.7rem 0 .4rem}
.journey li p{font-size:.9rem;color:var(--muted);margin:0}
.journey li em{display:inline-block;margin-top:.9rem;font-style:normal;font-size:.74rem;font-weight:500;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:.2rem .65rem}
.vision-note{font-size:.8rem;color:var(--faint);margin:2.8rem 0 0}

/* App preview: real local-demo screenshots staged on an angled set, then close-up crops paired with what each screen does and does not do.
   Frames are original CSS bezels, not a device. Resting angles are the finished picture; scroll only settles them in. */
.preview{padding-block:7rem 2rem;border-top:1px solid var(--line);--bezel-a:#3a3a3c;--bezel-b:#121213;--bezel-edge:rgba(255,255,255,.16)}
html[data-theme=light] .preview{--bezel-a:#e8e8ed;--bezel-b:#c7c7cc;--bezel-edge:rgba(255,255,255,.9)}
.preview-head{margin-bottom:3.4rem}
.preview-head h2{font-size:clamp(2.3rem,4.4vw,4rem);line-height:1.05;letter-spacing:-.028em;margin:0 0 1rem;font-weight:600}
.preview-head>p:last-child{color:var(--muted);font-size:1.1rem;max-width:52ch;margin:0}
.screen{border-radius:16px;padding:6px;background:linear-gradient(180deg,var(--bezel-a),var(--bezel-b));box-shadow:inset 0 1px var(--bezel-edge),0 0 0 1px var(--line),0 50px 100px -30px var(--shadow)}
.screen img{display:block;width:100%;height:auto;border-radius:11px}
.stage{position:relative;margin:0 auto;perspective:2400px}
.stage::before{content:"";position:absolute;left:50%;bottom:6%;width:90%;height:40%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,var(--glow) 0,transparent 70%);filter:blur(36px)}
.stage-set{position:relative;transform-style:preserve-3d;padding-top:2%}
.screen-main{position:relative;z-index:2;width:72%;margin-inline:auto;transform:rotateX(7deg);transform-origin:50% 100%}
.screen-side{position:absolute;top:9%;width:44%;z-index:1;filter:brightness(.62) saturate(.9)}
html[data-theme=light] .screen-side{filter:brightness(.9) saturate(.85)}
.screen-left{left:0;transform-origin:0 50%;transform:rotateY(34deg)}
.screen-right{right:0;transform-origin:100% 50%;transform:rotateY(-34deg)}
.stage figcaption{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem .8rem;margin-top:2.6rem;text-align:center;font-size:.82rem;color:var(--muted)}
.stage figcaption .chip{border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem}
.preview-rows{margin-top:5rem}
.preview-row{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center;padding-block:4.5rem;border-top:1px solid var(--line);perspective:2000px}
.preview-row:nth-child(even) .loupe{order:2}
.loupe{border-radius:22px;padding:8px;background:linear-gradient(180deg,var(--bezel-a),var(--bezel-b));box-shadow:inset 0 1px var(--bezel-edge),0 0 0 1px var(--line),0 40px 90px -30px var(--shadow),0 0 70px -20px var(--glow);transform:rotateY(8deg) rotateX(3deg);transition:transform .7s var(--ease-out)}
.preview-row:nth-child(even) .loupe{transform:rotateY(-8deg) rotateX(3deg)}
.preview-row:hover .loupe,.preview-row:focus-within .loupe{transform:none}
/* Close-up crops of the 1440 x 900 captures, in source pixels: x, y, width, height. */
.crop{position:relative;overflow:hidden;border-radius:15px;aspect-ratio:var(--w)/var(--h);background:var(--field)}
.crop img{position:absolute;max-width:none;height:auto;width:calc(1440 / var(--w) * 100%);left:calc(var(--x) / var(--w) * -100%);top:calc(var(--y) / var(--h) * -100%)}
.crop-overview{--x:8;--y:160;--w:832;--h:395}
.crop-gaps{--x:276;--y:230;--w:754;--h:566}
.crop-look{--x:288;--y:300;--w:836;--h:372}
.preview-meta{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.preview-meta span{color:var(--accent);font-variant-numeric:tabular-nums}
.preview-copy h3{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1;letter-spacing:-.024em;font-weight:600;margin:0 0 1rem}
.preview-copy>p:not([class]){color:var(--muted);margin:0 0 1.4rem;max-width:46ch}
.limit{margin:0 0 1.4rem;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:.86rem;color:var(--muted);max-width:46ch}
.limit strong{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;font-size:.76rem;font-weight:600;color:var(--ink)}
.limit strong::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--warn)}
.full-link{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;color:var(--accent);font-weight:500;font-size:.92rem}
.full-link:hover{text-decoration:underline;text-underline-offset:4px}
.preview-note{font-size:.8rem;color:var(--faint);margin:0;padding-top:2rem;border-top:1px solid var(--line)}

/* Status */
.status{padding-block:7rem;display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;border-top:1px solid var(--line)}
.status-list{display:grid;gap:.85rem}
.status-list article{padding:1.5rem 1.7rem;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.chip{display:inline-flex;align-items:center;gap:.55rem;font-size:.76rem;font-weight:600;color:var(--muted)}
.status-list h3{font-size:1.25rem;font-weight:600;letter-spacing:-.015em;margin:.6rem 0 .35rem}
.status-list p{color:var(--muted);margin:0;font-size:.92rem;max-width:56ch}
/* Status dots differ by shape as well as colour. */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.dot-live{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.dot-local{border:2px solid var(--warn);background:linear-gradient(90deg,var(--warn) 50%,transparent 50%)}
.dot-planned{border:1.5px dashed var(--faint)}

/* Footer band */
footer{padding-block:2.5rem 3rem;display:grid;grid-template-columns:1fr 2fr auto;gap:2rem;align-items:start}
footer .brand{font-size:1.15rem}
footer p{color:var(--muted);font-size:.76rem;margin:0;max-width:60ch}
footer a{font-size:.76rem;color:var(--accent)}
footer a:hover{text-decoration:underline;text-underline-offset:4px}

/* Scroll staging: content settles in as it enters; the hero art recedes as it leaves. Progressive, CSS-only. */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hero-art{animation:recede linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .intro p,.section-head,.composer,.journey-title,.journey li,.preview-head,.preview-copy,.preview-note,.status>div:first-child,.status-list article{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
    .screen-main{animation:tilt-in linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .screen-left{animation:fan-left linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
    .screen-right{animation:fan-right linear both;animation-timeline:view();animation-range:entry 10% cover 50%}
    .loupe{animation:loupe-in linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .journey li:nth-child(2),.status-list article:nth-child(2){animation-range:entry 5% cover 28%}
    .journey li:nth-child(3),.status-list article:nth-child(3){animation-range:entry 10% cover 31%}
    .journey li:nth-child(4){animation-range:entry 15% cover 34%}
    .journey li:nth-child(5){animation-range:entry 20% cover 37%}
  }
}
@keyframes recede{to{opacity:.25;transform:scale(.93) translateY(-5%)}}
@keyframes settle{from{opacity:0;transform:translateY(56px)}}
@keyframes tilt-in{from{opacity:.3;transform:rotateX(32deg) translateY(8%) scale(.9)}}
@keyframes fan-left{from{opacity:0;transform:translateX(30%) rotateY(10deg)}}
@keyframes fan-right{from{opacity:0;transform:translateX(-30%) rotateY(-10deg)}}
@keyframes loupe-in{from{opacity:0;translate:0 48px}}

@media(max-width:960px){
  .hero-copy{grid-template-columns:1fr}
  .hero-actions{grid-column:1;grid-row:auto;justify-self:start;margin-top:2rem}
  .hero h1{font-size:clamp(2.8rem,8vw,5rem)}
  .journey ol{grid-template-columns:repeat(3,1fr);row-gap:2.4rem}
  .journey li::before{right:0}
  .status{gap:2.5rem;grid-template-columns:1fr}
  .preview-row{grid-template-columns:1fr;gap:2.4rem}
  .preview-row:nth-child(even) .loupe{order:0}
  .loupe,.preview-row:nth-child(even) .loupe{transform:rotateX(4deg)}
}
@media(max-width:700px){
  .wrap{width:min(100% - 36px,1180px)}
  .topbar{gap:.8rem}
  .topbar nav{gap:1rem}
  .topbar nav a:not(.nav-cta){display:none}
  .hero{min-height:auto;padding-block:1.5rem 3.5rem;gap:1rem}
  .hero h1{font-size:clamp(2.7rem,12vw,4.4rem);white-space:normal}
  .hero-art{min-height:250px}
  .thought{grid-template-columns:1fr;width:min(100%,360px);padding:1.25rem}
  .thought-head,.fade-lines{padding-right:0}
  .shape-lines{grid-column:1;grid-row:auto;padding:1.1rem 0 0;margin-top:.6rem;border-left:0;border-top:1px solid var(--line)}
  .shape-lines::before{display:none}
  .art-caption{display:none}
  .hero-actions{flex-direction:column-reverse;align-items:stretch;justify-self:stretch;border-radius:24px;padding:1rem;gap:.9rem}
  .hero-note{justify-content:center}
  .intro{padding-block:4.5rem}
  .studio{padding-block:4.5rem}
  .composer{border-radius:22px}
  .field-meta{display:block}
  .field-meta span{display:block;margin-top:.35rem}
  .choice-grid{grid-template-columns:1fr;gap:1.6rem;margin-top:1.6rem}
  .form-bottom{margin-top:1.8rem}
  .form-bottom .primary{width:100%}
  .output-top{display:block}
  .output-top>span{display:inline-block;margin-top:.8rem}
  .outline-items{grid-template-columns:1fr;gap:1.4rem}
  .journey{padding-block:4.5rem}
  .journey-title{margin-bottom:2.4rem}
  .journey ol{grid-template-columns:1fr;row-gap:0;padding-left:1.4rem}
  .journey li{padding:0 0 1.8rem}
  .journey li::before{top:6px;bottom:0;left:-1.4rem;right:auto;width:1px;height:auto}
  .journey li:last-child::before{display:none}
  .journey li::after{top:1px;left:calc(-1.4rem - 5px)}
  .journey li strong{margin-top:.4rem}
  .vision-note{margin-top:1rem}
  .preview{padding-block:4.5rem 1rem}
  .preview-head{margin-bottom:2.2rem}
  .screen-side{display:none}
  .screen-main{width:100%;transform:none}
  .screen{border-radius:12px;padding:4px}
  .screen img{border-radius:9px}
  .stage figcaption{justify-content:flex-start;text-align:left;margin-top:1.6rem}
  .preview-rows{margin-top:3rem}
  .preview-row{padding-block:3rem;gap:1.8rem}
  .loupe,.preview-row:nth-child(even) .loupe{transform:none;padding:5px;border-radius:16px}
  .crop{border-radius:12px}
  /* Tighter crops on phones so the UI text stays readable; the full capture is one tap away. */
  .crop-overview{--w:560}
  .crop-gaps{--x:276;--y:400;--w:392;--h:400}
  .crop-look{--w:560}
  .status{padding-block:4.5rem;gap:2rem}
  .status-list article{padding:1.2rem}
  footer{grid-template-columns:1fr;gap:1rem}
}
@media(max-width:360px){.hero h1{font-size:2.5rem}.assurances li{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}
@media(prefers-reduced-transparency:reduce){.topbar::before{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}}
@media(prefers-contrast:more){.composer,.thought,.choices span,.theme,textarea,.status-list article,.output,.hero-actions,.limit{border-width:2px}html[data-theme=dark]{--muted:#e0e0e5;--faint:#cfcfd4;--line:#8e8e93;--line-strong:#c7c7cc}html[data-theme=light]{--muted:#2c2c2e;--faint:#3a3a3c;--line:#636366;--line-strong:#3a3a3c}}
@media(forced-colors:active){.hero h1 span{background:none;-webkit-text-fill-color:currentColor}.topbar::before{background:Canvas}}