@font-face { font-family:"Apfel Grotezk"; src:url("../assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Apfel Grotezk"; src:url("../assets/fonts/ApfelGrotezk-Mittel.woff2") format("woff2"); font-weight:500 600; font-style:normal; font-display:swap; }
@font-face { font-family:"Apfel Grotezk"; src:url("../assets/fonts/ApfelGrotezk-Fett.woff2") format("woff2"); font-weight:700 900; font-style:normal; font-display:swap; }
:root { color-scheme:light; --ink:#181713; --muted:#68655d; --paper:#f8f7f2; --line:rgba(24,23,19,.11); --brand:"Apfel Grotezk",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.demo-story { position:relative; height:560vh; }
.demo-stage { position:sticky; top:0; height:100vh; min-height:620px; overflow:hidden; background:var(--paper); }
.site-header { position:absolute; z-index:20; top:0; left:50%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1500px,calc(100% - 64px)); height:94px; border-bottom:1px solid var(--line); transform:translateX(-50%); will-change:opacity,transform; }
.brand { display:inline-flex; align-items:center; justify-self:start; gap:9px; font-family:var(--brand); font-size:20px; font-weight:600; letter-spacing:-.025em; }
.brand img { width:28px; height:28px; object-fit:contain; }
.site-header nav { display:flex; gap:clamp(24px,3.3vw,54px); color:#3c3a35; font-size:14px; }
.site-header nav a { transition:opacity 160ms ease; }
.site-header nav a:hover { opacity:.55; }
.header-action,.primary-action { border:1px solid var(--ink); border-radius:11px; color:#fff; background:var(--ink); font-weight:600; transition:color 160ms ease,background 160ms ease; }
.header-action { justify-self:end; padding:13px 19px; cursor:pointer; font-size:13px; }
.header-action:hover,.primary-action:hover { color:var(--ink); background:transparent; }

.hero-copy { position:absolute; z-index:10; top:50%; left:max(48px,calc((100vw - 1500px)/2)); width:min(36vw,560px); transform:translateY(-43%); will-change:opacity,transform; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 26px; color:var(--muted); font-size:13px; }
.eyebrow span { padding:4px 7px; border-radius:5px; background:#ebe9e1; color:#4c4942; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.hero-copy h1 { max-width:620px; margin:0; font-family:var(--brand); font-size:clamp(48px,5vw,78px); font-weight:500; letter-spacing:-.055em; line-height:.99; text-wrap:balance; }
.hero-lede { max-width:470px; margin:30px 0 0; color:var(--muted); font-size:clamp(16px,1.35vw,21px); line-height:1.48; }
.primary-action { margin-top:34px; padding:16px 22px; cursor:pointer; font-size:14px; }

.demo-window { position:absolute; z-index:8; top:136px; right:max(28px,calc((100vw - 1500px)/2)); bottom:64px; left:45.5vw; overflow:hidden; border:1px solid rgba(24,23,19,.15); border-radius:24px; background:#062744; box-shadow:0 26px 80px rgba(28,35,40,.17); transform:translateZ(0); will-change:inset,border-radius,box-shadow; }
.demo-window iframe { display:block; width:100%; height:100%; border:0; background:#062744; }
.interaction-cover { position:absolute; z-index:2; inset:0; cursor:ns-resize; background:transparent; }
.interaction-cover[hidden] { display:none !important; }
.demo-window.is-live .interaction-cover { display:none; }
.demo-window.is-live { box-shadow:none; }
.scroll-note { position:absolute; z-index:11; right:42px; bottom:24px; margin:0; color:rgba(255,255,255,.8); font-size:11px; letter-spacing:.02em; text-shadow:0 1px 5px rgba(0,0,0,.35); pointer-events:none; will-change:opacity; }
.scroll-note span { margin-right:5px; }

@media (max-width:900px) {
  .site-header { width:calc(100% - 36px); height:72px; grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .brand { font-size:17px; }
  .hero-copy { top:105px; left:24px; width:calc(100% - 48px); transform:none; }
  .hero-copy h1 { max-width:650px; font-size:clamp(40px,10vw,64px); }
  .hero-lede { margin-top:20px; font-size:16px; }
  .primary-action { margin-top:22px; }
  .demo-window { top:54%; right:18px; bottom:30px; left:18px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* POST-DEMO EXPERIMENT -------------------------------------------------
   Isolated from the product intro and live iframe so this whole direction
   can be reverted by removing one markup block, this block, and the small
   progress section in demo-page.js. */
.post-demo-layer { position:absolute; z-index:30; inset:0; overflow:hidden; color:var(--ink); pointer-events:none; }
.post-demo-wash { position:absolute; inset:0; background:#f8f7f2; opacity:var(--post-wash,0); will-change:opacity; }
.post-demo-content { position:relative; z-index:1; width:min(1500px,calc(100% - 64px)); height:100%; margin:0 auto; padding:clamp(46px,6vh,76px) 0 32px; opacity:var(--post-copy-opacity,0); transform:translate3d(0,var(--post-copy-y,22vh),0); will-change:opacity,transform; }
.post-demo-eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 20px; color:#68655d; font-size:13px; }
.post-demo-eyebrow span { width:11px; height:5px; border-radius:4px; background:#5c5951; }
.post-demo-content h2 { margin:0; font-family:var(--brand); font-size:clamp(42px,4.4vw,68px); font-weight:500; letter-spacing:-.05em; line-height:.98; }
.post-demo-content h2 em { color:#69655d; font-style:normal; }
.post-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,30px); margin-top:clamp(42px,7vh,78px); }
.post-demo-card { min-width:0; opacity:var(--card-opacity,0); transform:translate3d(0,var(--card-y,110px),0) scale(var(--card-scale,.97)); transform-origin:50% 100%; will-change:opacity,transform; }
.post-demo-visual { position:relative; display:grid; place-items:center; height:clamp(260px,39vh,420px); overflow:hidden; border-radius:20px; background:#dfe7e7; }
.post-demo-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.38),transparent 48%,rgba(21,35,41,.08)); pointer-events:none; }
.post-demo-visual img { position:relative; z-index:1; width:auto; height:88%; max-width:72%; object-fit:contain; filter:drop-shadow(0 16px 22px rgba(25,31,32,.16)); }
.visual-capture { background:linear-gradient(145deg,#dfe9e7,#adc8cc); }
.visual-notes { background:linear-gradient(145deg,#e7e3dc,#c7d8d4); }
.visual-dock { background:linear-gradient(145deg,#dbe7e9,#b5cbd1); }
.post-demo-card h3 { margin:18px 0 0; font-size:clamp(18px,1.35vw,23px); font-weight:500; letter-spacing:-.025em; }
.post-demo-card p { max-width:420px; margin:10px 0 0; color:#6d6961; font-size:clamp(13px,1vw,16px); line-height:1.5; }
@media (max-width:900px) {
  .post-demo-content { width:calc(100% - 36px); padding-top:36px; }
  .post-demo-content h2 { font-size:clamp(36px,8.5vw,54px); }
  .post-demo-grid { gap:12px; margin-top:34px; }
  .post-demo-visual { height:clamp(210px,34vh,320px); border-radius:14px; }
  .post-demo-card p { font-size:12px; }
}
@media (max-width:620px) {
  .post-demo-content { overflow:hidden; }
  .post-demo-grid { grid-template-columns:78vw 78vw 78vw; }
  .post-demo-visual { height:43vh; }
}

.site-footer { position:relative; z-index:2; min-height:min(800px,92vh); padding:16px; color:#fff; background:var(--paper); }
.footer-panel { position:relative; display:flex; flex-direction:column; width:100%; min-height:min(768px,calc(92vh - 32px)); overflow:hidden; padding:clamp(24px,3.5vw,56px); border-radius:28px; background:#0b0b0a; box-shadow:0 -24px 70px rgba(14,13,11,.16); }
.footer-topline { display:flex; align-items:center; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-brand { display:inline-flex; align-items:center; gap:10px; font-family:var(--brand); font-size:19px; font-weight:600; letter-spacing:-.025em; }
.footer-brand img { width:27px; height:27px; object-fit:contain; filter:invert(1); }
.footer-cta { display:inline-flex; align-items:center; gap:24px; padding:11px 14px 11px 16px; border:1px solid rgba(255,255,255,.3); border-radius:10px; font-size:12px; transition:background 160ms ease,color 160ms ease; }
.footer-cta:hover { color:#0b0b0a; background:#fff; }
.footer-columns { display:grid; grid-template-columns:minmax(320px,1.7fr) minmax(130px,.55fr) minmax(160px,.65fr); gap:clamp(30px,7vw,120px); padding:clamp(34px,6vh,72px) 0 0; }
.footer-intro h2 { margin:0; max-width:600px; font-family:var(--brand); font-size:clamp(34px,4vw,62px); font-weight:500; letter-spacing:-.052em; line-height:.98; }
.footer-intro p { max-width:370px; margin:20px 0 0; color:rgba(255,255,255,.5); font-size:13px; line-height:1.55; }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-top:4px; color:rgba(255,255,255,.48); font-size:12px; }
.footer-column p { margin:0 0 8px; color:#fff; font-weight:600; }
.footer-column a { transition:color 140ms ease; }
.footer-column a:hover { color:#fff; }
.footer-wordmark { position:absolute; right:clamp(18px,3.5vw,56px); bottom:22px; left:clamp(18px,3.5vw,56px); overflow:hidden; background:linear-gradient(180deg,#fff 0%,#aaa 48%,#171717 94%); background-clip:text; color:transparent; font-family:var(--brand); font-size:clamp(130px,20.5vw,350px); font-weight:500; letter-spacing:-.075em; line-height:.79; text-align:center; white-space:nowrap; }
.footer-copyright { position:absolute; right:clamp(24px,3.5vw,56px); bottom:clamp(95px,15vw,250px); z-index:2; color:rgba(255,255,255,.42); font-size:10px; }
@media (max-width:900px) {
  .site-footer { min-height:720px; padding:10px; }
  .footer-panel { padding:24px; }
  .footer-columns { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-intro { grid-column:1/-1; }
  .footer-wordmark { bottom:5px; font-size:clamp(84px,18vw,160px); }
}
@media (max-width:560px) {
  .footer-columns { grid-template-columns:1fr 1fr; padding-top:30px; }
  .footer-intro h2 { font-size:38px; }
  .footer-intro p { display:none; }
  .footer-wordmark { right:20px; bottom:18px; left:20px; font-size:19vw; }
}

/* Purchase information follows the immersive scroll scene in ordinary document flow. */
.commerce-section,.faq-section { background:#fff; }
.commerce-inner,.faq-inner { width:min(1180px,calc(100% - 48px)); margin:auto; }
.commerce-section { padding:112px 0 104px; scroll-margin-top:20px; }
.commerce-inner { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr); gap:clamp(56px,8vw,150px); }
.commerce-label { margin:0 0 26px; color:#77736d; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.commerce-copy h2,.faq-inner h2 { margin:0; font-family:var(--brand); font-weight:500; letter-spacing:-.047em; line-height:1.07; }
.commerce-copy h2 { font-size:clamp(40px,4vw,60px); }
.commerce-copy>p:not(.commerce-label):not(.download-note):not(.commerce-system) { max-width:560px; margin:28px 0; color:#5c5953; font-size:17px; line-height:1.6; }
.download-action { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; margin-top:4px; padding:16px 20px; border-radius:10px; background:#171717; color:#fff; font-size:14px; font-weight:600; }
.download-action:not(.is-unavailable):hover { background:#454545; }
.download-action.is-unavailable { cursor:not-allowed; opacity:.64; }
.download-note { margin:12px 0 0; color:#595650; font-size:13px; }
.download-note[hidden] { display:none; }
.commerce-system { margin:25px 0 0; color:#75716b; font-size:13px; }
.commerce-facts { border-top:1px solid #dddcd7; }
.commerce-facts>div { display:grid; grid-template-columns:36px 1fr; column-gap:14px; padding:22px 0 26px; border-bottom:1px solid #dddcd7; }
.commerce-facts span { color:#8a8680; font-size:12px; }
.commerce-facts strong { font-size:17px; font-weight:550; }
.commerce-facts p { grid-column:2; max-width:380px; margin:10px 0 0; color:#66635e; font-size:14px; line-height:1.5; }
.faq-section { padding:90px 0 125px; border-top:1px solid #e5e3de; scroll-margin-top:20px; }
.faq-inner { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1fr); gap:60px; }
.faq-inner h2 { font-size:clamp(36px,3.5vw,52px); }
.faq-list { border-top:1px solid #d9d8d3; }
.faq-list details { border-bottom:1px solid #d9d8d3; }
.faq-list summary { position:relative; padding:21px 34px 21px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:500; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:4px; font-size:21px; font-weight:300; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { max-width:650px; margin:0 0 22px; color:#65615b; font-size:14px; line-height:1.65; }
.faq-list p a { color:#181713; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px) {
  .commerce-section { padding:72px 0; }
  .commerce-inner,.faq-inner { display:block; }
  .commerce-facts { margin-top:58px; }
  .faq-section { padding:68px 0 88px; }
  .faq-list { margin-top:36px; }
}