/* Sonetia home. The title splash below is carried over unchanged from launch.css; everything after "Below the splash" is the October 2026 redesign. */

/* ── Base and title splash (unchanged) ── */
:root{--paper:#eeeadd;--ink:#292d22;--olive:#24291e;--muted:#666959;--line:#b9baa7;--serif:'Gilda Display',Georgia,serif;--display:'Bodoni Moda',Georgia,serif;--gutter:clamp(22px,5vw,90px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%;height:auto}a{color:inherit;text-underline-offset:5px}button{font:inherit}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h2{font-size:clamp(48px,6.2vw,100px);line-height:1.04;letter-spacing:-.055em}h2 em{color:#727854}h3{font-size:clamp(25px,3vw,42px);line-height:1.15;letter-spacing:-.035em}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}::selection{background:#b9bea0;color:#182011}
.skip{position:fixed;top:10px;left:10px;background:var(--paper);padding:12px;z-index:20;transform:translateY(-160%)}
.skip:focus{transform:none}
.button{display:inline-flex;align-items:center;gap:35px;padding:17px 23px;text-decoration:none;font-size:13px;border:1px solid currentColor;transition:background .2s,transform .2s}
.button:hover{transform:translateY(-3px)}
.cream{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cream:hover{background:#fffbed}
@media(max-width:500px){.button{gap:18px;padding:16px;font-size:12px}}
.reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.waiting{opacity:0;transform:translateY(30px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}
.reveal.waiting{opacity:1;transform:none}
.button:hover{transform:none}}

/* The original title page */
.hero { position: relative; height: 100svh; min-height: 540px; display: grid; place-items: center; padding: 4rem var(--gutter); text-align: center; color: #f4f2ef; isolation: isolate; overflow: hidden; background: #050507; }
.title-paintings { position: absolute; inset: 0; z-index: -2; }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.88) contrast(1.04); transition: opacity 1.2s ease; }
.plate.is-on { opacity: 1; }
.title-veil { position: absolute; inset: 0; background: radial-gradient(120% 85% at 50% 45%, #06060947 0%, #060609b3 62%, #060609eb 100%), linear-gradient(180deg, #06060980, #06060933 40%, #0606098c); }
.hero-inner { position: relative; width: min(100%,44rem); }
.brandmark { font: 400 clamp(4rem,15vw,10rem)/.95 "Bodoni Moda", var(--serif); letter-spacing: -.015em; margin: 0 auto .24em; width: fit-content; text-wrap: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.28'/%3E%3C/svg%3E"), linear-gradient(#f4f2ef, #f4f2ef); background-repeat: repeat, no-repeat; background-size: 180px 180px, 100% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 30px #0009); }
.brandmark .glyph { display: inline-block; text-align: center; font-variation-settings: "opsz" 96, "wght" 400; transition: font-variation-settings .28s cubic-bezier(.22,.75,.2,1); }
.tagline { font: clamp(1.25rem,1rem + 1.4vw,1.9rem)/1.35 var(--serif); text-shadow: 0 1px 24px #000c; margin-bottom: 2rem; }
.cta-row { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.hero .button { border-radius: 999px; padding: .7rem 1.25rem; border-color: #f4f2ef50; background: #ffffff0b; font-size: .9rem; }
.hero .button.primary { background: #f4f2ef; color: #15151a; border-color: #f4f2ef; }
.hero .button[href]:hover { background: #ffffff21; }
.hero .note { margin-top: 1.25rem; font-size: .85rem; color: #f4f2ef9e; }
.title-scroll { position: absolute; left: var(--gutter); bottom: 1.8rem; color: #f4f2efa0; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; display: flex; gap: 1.6rem; align-items: center; }
.title-scroll span { font-size: 1.3rem; }
.painting-controls { position: absolute; right: var(--gutter); bottom: 1.8rem; display: flex; gap: 1rem; align-items: baseline; max-width: 65%; color: #f4f2ef80; font-size: .7rem; text-align: right; }
.art-credit { margin: 0; }
.paintings-toggle { border: 0; background: none; color: #f4f2efa0; font: inherit; padding: .4rem; cursor: pointer; white-space: nowrap; }
.paintings-toggle[hidden] { display: none; }


/* Restored splash and signature, alongside the launch product chapters. */
.button,.nav-download{border-radius:999px}
.nav-download{border:1px solid #9b9d87;padding:9px 17px}
.hero{height:100svh;min-height:560px}
.hero .button.primary:hover{background:#e8e4d8;color:#15151a}
.hero .note{color:#d0d0c9;font-size:12px}
.painting-controls{color:#d0d0c9}
.paintings-toggle{color:#e0e0d7;border:1px solid #f4f2ef50;border-radius:999px;padding:6px 12px}
.title-scroll{color:#e0e0d7}
.footer-brand{display:block;font:400 clamp(5rem,21vw,25rem)/1 'Bodoni Moda',var(--serif);letter-spacing:-.065em;text-decoration:none;white-space:nowrap;padding:25px 0 35px}
.footer-brand span{display:inline-block;font-family: sans-serif;font-size:.24em;vertical-align:top;margin-top:.5em;margin-left:.15em;transition:transform .3s}
.footer-brand:hover span{transform:translate(8px,-8px)}
@media(max-width:650px){
 .hero{min-height:600px;padding:70px 22px 130px}
 .brandmark{font-size:clamp(64px,17vw,100px)}
 .tagline{font-size:23px}
 .hero .button{font-size:12px}
 .painting-controls{left:22px;right:22px;bottom:18px;max-width:none;flex-wrap:wrap;justify-content:center;text-align:center;gap:8px;font-size:10px}
 .title-scroll{left:50%;transform:translateX(-50%);bottom:100px;white-space:nowrap}
 .hero .note{font-size:10px}
 .footer-brand{padding-block:10px 30px}
}
@media(prefers-reduced-motion:reduce){.plate{transition:none}.footer-brand:hover span{transform:none}}



/* ══════════════════════════════════════════════════════════════════════
   Below the splash. Clean and quiet: centred headlines, one paragraph per
   feature, large product visuals, a grid for the smaller features, and three
   bold moments (the growing screenshot, the dark library, "Pay once").
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#f5f4f0; --surface:#fff; --text:#1d1d1f; --sub:#6e6e73; --hair:#e2e0d9;
  --accent:#8a6a3a; --night:#0a0b09;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  --book:'Charter','Iowan Old Style',Georgia,serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
body{background:var(--bg);color:var(--text)}
main{overflow-x:clip}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Shared type */
.intro h2,.feature h2,.more h2,.library h2,.questions h2,.cta h2{font:400 clamp(40px,5.4vw,76px)/1.04 var(--serif);letter-spacing:-.035em;color:inherit;text-wrap:balance}
.eyebrow{font:600 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--accent);margin-bottom:14px}
.sub{font:400 clamp(18px,1.5vw,21px)/1.5 var(--sans);letter-spacing:-.012em;color:var(--sub);max-width:36em;margin:22px auto 0;text-wrap:pretty}

/* ── Intro and the growing screenshot ────────────────────────────── */
.intro{padding:clamp(110px,14vw,190px) var(--gutter) 0;text-align:center}
.showcase{max-width:1240px;margin:clamp(56px,7vw,96px) auto 0}
.showcase img{width:100%;border-radius:18px;box-shadow:0 50px 100px -40px #1d1d1f55,0 20px 40px -20px #1d1d1f33}

/* ── Feature showcases ───────────────────────────────────────────── */
.feature{padding:clamp(120px,15vw,210px) var(--gutter) 0;text-align:center}
.feature .vig{max-width:1000px;margin:clamp(48px,6vw,80px) auto 0;text-align:left}
.points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin:34px auto 0;padding:0;font:500 15px/1.4 var(--sans);color:var(--sub)}
.points li{display:flex;align-items:center;gap:10px}
.points li:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ── App models (animated by motion.js) ──────────────────────────────
   Redrawn from Sonetia's own SwiftUI views: Graphite ground, white pages,
   Liquid Glass pills, system colours. Sizes are in app points (--pt), so a
   model keeps the app's proportions at any width. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprite .f{fill:currentColor;stroke:none}
.sprite .w{stroke:#fff;fill:none}
.vig{--w:1000;position:relative;container-type:inline-size;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#1a1a1a;color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px #ffffff1f inset,0 50px 100px -40px #1d1d1f88,0 20px 40px -20px #1d1d1f4d;text-align:left}
.vig *{--pt:calc(100cqw / var(--w))}
.vig svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vig p{margin:0}
.lights{position:absolute;z-index:6;left:calc(16*var(--pt));top:calc(16*var(--pt));display:flex;gap:calc(8*var(--pt))}
.lights i{width:calc(12*var(--pt));height:calc(12*var(--pt));border-radius:50%;background:#ff5f57}
.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}
.glass{background:#46464acc;-webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 0 0 .5px #ffffff26,0 calc(6*var(--pt)) calc(18*var(--pt)) #00000059;color:#ffffffd9}
.vig .div{width:1px;align-self:center;background:#ffffff2e}

/* The page, as it sits in the Graphite workspace at 125% */
.canvas{position:absolute;inset:0}
.sec-label{position:absolute;left:0;right:0;top:calc(26*var(--pt));text-align:center;font:600 calc(10*var(--pt))/1 var(--sans);letter-spacing:calc(1.4*var(--pt));text-transform:uppercase;color:#a2a2a8}
.sheet{position:absolute;background:#fff;color:#111;border-radius:calc(10*var(--pt));box-shadow:0 0 0 1px #00000026;font-family:var(--book)}
.v-page .sheet,.v-cast .sheet{top:calc(50*var(--pt));width:calc(470*var(--pt));min-height:calc(700*var(--pt));padding:calc(30*var(--pt)) calc(56*var(--pt))}
.v-page .sheet{left:calc(50% - 235*var(--pt))}
.rh{text-align:center;font:400 calc(12.5*var(--pt))/1 var(--sans);color:#0000008c;margin-bottom:calc(40*var(--pt))!important}
.sheet .h{font:700 calc(17.5*var(--pt))/1.3 var(--book);margin-bottom:calc(22*var(--pt))!important}
.typed p,.passage p{font-size:calc(13.75*var(--pt));line-height:2;text-indent:calc(22*var(--pt));text-align:justify;hyphens:auto}
.typed{min-height:calc(300*var(--pt))}
.typed .s{transition:background-color .3s ease}
.typed .s.speaking{background:#0a84ff24}
.caret{display:inline-block;width:1.5px;height:1.2em;margin-left:1px;vertical-align:-.25em;background:#111;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Workspace chrome */
.rail{position:absolute;left:calc(10*var(--pt));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;width:calc(40*var(--pt));border-radius:999px;padding:calc(3*var(--pt)) 0}
.rail span,.command span,.readaloud span{display:grid;place-items:center;width:calc(40*var(--pt));height:calc(40*var(--pt));font-size:calc(17*var(--pt));color:#ffffff99}
.command{position:absolute;left:50%;bottom:calc(18*var(--pt));transform:translateX(-50%);display:flex;height:calc(40*var(--pt));border-radius:999px;padding:0 calc(2*var(--pt))}
.command .div{height:calc(20*var(--pt));margin:0 calc(3*var(--pt))}
.status{position:absolute;right:calc(18*var(--pt));bottom:calc(18*var(--pt));display:flex;align-items:center;height:calc(40*var(--pt));border-radius:999px;padding:0 calc(4*var(--pt));font:400 calc(12*var(--pt))/1 var(--sans);font-variant-numeric:tabular-nums;color:#ffffffa6}
.status span{display:grid;place-items:center;min-width:calc(26*var(--pt));height:100%;font-size:inherit}
.status span svg{font-size:calc(11*var(--pt))}
.status .zoom{min-width:calc(44*var(--pt))}
.status .div{height:calc(18*var(--pt));margin:0 calc(6*var(--pt))}
.status .readout{display:flex;gap:calc(5*var(--pt));padding:0 calc(10*var(--pt))}
.status em{font-style:normal;color:#ffffff59}
.status b{font-weight:400}
.readaloud{position:absolute;left:50%;bottom:calc(92*var(--pt));display:flex;align-items:center;height:calc(40*var(--pt));border-radius:999px;padding:0 calc(6*var(--pt)) 0 calc(14*var(--pt));opacity:0;transform:translateX(-50%) scale(.9);transition:opacity .35s ease,transform .45s var(--ease-out)}
.readaloud.on{opacity:1;transform:translateX(-50%)}
.readaloud span{width:calc(34*var(--pt));height:calc(36*var(--pt));font-size:calc(14*var(--pt));color:#fff}
.readaloud .ra-speaker{width:auto;padding-right:calc(6*var(--pt));font-size:calc(12*var(--pt));color:#ffffff99}
.readaloud .div{height:calc(14*var(--pt));margin:0 calc(4*var(--pt))}
.readaloud .pace{width:calc(44*var(--pt));font:400 calc(12*var(--pt))/1 var(--sans);font-variant-numeric:tabular-nums}

/* Characters & Locations, docked beside the page */
.sidebar{position:absolute;left:0;top:0;bottom:0;width:calc(330*var(--pt));background:#222;box-shadow:1px 0 0 #ffffff12;overflow:hidden}
.side-title{position:absolute;z-index:3;left:calc(16*var(--pt));top:calc(40*var(--pt));font:600 calc(15*var(--pt))/1.2 var(--sans)}
.side-art{position:relative;height:calc(200*var(--pt));display:flex;align-items:flex-end;padding:0 calc(16*var(--pt)) calc(18*var(--pt));background:radial-gradient(circle at 74% 30%,#f2b46a88 0 2.5%,transparent 3.2%),radial-gradient(circle at 86% 46%,#e8955566 0 3%,transparent 3.8%),radial-gradient(circle at 58% 22%,#ffd29a55 0 1.8%,transparent 2.4%),radial-gradient(70% 80% at 72% 38%,#c63a2c,transparent 70%),linear-gradient(165deg,#6b1d16,#3a0d0a 55%,#222)}
.side-art:after{content:'';position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,#222)}
.side-art p{position:relative;z-index:1;font:700 calc(28*var(--pt))/1.1 var(--sans);letter-spacing:-.01em;max-width:8em}
.side-pages{position:relative;height:calc(100% - 200*var(--pt))}
.cast-roster,.cast-detail{position:absolute;inset:0;padding:calc(12*var(--pt)) calc(12*var(--pt)) 0;transition:transform .6s var(--ease-out),opacity .45s ease}
.cast-detail{transform:translateX(100%);opacity:0;padding-inline:calc(16*var(--pt))}
.sidebar.detail .cast-roster{transform:translateX(-30%);opacity:0}
.sidebar.detail .cast-detail{transform:none;opacity:1}
.sec-head{display:flex;align-items:baseline;gap:calc(8*var(--pt));padding:calc(4*var(--pt)) calc(4*var(--pt)) calc(8*var(--pt))}
.sec-head b{font:600 calc(13*var(--pt))/1 var(--sans)}
.sec-head span{font:400 calc(12*var(--pt))/1 var(--sans);color:#ffffff80;font-variant-numeric:tabular-nums}
.sec-head.places{margin-top:calc(16*var(--pt))}
.row{display:flex;align-items:center;gap:calc(12*var(--pt));min-height:calc(46*var(--pt));padding:calc(6*var(--pt)) calc(12*var(--pt));border-radius:calc(10*var(--pt));transition:background-color .35s ease}
.row.hot{background:#ffffff0d}
.row.sel{background:#0a84ff2e}
.vig [data-c=clara]{--cc:#0a84ff}.vig [data-c=thomas]{--cc:#ff9f0a}.vig [data-c=finch]{--cc:#bf5af2}.vig [data-c=edmund]{--cc:#40c8e0}
.vig [data-c=wrenford]{--cc:#40c8e0}.vig [data-c=shop]{--cc:#30d158}.vig [data-c=bridge]{--cc:#bf5af2}
.av{display:grid;place-items:center;flex:none;width:calc(32*var(--pt));height:calc(32*var(--pt));border-radius:50%;background:color-mix(in srgb,var(--cc) 16%,transparent);color:var(--cc);font:600 calc(15*var(--pt))/1 var(--sans)}
.av svg{font-size:calc(14*var(--pt))}
.nm{flex:1;display:flex;flex-direction:column;gap:calc(5*var(--pt));font:500 calc(15*var(--pt))/1 var(--sans);white-space:nowrap}
.nm small{display:flex;align-items:center;gap:calc(4*var(--pt));font:400 calc(12*var(--pt))/1 var(--sans);color:#ffffffad}
.nm small svg{font-size:calc(8*var(--pt))}
.row .n{font:400 calc(12*var(--pt))/1 var(--sans);font-variant-numeric:tabular-nums;color:#ffffffad;transition:color .3s}
.row .n.bump{color:#fff}
.back{display:flex;align-items:center;gap:calc(4*var(--pt));font:400 calc(12*var(--pt))/1 var(--sans);color:#ffffffad;margin-bottom:calc(14*var(--pt))!important}
.back svg{font-size:calc(11*var(--pt))}
.who{display:flex;align-items:center;gap:calc(8*var(--pt));font:600 calc(17*var(--pt))/1.2 var(--sans)}
.who i{width:calc(14*var(--pt));height:calc(14*var(--pt));border-radius:50%;background:#0a84ff}
.role{font:400 calc(12*var(--pt))/1 var(--sans);color:#ffffffad;margin:calc(6*var(--pt)) 0 calc(14*var(--pt)) calc(22*var(--pt))!important}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--pt));margin-bottom:calc(18*var(--pt))}
.tiles div{display:flex;flex-direction:column;gap:calc(4*var(--pt));min-height:calc(62*var(--pt));padding:calc(12*var(--pt));border-radius:calc(10*var(--pt));background:#ffffff0d}
.tiles small{font:400 calc(12*var(--pt))/1 var(--sans);color:#ffffffa6}
.tiles b{font:500 calc(22*var(--pt))/1 var(--sans);font-variant-numeric:tabular-nums}
.tiles em{font:400 calc(12*var(--pt))/1 var(--sans);font-style:normal;color:#ffffff66}
.rel{display:flex;align-items:center;gap:calc(8*var(--pt));padding:calc(8*var(--pt)) calc(10*var(--pt));margin-bottom:calc(5*var(--pt))!important;border-radius:calc(8*var(--pt));background:#ffffff0a;font:400 calc(12.5*var(--pt))/1 var(--sans);color:#ffffffad;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .6s var(--ease-out)}
.rel.on{opacity:1;transform:none}
.rel svg{font-size:calc(11*var(--pt))}
.rel b{font-weight:600;color:#fff}
.v-cast .canvas{left:calc(330*var(--pt))}
.v-cast .sheet{left:calc(50% - 235*var(--pt))}
.passage mark{background:transparent;color:inherit;border-radius:2px;transition:background-color .5s ease}
.passage mark.on{background:color-mix(in srgb,var(--cc) 22%,transparent)}

/* Plot Board, expanded */
.v-plot{background:#141414}
.v-plot:before{content:'';position:absolute;left:28%;right:28%;top:9%;bottom:-10%;background:#fff;border-radius:10px;opacity:.07;filter:blur(18px)}
.plot-panel{position:absolute;inset:0;padding:calc(44*var(--pt)) calc(28*var(--pt)) 0}
.panel-title{font:600 calc(26*var(--pt))/1.1 var(--sans);margin-bottom:calc(14*var(--pt))!important}
.plot-tools{display:flex;justify-content:space-between;margin-bottom:calc(14*var(--pt))}
.capsule{display:inline-flex;align-items:center;gap:calc(6*var(--pt));height:calc(36*var(--pt));padding:0 calc(14*var(--pt));border-radius:999px;font:500 calc(12*var(--pt))/1 var(--sans);transition:opacity .3s,transform .2s}
.capsule svg{font-size:calc(12*var(--pt))}
.capsule.reset{opacity:.4}
.capsule.reset.enabled{opacity:1}
.capsule.press{transform:scale(.94)}
.v-plot .board{display:grid;grid-template-columns:1fr 1fr;gap:calc(20*var(--pt));padding:0 calc(16*var(--pt))}
.v-plot .card{position:relative;display:flex;flex-direction:column;gap:calc(10*var(--pt));padding:calc(18*var(--pt));border-radius:calc(18*var(--pt));background:#38383cd9;box-shadow:inset 0 0 0 1px #0a84ff40,0 calc(3*var(--pt)) calc(6*var(--pt)) #0000001f;transition:opacity .25s ease;will-change:transform}
.v-plot .card.dragging{opacity:.4}
.card-head{display:flex;align-items:center;gap:calc(6*var(--pt));font:400 calc(10*var(--pt))/1 var(--sans);font-variant-numeric:tabular-nums;color:#ffffffad}
.card-head i{width:calc(7*var(--pt));height:calc(7*var(--pt));border-radius:50%;background:var(--s)}
.v-plot .card h4{margin:0;font:700 calc(17*var(--pt))/1.2 var(--sans);letter-spacing:-.005em;color:#fff}
.syn{min-height:calc(76*var(--pt));padding:calc(8*var(--pt));border-radius:calc(10*var(--pt));background:#ffffff0d;font:400 calc(13*var(--pt))/1.4 var(--sans);color:#ffffffe0}
.drag-preview{position:absolute;left:0;top:0;z-index:5;width:calc(220*var(--pt));height:calc(80*var(--pt));padding:calc(12*var(--pt));border-radius:calc(12*var(--pt));background:#1e1e1e;box-shadow:inset 0 0 0 1px #0a84ff8c,0 calc(10*var(--pt)) calc(24*var(--pt)) #0008;font:600 calc(12*var(--pt))/1.3 var(--sans);opacity:0;pointer-events:none;transition:opacity .2s ease}
.drag-preview.on{opacity:1}
.drop-bar{position:absolute;left:0;top:0;z-index:4;width:calc(3*var(--pt));border-radius:9px;background:#0a84ff;opacity:0;transition:opacity .2s ease}
.drop-bar.on{opacity:1}
.pointer{position:absolute;left:0;top:0;z-index:7;width:calc(22*var(--pt))!important;height:calc(22*var(--pt))!important;fill:#000!important;stroke:#fff!important;stroke-width:1.4!important;opacity:0;transition:opacity .3s ease;filter:drop-shadow(0 1px 2px #0006)}
.pointer.on{opacity:1}

/* Pre-flight */
.v-finish{--w:640;aspect-ratio:4/3;border-radius:12px}
.pf-ground{position:absolute;inset:0;background:linear-gradient(180deg,#1c263b,#0d121f)}
.pf-margin{position:absolute;left:calc(14*var(--pt));top:calc(18*var(--pt));width:calc(214*var(--pt));display:flex;flex-direction:column;gap:calc(6*var(--pt))}
.pf-card{position:relative;padding:calc(8*var(--pt)) calc(10*var(--pt));border-radius:calc(10*var(--pt));background:#3c4252b3;-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 .5px #ffffff24;transition:opacity .4s ease,transform .5s var(--ease-out),box-shadow .3s}
.pf-card.current{box-shadow:inset 0 0 0 1.5px #0a84ffe6}
.pf-card.done{opacity:0;transform:translateX(-12px)}
.pf-cat{display:flex;align-items:center;gap:calc(5*var(--pt));font:600 calc(10*var(--pt))/1 var(--sans);color:#ffffffa6;margin-bottom:calc(5*var(--pt))!important}
.pf-cat i,.chip i{width:calc(7*var(--pt));height:calc(7*var(--pt));border-radius:50%;background:var(--k)}
.vig [data-cat=spell]{--k:#ff453a;--wash:#ff3b302e}
.vig [data-cat=place]{--k:#ffd60a;--wash:#ffcc0052}
.vig [data-cat=typo]{--k:#40c8e0;--wash:#30b0c733}
.pf-msg{font:400 calc(12*var(--pt))/1.3 var(--sans)}
.pf-fix{margin-top:calc(3*var(--pt))!important;font:400 calc(11*var(--pt))/1.3 var(--sans);color:#ffffffa6}
.pf-btn{position:absolute;right:calc(8*var(--pt));top:calc(7*var(--pt));padding:calc(2*var(--pt)) calc(8*var(--pt));border-radius:calc(5*var(--pt));background:#0a84ff;font:500 calc(10*var(--pt))/1.3 var(--sans);opacity:0;transition:opacity .25s,transform .15s}
.pf-card.current .pf-btn{opacity:1}
.pf-btn.press{transform:scale(.9)}
.pf-sheet{left:calc(240*var(--pt));width:calc(386*var(--pt));top:calc(18*var(--pt));min-height:calc(460*var(--pt));padding:calc(26*var(--pt)) calc(30*var(--pt))}
.pf-sheet p{font-size:calc(13*var(--pt));line-height:1.95;text-indent:calc(18*var(--pt))}
.issue{border-radius:2px;background:var(--wash);transition:background-color .4s ease}
.issue.fixed{background:transparent}
.issue[data-fix=" "]{white-space:pre}
.pf-foot{position:absolute;left:calc(14*var(--pt));right:calc(14*var(--pt));bottom:calc(14*var(--pt));padding:calc(12*var(--pt)) calc(16*var(--pt));border-radius:calc(20*var(--pt));background:#323846cc}
.pf-row{display:flex;align-items:center;gap:calc(8*var(--pt));font:400 calc(12*var(--pt))/1 var(--sans)}
.pf-row b{font:600 calc(13*var(--pt))/1 var(--sans)}
.pf-plane{font-size:calc(15*var(--pt));color:#0a84ff}
.pf-status{color:#ffffffa6}
.pf-nav{margin-left:auto;display:flex;align-items:center;gap:calc(6*var(--pt));color:#ffffffa6}
.pf-nav svg{font-size:calc(12*var(--pt))}
.pf-pos{min-width:calc(52*var(--pt));text-align:center;font-weight:500;font-variant-numeric:tabular-nums;color:#fff}
.pf-chips{margin-top:calc(10*var(--pt));flex-wrap:wrap;gap:calc(4*var(--pt))}
.chip{display:inline-flex;align-items:center;gap:calc(5*var(--pt));padding:calc(4*var(--pt)) calc(9*var(--pt));border-radius:999px;font-weight:500;transition:opacity .3s}
.chip em{font-style:normal;font-weight:400;color:#ffffffa6}
.chip.gone{display:none}
.clear{display:none;align-items:center;gap:calc(5*var(--pt));padding:calc(4*var(--pt)) calc(9*var(--pt));color:#fff}
.clear svg{color:#30d158;font-size:calc(13*var(--pt))}
.pf-chips.all-clear .clear{display:inline-flex}
.export{margin-left:auto;padding:calc(4*var(--pt)) calc(11*var(--pt));border-radius:calc(6*var(--pt));background:#0a84ff;font-weight:500;transition:transform .2s,box-shadow .3s}
.export.ready{box-shadow:0 0 0 calc(4*var(--pt)) #0a84ff40}
.tile .vig{margin-top:auto}

/* Smaller windows: taller, and zoomed in on what matters */
@media(max-width:640px){.v-page,.v-cast{aspect-ratio:4/5}.v-plot,.v-finish{aspect-ratio:1/1}}
@container (max-width:620px){
  .v-page *,.v-cast *,.v-plot *{--w:560}
  .v-page .rail,.v-page .command{display:none}
  .v-page .sheet{left:calc(45*var(--pt))}
  .v-cast .sidebar{width:calc(250*var(--pt))}
  .v-cast .side-art{height:calc(120*var(--pt))}
  .v-cast .side-art p{font-size:calc(20*var(--pt))}
  .v-cast .side-pages{height:calc(100% - 120*var(--pt))}
  .v-cast .canvas{left:calc(250*var(--pt))}
  .v-cast .sheet{left:calc(14*var(--pt));width:calc(300*var(--pt));padding:calc(24*var(--pt)) calc(22*var(--pt))}
  .v-cast .nm small,.v-cast .row .n{display:none}
  .v-plot .card .syn{min-height:calc(60*var(--pt))}
  .v-finish *{--w:430}
  .v-finish .pf-margin{display:none}
  .v-finish .pf-sheet{left:calc(14*var(--pt));width:calc(402*var(--pt))}
  .pf-nav{display:none}
}

/* ── Everything else: the grid ───────────────────────────────────── */
.more{padding:clamp(130px,16vw,220px) var(--gutter) 0;text-align:center}
.bento{max-width:1240px;margin:clamp(48px,6vw,80px) auto 0;display:grid;grid-template-columns:repeat(12,1fr);gap:20px;text-align:left}
.tile{grid-column:span 5;display:flex;flex-direction:column;gap:28px;padding:clamp(26px,3vw,40px);border-radius:28px;background:var(--surface);overflow:hidden}
.tile.wide{grid-column:span 7}
.tile.small{grid-column:span 3;gap:0}
.tile-text h3,.tile.small h3{font:600 clamp(21px,1.7vw,24px)/1.2 var(--sans);letter-spacing:-.02em;margin-bottom:8px}
.tile-text p,.tile.small p{font:400 16px/1.5 var(--sans);color:var(--sub);letter-spacing:-.005em}
.tile > img{margin-top:auto;width:100%;border-radius:12px;box-shadow:0 20px 40px -24px #1d1d1f55}
.tile.small svg{width:30px;height:30px;margin-bottom:22px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile .big-number{margin-top:auto;font:400 clamp(72px,8vw,120px)/.9 var(--serif);letter-spacing:-.04em;color:var(--text)}
.tile .big-number small{display:block;margin-top:14px;font:500 15px/1.4 var(--sans);letter-spacing:-.01em;color:var(--sub)}

/* ── Library: dark, full width ───────────────────────────────────── */
.library{margin-top:clamp(130px,16vw,220px);padding:clamp(110px,13vw,180px) var(--gutter) clamp(90px,10vw,140px);background:var(--night);color:#f5f5f7;text-align:center}
.library .sub{color:#a1a1a6}
.view-switch{display:flex;margin:30px auto 0;width:fit-content;border-radius:999px;padding:4px;background:#ffffff14}
.view-switch[hidden]{display:none}
.view-switch button{border:0;background:transparent;color:#f5f5f7;border-radius:999px;font:500 13px var(--sans);padding:8px 20px;cursor:pointer;transition:background .3s,color .3s}
.view-switch button[aria-pressed=true]{background:#f5f5f7;color:#1d1d1f}
.view-switch button:disabled{cursor:wait}
.library-shot{max-width:1240px;margin:clamp(48px,6vw,80px) auto 0}
.library-shot img{width:100%;border-radius:18px;box-shadow:0 0 0 1px #ffffff14,0 60px 120px -40px #000}

/* ── Pay once: big type ──────────────────────────────────────────── */
.price{padding:clamp(130px,16vw,230px) var(--gutter) 0;text-align:center}
.price h2{font:400 clamp(64px,12vw,200px)/.92 var(--serif);letter-spacing:-.05em}
.price h2 em{font-family:var(--display);font-style:italic;color:var(--accent);letter-spacing:-.045em}
.facts{list-style:none;max-width:1000px;margin:clamp(60px,7vw,100px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.facts h3{font:600 19px/1.3 var(--sans);letter-spacing:-.015em;margin-bottom:6px}
.facts p{font:400 16px/1.5 var(--sans);color:var(--sub)}

/* ── Questions ───────────────────────────────────────────────────── */
.questions{max-width:900px;margin:0 auto;padding:clamp(130px,16vw,220px) var(--gutter) 0}
.questions h2{text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.faq-list details{border-top:1px solid var(--hair)}
.faq-list details:last-child{border-bottom:1px solid var(--hair)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:30px;cursor:pointer;list-style:none;padding:24px 0;font:500 clamp(18px,1.5vw,21px)/1.35 var(--sans);letter-spacing:-.015em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font:300 26px/1 var(--sans);color:var(--sub);transition:transform .35s var(--ease-out)}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list p{font:400 17px/1.55 var(--sans);color:var(--sub);padding:0 40px 26px 0;max-width:60ch}

/* ── Download ────────────────────────────────────────────────────── */
.cta{padding:clamp(130px,16vw,220px) var(--gutter) clamp(110px,13vw,180px);text-align:center}
.cta .app-icon{width:104px;margin:0 auto 30px;border-radius:23px;box-shadow:0 24px 44px -18px #1d1d1f66}
.cta h2{margin-bottom:34px}
.button.dark{gap:22px;padding:16px 28px;border-radius:999px;background:var(--text);color:#fff;border-color:var(--text);font:500 15px var(--sans)}
.button.dark:hover{background:#000}
.fine{margin-top:18px;font:400 14px var(--sans);color:var(--sub)}

/* ── Footer ──────────────────────────────────────────────────────── */
footer{padding:44px var(--gutter) 22px;border-top:1px solid var(--hair)}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.footer-row p{font:18px var(--serif);letter-spacing:-.01em}
.footer-row nav{display:flex;gap:28px;font:400 14px var(--sans)}
.footer-row a{text-decoration:none;color:var(--sub)}
.footer-row a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--hair);padding-top:20px;display:flex;justify-content:space-between;gap:15px;font:400 12px var(--sans);color:var(--sub)}
.footer-bottom a{text-decoration:none}

/* ── Motion: reveals and the growing screenshot ──────────────────── */
.reveal{transition:opacity .9s ease,transform 1s var(--ease-out)}
.reveal.waiting{opacity:0;transform:translateY(28px)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .showcase img{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .price h2{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
}
@keyframes grow{from{transform:scale(.84);opacity:.6;border-radius:32px}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}

/* ── Smaller screens ─────────────────────────────────────────────── */
@media(max-width:980px){
  .tile,.tile.wide{grid-column:span 12}
  .tile.small{grid-column:span 6}
  .facts{grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){
  .intro h2 br{display:none}
  .points{flex-direction:column;align-items:center;gap:10px}
  .tile.small{grid-column:span 6;padding:22px}
  .tile.small svg{margin-bottom:16px}
  .tile.small h3{font-size:18px}
  .tile.small p{font-size:14.5px}
  .bento{gap:14px}
  .tile{border-radius:22px}
}
@media(prefers-reduced-motion:reduce){.caret{animation:none}}