/* Landing page. Shares the token layer with the workspace so both surfaces stay identical. */

.landing-shell { min-height:100vh; background:var(--bg); }
.landing-wrap { width:var(--site-width); margin:0 auto; }

/* Hero */
.landing-hero { padding:74px 0 0; }
.hero-copy { max-width:660px; }
.hero-copy h1 { margin:0 0 18px; font-family:var(--headline); font-size:clamp(31px,3.7vw,44px); line-height:1.08; letter-spacing:-.012em; font-weight:420; text-wrap:balance; }
.hero-copy > p:not(.hero-note) { max-width:545px; margin:0; color:var(--text-soft); font-size:15px; line-height:1.62; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero-note { margin:30px 0 0; color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.02em; line-height:1.5; }

/* Hero product frame */
.hero-stage { position:relative; margin-top:46px; min-height:620px; display:flex; align-items:flex-end; padding:68px 62px 0; border:1px solid var(--line); border-radius:18px; background:var(--panel); overflow:hidden; isolation:isolate; }
.stage-image { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:.52; filter:saturate(.68) contrast(.94); }
.hero-stage::after,.visual-with-image::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 12%,transparent),color-mix(in srgb,var(--bg) 38%,transparent)); }
.hero-stage-product { position:relative; z-index:2; width:100%; }
.intake-demo-grid { display:grid; grid-template-columns:1fr 1fr; min-height:490px; }
.intake-demo-grid > div { padding:36px; }
.intake-demo-grid h2 { font:460 25px/1.2 var(--headline); margin:16px 0; letter-spacing:-.4px; }
.intake-demo-grid p { font-size:13px; line-height:1.7; color:var(--text-soft); }
.intake-demo-brief { border-left:1px solid var(--line); background:var(--panel); }
.demo-answer { padding:16px; margin:20px 0; background:var(--input); border:1px solid var(--line-strong); border-radius:8px; }
.demo-answer small,.demo-brief-row small { color:var(--muted); font-size:11px; }
.demo-answer p,.demo-brief-row p { margin:10px 0 0; }
.demo-brief-row { padding:18px 0; border-bottom:1px solid var(--line); }
.demo-local { display:block; color:var(--muted); font:11px/1.6 var(--mono); margin-top:24px; }
@media(max-width:700px) { .intake-demo-grid { grid-template-columns:1fr; } .intake-demo-grid > div { padding:24px; } .intake-demo-brief { border-left:0; border-top:1px solid var(--line); } }
.hero-frame { position:relative; border:1px solid var(--line-strong); border-radius:16px 16px 0 0; background:var(--bg-raised); box-shadow:0 22px 70px rgb(0 0 0 / .24); overflow:hidden; animation:frame-in .7s cubic-bezier(.32,.72,0,1) both; }
@keyframes frame-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.frame-bar { height:46px; display:flex; align-items:center; gap:14px; padding:0 15px; border-bottom:1px solid var(--line); font-size:12px; }
.frame-bar-brand { display:flex; align-items:center; color:var(--text); font-family:var(--headline); font-weight:640; font-size:11px; letter-spacing:.04em; }
.frame-crumb { display:flex; align-items:center; gap:7px; color:var(--muted); }
.frame-crumb .icon { width:12px; }
.frame-crumb strong { color:var(--text); font-weight:470; }
.frame-store { margin-left:auto; display:flex; align-items:center; gap:7px; color:var(--muted); }
.frame-store i { width:5px; height:5px; border-radius:50%; background:var(--success); }
.frame-body { display:grid; grid-template-columns:46px 214px minmax(0,1fr) 224px; min-height:462px; }

.frame-rail { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0; border-right:1px solid var(--line); background:var(--chrome); }
.frame-rail span { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--faint); }
.frame-rail span .icon { width:15px; }
.frame-rail span.on { background:var(--panel-strong); color:var(--text); box-shadow:0 0 0 1px var(--line) inset; }
.frame-rail span.push { margin-top:auto; }

.frame-side { padding:14px 11px; border-right:1px solid var(--line); background:var(--bg-raised); }
.frame-switch { display:flex; align-items:center; gap:9px; padding:7px; margin-bottom:14px; border-radius:8px; color:var(--text-soft); }
.frame-switch i { width:26px; height:26px; display:grid; place-items:center; border-radius:7px; background:var(--panel-strong); color:var(--text-soft); }
.frame-switch i .icon { width:14px; }
.frame-switch b { display:block; font-size:12px; font-weight:490; }
.frame-switch small { display:block; margin-top:1px; color:var(--muted); font-size:11px; }
.frame-meter { padding:0 7px 15px; border-bottom:1px solid var(--line); }
.frame-meter-top { display:flex; justify-content:space-between; margin-bottom:7px; color:var(--muted); font-size:11px; }
.frame-meter-top span:last-child { max-width:88px; overflow:hidden; color:var(--text-soft); font-size:10px; font-weight:550; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.frame-meter-track { height:3px; border-radius:3px; background:var(--control); overflow:hidden; }
.frame-meter-track b { display:block; width:75%; height:100%; border-radius:3px; background:var(--progress); }
.frame-nav-title { padding:14px 7px 6px; color:var(--faint); font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.frame-nav { display:grid; gap:2px; }
.frame-nav span { display:flex; align-items:center; gap:8px; min-height:30px; padding:5px 8px; border-radius:7px; color:var(--muted); font-size:12px; }
.frame-nav b { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:inherit; }
.frame-nav span .icon { width:14px; }
.frame-nav span.on { background:var(--panel-strong); color:var(--text); }
.frame-nav i { flex:0 0 auto; margin-left:auto; width:5px; height:5px; border-radius:50%; background:var(--faint); }
.frame-nav i.done { background:var(--success); }
.frame-nav i.open { background:var(--warning); }

.frame-doc { padding:30px 34px 96px; background:var(--bg); min-width:0; }
.frame-kicker { color:var(--muted); font-size:12px; }
.frame-doc h2 { margin:10px 0 9px; font-family:var(--headline); font-size:23px; line-height:1.16; letter-spacing:-.006em; font-weight:470; }
.frame-doc > p { margin:0 0 26px; color:var(--text-soft); font-size:13px; line-height:1.55; }
.frame-section { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.frame-section em { color:var(--faint); font-family:var(--mono); font-size:11px; font-style:normal; }
.frame-section h3 { margin:0; font-family:var(--headline); font-size:14px; font-weight:490; letter-spacing:.008em; }
.frame-cards { display:grid; gap:8px; }

/* Requirement card. Shared by the hero frame and the feature visuals. */
.spec-card { padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); }
.spec-card > small { display:block; margin-bottom:6px; color:var(--muted); font-size:11px; }
.spec-card > strong { display:block; font-size:13px; line-height:1.45; font-weight:430; letter-spacing:.003em; }
.spec-card > p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.spec-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.spec-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:10px; }
.spec-tag .icon { width:11px; height:11px; }
.spec-tag.evidence { color:var(--info); background:color-mix(in srgb,var(--info) 7%,transparent); border-color:color-mix(in srgb,var(--info) 22%,transparent); }
.spec-tag.inferred { color:var(--warning); background:color-mix(in srgb,var(--warning) 7%,transparent); border-color:color-mix(in srgb,var(--warning) 22%,transparent); }
.spec-tag.open { color:var(--warning); }

.frame-inspect { padding:15px 14px; border-left:1px solid var(--line); background:var(--bg-raised); }
.frame-inspect-title { margin-bottom:15px; font-size:12px; font-weight:500; }
.frame-inspect-metric { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.frame-inspect-metric span { color:var(--muted); font-size:11px; }
.frame-inspect-metric strong { max-width:140px; font-family:var(--headline); font-size:13px; line-height:1.2; font-weight:500; letter-spacing:0; text-align:right; }
.frame-ticks { display:flex; gap:3px; margin-bottom:20px; }
.frame-ticks span { flex:1; height:3px; border-radius:2px; background:var(--control); }
.frame-ticks span.on { background:var(--progress); }
.frame-inspect-head { display:flex; align-items:center; gap:7px; margin-bottom:9px; color:var(--text-soft); font-size:11px; }
.frame-inspect-head .icon { width:13px; }
.frame-inspect-head b { margin-left:auto; padding:1px 6px; border-radius:99px; background:var(--control); color:var(--muted); font-size:10px; font-weight:430; }
.frame-question { padding:9px 10px; margin-bottom:6px; border:1px solid var(--line); border-radius:8px; color:var(--text-soft); font-size:11px; line-height:1.45; }
.frame-question small { display:block; margin-top:5px; color:var(--faint); font-size:10px; }

/* The recommended next step, cycling through real guidance states. */
.frame-next { position:absolute; left:calc(46px + 214px + 34px); right:calc(224px + 34px); bottom:22px; display:flex; align-items:center; gap:14px; padding:12px 12px 12px 15px; border:1px solid var(--line-strong); border-radius:13px; background:var(--topbar-bg); backdrop-filter:blur(18px); box-shadow:var(--shadow-menu); }
.frame-next-copy { min-width:0; display:grid; gap:3px; }
.frame-next-copy small { color:var(--faint); font-size:10px; }
.frame-next-copy strong { color:var(--text-soft); font-size:12px; line-height:1.4; font-weight:430; transition:opacity .28s ease; }
.frame-next-copy strong.fading { opacity:0; }
.frame-next-meta { margin-left:auto; display:flex; align-items:center; gap:6px; }
.frame-next-context { display:flex; align-items:center; gap:6px; height:27px; padding:0 9px; border-radius:7px; background:var(--control); color:var(--text-soft); font-size:11px; white-space:nowrap; transition:opacity .28s ease; }
.frame-next-context.fading { opacity:0; }
.frame-next-context .icon { width:12px; }
.frame-next-go { width:27px; height:27px; display:grid; place-items:center; border-radius:7px; background:var(--text); color:var(--bg); }
.frame-next-go .icon { width:13px; }

/* Capability strip */
.landing-facts { margin-top:74px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.landing-facts div { display:grid; gap:4px; }
.landing-facts b { font-size:12px; font-weight:500; letter-spacing:.004em; }
.landing-facts span { color:var(--muted); font-size:12px; line-height:1.45; }

/* Feature sections. Copy and imagery are separate surfaces by design: text is
   never placed directly over decorative imagery. */
.landing-feature { padding:104px 0 0; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center; gap:76px; }
.landing-feature.flip { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }
.landing-feature.flip .feature-copy { order:2; }
.feature-copy { min-width:0; }
.landing-eyebrow { color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.feature-copy h2 { margin:14px 0 14px; font-family:var(--headline); font-size:25px; line-height:1.16; letter-spacing:-.006em; font-weight:440; text-wrap:balance; }
.feature-copy p { margin:0; color:var(--text-soft); font-size:14px; line-height:1.65; }
.feature-list { margin:20px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.feature-list li { display:flex; align-items:flex-start; gap:9px; color:var(--muted); font-size:13px; line-height:1.5; }
.feature-list .icon { width:14px; height:14px; margin-top:3px; color:var(--faint); }
.feature-visual { position:relative; min-width:0; min-height:470px; display:flex; align-items:center; justify-content:center; padding:44px; border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; isolation:isolate; }
.feature-visual.visual-quiet { background:color-mix(in srgb,var(--panel) 76%,var(--bg-raised)); }
.feature-visual > .frame-section { margin-bottom:12px; }
.feature-product-panel { position:relative; z-index:2; width:100%; padding:20px; border:1px solid var(--line-strong); border-radius:12px; background:color-mix(in srgb,var(--bg) 94%,transparent); box-shadow:0 18px 48px rgb(0 0 0 / .18); backdrop-filter:blur(10px); }
.feature-product-panel.compact-panel { max-width:510px; }
.feature-product-panel.code-panel { padding:0; overflow:hidden; }
.visual-with-image .stage-image { transform:scale(1.02); transition:transform .8s cubic-bezier(.32,.72,0,1); }
.visual-with-image:hover .stage-image { transform:scale(1.045); }

/* Section toggle visual */
.toggle-row { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); margin-bottom:7px; }
.toggle-row:last-child { margin-bottom:0; }
.toggle-row > .icon { width:15px; color:var(--muted); }
.toggle-row b { display:block; font-size:13px; font-weight:470; }
.toggle-row small { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.4; }
.toggle-row .toggle-copy { flex:1; min-width:0; }
.toggle-switch { width:30px; height:18px; flex:0 0 auto; border-radius:99px; background:var(--control); position:relative; }
.toggle-switch::after { content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:var(--muted); transition:transform .2s ease; }
.toggle-row.on { border-color:var(--line-strong); }
.toggle-row.on .toggle-switch { background:var(--progress); }
.toggle-row.on .toggle-switch::after { background:var(--bg); transform:translateX(12px); }
.toggle-row.off b,.toggle-row.off small { color:var(--faint); }
.toggle-row.off > .icon { color:var(--faint); }

/* Question resolution visual */
.q-card { padding:14px 15px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); margin-bottom:8px; }
.q-card:last-child { margin-bottom:0; }
.q-card strong { display:block; font-size:13px; line-height:1.45; font-weight:450; }
.q-card p { margin:9px 0 0; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.5; }
.q-meta { display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--faint); font-size:11px; }
.q-meta .spec-tag { margin-right:2px; }

/* Markdown export visual */
.md-block { padding:18px 20px; border:0; border-radius:0; background:var(--code-bg); overflow-x:auto; }
.md-block pre { margin:0; color:var(--code-text); font-size:12px; line-height:1.75; }
.md-block .md-h { color:var(--code-strong); }
.md-block .md-key { color:var(--code-accent); }

/* FAQ */
.landing-faq { padding:112px 0 0; scroll-margin-top:72px; }
.faq-heading { max-width:680px; margin-bottom:34px; }
.faq-heading h2 { margin:14px 0 13px; font-family:var(--headline); font-size:clamp(26px,3vw,34px); line-height:1.15; letter-spacing:-.007em; font-weight:430; text-wrap:balance; }
.faq-heading p { margin:0; color:var(--text-soft); font-size:14px; line-height:1.65; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 2px; cursor:pointer; list-style:none; font-family:var(--headline); font-size:16px; line-height:1.4; font-weight:450; letter-spacing:.003em; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary span { position:relative; width:14px; height:14px; flex:0 0 auto; color:var(--faint); }
.faq-item summary span::before,.faq-item summary span::after { content:""; position:absolute; top:6px; left:3px; width:8px; height:1px; background:currentColor; opacity:.72; transition:transform .2s ease; }
.faq-item summary span::after { transform:rotate(90deg); }
.faq-item[open] summary span::after { transform:rotate(0); }
.faq-item p { max-width:780px; margin:0; padding:0 48px 22px 2px; color:var(--text-soft); font-size:14px; line-height:1.7; }
.faq-item summary:hover,.faq-item summary:focus-visible { color:var(--text-soft); }
.faq-item summary:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }

/* Principle */
.landing-close { padding:116px 0; text-align:center; }
.landing-close blockquote { max-width:740px; margin:18px auto 34px; text-wrap:balance; font-family:var(--headline); font-size:clamp(24px,2.9vw,34px); line-height:1.2; letter-spacing:-.007em; font-weight:420; }
.landing-close .landing-button { margin:0 auto; }
.landing-close > p { margin:16px 0 0; color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.02em; }

footer { border-top:1px solid var(--line); }
.footer-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }
.footer-wordmark { color:var(--text-soft); font-family:var(--headline); font-size:11px; font-weight:640; letter-spacing:.045em; }
.footer-inner nav { display:flex; gap:18px; }
.footer-inner nav a:hover { color:var(--text); }


@media (prefers-reduced-motion: reduce) {
  .hero-frame { animation:none; }
  .landing-button .icon,.frame-nav span,.frame-next-copy strong,.frame-next-context,.visual-with-image .stage-image { transition:none; }
}

@media (max-width:1080px) {
  .frame-body { grid-template-columns:46px 204px minmax(0,1fr); min-height:412px; }
  .frame-inspect { display:none; }
  .frame-next { left:calc(46px + 204px + 34px); right:34px; }
  .landing-facts { grid-template-columns:1fr 1fr; gap:22px 20px; }
  .landing-feature,.landing-feature.flip { grid-template-columns:1fr; gap:38px; padding:80px 0 0; }
  .landing-feature.flip .feature-copy { order:0; }
}

@media (max-width:820px) {
  .hero-stage { min-height:520px; padding:52px 34px 0; }
  .frame-body { grid-template-columns:46px minmax(0,1fr); min-height:360px; }
  .frame-side { display:none; }
  .frame-next { left:calc(46px + 24px); right:24px; }
  .frame-doc { padding:24px 24px 92px; }
}

@media (max-width:600px) {

  .landing-hero { padding-top:56px; }
  .hero-copy h1 { font-size:32px; }
  .hero-copy > p:not(.hero-note) { font-size:14px; }
  .hero-actions .landing-button { flex:1 1 auto; }
  .hero-stage { margin-top:38px; min-height:440px; padding:34px 18px 0; border-radius:14px; }
  .hero-frame { border-radius:12px 12px 0 0; }
  .frame-crumb,.frame-store { display:none; }
  .frame-body { grid-template-columns:40px minmax(0,1fr); min-height:322px; }
  .frame-rail { padding:8px 0; }
  .frame-doc { padding:20px 16px 88px; }
  .frame-doc h2 { font-size:19px; }
  .frame-next { left:calc(40px + 16px); right:16px; bottom:14px; padding:10px; gap:10px; }
  .frame-next-context { display:none; }
  .landing-facts { grid-template-columns:1fr; margin-top:52px; }
  .landing-feature { padding:64px 0 0; gap:30px; }
  .landing-faq { padding-top:76px; }
  .faq-heading { margin-bottom:24px; }
  .faq-item summary { min-height:62px; padding:16px 2px; font-size:15px; }
  .faq-item p { padding-right:20px; }
  .feature-visual { min-height:390px; padding:24px; }
  .feature-product-panel { padding:15px; }
  .feature-copy h2 { font-size:23px; }
  .landing-close { padding:76px 0; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:12px; padding:20px 0; }
}

/* Scroll choreography. Applied only after JS opts an element in, so the page
   is complete and readable with no script and with no observer. */
.reveal { opacity:0; transform:translateY(10px); transition:opacity .6s cubic-bezier(.32,.72,0,1),transform .6s cubic-bezier(.32,.72,0,1); transition-delay:calc(var(--i,0) * 60ms); }
.reveal.in-view { opacity:1; transform:none; }

.md-line { display:block; }
.md-block .reveal { transition-delay:calc(var(--i,0) * 34ms); }

/* The switches animate into position rather than arriving already set. */
.toggle-row { transition:border-color .42s ease,background .42s ease; }
.toggle-row b,.toggle-row small,.toggle-row > .icon { transition:color .42s ease; }
.toggle-switch { transition:background .38s ease; }
.toggle-switch::after { transition:transform .38s cubic-bezier(.32,.72,0,1),background .38s ease; }

/* An open question resolving, played once when the section is reached. */
.q-card p { transition:opacity .5s ease,max-height .5s cubic-bezier(.32,.72,0,1),margin-top .5s ease,padding-top .5s ease; max-height:120px; overflow:hidden; }
.q-card.is-open p { opacity:0; max-height:0; margin-top:0; padding-top:0; border-top-color:transparent; }
.tag-open,.tag-resolved { transition:opacity .34s ease; }
.q-card .tag-open { display:none; }
.q-card.is-open .tag-open { display:inline-flex; }
.q-card.is-open .tag-resolved { display:none; }
.q-card .tag-open { color:var(--warning); }

.frame-meter-track b { transition:width 1.1s cubic-bezier(.32,.72,0,1); }
.frame-ticks span { transition:background .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}

.landing-button:active { filter:brightness(.95); }
.landing-icon-button:active { background:var(--panel-strong); }