/* ============================================================
   Tolevine — woodland storybook design system
   Palette : deep pine + warm oat paper + enchanted rose-magenta + marigold
   Type    : Young Serif (display) · Onest (body) · Fragment Mono (labels)
   ============================================================ */

:root{
  --paper:#F4ECD8; --paper-2:#FBF6EA; --paper-3:#EFE4CC;
  --pine:#163A2E; --pine-2:#0F2A21; --pine-soft:#244c3d;
  --ink:#23312A; --ink-soft:#5d6b61; --ink-faint:#8a948b;
  --rose:#E0457B; --rose-deep:#C32C61; --rose-tint:#fbe3ec;
  --marigold:#F2A93B; --marigold-deep:#d98a1c; --marigold-tint:#fdeccb;
  --sage:#7FA486; --sage-tint:#e2ecdf;
  --line:rgba(35,49,42,.14); --line-2:rgba(35,49,42,.08);
  --white:#fffdf8;
  --display:'Young Serif',Georgia,serif;
  --body:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Fragment Mono',ui-monospace,Menlo,monospace;
  --r:16px; --r-lg:26px; --r-sm:10px;
  --shadow:0 18px 50px -22px rgba(15,42,33,.45);
  --shadow-sm:0 8px 24px -14px rgba(15,42,33,.4);
  --maxw:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); color:var(--ink); background:var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(127,164,134,.16), transparent 38%),
    radial-gradient(circle at 88% 4%, rgba(242,169,59,.12), transparent 34%),
    radial-gradient(circle at 70% 92%, rgba(224,69,123,.08), transparent 40%);
  background-attachment:fixed;
  line-height:1.62; font-size:17px; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--rose-deep); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.1; color:var(--pine); margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.6vw,4rem); letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:1.35rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.kicker{font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--rose-deep); font-weight:500}
.muted{color:var(--ink-soft)}
.center{text-align:center}
section{padding:74px 0}
.hidden{display:none !important}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--body); font-weight:600; font-size:1rem; cursor:pointer;
  border:none; border-radius:999px; padding:.85em 1.6em; transition:.18s ease;
  text-decoration:none; line-height:1; white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-primary{background:var(--rose); color:#fff; box-shadow:0 10px 22px -10px rgba(224,69,123,.8)}
.btn-primary:hover{background:var(--rose-deep)}
.btn-gold{background:var(--marigold); color:#3a2a08; box-shadow:0 10px 22px -12px rgba(242,169,59,.9)}
.btn-gold:hover{background:var(--marigold-deep); color:#2a1f06}
.btn-pine{background:var(--pine); color:var(--paper-2)}
.btn-pine:hover{background:var(--pine-2)}
.btn-ghost{background:transparent; color:var(--pine); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--pine); background:rgba(22,58,46,.04)}
.btn-lg{padding:1.05em 2.1em; font-size:1.08rem}
.btn-sm{padding:.6em 1.1em; font-size:.9rem}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(244,236,216,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-header .bar{display:flex; align-items:center; gap:18px; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-size:1.5rem; color:var(--pine); text-decoration:none}
.brand:hover{text-decoration:none}
.brand svg{width:30px; height:30px; flex:none}
.nav{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav a{color:var(--ink); font-weight:500; font-size:.97rem}
.nav a:hover{color:var(--rose-deep); text-decoration:none}
.nav .acct{display:flex; align-items:center; gap:12px}
.credit-chip{font-family:var(--mono); font-size:.82rem; background:var(--sage-tint);
  color:var(--pine); border-radius:999px; padding:.4em .8em; border:1px solid var(--line-2); white-space:nowrap}
.credit-chip b{color:var(--rose-deep)}
.nav-toggle{display:none; margin-left:auto; background:none; border:none; cursor:pointer; padding:8px}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--pine); margin:5px 0; border-radius:2px}
@media(max-width:860px){
  .nav{position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper-2); border-bottom:1px solid var(--line); padding:8px 22px 18px;
    transform:translateY(-130%); transition:.25s ease; box-shadow:var(--shadow-sm)}
  .nav.open{transform:translateY(0)}
  .nav a{padding:12px 0; border-bottom:1px solid var(--line-2)}
  .nav .acct{flex-wrap:wrap; padding-top:12px}
  .nav-toggle{display:block}
}

/* ---------- hero ---------- */
.hero{position:relative; background:linear-gradient(160deg,var(--pine) 0%,var(--pine-2) 100%);
  color:var(--paper-2); overflow:hidden; padding:0}
.hero::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(circle at 80% 18%, rgba(242,169,59,.5), transparent 26%),
    radial-gradient(circle at 16% 78%, rgba(224,69,123,.32), transparent 30%),
    radial-gradient(2px 2px at 30% 30%, rgba(253,236,203,.9), transparent 60%),
    radial-gradient(2px 2px at 60% 65%, rgba(253,236,203,.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 45% 20%, rgba(253,236,203,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 75% 48%, rgba(253,236,203,.7), transparent 60%);}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr;
  gap:48px; align-items:center; padding-top:64px; padding-bottom:72px}
.hero h1{color:var(--paper-2)}
.hero h1 em{font-style:normal; color:var(--marigold)}
.hero .lede{font-size:1.2rem; color:rgba(251,246,234,.84); max-width:34ch; margin-bottom:1.6rem}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero .micro{margin-top:18px; font-family:var(--mono); font-size:.78rem; color:rgba(251,246,234,.6); letter-spacing:.04em}
.hero-art{position:relative}
.hero-card{background:var(--paper-2); border-radius:var(--r-lg); padding:14px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6); transform:rotate(-1.5deg)}
.hero-card img{border-radius:18px; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-3)}
.hero-card .cap{display:flex; justify-content:space-between; align-items:center; padding:12px 8px 4px}
.hero-card .cap b{font-family:var(--display); color:var(--pine); font-size:1.05rem}
.hero-card .cap .berries{display:flex; gap:5px}
.berry{width:11px; height:11px; border-radius:50%; background:var(--line)}
.berry.on{background:var(--marigold)}
@media(max-width:860px){ .hero .wrap{grid-template-columns:1fr; gap:30px} .hero-art{order:-1} }

/* ---------- generic cards / panels ---------- */
.panel{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm)}
.tag{display:inline-flex; align-items:center; gap:.4em; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; background:var(--rose-tint); color:var(--rose-deep);
  border-radius:999px; padding:.35em .8em}

/* ---------- studio (creation) ---------- */
#studio{scroll-margin-top:84px}
.studio-grid{display:grid; grid-template-columns:1fr; gap:22px}
.studio-card{padding:26px}
.field{margin-bottom:20px}
.field > label{display:block; font-weight:600; color:var(--pine); margin-bottom:8px}
.field .hint{font-size:.85rem; color:var(--ink-soft); font-weight:400; margin-left:6px}
.input, textarea.input{width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:.8em .95em; transition:.15s}
.input:focus, textarea.input:focus{outline:none; border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-tint)}
textarea.input{resize:vertical; min-height:84px; line-height:1.5}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{font-family:var(--body); font-size:.92rem; cursor:pointer; background:var(--white);
  border:1.5px solid var(--line); border-radius:999px; padding:.5em 1em; color:var(--ink); transition:.15s}
.chip:hover{border-color:var(--sage)}
.chip[aria-pressed="true"], .chip.on{background:var(--pine); color:var(--paper-2); border-color:var(--pine)}
.inspo{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.inspo button{font-family:var(--mono); font-size:.74rem; cursor:pointer; background:var(--marigold-tint);
  border:1px solid transparent; color:var(--marigold-deep); border-radius:999px; padding:.4em .8em}
.inspo button:hover{border-color:var(--marigold)}

.style-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.style-opt{cursor:pointer; border:2px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--white); transition:.15s; text-align:center}
.style-opt:hover{border-color:var(--sage)}
.style-opt.on{border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-tint)}
.style-opt img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--paper-3)}
.style-opt span{display:block; font-size:.82rem; font-weight:600; color:var(--pine); padding:8px 4px}
@media(max-width:560px){ .style-grid{grid-template-columns:repeat(2,1fr)} }

.len-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.len-opt{cursor:pointer; border:2px solid var(--line); border-radius:var(--r); padding:16px;
  background:var(--white); transition:.15s}
.len-opt:hover{border-color:var(--sage)}
.len-opt.on{border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-tint)}
.len-opt .lname{font-family:var(--display); font-size:1.2rem; color:var(--pine)}
.len-opt .lmeta{font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin:4px 0 8px}
.len-opt .lcost{display:inline-flex; align-items:center; gap:.4em; font-size:.85rem; font-weight:600; color:var(--rose-deep)}
.len-opt .lblurb{font-size:.86rem; color:var(--ink-soft); margin-top:8px}
@media(max-width:560px){ .len-grid{grid-template-columns:1fr} }

.studio-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:8px; padding-top:18px; border-top:1px solid var(--line-2)}
.studio-foot .cost-note{font-size:.9rem; color:var(--ink-soft)}
.studio-foot .cost-note b{color:var(--rose-deep)}

/* ---------- reader ---------- */
#reader{scroll-margin-top:84px}
.reader-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.reader-title{display:flex; flex-direction:column}
.reader-title b{font-family:var(--display); font-size:1.7rem; color:var(--pine); line-height:1.1}
.reader-title span{font-size:.92rem; color:var(--ink-soft)}
.endings-track{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.78rem; color:var(--ink-soft)}
.endings-track .berries{display:flex; gap:5px}

.reader-stage{display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start}
@media(max-width:900px){ .reader-stage{grid-template-columns:1fr} }

.scene-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm)}
.scene-illo{position:relative; aspect-ratio:16/10; background:var(--pine-2); overflow:hidden}
.scene-illo img{width:100%; height:100%; object-fit:cover}
.scene-illo .wm{position:absolute; right:12px; bottom:10px; font-family:var(--mono); font-size:.66rem;
  color:rgba(255,255,255,.82); background:rgba(15,42,33,.5); padding:.3em .6em; border-radius:6px; letter-spacing:.06em}
.scene-illo .loading{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; color:var(--paper-2); text-align:center}
.scene-illo .loading .spin{width:38px; height:38px; border-radius:50%; border:3px solid rgba(251,246,234,.25);
  border-top-color:var(--marigold); animation:spin 1s linear infinite}
.scene-illo .loading small{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
.scene-illo.shimmer{background:linear-gradient(100deg,var(--pine-2) 30%,var(--pine-soft) 50%,var(--pine-2) 70%);
  background-size:200% 100%; animation:sh 1.6s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.scene-body{padding:24px 26px 26px}
.scene-text{font-size:1.18rem; line-height:1.7; color:var(--ink); margin-bottom:18px}
.scene-depth{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:10px}

.choices{display:grid; gap:12px}
.choice{display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left;
  background:var(--white); border:1.5px solid var(--line); padding:16px 18px;
  border-radius:6px 22px 6px 22px; transition:.16s; font-family:var(--body); font-size:1.04rem; color:var(--ink)}
.choice:hover{border-color:var(--rose); transform:translateX(4px); box-shadow:var(--shadow-sm)}
.choice .leaf{flex:none; width:30px; height:30px; display:grid; place-items:center; color:var(--sage)}
.choice .leaf svg{width:26px; height:26px}
.choice:hover .leaf{color:var(--rose)}
.choice b{font-weight:600}

.ending-banner{display:flex; align-items:center; gap:14px; background:var(--marigold-tint);
  border:1.5px solid var(--marigold); border-radius:var(--r); padding:16px 18px; margin-bottom:16px}
.ending-banner .crest{width:46px; height:46px; flex:none; border-radius:50%; background:var(--marigold);
  display:grid; place-items:center; color:#3a2a08}
.ending-banner .crest svg{width:26px;height:26px}
.ending-banner .etitle{font-family:var(--display); font-size:1.3rem; color:var(--pine); line-height:1.1}
.ending-banner .evibe{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--marigold-deep)}
.ending-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}

/* journey vine (sidebar) */
.journey{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 18px;
  position:sticky; top:84px}
.journey h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose-deep); margin:0 0 14px}
.vine{position:relative; padding-left:8px}
.vine-node{position:relative; padding:0 0 18px 28px}
.vine-node::before{content:""; position:absolute; left:6px; top:5px; width:13px; height:13px; border-radius:50%;
  background:var(--sage); border:2px solid var(--paper-2); box-shadow:0 0 0 2px var(--sage); z-index:2}
.vine-node::after{content:""; position:absolute; left:11px; top:14px; bottom:-4px; width:2px;
  background:repeating-linear-gradient(var(--sage),var(--sage) 4px,transparent 4px,transparent 8px)}
.vine-node:last-child::after{display:none}
.vine-node.current::before{background:var(--rose); box-shadow:0 0 0 2px var(--rose),0 0 0 6px var(--rose-tint); animation:pulse 1.6s ease-in-out infinite}
.vine-node.ending::before{background:var(--marigold); box-shadow:0 0 0 2px var(--marigold)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px var(--rose),0 0 0 6px var(--rose-tint)}50%{box-shadow:0 0 0 2px var(--rose),0 0 0 9px transparent}}
.vine-node .vlabel{font-size:.82rem; color:var(--ink)}
.vine-node .vchoice{font-size:.74rem; color:var(--ink-soft); font-style:italic}
.journey .replay-note{font-size:.78rem; color:var(--ink-soft); margin-top:8px; line-height:1.4}
@media(max-width:900px){ .journey{position:static; margin-top:20px} }

/* ---------- pricing ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.price-card{background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:28px 24px;
  display:flex; flex-direction:column; position:relative}
.price-card.pop{border-color:var(--rose); box-shadow:var(--shadow)}
.price-card .ribbon{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--rose);
  color:#fff; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35em .9em; border-radius:999px}
.price-card .pname{font-family:var(--display); font-size:1.6rem; color:var(--pine)}
.price-card .pcredits{font-family:var(--mono); color:var(--rose-deep); font-weight:500; margin:2px 0 14px}
.price-card .pprice{font-size:2.4rem; font-family:var(--display); color:var(--pine)}
.price-card .pprice span{font-size:1rem; color:var(--ink-soft); font-family:var(--body)}
.price-card .pblurb{color:var(--ink-soft); font-size:.92rem; margin:12px 0 20px; flex:1}
.price-card .btn{width:100%}
.price-card .pnote{font-size:.76rem; color:var(--ink-faint); margin-top:10px; text-align:center}
@media(max-width:780px){ .price-grid{grid-template-columns:1fr; max-width:380px; margin:0 auto} }

/* ---------- feature / step grids ---------- */
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){ .cols{grid-template-columns:1fr} }
.feature{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px}
.feature .ic{width:48px; height:48px; border-radius:14px; background:var(--sage-tint); color:var(--pine);
  display:grid; place-items:center; margin-bottom:14px}
.feature .ic svg{width:26px; height:26px}
.feature h3{margin-bottom:.35em}
.feature p{color:var(--ink-soft); font-size:.95rem; margin:0}
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){ .steps{grid-template-columns:1fr} }
.step{position:relative; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:-16px; left:24px;
  width:38px; height:38px; border-radius:50%; background:var(--rose); color:#fff; font-family:var(--display);
  display:grid; place-items:center; font-size:1.2rem}
.step h3{margin:.4em 0 .3em}
.step p{color:var(--ink-soft); font-size:.95rem; margin:0}

/* ---------- examples gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:820px){ .gallery{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .gallery{grid-template-columns:1fr} }
.gcard{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm)}
.gcard img{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-3)}
.gcard .gbody{padding:16px 18px}
.gcard .gbody h3{font-size:1.2rem; margin-bottom:.2em}
.gcard .gbody p{font-size:.9rem; color:var(--ink-soft); margin:0}
.gcard .gmeta{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.gcard .gmeta span{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  background:var(--sage-tint); color:var(--pine); padding:.3em .6em; border-radius:999px}

/* ---------- FAQ ---------- */
.faq{max-width:780px; margin:0 auto}
.faq details{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; overflow:hidden}
.faq summary{cursor:pointer; padding:18px 20px; font-weight:600; color:var(--pine); list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--display); font-size:1.5rem; color:var(--rose); transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 20px 18px; color:var(--ink-soft)}

/* ---------- band / CTA ---------- */
.band{background:linear-gradient(160deg,var(--pine),var(--pine-2)); color:var(--paper-2); border-radius:var(--r-lg);
  padding:48px 40px; text-align:center; position:relative; overflow:hidden}
.band h2{color:var(--paper-2)}
.band p{color:rgba(251,246,234,.82); max-width:48ch; margin:0 auto 22px}

/* ---------- footer ---------- */
.site-footer{background:var(--pine-2); color:rgba(251,246,234,.72); margin-top:40px; padding:54px 0 30px}
.site-footer a{color:rgba(251,246,234,.82)}
.site-footer a:hover{color:var(--marigold)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px}
@media(max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-grid .brand{color:var(--paper-2)}
.foot-grid h5{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--marigold); margin:0 0 12px}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin-bottom:8px; font-size:.92rem}
.foot-bottom{border-top:1px solid rgba(251,246,234,.14); margin-top:36px; padding-top:20px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:rgba(251,246,234,.55)}

/* ---------- modal ---------- */
.modal-back{position:fixed; inset:0; background:rgba(15,42,33,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:100}
.modal{background:var(--paper-2); border-radius:var(--r-lg); width:100%; max-width:430px; padding:30px;
  box-shadow:var(--shadow); position:relative; max-height:92vh; overflow:auto}
.modal h3{font-size:1.7rem; margin-bottom:.2em}
.modal .sub{color:var(--ink-soft); font-size:.92rem; margin-bottom:18px}
.modal .x{position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--ink-soft); line-height:1}
.modal .tabs{display:flex; gap:6px; background:var(--paper-3); border-radius:999px; padding:4px; margin-bottom:18px}
.modal .tabs button{flex:1; border:none; background:none; cursor:pointer; padding:.6em; border-radius:999px;
  font-family:var(--body); font-weight:600; color:var(--ink-soft)}
.modal .tabs button.on{background:var(--white); color:var(--pine); box-shadow:var(--shadow-sm)}
.modal .field{margin-bottom:14px}
.modal .err{background:var(--rose-tint); color:var(--rose-deep); border-radius:var(--r-sm); padding:.7em .9em;
  font-size:.88rem; margin-bottom:14px}
.modal .ok{background:var(--sage-tint); color:var(--pine); border-radius:var(--r-sm); padding:.7em .9em; font-size:.88rem; margin-bottom:14px}
.modal .btn{width:100%}
.modal .alt{text-align:center; font-size:.86rem; color:var(--ink-soft); margin-top:14px}

/* ---------- legal / prose ---------- */
.prose{max-width:760px; margin:0 auto}
.prose h1{margin-bottom:.3em}
.prose .updated{font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); margin-bottom:30px}
.prose h2{font-size:1.5rem; margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.5em}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--pine); color:var(--paper-2);
  padding:.9em 1.4em; border-radius:999px; box-shadow:var(--shadow); z-index:200; font-size:.92rem; max-width:90vw}

/* page hero (interior) */
.page-hero{background:linear-gradient(160deg,var(--pine),var(--pine-2)); color:var(--paper-2); padding:56px 0 50px}
.page-hero h1{color:var(--paper-2)}
.page-hero p{color:rgba(251,246,234,.82); max-width:56ch; margin:0}
.page-hero .kicker{color:var(--marigold)}