/* ============================================================================
   theme.css — PER-APP palette + brand overrides (the only design file a new
   site rewrites). tokens.css supplies structure; this supplies colour and the
   handful of brand-distinguishing knobs (--display serif, --radius, hero
   texture, chip style). Light + dark from the brand-doc palette columns.

   Toldmark brand: editorial/memoir — a SERIF display face, a warm Paper canvas, and
   a muted sepia-amber accent (old ink on paper). Palette read from the app's own
   colorsets (the upstream source of truth, oomny-design rule): AccentColor
   #B07A3C (light) / #C99655 (dark), Paper #FAF9F5 / #1A1614, Ink #141413 / #EFEEEC.

   Because the fill amber #B07A3C is only ~3.5:1 on the Paper canvas, the contract's
   --accent-text escape hatch carries a darkened amber tuned to AA (≥4.5:1) for links
   + small text; the warmer amber stays for fills, the brand mark and large accents
   (web≠app accent is intentional for AA — oomny-design). Accent-tinted surfaces use
   color-mix(var(--accent)) so re-hueing cascades to the halo + chips automatically.
   ============================================================================ */

/* ---- light (warm Paper canvas) ---- */
:root,
[data-theme="light"] {
  --display:"New York","Iowan Old Style",Georgia,"Times New Roman",serif;
  --bg:#faf9f5; --bg-2:#f1efe7; --surface:#ffffff;
  --text:#141413; --text-soft:#6b6358;
  --accent:#b07a3c; --accent-2:#c79256; --accent-ink:#ffffff;
  --accent-text:#8a5a28;                 /* darkened sepia-amber, AA ≈5.3:1 on --bg / 5.6:1 on white */
  --line:#e6e0d4;
  --verified:#5a7a3c; --caution:#b07d22; --caution-text:#8a6014;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
}

/* ---- dark (deep warm-paper palette, faint amber atmosphere) ---- */
[data-theme="dark"] {
  --display:"New York","Iowan Old Style",Georgia,"Times New Roman",serif;
  --bg:#1a1614; --bg-2:#221d19; --surface:#2a2420;
  --text:#efeeec; --text-soft:#a89e90;
  --accent:#c99655; --accent-2:#d6a868; --accent-ink:#1a1410;
  --accent-text:#d6a868;                 /* AA ≈7.8:1 on --bg */
  --line:#332b24;
  --verified:#9bbd7a; --caution:#d9b36a; --caution-text:#e0bd79;
  --chip-bg:#2a2420;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
}

/* Follow the OS when the document hasn't pinned a theme via [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --display:"New York","Iowan Old Style",Georgia,"Times New Roman",serif;
    --bg:#1a1614; --bg-2:#221d19; --surface:#2a2420;
    --text:#efeeec; --text-soft:#a89e90;
    --accent:#c99655; --accent-2:#d6a868; --accent-ink:#1a1410;
    --accent-text:#d6a868;
    --line:#332b24;
    --verified:#9bbd7a; --caution:#d9b36a; --caution-text:#e0bd79;
    --chip-bg:#2a2420;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
  }
}

/* ============================================================================
   QUIET PAGE (owner decision 2026-09-08, direction "Stille pagina"). One reading column,
   fd-* only; nothing here reaches into shared site.css selectors. The former 3-up gallery
   and its three --dv-scale breakpoint patches are gone with the gallery itself.
   ============================================================================ */
.fd-page{ max-width:46rem; margin:0 auto; padding:0 clamp(1.2rem,5vw,2rem); }
.fd-page .section .wrap{ padding-inline:0; }

/* ---- atoms ---- */
.fd-eyebrow{ display:inline-flex; align-items:center; gap:.7rem; font-size:11px; font-weight:750;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text); }
.fd-eyebrow::before{ content:""; width:1.6rem; height:2px; background:var(--accent); border-radius:2px; }

/* ---- hero: centred, one sentence, one action ---- */
.fd-hero{ position:relative; display:grid; justify-items:center; text-align:center; gap:1.4rem;
  padding:clamp(3.4rem,8vw,6rem) 0 clamp(2.4rem,5vw,3.6rem); }
.fd-hero::before{ content:""; position:absolute; inset:-2rem 0 0; background:var(--halo);
  pointer-events:none; z-index:-1; }
.fd-hero h1{ font-family:var(--display); font-size:clamp(2.5rem,6vw,4.2rem); font-weight:500;
  line-height:1.05; letter-spacing:-.015em; margin:0; max-width:14ch; text-wrap:balance; }
.fd-lede{ font-family:var(--serif); font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.6;
  color:var(--text-soft); max-width:30rem; margin:0; }
.fd-hero-art{ width:min(34rem,100%); height:auto; border-radius:14px; }
.fd-hero-cta{ margin-top:.4rem; }
.fd-hero-cta .launch-live, .fd-hero-cta .launch-prelaunch{ display:flex; gap:.9rem; flex-wrap:wrap;
  align-items:center; justify-content:center; }
/* ---- launch swap ----
   {{launchState}} and {{appStoreAttr}} resolve from the same app.toml fact, so wording and link
   flip together; the badge hides itself until its own store is live ({{iosBadgeState}}). */
[data-launch="prelaunch"] .launch-live{ display:none; }
[data-launch="live"] .launch-prelaunch{ display:none; }
/* A store state must beat every badge component (.fd-store, .btn.primary set their own display),
   or a store that is not live shows a dead badge: the Play badge did until 2026-09-28. */
[data-store-badge="prelaunch"], [data-store-badge="absent"]{ display:none !important; }
.fd-store{ display:inline-flex; align-items:center; gap:.7rem; text-align:left; padding:.6rem 1.15rem;
  border-radius:12px; background:var(--text); color:var(--bg); text-decoration:none;
  transition:transform .15s ease; }
.fd-store:hover{ color:var(--bg); transform:translateY(-1px); }
.fd-store small{ display:block; font-size:10px; font-weight:500; letter-spacing:.03em; line-height:1.15; }
.fd-store b{ display:block; font-size:16px; font-weight:650; line-height:1.15; }
.fd-coming{ font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--text); }
.fd-ghost{ display:inline-flex; align-items:center; padding:.6rem 1.25rem; border-radius:var(--radius-pill);
  border:1px solid var(--line); color:var(--text); font-size:.95rem; font-weight:600; text-decoration:none; }
.fd-ghost:hover{ color:var(--accent-text); }
.fd-hero-note{ font-size:.92rem; color:var(--text-soft); margin:0; }
.fd-hero-note b{ color:var(--text); }
.fd-hero .app-langs{ justify-content:center; margin-top:.2rem; }

/* ---- the one still: the shared .device frame, sized for a 46rem column ----
   The frame footprint is FIXED px (430px native x --dv-scale) while the column is fluid, so each
   band narrower than the footprint gets its own scale, measured at the band's tightest width
   (320px floor: 231px usable, so <= .53 incl. the 2px power nub; see site.css). */
.fd-still{ display:grid; justify-items:center; gap:1.1rem; margin:0; padding:0 0 clamp(2.4rem,5vw,3.6rem); }
.fd-still .device.dv-iphone{ --dv-scale:.7; --rot:0deg; }
.fd-still figcaption{ font-family:var(--serif); font-style:italic; font-size:.95rem;
  color:var(--text-soft); text-align:center; max-width:32rem; }

/* ---- three rows, hairlines, no devices ---- */
.fd-rows{ border-top:1px solid var(--line); }
.fd-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(1.2rem,4vw,2.6rem);
  align-items:start; padding:clamp(1.8rem,4vw,2.8rem) 0; border-bottom:1px solid var(--line); }
.fd-row h2{ font-family:var(--display); font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:500;
  line-height:1.15; letter-spacing:-.01em; margin:0; text-wrap:balance; }
.fd-row p{ margin:0; color:var(--text-soft); line-height:1.65; font-size:1.02rem; }

/* ---- one honest number ---- */
.fd-price{ display:grid; justify-items:center; text-align:center; gap:.5rem;
  padding:clamp(3rem,7vw,4.8rem) 0; border-bottom:1px solid var(--line); }
.fd-amount{ font-family:var(--display); font-size:clamp(3.2rem,8vw,4.6rem); font-weight:500;
  line-height:1; letter-spacing:-.02em; margin:.4rem 0 0; }
.fd-cadence{ color:var(--text-soft); margin:0; }
.fd-price-copy{ color:var(--text-soft); max-width:30rem; margin:.6rem 0 1rem; line-height:1.6; }
.fd-cta{ display:inline-flex; padding:.8rem 1.7rem; border-radius:var(--radius-pill); background:var(--accent);
  color:var(--accent-ink); font-weight:650; text-decoration:none; transition:transform .15s ease; }
.fd-cta:hover{ color:var(--accent-ink); transform:translateY(-1px); }

/* ---- before you start ---- */
.fd-faq{ padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(2rem,4vw,3rem); }
.fd-faq h2{ font-family:var(--display); font-size:clamp(1.6rem,2.8vw,2.1rem); font-weight:500;
  margin:0 0 .6rem; }
.fd-faq details{ border-bottom:1px solid var(--line); padding:1.1rem 0; }
.fd-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:baseline; gap:1rem; font-family:var(--display); font-size:1.18rem; color:var(--text); }
.fd-faq summary::-webkit-details-marker{ display:none; }
.fd-faq summary .pl{ color:var(--accent-text); font-weight:700; transition:transform .2s ease; flex:none; }
.fd-faq details[open] summary .pl{ transform:rotate(45deg); }
.fd-faq details p{ margin:.8rem 0 0; color:var(--text-soft); line-height:1.65; font-size:.98rem; }
.fd-more{ margin:1.4rem 0 0; }
.fd-more a{ color:var(--accent-text); font-weight:600; text-decoration:none; }
.fd-more a:hover{ color:var(--accent); }

/* ---- responsive ----
   No hamburger on this site: the shared .nav (site.css) wraps its links onto their own row
   below 860px instead of hiding them, so Features, FAQ and Support stay reachable from a phone. */
@media (max-width:640px){
  .fd-row{ grid-template-columns:minmax(0,1fr); gap:.6rem; }
}
@media (max-width:428px){
  .fd-still .device.dv-iphone{ --dv-scale:.62; }
}
@media (max-width:380px){
  .fd-still .device.dv-iphone{ --dv-scale:.53; }
  .fd-hero h1{ font-size:2.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .fd-store, .fd-cta{ transition:none; }
}

/* ============================================================================
   "Het uitvouwen" (owner brief 2026-09-29: unique, audience-built sites).
   Toldmark's people tell a memory out loud and keep it as text: intimate and unhurried, so the page is
   paper. The hero panorama is a folded leporello that the page unfolds; a line of voice breathes above
   the lede; every language is a ribbon bookmark. Scoped to .fd-* and the shell chrome.
   ============================================================================ */
:root{ --lamp:#e9a44c; --crease:#3a352d; }

/* ---- languages: ribbon bookmarks that hang from the top ---- */
.site-langs-wrap{ max-width:none; padding:0; position:relative; z-index:5; }
.site-langs{ max-width:72rem; margin-inline:auto; padding:0 clamp(1.1rem,4vw,2.5rem); gap:.55rem; justify-content:flex-end; flex-wrap:wrap; align-items:flex-start; }
.site-langs .sl-flag{ width:auto; height:auto; min-height:3.1rem; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.4rem; padding:.65rem 1rem 1.15rem; opacity:1;
  color:var(--text-soft); font:600 .84rem/1.1 var(--display); text-decoration:none; white-space:nowrap;
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 86%,var(--accent)));
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .55rem),0 100%); filter:drop-shadow(0 4px 3px #0002); transition:transform .25s, padding .25s; }
.site-langs .sl-flag::after{ content:attr(aria-label); position:static; width:auto; height:auto; background:none; }
.site-langs .sl-flag svg{ order:-1; width:24px; height:16px; border-radius:2px; box-shadow:0 0 0 1px #0002; }
.site-langs a.sl-flag:hover{ transform:translateY(4px); color:var(--text); }
.site-langs .sl-cur{ background:linear-gradient(180deg,#e8a64d,#c98530); color:#2a1806; padding-bottom:1.6rem; }
.app-langs{ margin-top:1.4rem; align-items:center; }
.app-langs-lead{ font:italic 500 1.05rem/1.2 var(--display); color:var(--accent-text); }
.fd-hero .app-langs .lang-flag{ width:auto; height:auto; overflow:visible; box-shadow:none; display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .8rem .3rem .55rem; border-radius:999px;
  background:color-mix(in srgb,var(--surface) 80%,transparent); border:1px solid var(--line); color:var(--text-soft); font:500 .84rem/1.1 var(--display); }
.fd-hero .app-langs .lang-flag::after{ content:attr(aria-label); }
.fd-hero .app-langs .lang-flag svg{ width:18px; height:12px; border-radius:2px; }

/* ---- the hero: lamplight, the voice, the unfolding panorama ---- */
.fd-hero::before{ inset:-8rem auto 0 50%; width:100vw; transform:translateX(-50%); background:radial-gradient(34rem 26rem at 78% 8%, color-mix(in srgb,var(--lamp) 26%,transparent), transparent 70%), radial-gradient(30rem 22rem at 6% 30%, color-mix(in srgb,var(--lamp) 10%,transparent), transparent 70%); }
body{ overflow-x:clip; }
.fd-hero h1{ font-size:clamp(2.7rem,6.6vw,4.9rem); line-height:1.02; letter-spacing:-.03em; font-weight:400; }
.fd-fold{ display:flex; overflow:clip; width:min(66rem,calc(100vw - 2*clamp(1.2rem,5vw,2rem))); aspect-ratio:16/8; justify-self:start; position:relative; left:50%; transform:translateX(-50%); perspective:1800px; margin-top:.4rem; filter:drop-shadow(0 30px 30px rgba(60,40,15,.28)); }
.fd-fold i{ position:relative; flex:1 1 0; display:block; background-repeat:no-repeat; border-radius:2px;
  transform:rotateY(0) scaleX(1); transform-origin:calc(50% + var(--k)*50%) 50%; transition:transform 1.5s cubic-bezier(.3,.8,.2,1) calc(var(--i)*70ms), margin 1.5s cubic-bezier(.3,.8,.2,1); }
.fd-fold i::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(50,30,10,calc(.28 - (var(--k) + 1)*.06)) 0, transparent 14%, transparent 86%, rgba(255,250,235,calc(.06 + (var(--k) + 1)*.05)) 100%); }
.fd-fold i:nth-child(odd)::after{ background:linear-gradient(270deg, rgba(50,30,10,.3) 0, transparent 14%, transparent 86%, rgba(255,250,235,.1) 100%); }
.fd-fold.is-folded i{ transform:rotateY(calc(var(--k)*58deg)) scaleX(.8); margin-inline:-.9%; }
.fd-wave{ display:flex; align-items:center; gap:4px; height:3.2rem; justify-self:center; }
.fd-wave i{ display:block; width:4px; height:calc(var(--h)*100%); min-height:4px; border-radius:3px; background:linear-gradient(180deg,var(--lamp),color-mix(in srgb,var(--lamp) 55%,#8a5a28)); opacity:.9; transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  .fd-wave i{ animation:fd-breathe 2.6s var(--d,0s) ease-in-out infinite; }
  @keyframes fd-breathe{ 50%{ transform:scaleY(.45); opacity:.6; } }
}
.fd-hero-note{ font-size:.92rem; }
.fd-store{ border-radius:999px; }

/* ---- the still: a page on the desk ---- */
.fd-still .device{ --rot:-2deg; filter:drop-shadow(0 30px 34px rgba(60,40,15,.32)); }
.fd-still{ position:relative; }
.fd-still::before{ content:""; position:absolute; inset:6% 14%; z-index:-1; border-radius:6px; background:linear-gradient(90deg,transparent 49.8%,#00000012 50%,transparent 50.4%), var(--surface); box-shadow:0 20px 40px -24px #0006; transform:rotate(1.4deg); }

/* ---- the three rows: panels with a ribbon marker ---- */
.fd-rows{ counter-reset:fd; }
.fd-row{ counter-increment:fd; position:relative; padding:1.6rem 1.6rem 1.5rem 4.4rem; margin-bottom:1rem; border-radius:6px; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 14px 26px -22px #0007; }
.fd-row::before{ content:counter(fd); position:absolute; left:1.4rem; top:0; width:1.7rem; padding:.7rem 0 1.1rem; text-align:center; font:600 .95rem/1 var(--display); color:#2a1806;
  background:linear-gradient(180deg,#e8a64d,#c98530); clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .5rem),0 100%); }
.fd-row h2{ font-weight:400; }
.fd-price{ border-radius:8px; }
@media (max-width:860px){
  .site-langs{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .site-langs::-webkit-scrollbar{ display:none; }
  .fd-row{ padding-left:3.4rem; }
}
.fd-hero{ grid-template-columns:minmax(0,1fr); }