@import url("tokens.generated.css");  /* MUST stay first — @import precedes all other rules */
/* ============================================================================
   martym.com — "a picture book you can walk into"
   docs/site.md §11 + Commercialization.dc.html rev 2
   ----------------------------------------------------------------------------
   LAWS (category research, docs/site.md):
   · LIGHT, always — sunlit cream + soft washes; night exists only INSIDE drawn
     book objects (the bedtime card), never as page chrome.
   · Warmth comes from the ART; the chrome stays soft and quiet.
   · Baloo 2 = the big friendly display voice; Lora = storytelling body and the
     one italic emotional line per section.
   · Coral = love + action (CTAs, hearts); amber = starlight; brand green/blue
     live inside drawn books and trust lines.
   · No internal credit units, no dark patterns, no fake urgency, no price in
     the hero.
   ==========================================================================*/

/* ---- self-hosted fonts (latin + latin-ext) — no external hosts, no IP leaks to Google (the
   site's privacy promise is real). Downloaded 2026-07-27 from Google Fonts (OFL).

   These are VARIABLE files, and the declarations used to lie about them (G-UI39): four faces
   were declared against two files — `baloo2-700` and `baloo2-800` are byte-identical, as are
   `lora-400-normal` and `lora-700-normal` — each with a SINGLE `font-weight` descriptor. A
   single value tells the browser the file supports exactly that weight, so which of the two
   identical files won, and at what wght, was left to interpretation. The wordmark is the one
   piece of type that may not be approximate.

   Declared ranges now match each file's real `wght` axis, verified with fontTools:
     Baloo 2  400-800 (variable)      Lora normal  400-700 (variable)
     Lora italic  400 (STATIC — no fvar, so a single value is correct here)
     Fraunces  500-700 of a 100-900 axis (a deliberate sub-range)
   The four duplicate files are deleted: 115 KB of payload that served nothing. ---- */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/baloo2-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/baloo2-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/fraunces-500-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/fraunces-500-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/lora-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/lora-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/lora-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/lora-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Colours and font stacks live in tokens.generated.css (imported at the top of this file),
   compiled from design/tokens.json. Fraunces = the editorial soft serif for big emotional
   statements (the buyer's voice); Baloo 2 = warmth ONLY where playfulness belongs: wordmark,
   CTAs, the kid's name, labels; Lora = the storytelling body. Do not declare a colour in this
   file — test_ui_tokens.py enforces it. What stays here is geometry, not palette. */
:root{
  --shadow-soft:0 24px 60px -30px rgba(90,70,40,.28);
  --shadow-lift:0 34px 80px -36px rgba(90,70,40,.38);
  --pad-band:clamp(64px,10vh,120px);
  --curve:clamp(30px,5vw,54px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--story);font-size:17.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- type ----------------------------------------------------------------- */
h1,h2,h3{font-family:var(--heading);font-weight:600;line-height:1.16;margin:0;letter-spacing:-.2px}
.h-display{font-family:var(--heading);font-weight:600;font-size:clamp(33px,5.6vw,62px);text-align:center;color:var(--ink);line-height:1.1}
.h-section{font-family:var(--heading);font-weight:600;font-size:clamp(26px,3.8vw,40px);text-align:center;color:var(--ink)}
.kicker{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;color:var(--coral);text-align:center;margin:0 0 12px;
}
.lede{font-size:clamp(16.5px,2vw,19.5px);color:var(--ink-2);max-width:58ch;margin:16px auto 0;text-align:center}
.calm{color:var(--green-deep);font-size:14.5px;font-weight:600;text-align:center;margin-top:18px;font-family:var(--story)}
.heart{color:var(--coral)}
.honesty{font-size:13px;color:var(--ink-3);text-align:center;margin-top:12px}
.whisper{font-family:var(--story);font-style:italic;color:var(--ink-2);text-align:center;font-size:clamp(17px,2.2vw,21px);max-width:52ch;margin:0 auto}

/* ---- bands: stacked rounded sheets ---------------------------------------- */
.band{padding:var(--pad-band) clamp(20px,5vw,48px);position:relative}
.band > .inner{max-width:1080px;margin:0 auto}
.sheet{border-radius:var(--curve) var(--curve) 0 0;margin-top:calc(var(--curve) * -1)}
.wash-cream{background:var(--cream)}
.wash-paper{background:var(--white)}
.wash-blush{background:linear-gradient(180deg,var(--blush) 0%,var(--cream) 100%)}
.wash-sky{background:linear-gradient(180deg,var(--sky) 0%,var(--cream) 100%)}
.wash-mint{background:linear-gradient(180deg,var(--mint) 0%,var(--cream) 100%)}
.wash-sun{background:linear-gradient(180deg,var(--sun) 0%,var(--cream) 100%)}
.wash-dawn{background:linear-gradient(175deg,var(--sun) 0%,var(--blush) 55%,var(--cream) 100%)}

/* ---- header ---------------------------------------------------------------- */
.site-head{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:10px;
  padding:18px clamp(20px,5vw,48px);
}
.site-head .mark{width:38px;height:38px;flex:none}
.wordmark{font-family:var(--display);font-weight:800;letter-spacing:-1px;font-size:24px;color:var(--ink);text-decoration:none}
.site-head .sp{flex:1}
.site-head nav a{
  color:var(--ink-2);text-decoration:none;font-size:15px;font-family:var(--display);
  font-weight:700;margin-left:22px;padding:10px 2px;
}
.site-head nav a:hover{color:var(--coral-deep)}
.site-head nav a.pill{
  background:var(--white);border:1.5px solid var(--line);border-radius:999px;
  padding:8px 18px;
}

/* the coral bookmark ribbon (scroll progress) */
.ribbonmark{
  position:fixed;top:0;right:clamp(18px,4vw,44px);width:12px;height:58px;z-index:9;
  background:var(--coral);clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);
  transform-origin:top;transform:scaleY(.25);transition:transform .15s linear;
  box-shadow:0 4px 10px -4px rgba(217,106,80,.5);pointer-events:none;
}

/* ---- buttons ---------------------------------------------------------------- */
.cta{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:17.5px;
  background:var(--coral-cta);color:var(--on-dark);border-radius:999px;padding:15px 34px;
  text-decoration:none;box-shadow:0 14px 30px -12px rgba(217,106,80,.55);
  transition:transform .15s,box-shadow .15s,background .15s;min-height:48px;
  letter-spacing:.2px;
}
.cta:hover{background:var(--coral-deep);transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(217,106,80,.6)}
.ctarow{text-align:center;margin-top:28px}
/* a quiet in-text handoff link (membership card, sign-in) — terracotta, never a button */
.tlink{display:inline-block;margin-top:10px;font-weight:700;font-size:14.5px;color:var(--coral);text-decoration:none}
.tlink:hover{color:var(--coral-deep);text-decoration:underline}

/* ---- floating whimsy (restrained: a few, never confetti) --------------------- */
.float-moon{position:absolute;width:clamp(56px,7vw,88px);opacity:.95}
.star{position:absolute;color:var(--amber);opacity:.8}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.js .drift{animation:drift 6s ease-in-out infinite}
.js .drift.slow{animation-duration:9s}

/* ---- hero -------------------------------------------------------------------- */
.hero{padding-top:calc(var(--pad-band) + 44px);overflow:hidden;text-align:center}
.hero .glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(760px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(242,200,121,.28) 0%,rgba(242,200,121,0) 62%);
}
.hero .float-moon{top:96px;right:9%}
.h-display .name-input{
  font-family:var(--display);font-weight:800;color:var(--coral-deep);
  background:rgba(255,255,255,.65);border:none;border-bottom:3.5px dashed var(--amber-deep);
  border-radius:14px 14px 0 0;
  font-size:inherit;line-height:1.1;text-align:center;letter-spacing:-.5px;
  width:7.5ch;min-width:5ch;max-width:12ch;padding:0 8px;caret-color:var(--coral);
}
.h-display .name-input::placeholder{color:var(--coral);opacity:.45;font-weight:700}
.h-display .name-input:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--coral)}
.js-name{font-family:var(--display);font-weight:700;color:var(--coral-deep)}

/* ---- the hero object: the book they will actually hold -------------------------
   Rev 3 (2026-07-28) replaces the flat open spread, which read as an app preview.
   The page's whole thesis now lives on one cover: TWO names — the kid's in the
   title, the parent's on the byline — and both are live inputs. A hardcover
   (spine, fore-edge page block, typeset title) flanked by the two pages a parent
   turns to first: the dedication and the contents.
   The two leaves are illustrative sample pages and are aria-hidden; the cover is
   NOT — its title is read and its byline is a labelled control. */
.bookstage{
  display:flex;justify-content:center;align-items:flex-start;
  margin:clamp(38px,6vh,54px) auto 0;position:relative;
  filter:drop-shadow(0 46px 40px rgba(90,70,40,.26));
}
/* --tx/--ty/--rot are read by the entrance keyframes too, so the resting angle is
   declared ONCE per leaf and the animation can never disagree with it. */
.bookstage .leaf{
  --rot:0deg; --ty:0px; --tx:0px;
  /* --tuck is how far the cover overlaps this leaf. The negative margin AND the
     compensating padding both derive from it, so they can never drift apart and
     leave the type stranded under the book. */
  --tuck:clamp(24px,2.8vw,36px);
  width:clamp(196px,26vw,286px);aspect-ratio:24/34;flex:none;position:relative;
  background:linear-gradient(168deg,var(--leaf-from) 0%,var(--leaf-to) 100%);border-radius:5px;
  padding:clamp(16px,2.4vw,28px) clamp(14px,2vw,22px);
  transform:rotate(var(--rot)) translate(0,var(--ty));
  /* The two solid offset shadows ARE the pages behind this one. A pseudo-element
     would be wrong: the leaf sets a z-index, so a negative-z-index child paints
     above the leaf's own background and flattens the paper gradient. A box-shadow
     always paints behind it. */
  box-shadow:
    2px 4px 0 0 var(--leaf-sheet-2),
    5px 9px 0 0 var(--leaf-sheet-3),
    7px 15px 22px -10px rgba(90,70,40,.3),
    0 18px 44px -22px rgba(90,70,40,.42),
    inset 0 0 0 1px rgba(90,70,40,.05);
}
.bookstage .leaf.left{
  --rot:-6.5deg;--ty:30px;--tx:64px;z-index:1;
  margin-right:calc(var(--tuck) * -1);padding-right:calc(var(--tuck) + 14px);
}
.bookstage .leaf.right{
  --rot:5.5deg;--ty:34px;--tx:-64px;z-index:2;
  margin-left:calc(var(--tuck) * -1);padding-left:calc(var(--tuck) + 14px);
}

/* the dedication page — where the parent's name belongs */
.bookstage .ded{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-family:var(--story);font-style:italic;color:var(--ink-2);
  font-size:clamp(11.5px,1.45vw,15.5px);line-height:2.05;
}
.bookstage .ded .tic{color:var(--amber-deep);font-style:normal;font-size:.8em;margin-bottom:1.3em}
.bookstage .ded .sig{margin-top:1.5em;font-size:1.06em;color:var(--ink)}

/* the contents page — the scale of a real book, the kid's name inside a chapter title */
.bookstage .toc{
  font-family:var(--story);color:var(--ink-2);display:flex;flex-direction:column;
  font-size:clamp(9.5px,1.2vw,12.5px);
}
.bookstage .toc .hd{
  font-family:var(--display);font-weight:700;font-size:.82em;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--amber-deep);text-align:center;margin:.6em 0 1.9em;
}
.bookstage .toc .row{display:flex;align-items:baseline;gap:7px;margin:.62em 0}
.bookstage .toc .no{font-family:var(--display);font-weight:700;font-size:.82em;color:var(--coral);flex:none;width:1.2em}
.bookstage .toc .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bookstage .toc .lead{flex:1;border-bottom:1.5px dotted var(--leader-dots);transform:translateY(-3px);min-width:10px}
.bookstage .toc .f{color:var(--ink-3);font-size:.9em;font-variant-numeric:tabular-nums}
.bookstage .toc .more{font-style:italic;color:var(--ink-3);text-align:center;margin-top:1.6em}

/* the hardcover itself */
.bookstage .hardcover{
  width:clamp(230px,32vw,330px);aspect-ratio:62/90;flex:none;position:relative;z-index:3;
  border-radius:7px 16px 16px 7px;overflow:hidden;background:var(--night);
  box-shadow:0 30px 70px -28px rgba(60,45,25,.55),0 0 0 1px rgba(43,58,82,.18);
}
.bookstage .hardcover .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bookstage .hardcover .spine{
  position:absolute;top:0;bottom:0;left:0;width:22px;pointer-events:none;
  background:linear-gradient(90deg,rgba(31,43,62,.42) 0%,rgba(31,43,62,.16) 55%,rgba(255,255,255,.14) 78%,rgba(31,43,62,.12) 100%);
}
.bookstage .hardcover .fore{ /* the fore-edge: this is what makes it read as bound */
  position:absolute;top:3px;bottom:3px;right:0;width:7px;pointer-events:none;
  border-radius:0 14px 14px 0;
  background:repeating-linear-gradient(180deg,var(--fore-edge) 0 2px,var(--fore-edge-2) 2px 3px);
  box-shadow:inset 2px 0 3px -1px rgba(60,45,25,.5);
}
/* The scrims are the COVER'S OWN printing — night stays inside the drawn object
   (spec §11 law) and the typeset title stays legible over any artwork. */
.bookstage .hardcover .scrim-t{
  position:absolute;left:0;right:0;top:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,43,62,.62) 0%,rgba(31,43,62,.28) 55%,rgba(31,43,62,0) 100%);
}
.bookstage .hardcover .scrim-b{
  position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;
  background:linear-gradient(0deg,rgba(31,43,62,.66) 0%,rgba(31,43,62,.3) 55%,rgba(31,43,62,0) 100%);
}
.bookstage .cv-title{
  position:absolute;top:6.5%;left:11%;right:11%;text-align:center;
  font-family:var(--heading);font-weight:640;font-size:clamp(20px,2.9vw,30px);line-height:1.22;
  color:var(--night-ink);letter-spacing:.2px;text-shadow:0 2px 14px rgba(31,43,62,.55);text-wrap:balance;
}
.bookstage .cv-title .nm{color:var(--amber)}
.bookstage .cv-by{
  position:absolute;left:8%;right:8%;bottom:11.5%;text-align:center;
  font-family:var(--story);font-style:italic;font-size:clamp(12px,1.5vw,15.5px);
  color:var(--night-ink-2);text-shadow:0 1px 8px rgba(31,43,62,.7);
}
.bookstage .author-input{
  font-family:var(--display);font-style:normal;font-weight:700;font-size:1.12em;
  color:var(--night-ink);background:none;border:none;border-bottom:2.5px dashed var(--amber);
  /* site.js re-sets width in px by MEASURING the text in this font (inputs don't auto-size,
     and `ch` — the width of a "0" — under-measures Baloo's wide bold letters, which used to
     clip the last one). The `width` below is only the no-JS default, deliberately roomy.
     max-width is 100% so the guard against a long name can never become a clip: at worst the
     byline wraps inside the cover, and `maxlength` already bounds the input. */
  text-align:center;width:7ch;max-width:100%;padding:0 4px;
  caret-color:var(--amber);text-shadow:0 1px 8px rgba(31,43,62,.7);
}
.bookstage .author-input::placeholder{color:var(--night-ink-2);opacity:.5}
.bookstage .author-input:focus{outline:none;border-bottom-style:solid}
.bookstage .author-input:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.bookstage .cv-pub{
  position:absolute;left:0;right:0;bottom:3.6%;display:flex;align-items:center;
  justify-content:center;gap:6px;color:rgba(243,234,214,.75);
  font-family:var(--display);font-weight:700;font-size:9px;letter-spacing:3px;
}
.bookstage .cv-pub svg{width:15px;height:9px;opacity:.85}

@keyframes book-rise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes leaf-tuck{
  from{opacity:0;transform:rotate(0deg) translate(var(--tx),var(--ty))}
  to{opacity:1;transform:rotate(var(--rot)) translate(0,var(--ty))}
}
.js .bookstage .hardcover{animation:book-rise .9s cubic-bezier(.22,.8,.3,1) both}
.js .bookstage .leaf{animation:leaf-tuck 1s cubic-bezier(.22,.8,.3,1) both}
.js .bookstage .leaf.left{animation-delay:.25s}
.js .bookstage .leaf.right{animation-delay:.35s}

/* the "these two fields are yours" nudge under the book */
.edithint{text-align:center;font-size:13px;color:var(--ink-3);margin-top:26px;font-style:italic}
.edithint .pen{color:var(--amber-deep);font-style:normal}

.trustrow{
  display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink-2);
}
.trustrow span{display:inline-flex;align-items:center;gap:7px}
.trustrow .dot{color:var(--amber-deep)}

/* ---- plates ------------------------------------------------------------------- */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:38px;align-items:start}
.plate{
  background:var(--white);border-radius:18px;padding:14px 14px 12px;
  box-shadow:var(--shadow-soft);transform:rotate(-1.4deg);
}
.plate:nth-child(2){transform:rotate(1.2deg) translateY(14px)}
.plate:nth-child(3){transform:rotate(-.6deg)}
.plate img{width:100%;height:auto;border-radius:10px;background:var(--cover-placeholder)} /* height:auto — the width/height ATTRS otherwise keep their pixel height and stretch */
.plate .cap{font-style:italic;font-size:14px;color:var(--ink-2);text-align:center;margin-top:11px;line-height:1.5}

/* ---- what a story can do: the growth themes ------------------------------------- */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.theme{background:var(--white);border-radius:20px;padding:24px 24px 20px;box-shadow:var(--shadow-soft);text-align:left}
.theme .tic{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--on-dark);margin-bottom:12px;
}
.theme:nth-child(6n+1) .tic{background:var(--night)}
.theme:nth-child(6n+2) .tic{background:var(--amber-badge)}
.theme:nth-child(6n+3) .tic{background:var(--green-deep)}
.theme:nth-child(6n+4) .tic{background:var(--blue-deep)}
.theme:nth-child(6n+5) .tic{background:var(--coral-cta)}
.theme:nth-child(6n) .tic{background:var(--green-deep)}
.theme h3{font-size:19px;margin-bottom:6px;letter-spacing:-.2px}
.theme p{margin:0;font-size:14.5px;color:var(--ink-2);font-family:var(--story);font-style:italic;line-height:1.65}

/* ---- how it works: the storybook path ------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;position:relative}
.step-v{
  background:var(--white);border-radius:20px;padding:24px 20px 20px;font-size:14.5px;
  line-height:1.6;box-shadow:var(--shadow-soft);position:relative;text-align:center;
}
.step-v .badge{
  width:44px;height:44px;border-radius:50%;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:19px;color:var(--on-dark);
  background:var(--blue-deep);
}
.step-v:nth-child(2) .badge{background:var(--green-deep)}
.step-v:nth-child(3) .badge{background:var(--amber-badge)}
.step-v.free .badge{background:var(--coral-cta)}
.step-v b{display:block;font-family:var(--display);font-weight:700;font-size:16.5px;margin:2px 0 6px;letter-spacing:-.2px}
.step-v .d{color:var(--ink-2);font-size:14px}
.step-v.free{box-shadow:0 0 0 2.5px var(--coral-soft),var(--shadow-soft)}
.step-v.free::after{
  content:"free";position:absolute;top:-12px;right:16px;
  font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:1px;
  text-transform:uppercase;background:var(--coral-cta);color:var(--on-dark);border-radius:999px;
  padding:4px 13px;box-shadow:0 6px 14px -6px rgba(217,106,80,.6);
}
:lang(pl) .step-v.free::after{content:"gratis"}

/* ---- the difference -------------------------------------------------------------- */
.diffcols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.diffcols .col{background:var(--white);border-radius:20px;padding:26px 28px;font-size:15.5px;line-height:1.7;box-shadow:var(--shadow-soft)}
.diffcols .col.us{box-shadow:0 0 0 2.5px var(--amber),var(--shadow-lift)}
.diffcols h3{font-size:20px;margin-bottom:10px;letter-spacing:-.3px}
.diffcols ul{margin:0;padding-left:2px;color:var(--ink-2);list-style:none}
.diffcols li{margin:8px 0;padding-left:26px;position:relative}
.diffcols .col li::before{content:"—";position:absolute;left:0;color:var(--ink-3)}
.diffcols .col.us li::before{content:"✦";color:var(--amber-deep)}

/* ---- pricing: three little books ---------------------------------------------------- */
.shelfrow{display:flex;justify-content:center;gap:clamp(18px,4vw,40px);align-items:flex-end;margin-top:40px}
.bk{
  width:clamp(104px,13vw,148px);height:206px;border:none;cursor:pointer;padding:0;
  border-radius:8px 14px 14px 8px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-family:var(--display);box-shadow:var(--shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease,opacity .2s;
}
.bk::before{ /* the cover's spine edge */
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2.5px;border-radius:3px;
  background:rgba(255,255,255,.65);
}
.bk .ic{font-size:30px;line-height:1}
.bk .t{font-weight:800;font-size:15.5px;color:var(--ink);letter-spacing:-.3px;padding:0 10px;text-align:center;line-height:1.2}
.bk .pr{
  font-weight:800;font-size:14px;color:var(--ink);background:rgba(255,255,255,.85);
  border-radius:999px;padding:3px 13px;margin-top:2px;
}
.bk.bedtime{background:linear-gradient(160deg,var(--sky-2),var(--sky))}
.bk.storybook{background:linear-gradient(160deg,var(--storybook-from),var(--sun));height:228px}
.bk.saga{background:linear-gradient(160deg,var(--mint-2),var(--mint));height:240px}
.bk .love{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.6px;
  text-transform:uppercase;background:var(--coral-cta);color:var(--on-dark);border-radius:999px;
  padding:4px 14px;box-shadow:0 6px 14px -6px rgba(217,106,80,.6);
}
.js .bk[aria-selected="true"]{transform:translateY(-14px);box-shadow:var(--shadow-lift)}
.js .shelfrow.picked .bk[aria-selected="false"]{opacity:.62}
.bk:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.plank{
  height:14px;border-radius:999px;max-width:660px;margin:2px auto 0;
  background:linear-gradient(180deg,var(--plank-from),var(--plank-to));
  box-shadow:0 14px 22px -12px rgba(90,70,40,.35);
}
.shelfcap{font-size:14.5px;color:var(--ink-2);text-align:center;margin-top:20px;font-style:italic}

.inside{
  max-width:540px;margin:30px auto 0;background:var(--white);
  border-radius:22px;padding:28px 30px;box-shadow:var(--shadow-lift);text-align:left;
}
.js .inside{display:none}
.js .inside.open{display:block}
.inside h3{font-size:23px;letter-spacing:-.3px}
.inside .ev{font-family:var(--story);font-style:italic;font-size:14px;color:var(--ink-3)}
.inside .p{font-family:var(--display);font-weight:800;font-size:32px;margin:8px 0 10px;color:var(--ink)}
.inside .p span{font-weight:600;font-size:14px;color:var(--ink-3);font-family:var(--story)}
.inside .p span[data-price]{font-weight:800;font-size:inherit;color:inherit;font-family:inherit}
.inside ul{margin:0 0 12px;padding-left:4px;font-size:15px;color:var(--ink-2);line-height:1.85;list-style:none}
.inside li{padding-left:26px;position:relative}
.inside li::before{content:"✦";position:absolute;left:2px;color:var(--amber-deep);font-size:12px}
.inside .voice{color:var(--ink-3);font-size:14px}
.inside .ctarow{text-align:center;margin-top:18px}

.smallrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.smallcard{background:var(--white);border-radius:18px;padding:20px 22px;font-size:14.5px;line-height:1.65;box-shadow:var(--shadow-soft)}
.smallcard b{font-family:var(--display);font-size:16px;display:block;margin-bottom:4px;letter-spacing:-.2px}
.vatline{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:24px}

/* ---- the bedtime card: night INSIDE the object ------------------------------------- */
.nightcard{
  max-width:920px;margin:38px auto 0;border-radius:28px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);
  color:var(--night-ink-2);padding:clamp(36px,6vw,60px) clamp(24px,6vw,64px);
  box-shadow:var(--shadow-lift);text-align:center;
}
.nightcard .float-moon{top:26px;right:7%}
.nightcard .star{opacity:.9}
.nightcard h3{font-size:clamp(23px,3.2vw,32px);color:var(--night-ink);letter-spacing:-.3px}
.nightcard p{color:var(--night-body);max-width:56ch;margin:14px auto 0;font-size:16px}
.nightcard .voiceprices{font-size:14px;color:var(--night-faint);margin-top:14px}
.nightcard .calm{color:var(--night-calm)}

/* ---- the promise (guarantee) --------------------------------------------------------- */
.promise{
  max-width:820px;margin:34px auto 0;background:var(--white);border-radius:26px;
  padding:clamp(28px,5vw,46px);text-align:center;box-shadow:0 0 0 2.5px var(--green-soft),var(--shadow-soft);
}
.promise h3{font-size:clamp(22px,3vw,30px);letter-spacing:-.3px}
.promise p{color:var(--ink-2);max-width:54ch;margin:12px auto 0;font-size:16px}
.promise .three{
  display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--display);font-weight:700;font-size:14px;color:var(--green-deep);
}

/* ---- parcel (the gift reveal) --------------------------------------------------------- */
.parcel{width:min(300px,74%);margin:36px auto;position:relative}
.parcel .box{
  aspect-ratio:1/.74;background:linear-gradient(160deg,var(--blush-2),var(--parcel-to));
  border-radius:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-lift);
}
.parcel .rib-v{position:absolute;top:0;bottom:0;left:calc(50% - 12px);width:24px;background:var(--coral);transition:transform .9s cubic-bezier(.4,.1,.3,1),opacity .9s}
.parcel .rib-h{position:absolute;left:0;right:0;top:calc(50% - 12px);height:24px;background:var(--coral);transition:transform .9s cubic-bezier(.4,.1,.3,1),opacity .9s}
.parcel .bow{
  position:absolute;top:calc(50% - 17px);left:calc(50% - 17px);width:34px;height:34px;
  border-radius:50%;border:7px solid var(--coral);transition:opacity .5s;
}
.parcel .reveal{
  position:absolute;inset:10% 12%;background:var(--white);border-radius:12px;
  padding:16px 18px;font-size:clamp(11px,1.8vw,14px);line-height:1.75;color:var(--ink-2);
  box-shadow:0 10px 22px -12px rgba(90,70,40,.35);opacity:0;transition:opacity .7s .4s;
  text-align:left;font-family:var(--story);
}
.parcel .reveal .k{font-family:var(--display);font-size:.72em;letter-spacing:1.8px;text-transform:uppercase;color:var(--amber-deep);font-weight:800}
.parcel.opening .rib-v,.no-js .parcel .rib-v{transform:rotate(24deg) translateX(150px);opacity:0}
.parcel.opening .rib-h,.no-js .parcel .rib-h{transform:rotate(-12deg) translateY(120px);opacity:0}
.parcel.opening .bow,.no-js .parcel .bow{opacity:0}
.parcel.opening .reveal,.no-js .parcel .reveal{opacity:1}

/* ---- ownership honesty ------------------------------------------------------------------ */
.own{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.own .c{border-radius:22px;padding:26px 28px;font-size:15.5px;line-height:1.7;background:var(--white);box-shadow:var(--shadow-soft)}
.own .always{box-shadow:0 0 0 2.5px var(--green-soft),var(--shadow-soft);background:linear-gradient(180deg,var(--promise-from),var(--white))}
.own h3{font-size:19px;margin-bottom:8px;letter-spacing:-.3px}

/* ---- the two memberships ------------------------------------------------------------------
   Two cards, side by side, Premium quietly favoured by a ring rather than by shouting — the
   category is a keepsake, not a SaaS pricing table. Geometry only: every colour is a token
   (test_ui_tokens.py enforces it). */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;align-items:start}
.plan{
  position:relative;border-radius:22px;padding:26px 28px;background:var(--white);
  box-shadow:var(--shadow-soft);font-size:15px;line-height:1.7;
}
.plan.favoured{box-shadow:0 0 0 2.5px var(--amber),var(--shadow-lift)}
.plan .tag{
  position:absolute;top:-11px;right:22px;background:var(--amber);color:var(--amber-badge);
  font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.6px;
  text-transform:uppercase;border-radius:999px;padding:3px 11px;
}
.plan h3{font-family:var(--display);font-size:20px;margin:0 0 2px;letter-spacing:-.3px}
.plan .amt{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.1;color:var(--ink)}
.plan .amt small{font-family:var(--story);font-weight:400;font-size:15px;color:var(--ink-3)}
.plan .yr{font-size:13px;color:var(--ink-3);margin-top:2px}
.plan ul{list-style:none;padding:0;margin:16px 0 0}
.plan li{position:relative;padding-left:24px;margin-bottom:7px}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--green-deep);font-weight:700}
.plan li.off{color:var(--ink-3)}
.plan li.off::before{content:"·";color:var(--ink-3)}
@media(max-width:760px){.plans{grid-template-columns:1fr}}

/* the Library counter — a promise until it is a number, never "0 books" */
.libcount{
  display:inline-block;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,5vw,46px);color:var(--green-deep);line-height:1.1;
}

/* ---- czytelnia covers --------------------------------------------------------------------- */
.covers{display:flex;justify-content:center;gap:22px;margin-top:34px;flex-wrap:wrap}
.cover{
  width:140px;aspect-ratio:62/86;border-radius:10px;overflow:hidden;position:relative;
  box-shadow:var(--shadow-soft);background:var(--cover-placeholder);transform:rotate(-2deg);
}
.cover:nth-child(2){transform:rotate(1.5deg) translateY(8px)}
.cover:nth-child(3){transform:rotate(-1deg) translateY(-4px)}
.cover:nth-child(4){transform:rotate(2.2deg) translateY(6px)}
.cover img{width:100%;height:100%;object-fit:cover}

/* ---- faq ------------------------------------------------------------------------------------ */
.faq{max-width:760px;margin:34px auto 0}
.faq details{
  background:var(--white);border-radius:16px;box-shadow:var(--shadow-soft);
  padding:4px 22px;margin-bottom:12px;
}
.faq summary{
  font-family:var(--display);font-weight:700;font-size:16.5px;cursor:pointer;
  padding:16px 2px;list-style:none;display:flex;align-items:center;gap:12px;min-height:48px;
  letter-spacing:-.2px;
}
.faq summary::before{content:"✦";color:var(--amber-deep);font-size:13px;flex:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:0 0 18px 27px;color:var(--ink-2);font-size:15px}

/* ---- closing + footer (light, warm) ---------------------------------------------------------- */
.closing{text-align:center}
.foot{
  border-top:1.5px dashed var(--line);margin-top:calc(var(--pad-band) * .8);
  padding-top:42px;display:grid;grid-template-columns:1.4fr 1fr;gap:34px;
  font-size:14.5px;color:var(--ink-2);text-align:left;
}
.foot .founder{font-style:italic;line-height:1.8;max-width:52ch}
.foot .links a{display:block;color:var(--ink-2);text-decoration:none;padding:6px 0;font-family:var(--display);font-weight:600;font-size:14px}
.foot .links a:hover{color:var(--coral-deep)}
.foot .legalnote{grid-column:1/-1;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:18px;margin-top:8px}

/* ---- legal documents (terms · privacy) -----------------------------------------------------------
   A contract has to be CITABLE: clause numbers are literal text (never CSS counters), because a
   counter vanishes the moment anyone copies a clause into an email or a court filing. */
.legaldoc{max-width:780px;margin:0 auto;color:var(--ink-2)}
.legaldoc h2{
  font-family:var(--heading);font-weight:600;font-size:21px;color:var(--ink);
  margin:42px 0 10px;letter-spacing:-.2px;scroll-margin-top:20px;
}
.legaldoc h3{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--ink);margin:22px 0 4px;letter-spacing:-.1px}
.legaldoc p,.legaldoc li{font-size:15px;line-height:1.78}
.legaldoc p{margin:10px 0}
.legaldoc ul,.legaldoc ol{margin:8px 0;padding-left:24px}
.legaldoc li{margin:5px 0}
.legaldoc a{color:var(--coral-deep)}
.legaldoc b,.legaldoc strong{color:var(--ink)}
.legaldoc .cl{color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:700;margin-right:5px}
.legaldoc dfn{font-style:normal;font-weight:700;color:var(--ink)}
.legaldoc .cite{font-size:13.5px;color:var(--ink-3)}

/* the identity block — statutory seller information (art. 12 u.p.k. / art. 8 UŚUDE) */
.legalmeta{
  background:var(--cream-2);border-radius:16px;padding:20px 24px;margin:0 0 8px;
  font-size:14.5px;line-height:1.7;
}
.legalmeta dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0}
.legalmeta dt{font-family:var(--display);font-weight:700;color:var(--ink);font-size:13.5px}
.legalmeta dd{margin:0}

/* the orientation summary — deliberately marked as NOT part of the agreement, so a warm
   paraphrase can never be argued to contradict an operative clause. */
.legalsummary{
  background:var(--green-soft);border-radius:18px;padding:22px 26px;margin:26px 0 0;
  font-size:15px;line-height:1.7;
}
.legalsummary h2{margin-top:0;font-size:19px}
.legalsummary .disclaim{font-size:13px;color:var(--green-deep);font-weight:600;margin-bottom:2px}

.legaltoc{
  background:var(--white);border:1.5px solid var(--line);border-radius:16px;
  padding:18px 24px;margin:30px 0 0;font-size:14px;columns:2;column-gap:34px;
}
.legaltoc a{display:block;padding:3px 0;text-decoration:none;color:var(--ink-2);break-inside:avoid}
.legaltoc a:hover{color:var(--coral-deep)}

/* Unfilled statutory contact fields. LOUD on purpose: the legal pages stay noindex until every
   publication gate is closed. At present this style marks the missing monitored telephone. */
.fill{
  background:var(--gap-wash);color:var(--coral-deep);font-weight:700;
  border-bottom:2px dashed var(--coral);padding:0 4px;border-radius:4px;
}
.legalgap{
  background:var(--blush);border:2px dashed var(--coral);border-radius:16px;
  padding:18px 22px;margin:26px 0;font-size:14.5px;line-height:1.7;color:var(--coral-deep);
}
.legalgap b{color:var(--coral-deep)}

.legalannex{border-top:1.5px dashed var(--line);margin-top:44px;padding-top:26px}

@media(max-width:640px){ .legaltoc{columns:1} }
/* the identity block stacks rather than squeezing values into a narrow second column —
   a legal name or a registry entry is long, and it must stay readable on a phone */
@media(max-width:520px){
  .legalmeta dl{grid-template-columns:1fr;gap:0}
  .legalmeta dt{margin-top:12px}
  .legalmeta dt:first-child{margin-top:0}
}

/* ---- subpages (pricing/legal) ------------------------------------------------------------------ */
.subhero{padding-top:calc(72px + 48px);padding-bottom:44px;text-align:center}
.subhero h1{font-family:var(--heading);font-weight:600;font-size:clamp(30px,4.6vw,48px);letter-spacing:-.2px}
.prose{max-width:720px;margin:0 auto;color:var(--ink-2)}
.prose h2{font-family:var(--heading);font-weight:600;font-size:23px;margin:38px 0 10px;color:var(--ink);letter-spacing:-.2px}
.prose p,.prose li{font-size:15.5px}
.prose a{color:var(--coral-deep)}

/* ---- responsive ---------------------------------------------------------------------------------
   Four verified classes (spec §12): mobile 360–430 · tablet 768–1024 · laptop/regular
   1280–1536 · big screens 1600+. Washes stretch full-bleed at any width; content column
   widens gently on big screens so the page never feels like a letter in an envelope. */
@media(min-width:1600px){
  .band > .inner{max-width:1200px}
  body{font-size:18.5px}
  .bookstage .hardcover{width:392px}
  .bookstage .leaf{width:280px}
  .hero .glow{width:min(920px,80vw)}
  .plates{gap:38px}
  .nightcard{max-width:1000px}
  .promise{max-width:900px}
}
@media(max-width:920px){
  .plates{grid-template-columns:1fr 1fr}
  .plates .plate:last-child{grid-column:1/-1;max-width:52%;margin:0 auto}
  .steps{grid-template-columns:1fr 1fr}
  .themes{grid-template-columns:1fr 1fr}
  .smallrow{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* the cover takes the full width and the two leaves sit beneath it as a pair —
     grid (not flex-wrap) so the span is explicit and can't reflow unpredictably */
  /* order:-1 puts the cover in row 1 even though a leaf comes first in the DOM —
     without it grid auto-places the dedication ABOVE the book. */
  .bookstage{display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:start}
  .bookstage .hardcover{order:-1;grid-column:1/-1;width:min(300px,78vw)}
  /* nothing overlaps the cover here, so the tuck shrinks to the leaves' own overlap */
  .bookstage .leaf{--tuck:22px;width:min(46vw,190px);margin-top:24px}
  .bookstage .leaf.left{--rot:-5deg;--ty:0px;--tx:40px;justify-self:end}
  .bookstage .leaf.right{--rot:4.5deg;--ty:10px;--tx:-40px;justify-self:start}
  .bookstage .toc .lead{display:none} /* the dotted leader costs room the titles need */
  .plates{grid-template-columns:1fr}
  .plates .plate,.plates .plate:nth-child(2),.plates .plate:nth-child(3){transform:none;max-width:none}
  .steps{grid-template-columns:1fr}
  .themes{grid-template-columns:1fr}
  .diffcols,.own{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .site-head nav a{margin-left:12px;font-size:14px}
  .hero .float-moon{top:84px;right:5%}
  .bk{height:180px}
  .bk.storybook{height:198px}
  .bk.saga{height:206px}
  .bk .ic{font-size:24px}
  .bk .t{font-size:13px}
  .trustrow{gap:14px;font-size:12.5px}
}

/* ---- reduced motion -------------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* the book needs no restore rule: every resting transform is declared on the
     element itself, so killing the animation lands it exactly where it belongs. */
}

/* ---- skip link (G-UI15) ---------------------------------------------------------------
   Not one of the nineteen pages had a skip link or a <main>, so every keyboard visit began by
   tabbing the header. Off-screen until focused, then it lands where it says it will. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--white);color:var(--coral-deep);font-family:var(--display);font-weight:700;
  padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none;
  box-shadow:var(--shadow-soft);
}
.skip:focus{left:0}
/* ---- focus (G-UI14) -------------------------------------------------------------------
   The site had exactly two focus rules (the pricing books and the cover byline). Everything
   else — every nav link, every CTA, every FAQ summary — showed nothing at all. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--coral);outline-offset:3px;border-radius:4px;
}

/* ---- the cookie table (docs/google-analytics.md AN1, G-AN10) ---------------------------
   The privacy notice's cookie table. It exists because a consent gate without an itemised
   table is not informed consent — the visitor has to be able to see WHAT is stored, by whom,
   for how long, and whether it needed their agreement.
   ⚠️ It scrolls inside its own box rather than widening the page: five columns of legal prose
   on a 360px phone is the one table on this site that cannot be made to fit, and a body that
   scrolls sideways breaks every other page's layout to fix one. */
.cookietable{
  width:100%;border-collapse:collapse;margin:14px 0 4px;font-size:14px;
  color:var(--ink-2);display:block;overflow-x:auto;
}
.cookietable th,.cookietable td{
  border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;
}
.cookietable th{font-family:var(--display);font-weight:600;color:var(--ink);white-space:nowrap}
.cookietable code{font-size:.92em;word-break:break-word}