/* KönyvKlub / BookBase website. Light only.

   Look: the site's own layout (owner, 2026-10-23) — panels, real app screens in phone frames, Dela Gothic One
   titles, gummy buttons with their shelf — painted only in the app's colour roles (owner, 2026-10-25).
   Held to the app's HIG rulebook (bookbase-app/docs/hig/RULES.md) where it applies to a web page:
   - the app's tokens: brand honey #F2A900 with its #C28700 shelf (DL-194), Tailwind zinc ink;
   - Dela Gothic One on titles only, the system face (SF Pro / Roboto) for all other text, body 17 px (R-4.1–4.3);
   - one filled button per view; secondary buttons outlined; tappable text in a brand colour (R-7.1, R-7.5);
   - hit targets of at least 44 px, focus rings, reduced motion, text contrast ≥ 4.5:1 for body copy (R-3.4, R-12);
   - the stock iOS segmented control for Listen / Read (R-2.3);
   - Font Awesome glyphs from the app (D9), via partials/icons.html. */

@font-face { font-family: 'Dela Gothic One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dela-gothic-one-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Dela Gothic One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/dela-gothic-one-400-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; }


/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* The app's colour roles, light appearance (bookbase-app design/tokens/design-system.tokens.json).
     Nothing on this page is painted outside these. */
  color-scheme: light;
  --bg: #f4f4f5;              /* surfacePage */
  --card: #ffffff;            /* surfaceDefault */
  --bg-tint: #e4e4e7;         /* surfaceDisabled: a quiet well */
  --ink: #09090b;             /* textPrimary */
  --ink-2: #3f3f47;           /* textSecondary */
  --ink-3: #52525c;           /* textTertiary */
  --ink-4: #9f9fa9;           /* textDisabled */
  --line: rgba(63, 63, 71, .29); /* separator */
  --line-strong: #d4d4d8;     /* borderDefault */
  --fill: rgba(113, 113, 123, .2); /* fill */
  --brand: #f2a900;           /* actionPrimaryBg / surfaceBrand / borderBrand (DL-194) */
  --brand-ink: #18181b;       /* textOnBrand */
  --shelf-brand: #c28700;     /* shelfBrand */
  --shelf: #9f9fa9;           /* shelfNeutral */
  --brand-text: var(--ink);   /* tappable text: ink, with a thin honey underline (--hl) (owner 2026-11-03, after a dark
                                 amber, a blue and a highlighter were tried); on the dark grounds it is the honey itself */
  --hl: var(--brand);         /* the underline under tappable text */
  --brand-subtle: rgba(242, 169, 0, .18); /* surfaceBrandSubtle */
  --pale: color-mix(in srgb, var(--brand) 32%, var(--card)); /* the pale honey: pale stickers, today on the trial timeline */
  --success: #00a63e;         /* borderSuccess */
  --success-ink: #008236;     /* textSuccess */
  --success-subtle: rgba(0, 201, 80, .14); /* surfaceSuccessSubtle */
  --danger: #e7000b;          /* borderDanger */
  --danger-ink: #c10007;      /* textDanger */
  --danger-subtle: rgba(251, 44, 54, .12); /* surfaceDangerSubtle */
  /* the app's dark appearance, for the few dark blocks (player, calculator, footer) */
  --d-page: #09090b; --d-card: #18181b; --d-hover: #27272a; --d-border: #3f3f47;
  --d-ink: #fafafa; --d-ink-2: #d4d4d8; --d-ink-3: #9f9fa9;
  /* cards are outlined, never blurred (AppCard); only book covers keep a real shadow */
  --shadow-card: 0 0 0 0 transparent;
  --shadow-cover: 0 1px 1px rgba(9, 9, 11, .08), 0 12px 24px -14px rgba(9, 9, 11, .5);

  --f-display: 'Dela Gothic One', ui-sans-serif, system-ui, sans-serif;
  --f-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, Roboto, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-read: 'Iowan Old Style', 'Charter', 'Sitka Text', Cambria, Georgia, serif;

  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 28px; --r-pill: 100px;
  --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --region: clamp(56px, 8vw, 104px);
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --top-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* nothing may push the page sideways on a phone, not even a sticker while it is put down (it starts larger and tilted) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
/* icons are sized by font-size; a map's drawing surface (Leaflet sets its own width/height) is left alone */
svg:where(:not(.leaflet-container svg, .kk-note svg)) { width: 1em; height: 1em; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
mark { color: inherit; background: none; }
/* the focus ring is ink; on the dark grounds (the footer, the dark sections) --brand-text is the honey, which
   stands out there */
:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand-subtle); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Type */
.display, .h1, .h2, .h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: -.012em; text-wrap: balance; }
.display { font-size: clamp(2.4rem, min(5vw, 8vh), 4.4rem); line-height: 1.04; }
.h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.06; }
/* a single long word (Ügyfélszolgálat, KönyvKlubban) breaks rather than running off a narrow phone */
.display, .h1, .h2, .h3 { overflow-wrap: break-word; }
@media (max-width: 360px) { .h1 { font-size: 1.85rem; } }
.h2 { font-size: clamp(1.85rem, 3.3vw, 2.75rem); line-height: 1.1; }
.h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: 0; }
.h4 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.22rem); line-height: 1.6; color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.fine { font-size: .8125rem; color: var(--ink-3); }
/* a thing to know before you act: the honey wash, ink text and the info glyph */
.note { display: flex; gap: 10px; align-items: flex-start; width: fit-content; max-width: 100%; padding: 12px 16px; border-radius: 14px;
  background: var(--brand-subtle); color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.note svg { font-size: 18px; margin-top: .12em; }
/* Tappable text is underlined in honey, a thin line a little below the letters (it follows the words across lines
   and leaves an icon beside them bare); under the pointer the line turns ink */
:is(.link, .prose a, .doc a, .tbtn, .crumbs a, .toc a:hover, .bcard:hover .bcard__t) {
  text-decoration: underline var(--hl) 2px; text-underline-offset: 4px; }
:is(.link, .prose a, .doc a, .tbtn, .crumbs a):hover { text-decoration-color: currentColor; }
.link { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-weight: 700; color: var(--brand-text); }
.link svg { font-size: .8em; transition: transform .25s var(--ease); }
.link:hover svg { transform: translateX(3px); }
.prose a, .doc a { color: var(--brand-text); font-weight: 600; }

/* ── Buttons: gummy, with the 4 pt shelf (the app's Button system) ──── */
.btn { --lip: 4px; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px; margin-bottom: var(--lip);
  border: 0; border-radius: 16px; background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 1.0625rem; white-space: nowrap;
  box-shadow: 0 var(--lip) 0 var(--shelf-brand); transition: transform .12s, box-shadow .12s, filter .2s; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--shelf-brand); }
.btn svg { font-size: 1rem; }
.btn--sm { --lip: 3px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: .9375rem; }
.btn--ghost { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset, 0 var(--lip) 0 var(--line-strong); }
.btn--ghost:hover { filter: none; background: var(--bg-tint); }
.btn--ghost:active { box-shadow: 0 0 0 1px var(--line-strong) inset, 0 0 0 var(--line-strong); }
.tbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--brand-text); font-weight: 700; }
.tbtn svg { font-size: .85em; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 14px;
  background: #000; color: #fff; box-shadow: 0 0 0 1px var(--d-hover) inset, 0 3px 0 var(--d-hover); transition: transform .12s, box-shadow .12s, background-color .2s; }
.store:hover { background: var(--d-card); }
.store:active { transform: translateY(3px); box-shadow: 0 0 0 1px var(--d-hover) inset, 0 0 0 var(--d-hover); }
.store svg { font-size: 24px; }
.store span { display: flex; flex-direction: column; line-height: 1.1; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.store small { font-size: .6875rem; font-weight: 500; opacity: .8; letter-spacing: 0; }

/* Segmented control: the stock iOS look (R-2.3) */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, .12); max-width: 100%; }
/* the segments and the topic tags keep their look; an invisible margin makes each one a 44 px target */
.seg [role="tab"], .seg [role="radio"], .tag { position: relative; }
.seg [role="tab"]::after, .seg [role="radio"]::after, .tag::after { content: ""; position: absolute; inset: -4px 0; }
.seg [role="tab"], .seg [role="radio"] { min-height: 36px; padding: 0 18px; border: 0; border-radius: 7px; background: transparent; font-size: .9375rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.seg [aria-selected="true"], .seg [aria-checked="true"] { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .04); }

/* ── Header ─────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 50; height: var(--top-h);
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.is-scrolled { border-bottom-color: var(--line); }
.top__in { height: 100%; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--f-display); font-size: 1.22rem; letter-spacing: -.01em; }
.brand img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line-strong); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 600; font-size: .9375rem; color: var(--ink-2); transition: color .2s, background-color .2s; }
/* a text link turns blue under the pointer; the page you are on stays ink on its grey well */
.nav a:hover { color: var(--ink); background: var(--fill); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--fill); }
.nav__foot { display: none; }
.top__end { display: flex; align-items: center; gap: 12px; }
.top__end .btn { margin-bottom: 3px; }
.lang { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .9375rem; color: var(--ink-2); }
.lang--short { justify-content: center; min-width: 44px; padding: 0 8px; border-radius: 10px; }
.lang--short:hover { background: var(--fill); color: var(--ink); }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; place-items: center; }
.burger svg { font-size: 22px; }
@media (max-width: 980px) {
  .burger { display: grid; }
  /* the menu leaves the row for its panel, so the end group takes the right edge itself */
  .top__end { margin-left: auto; }
  .lang--short { display: none; }
  .nav { position: fixed; inset: var(--top-h) 0 auto 0; margin: 0; padding: 12px var(--gutter) 24px; background: var(--bg);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { min-height: 52px; padding: 0 4px; font-size: 1.125rem; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav a:hover, .nav a[aria-current="page"] { background: none; }
  .nav__foot { display: block; padding-top: 16px; }
}
@media (max-width: 400px) { .top__end .btn { display: none; } }

/* ── Sections ───────────────────────────────────────────────────────── */
.sec { padding: clamp(28px, 4vw, 48px) 0; }
.sec--flush { padding: clamp(56px, 8vw, 104px) 0; }
.sec__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); display: grid; gap: 16px; justify-items: start; }
.sec__head--center { justify-items: center; text-align: center; margin-inline: auto; }
.sec__head--center .lead { margin-inline: auto; }
.sec__more { display: flex; justify-content: center; margin-top: 40px; }
/* Section grounds, for rhythm: the page grey (surfacePage), white (surfaceDefault), and the app's dark page */
.sec--white { background: var(--card); }
.sec--dark { background: var(--d-page); color: var(--d-ink); }
/* on the dark ground the bright honey is the readable amber */
:is(.sec--dark, .foot) { --brand-text: var(--brand); --hl: transparent; }
/* a warm ground: the app's surfaceBrandSubtle over the page, so the light sections are not all white */
.sec--warm { background: linear-gradient(var(--brand-subtle), var(--brand-subtle)) var(--bg); }
/* the honey ground: the brand yellow, edge to edge */
.sec--honey { background: var(--brand); color: var(--brand-ink); }
/* Comic-print halftone on the yellow grounds: a grid of dots, thick in two opposite corners and fading out
   towards the middle, like the shading of a comic panel. Behind the content (and the pipe); the dot colours are
   the honey roles — shelfBrand on the honey, the brand itself on the light honey. */
.sec--warm, .sec--honey, .final, .phead, .dl, .blog { position: relative; }
.sec--warm::before, .sec--honey::before, .final::before, .phead::before, .dl::before, .blog::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, var(--dot) 0 var(--dot-r), transparent calc(var(--dot-r) + .6px)) 0 0 / var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 0 0, #000 25%, transparent 80%), radial-gradient(ellipse 75% 90% at 100% 100%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 90% at 0 0, #000 25%, transparent 80%), radial-gradient(ellipse 75% 90% at 100% 100%, #000 25%, transparent 80%); }
.sec--warm, .phead, .dl, .blog { --dot: rgba(242, 169, 0, .5); --dot-r: 2.6px; --dot-gap: 18px; }
.sec--honey, .final { --dot: rgba(194, 135, 0, .75); --dot-r: 3.6px; --dot-gap: 20px; }
.final > *, .phead > *, .dl > *, .blog > * { position: relative; z-index: 1; }
/* Two light-honey sections in a row read as one ground: the second mirrors its dots (top right, bottom left), so the
   first's bottom-right shading runs on into it, and the first's grid is laid from its bottom edge so the rows carry
   across the seam at the same pitch. */
.sec--warm:has(+ .sec--warm)::before { background-position: 0 100%; }
.sec--warm + .sec--warm::before {
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 100% 0, #000 25%, transparent 80%), radial-gradient(ellipse 75% 90% at 0 100%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 90% at 100% 0, #000 25%, transparent 80%), radial-gradient(ellipse 75% 90% at 0 100%, #000 25%, transparent 80%); }
.sec--honey .eyebrow { color: var(--brand-ink); }
.sec--honey .lead { color: var(--brand-ink); }
.sec--dark .h2 { color: var(--d-ink); }
.sec--dark .lead { color: var(--d-ink-2); }
/* the calculator needs no card of its own on the dark ground */
.sec--dark .timecalc { background: none; padding: 0; border-radius: 0; }
.eyebrow { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
:is(.sec--dark, .foot) .eyebrow { color: var(--brand); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding: clamp(20px, 4vw, 48px) 0 clamp(24px, 3vw, 40px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero__copy { display: grid; gap: 22px; justify-items: start; }
.hero__title { font-size: clamp(2.2rem, min(3.6vw, 7vh), 3.4rem); }
.hero__lead { max-width: 34em; }
/* The highlighter: the brand marker the app's reader draws under the narrated words, swept in once on load */
.hl { background: linear-gradient(var(--brand), var(--brand)) no-repeat 0 88% / 100% 42%; padding: 0 .06em; margin: 0 -.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: sweep .9s var(--ease) .3s both; }
@keyframes sweep { from { background-size: 0% 42%; } }

.phone { position: relative; border-radius: 46px; padding: 9px; background: #0b0b0d; box-shadow: 0 0 0 1.5px #3a3a40 inset, 0 2px 0 #000, 0 40px 70px -24px rgba(9, 9, 11, .6); }
.phone::before { content: ""; position: absolute; top: 19px; left: 50%; translate: -50% 0; width: 30%; height: 20px; border-radius: 12px; background: #000; z-index: 1; }
.phone img { width: 100%; height: auto; aspect-ratio: 540 / 1140; object-fit: cover; border-radius: 38px; display: block; }

.stars { display: inline-flex; gap: 1px; color: var(--brand); font-size: 13px; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* ── The lab look (after revenuemedialab.com, in the app's colours and Dela Gothic One) ─────────────────
   A hand-drawn flask distils books; a honey pipe leaves it and runs down the page through the steps and
   into three tubes of results. Ink outlines on the drawn things. */
:root { --pipe: 12px; --pipe-x: 24px; --ink-line: 2.5px solid var(--ink); }

.hero { --hg: clamp(32px, 6vw, 80px); padding-bottom: 0; }
.hero__grid { gap: var(--hg); }
.hero__title { font-size: clamp(2.4rem, min(4vw, 8vh), 3.9rem); }

/* the flask */
.flask { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.flask__covers { display: flex; justify-content: center; margin-bottom: -18px; z-index: 3; }
.flask__covers img { width: 58px; height: 87px; object-fit: cover; border-radius: 3px 5px 5px 3px; box-shadow: var(--shadow-cover); margin: 0 -6px; }
.flask__covers img:nth-child(1) { rotate: -12deg; translate: 0 10px; } .flask__covers img:nth-child(2) { z-index: 1; } .flask__covers img:nth-child(3) { rotate: 12deg; translate: 0 10px; }
.flask__neck { width: 72px; height: 96px; border: var(--ink-line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--card); position: relative; z-index: 2; margin-bottom: -3px; }
.flask__bulb { position: relative; width: min(380px, 84%); aspect-ratio: 1; border: var(--ink-line); border-radius: 50%; background: var(--card); }
/* the round glass clips the honey (the idea notes sit beside it, so they can stick out past its edge); the honey is
   one block (a darker body, a lighter top, the ink surface line) that only ever slides up and down — filling on load,
   draining as you scroll (--drain, site.js) — so it moves on the compositor and never has to be repainted */
.flask__liquid { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.flask__honey { position: absolute; left: 0; right: 0; bottom: 0; height: 82%; border-top: 2.5px solid var(--ink); will-change: transform;
  background: linear-gradient(to top, var(--brand) 72%, color-mix(in srgb, var(--brand) 55%, #fff) 72%); translate: 0 calc(var(--drain, 0) * 100%); }
.flask__bulb::after { content: ""; position: absolute; left: 13%; top: 30%; width: 7%; height: 26%; border-radius: 20px; background: rgba(255, 255, 255, .7); }
.flask__stand { width: 46%; height: 16px; border-radius: 8px; background: var(--ink); margin-top: 8px; }
.flask__tap { width: 22px; height: 26px; border: var(--ink-line); border-top: 0; background: var(--card); }


/* The hero plays once on load: the books drop in above the flask, then the bulb fills from the bottom, then
   the ideas surface. Scrolling then drains the flask into the pipe (site.js). Reduce Motion: it is simply full.
   Timeline (s): books 0–.6 · fill .45–1.3 · notes 1.15–1.65 (shortened 2026-11-03: it was done only at 2.9 s) */
.flask__covers img { animation: bookIn .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.flask__covers img:nth-child(2) { animation-delay: .07s; } .flask__covers img:nth-child(3) { animation-delay: .14s; }
@keyframes bookIn { from { opacity: 0; transform: translateY(-120px); } }
.flask__honey { animation: fillUp .85s cubic-bezier(.4, 0, .4, 1) .45s both; }
@keyframes fillUp { from { transform: translateY(100%); } }
/* the notes on the glass: a key idea of each book above, under that book's title */
.flask__note { position: absolute; z-index: 1; display: grid; gap: 1px; white-space: nowrap; padding: 7px 14px 8px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card);
  font-weight: 700; font-size: .9375rem; line-height: 1.25; animation: noteIn .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.flask__note small { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.flask__note--1 { left: 4%; top: 24%; rotate: -4deg; animation-delay: 1.15s; }
.flask__note--2 { right: -10%; top: 46%; rotate: 3deg; animation-delay: 1.23s; }
.flask__note--3 { left: -8%; top: 68%; rotate: -2deg; animation-delay: 1.31s; }
@keyframes noteIn { from { opacity: 0; transform: scale(.7); } }

/* Bubbles in the honey: two sparse layers of small dots, each a tile taller than the honey and sliding up by one
   whole tile, so the loop is seamless; moved, not repainted (the far layer slower) */
.fizz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fizz::before, .fizz::after { content: ""; position: absolute; left: 0; right: 0; top: 0; will-change: transform; animation: linear infinite; }
.fizz::before { height: calc(100% + 113px); background: radial-gradient(circle, rgba(255, 255, 255, .7) 0 2px, transparent 2.5px) 13px 0 / 61px 113px;
  animation-name: fizz-near; animation-duration: 4.5s; }
.fizz::after { height: calc(100% + 167px); background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 2.5px, transparent 3px) 47px 61px / 89px 167px;
  animation-name: fizz-far; animation-duration: 9s; }
@keyframes fizz-near { to { transform: translateY(-113px); } }
@keyframes fizz-far { to { transform: translateY(-167px); } }
.flask__honey .fizz { top: 4px; }

/* the pipe (an SVG laid over the page by site.js): an empty grey track and the honey that flows along it */
.is-home main { position: relative; }
/* the pipe runs above the sections' grounds and under their content, so a tinted section does not hide it */
.is-home main > section, .is-home main > .final { position: relative; }
.is-home main > :is(section, .final) > :not(.sr) { position: relative; z-index: 2; }
.pipe { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.pipe path { fill: none; stroke-width: var(--pipe); stroke-linecap: butt; stroke-linejoin: round; }
.pipe__base { stroke: var(--line-strong); }
.pipe__fill { stroke: var(--brand); }
.pipe path.pipe__fill:not(.pipe__drops) { stroke-linecap: round; }

/* ── How it works along the pipe ── */
.how { --pad: clamp(56px, 8vw, 104px); padding: var(--pad) 0; }
.how__wrap { position: relative; padding-left: calc(var(--gutter) + var(--pipe-x) + var(--pipe) + 48px); }
.how__head { display: grid; gap: 16px; max-width: 40em; margin-bottom: clamp(32px, 5vw, 56px); }
.how__title { font-size: clamp(2.2rem, 5vw, 4rem); }
.how__steps { display: grid; gap: clamp(32px, 5vw, 56px); }
/* the steps one under another along the pipe: the joint on the pipe, then the step's sticker and its picture side by side,
   close together in the middle rather than text far left and a picture far right */
.how__step { position: relative; display: grid; grid-template-columns: minmax(0, 560px) 380px; justify-content: center; gap: 24px 32px; align-items: center; }
/* each step is a numbered joint on the pipe: pipe-grey until the honey reaches it, then honey */
.how__dot { position: absolute; left: calc(-1 * (48px + var(--pipe) / 2) - 18px); top: calc(50% - 18px); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--line-strong); color: var(--ink-2); font-family: var(--f-display); font-size: .95rem; line-height: 1; transition: background-color .3s, color .3s; }
.how__step.is-on .how__dot { background: var(--brand); color: var(--brand-ink); }
/* each step's text is one big sticker, slapped on a little askew; each step wears a different sticker look
   (see "Sticker looks" below) */
.how__text { position: relative; z-index: 2; justify-self: end; padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 34px); border: 2.5px solid var(--ink); border-radius: 22px;
  rotate: -2deg; }
.how__step:nth-child(2) .how__text { rotate: 1.5deg; }
.how__step:nth-child(3) .how__text { rotate: -1deg; }
/* the pictures are put down a little askew too, the other way from their sticker */
.how__vis { rotate: 2deg; }
.how__step:nth-child(2) .how__vis { rotate: -1.5deg; }
.how__step:nth-child(3) .how__vis { rotate: 1.5deg; }
.how__label { font-size: .875rem; font-weight: 700; margin-bottom: 4px; }
.how__name { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; margin-bottom: 10px; }
.how__text > p:last-child { font-size: clamp(1.0625rem, 1.4vw, 1.2rem); }
.how__vis { display: grid; align-content: center; aspect-ratio: 1 / 1; padding: 24px; border: var(--ink-line); border-radius: 28px; background: var(--card); overflow: hidden; }
/* The step's two pieces are put down as the step comes into view (.is-placed, site.js): the picture first, then the
   sticker beside it, each dropped from a little above and settling, still a little askew, with a small bounce. */
@keyframes how-slap {
  0% { opacity: 0; transform: translateY(-40px) rotate(var(--tilt)) scale(1.22); }
  55% { opacity: 1; transform: none; scale: .97; }
  78% { scale: 1.015; }
  100% { opacity: 1; transform: none; scale: 1; }
}
.how__text { --tilt: 6deg; }
.how__vis { --tilt: -5deg; }
.js .how__step:not(.is-placed) :is(.how__text, .how__vis) { opacity: 0; }
.how__step.is-placed .how__vis { animation: how-slap .6s cubic-bezier(.2, .7, .3, 1) both; }
.how__step.is-placed .how__text { animation: how-slap .6s cubic-bezier(.2, .7, .3, 1) .22s both; }
/* every other sticker on the site is put down the same way as it comes into view; a pair lands one after the other */
:is(.srate, .proof, .mapstats > div, .timecalc__eq .is-main, .bk__free) { --tilt: 7deg; }
:is(.srate, .mapstats > div):nth-child(even) { --tilt: -6deg; }
.js :is(.srate, .proof, .mapstats > div, .timecalc__eq .is-main, .bk__free):not(.is-placed) { opacity: 0; }
:is(.srate, .proof, .mapstats > div, .timecalc__eq .is-main, .bk__free).is-placed { animation: how-slap .6s cubic-bezier(.2, .7, .3, 1) both; }
.bk__free.is-placed { animation-delay: .25s; }
:is(.srate, .mapstats > div).is-placed:nth-child(even) { animation-delay: .18s; }
/* "Ismerős?": the problem first, three house cards right of the pipe (the section shares .how__wrap's indent) */
.pains__title { margin-bottom: clamp(28px, 4vw, 40px); }
.pains__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pains__list li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 2.5px var(--ink) inset; }
.pains__ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: var(--brand-subtle); font-size: 26px; line-height: 1; }
.pains__list h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1.15; text-wrap: balance; }
.pains__list p { color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 900px) {
  .pains__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pains__list li { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 20px; }
  .pains__ic { grid-row: span 2; margin: 0; }
}

/* Who is behind it: the founder's photo beside his story, in one ink-framed card (a real border, so the photo
   does not paint over the frame) */
.founder__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: 0; border: 2.5px solid var(--ink); border-radius: 32px; overflow: hidden; background: var(--card); }
.founder__pic { border-right: 2.5px solid var(--ink); }
.founder__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 35%; }
.founder__body { display: grid; gap: 16px; align-content: center; justify-items: start; padding: clamp(28px, 4.5vw, 56px); }
.founder__q { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; }
.founder__body blockquote p { font-size: clamp(1.0625rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 34em; }
.founder__body figcaption { display: grid; line-height: 1.3; }
.founder__body figcaption span { font-size: .9375rem; color: var(--ink-3); }
.founder__social { display: flex; flex-wrap: wrap; gap: 10px; }
.founder__social a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px; margin-bottom: 3px; border-radius: 12px; background: var(--card); color: var(--ink); font-size: 20px;
  box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 3px 0 var(--line-strong); transition: transform .12s, box-shadow .12s; }
.founder__social a span { font-size: .9375rem; font-weight: 700; }
.founder__social a:hover { background: var(--bg-tint); }
.founder__social a:active { transform: translateY(3px); box-shadow: 0 0 0 1.5px var(--line-strong) inset; }
@media (max-width: 760px) {
  .founder__card { grid-template-columns: minmax(0, 1fr); }
  .founder__pic { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 2.5px solid var(--ink); }
}

/* the pictures (StepPicture): the app's own pieces, from one real book */
/* The step pictures, in the page's idiom: a halftone corner on each panel, ink outlines with a gummy shelf,
   honey with bubbles, the highlighter and a sticker. */
.how__vis { position: relative; isolation: isolate; }
.how__vis::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(242, 169, 0, .4) 0 2.2px, transparent 2.8px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 100% 0, #000 15%, transparent 75%), radial-gradient(ellipse 70% 60% at 0 100%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 100% 0, #000 15%, transparent 75%), radial-gradient(ellipse 70% 60% at 0 100%, #000 15%, transparent 75%); }
.hv { display: grid; gap: 18px; }
.hv__title { display: grid; min-width: 0; line-height: 1.25; }
.hv__title strong { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv__title small { font-size: .8125rem; font-weight: 700; }

/* 1. pick: four covers on a shelf; the chosen one comes forward in an ink frame on a honey shelf, ticked */
.hv__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; padding: 22px 12px 0; border-bottom: 10px solid var(--d-border); border-radius: 0 0 4px 4px; }
.hv__row > span { position: relative; transition: opacity .4s var(--ease), transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.hv__row img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px 5px 5px 3px; box-shadow: var(--shadow-cover); }
.hv__row .is-pick img { box-shadow: 0 0 0 2.5px var(--ink), 0 6px 0 var(--ink); }
.hv__tick { position: absolute; top: -13px; right: -13px; display: grid; place-items: center; width: 30px; height: 30px; border: 2.5px solid var(--ink); border-radius: 50%;
  background: var(--brand); color: var(--brand-ink); font-size: 13px; opacity: 0; scale: .4; transition: opacity .3s .35s, scale .45s cubic-bezier(.3, 1.4, .5, 1) .35s; }
.is-on .hv__row > span:not(.is-pick) { opacity: .5; }
.is-on .hv__row .is-pick { transform: translateY(-14px); }
.is-on .hv__tick { opacity: 1; scale: 1; }
.hv__card { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 2.5px var(--ink) inset; }
.hv__card strong { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; line-height: 1.15; }
.hv__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hv__tags span { padding: 3px 9px; border-radius: 8px; background: var(--brand-subtle); font-size: .8125rem; font-weight: 700; box-shadow: 0 0 0 1.5px var(--brand) inset; }

/* 2. listen: the dark player, a honey play button, the chapter's honey filling the track; the words lit below */
.hv--listen { gap: 16px; }
.hv__player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "c t p" "k k k" "m m m"; align-items: center; gap: 12px 14px; padding: 14px;
  border-radius: 20px; background: var(--d-card); color: var(--d-ink); box-shadow: 0 0 0 2.5px var(--ink) inset; }
.hv__player img { grid-area: c; width: 40px; height: 60px; object-fit: cover; border-radius: 3px 5px 5px 3px; }
.hv__player .hv__title { grid-area: t; }
.hv__player .hv__title small { color: var(--brand); }
.hv__play { grid-area: p; display: grid; place-items: center; width: 46px; height: 46px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--brand); color: var(--brand-ink);
  font-size: 17px; }
.hv__track { grid-area: k; height: 14px; border-radius: 7px; background: var(--d-hover); overflow: hidden; }
.hv__track b { position: relative; display: block; width: 6%; height: 100%; border-radius: 7px; background: var(--brand); overflow: hidden; transition: width 1.4s var(--ease) .2s; }
.is-on .hv__track b { width: 42%; }
.hv__times { grid-area: m; display: flex; justify-content: space-between; margin-top: -6px; font-size: .75rem; color: var(--d-ink-3); font-variant-numeric: tabular-nums; }
.hv__text { font-family: var(--f-read); font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.hv__hl { color: var(--ink); background: linear-gradient(var(--brand), var(--brand)) no-repeat 0 88% / 0% 42%; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .9s var(--ease) .5s; }
.is-on .hv__hl { background-size: 100% 42%; }

/* 3. practice: a honey progress bar, the answers as gummy chips; the right one gets a sticker */
.hv--practice { gap: 12px; }
.hv--practice .practice__bar { max-width: none; }
.hv--practice .practice__bar i { height: 12px; border-radius: 6px; background: var(--card); box-shadow: 0 0 0 2px var(--ink) inset; }
.hv--practice .practice__bar i.done { background: var(--brand); }
.hv__q { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; margin: 2px 0; }
.hv__opts { display: grid; gap: 16px; }
.hv__opts .chip { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; padding: 10px 12px; font-size: .8125rem; line-height: 1.3; cursor: default; }
.hv__opts .chip svg { font-size: 14px; opacity: 0; transition: opacity .3s; }
.is-on .hv__opt--bad { background: var(--danger-subtle); color: var(--danger-ink); box-shadow: 0 0 0 2px var(--danger) inset, 0 3px 0 var(--danger); transition: all .3s .3s; }
.is-on .hv__opt--ok { background: var(--success-subtle); color: var(--success-ink); box-shadow: 0 0 0 2px var(--success) inset, 0 3px 0 var(--success); transition: all .3s 1s; }
.is-on .hv__opt--bad svg { opacity: 1; transition-delay: .3s; color: var(--danger); }
.is-on .hv__opt--ok svg { opacity: 1; transition-delay: 1s; color: var(--success); }
.hv__yay { position: absolute; right: 22px; top: -22px; padding: 3px 10px; border: 2px solid #fff; outline: 2px solid var(--ink); border-radius: 8px; background: var(--brand); color: var(--brand-ink);
  font: 400 .875rem/1.2 var(--f-display); rotate: -6deg; pointer-events: none; opacity: 0; scale: .5; transition: opacity .3s 1.25s, scale .45s cubic-bezier(.3, 1.4, .5, 1) 1.25s; }
.is-on .hv__yay { opacity: 1; scale: 1; }
.hv--practice .practice__bar i.hv__next { transition: background-color .3s .6s; }
.is-on .hv--practice .practice__bar i.hv__next { background: var(--brand); }

/* ── What comes out: the pipe runs along the page and drops into three tubes (drawn by site.js);
   each tube fills to its --fill when the honey arrives (--level, set by site.js) */
.results { overflow: clip; padding-bottom: clamp(56px, 8vw, 104px); }
.results__title { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 12em; padding-left: calc(var(--pipe-x) + var(--pipe) + 48px); }
.results__card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 96px; padding: 0 0 40px; border-radius: 32px; background: var(--d-card); color: var(--d-ink); }
.tube-item { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; padding: 0 16px; }
.tube { position: relative; width: 70px; height: 190px; margin-bottom: 18px; border: 3px solid var(--d-ink); border-top: 0; border-radius: 0 0 35px 35px; }
.tube::before { content: ""; position: absolute; top: 0; left: -10px; right: -10px; height: 10px; border-radius: 4px; background: var(--d-ink); }
.tube i { position: absolute; left: 6px; right: 6px; bottom: 6px; height: calc((100% - 22px) * var(--level, var(--fill)) / 100); border-radius: 4px 4px 28px 28px; background: var(--brand); overflow: hidden; }
.tube__value { display: inline-flex; align-items: center; gap: .15em; white-space: nowrap; font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; }
.tube__value svg { font-size: .7em; color: var(--brand); }
.tube__label { font-size: 1rem; color: var(--d-ink-2); }



@media (max-width: 900px) {
  .flask { margin-top: 12px; }
  .flask__bulb { width: min(320px, 88%); }
  .flask__note { padding: 5px 10px 6px; font-size: .8125rem; } .flask__note small { font-size: .6875rem; }
  .flask__note--1 { left: 0; } .flask__note--2 { right: -4%; } .flask__note--3 { left: -4%; }
  /* the pipe leaves the flask off the side of the screen and comes back above the tubes (site.js); no joints */
  :root { --pipe: 10px; }
  .how__dot { display: none; }
  .how__wrap { padding-left: var(--gutter); }
  .how__step { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .how__text { justify-self: stretch; margin-inline: 10px; }
  .results__title { padding-left: 0; }
  .results__card { padding: 32px 8px 28px; }
  .tube-item { padding: 0 4px; }
  .tube { width: 44px; height: 120px; margin-bottom: 12px; border-radius: 0 0 22px 22px; }
  .tube i { border-radius: 3px 3px 18px 18px; }
  .tube__value { font-size: clamp(1.05rem, 5.2vw, 1.75rem); }
  .tube__label { font-size: .8125rem; }
  .how__vis { width: min(380px, 100%); }
}

/* ── Try it: the free first chapter, in the page's own look — a white card in the ink frame, the player and
   the reader in the app's light appearance (as in the steps) ─────────── */
.lx { position: relative; border-radius: 32px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink) inset; }
.lx__stage { position: relative; }
.lx__grid { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start;
  padding: 112px clamp(20px, 5vw, 64px) clamp(32px, 5vw, 56px); }
.lx__cover { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px 10px 10px 6px; box-shadow: var(--shadow-cover); }
.lx__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.lx__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.08; text-wrap: balance; }
.lx__author { font-size: 1.0625rem; color: var(--ink-2); }
.lx .seg { justify-self: start; }

.aplayer { display: grid; gap: 14px; padding: 20px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.aplayer__ch small { display: block; font-size: .8125rem; color: var(--ink-3); }
.aplayer__ch strong { font-size: 1.0625rem; font-weight: 700; }
.wave { display: flex; align-items: center; gap: 2px; height: 46px; cursor: pointer; touch-action: none; min-width: 0; }
.wave i { flex: 1; min-width: 1px; height: var(--h); min-height: 4px; border-radius: 3px; background: var(--line-strong); transition: background-color .2s; pointer-events: none; }
.wave i.on { background: var(--brand); }
@media (max-width: 520px) { .wave { gap: 1px; } }
@media (max-width: 360px) { .seg__more { display: none; } }   /* Hallgatás | Olvasás, without the minutes */
.aplayer__time { display: flex; justify-content: space-between; margin-top: 6px; font-size: .8125rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* The play button sits beside the waveform, like a voice memo. Its face is the app's listen-page glyph:
   Font Awesome solid circle-play / circle-pause in the text colour (listen_controls.dart › PlayPauseFace.hero). */
.aplayer__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.aplayer__track { min-width: 0; }
.pbtn { display: grid; place-items: center; width: 56px; height: 56px; margin-top: -5px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); transition: transform .12s; }
.pbtn:active { transform: scale(.94); }
.pbtn svg { font-size: 68px; max-width: none; }  /* the glyph's circle fills ~80% of its box: ~54 px of circle on a 56 px target */
.pbtn__pause, .pbtn[aria-pressed="true"] .pbtn__play { display: none; }
.pbtn[aria-pressed="true"] .pbtn__pause { display: block; }
/* while the audio loads, the spinner sits inside the button that started it (R-7.3) */
.pbtn { position: relative; }
.pbtn::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--ink); opacity: 0; }
.aplayer.is-loading .pbtn svg { opacity: 0; }
.aplayer.is-loading .pbtn::after { opacity: 1; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* the end of the chapter: the waveform gives way to the next step */
.aplayer__done { display: none; gap: 14px; justify-items: start; padding: 4px 0; }
.aplayer__done-title { font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; }
.aplayer__done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.aplayer.is-done .aplayer__row { display: none; }
.aplayer.is-done .aplayer__done { display: grid; }
/* the one filled button: while the end card shows it, the one under the player steps aside */
.lx__body:has(.aplayer.is-done:not([hidden])) .lx__end { display: none; }
.aplayer__note { font-size: .8125rem; color: var(--danger-ink); text-align: center; }
.aplayer__note:empty { display: none; }
.lx__text { max-height: 24em; overflow: auto; overscroll-behavior: contain; padding: 20px 22px; border-radius: 24px; background: var(--card);
  box-shadow: 0 0 0 1px var(--line-strong) inset; font: 400 1.0625rem/1.7 var(--f-read); color: var(--ink-2); }
.lx__text p + p { margin-top: .85em; }
.lx__text h4 { font: 700 1.0625rem/1.4 var(--f-text); color: var(--ink); margin: 1.3em 0 .4em; }
.lx__text h4:first-child { margin-top: 0; }
.lx__end { display: flex; padding-top: 4px; }
/* the book picker is the first choice, so it sits on top of the card; the chosen book in the honey ring */
.lx__books { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 28px 24px 0; }
.lx__pick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border: 0; border-radius: 16px; background: var(--card);
  color: var(--ink-2); font-weight: 700; font-size: .9375rem; box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 3px 0 var(--line-strong); transition: background-color .2s, color .2s, box-shadow .2s; }
.lx__pick img { width: 34px; height: 51px; object-fit: cover; border-radius: 3px; }
.lx__pick:hover { color: var(--ink); }
.lx__pick[aria-selected="true"] { background: var(--brand-subtle); color: var(--ink); box-shadow: 0 0 0 2px var(--brand) inset, 0 3px 0 var(--brand); }
@media (max-width: 820px) {
  .lx__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 104px; }
  .lx__cover { width: 170px; }
  .lx__body { width: 100%; }
  .lx__title, .lx__author { text-align: center; } .lx .seg, .lx__end { justify-self: center; }
  .lx__books { flex-wrap: nowrap; padding: 24px 20px 0; }
  .lx__pick { padding: 5px; border-radius: 12px; } .lx__pick span { display: none; } .lx__pick img { width: 40px; height: 60px; }
}

/* ── Topic tiles ────────────────────────────────────────────────────── */
.ttiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ttile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; height: 220px; padding: 24px 20px 20px;
  border-radius: 28px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.ttile { background: var(--card); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink) inset, 0 4px 0 var(--ink); }
.ttile:hover { transform: translateY(-4px); }
.ttile__name { font-family: var(--f-display); font-size: 1.22rem; line-height: 1.15; }
.ttile__n { font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.ttile__covers { position: absolute; left: 0; right: 0; bottom: -26px; display: flex; justify-content: center; }
.ttile__covers img { width: 64px; height: 96px; object-fit: cover; border-radius: 5px; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .45); margin: 0 -7px; transition: transform .4s var(--ease); }
.ttile__covers img:nth-child(1) { rotate: -7deg; } .ttile__covers img:nth-child(2) { rotate: 2deg; translate: 0 -8px; } .ttile__covers img:nth-child(3) { rotate: 9deg; }
.ttile:hover .ttile__covers img { transform: translateY(-10px); }
@media (max-width: 1000px) { .ttiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ttiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ttile { height: 180px; padding: 16px; border-radius: 24px; }
  .ttile__name { font-size: clamp(.85rem, 3.6vw, 1.1rem); } .ttile__covers img { width: 52px; height: 78px; } }

/* ── Minutes a day → books a month: the dark card, real covers on a shelf ── */
.timecalc { background: var(--d-card); color: var(--d-ink); border-radius: 32px; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 40px);
  display: grid; justify-items: center; gap: clamp(24px, 3.4vw, 36px); text-align: center; }
.timecalc__head { display: grid; gap: 14px; justify-items: center; }
.timecalc .h2 { color: var(--d-ink); }
.timecalc .lead { color: var(--d-ink-2); max-width: 40em; }
.timecalc__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tpill { display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 48px; min-width: 48px; padding: 0 20px; border-radius: var(--r-pill);
  border: 2px solid var(--d-ink-2); background: transparent; color: var(--d-ink); font-weight: 700; font-size: 1.0625rem; transition: border-color .2s, background-color .2s; }
.tpill:hover { border-color: var(--brand); }
.tpill[aria-checked="true"] { border-color: var(--brand); background: rgba(242, 169, 0, .16); }
/* an arrow from the pick down to what it adds up to */
.timecalc__arrow { display: grid; justify-items: center; margin: -10px 0 -12px; }
.timecalc__arrow svg { width: 24px; height: 48px; color: var(--brand); }
/* books a month and books a year; the month in honey */
.timecalc__eq { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 20px); width: 100%; }
.timecalc__eq p { display: grid; justify-items: center; gap: 6px; min-width: 0; flex: 0 1 220px; padding: 18px 12px 16px; border-radius: 24px; box-shadow: 0 0 0 1.5px var(--d-border) inset; }
.timecalc__eq strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.timecalc__eq span { font-size: clamp(.8125rem, 1.6vw, 1rem); font-weight: 600; color: var(--d-ink-2); }
/* the books a month: the round die-cut honey sticker, the same one as the founder's followers (Sticker looks, below) */
.timecalc__eq p.is-main { flex: none; box-shadow: none; }
@media (max-width: 520px) { .timecalc__eq { gap: 10px; } .timecalc__eq p { padding: 14px 8px 12px; border-radius: 18px; } .timecalc__eq strong { font-size: 2.2rem; } }
.timecalc__note { font-size: .8125rem; color: var(--d-ink-3); }
/* The shelf: every book of the month, upright, the same size, side by side on even ledges */
.shelf { width: 100%; max-width: 1040px; display: grid; }
.shelf__row { display: flex; align-items: flex-end; justify-content: center; gap: var(--gap, 14px); padding: 0 12px; border-bottom: 8px solid var(--d-border);
  border-radius: 0 0 4px 4px; box-shadow: 0 16px 18px -14px rgba(0, 0, 0, .7); }
.shelf__row + .shelf__row { margin-top: 30px; }
.book { position: relative; flex: none; width: var(--w, 92px); aspect-ratio: 2 / 3; border-radius: 2px 5px 5px 2px; overflow: hidden; background: var(--d-hover);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 6px 0 14px -6px rgba(0, 0, 0, .7); transform-origin: 50% 100%; animation: standUp .4s var(--ease) both; transition: transform .25s var(--ease); }
.book img { width: 100%; height: 100%; object-fit: cover; }
.book::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .2) 2.5%, rgba(255, 255, 255, 0) 6%, rgba(0, 0, 0, .1) 8%, transparent 12%); }
.book:hover { transform: translateY(-6px); }
@keyframes standUp { from { transform: translateY(12px) scaleY(.94); } }
.timecalc.is-static .book { animation: none; }

/* ── Reviews: a wall of real store reviews ──────────────────────────── */
/* Store ratings: the stats row's look — score and star on top, store and count below, a hairline between */
/* Social proof as stickers, like the "Helyes!" one and the steps: honey in an ink outline, slapped on a little
   askew, the figure big in the display face and what it counts under it. Not tappable, so no shelf. */
.srate, .proof, .mapstats > div { position: relative; display: grid; gap: 4px; padding: 12px 18px 13px; border: 2.5px solid var(--ink); border-radius: 14px;
  line-height: 1.3; rotate: -2deg; }
.srate:nth-child(even), .mapstats > div:nth-child(even) { rotate: 2deg; }
.srates { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.sec__head--center .srates { justify-content: center; }
.srate { justify-items: center; text-align: center; }
.srate strong { display: inline-flex; align-items: center; justify-content: center; gap: .18em; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.4rem); line-height: 1; }
.srate strong svg { font-size: .74em; color: currentColor; }
.srate span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .9375rem; font-weight: 700; }
.srate span svg { font-size: 15px; }
.proof { justify-self: start; font-weight: 700; }
.proof strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.05; }

/* ── Sticker looks: the five kinds the owner kept (2026-11-03), mixed so no two neighbours match ──
   paper            white, ink text, a strip of honey tape across the top (step 2, App Store, the regions)
   pale die-cut     a pale honey fill (step 3)
   honey die-cut    the brand fill, ink text (step 1, Google Play, the newsletter count, "Helyes!")
   round die-cut    a honey disc, the figure in the middle (the founder's followers, the books a month)
   pale round die-cut  a pale honey disc (the countries)
   Die-cut is a white margin round the sticker, then the ink outline, as a cut-out vinyl sticker. Every honey or
   pale sticker is die-cut; a plain honey sticker in a bare ink outline is not one of the kinds. */
.how__step:nth-child(3n + 1) .how__text, .srate:nth-child(2), .blog .proof, .founder .proof, .timecalc__eq .is-main { background: var(--brand); color: var(--brand-ink); }
.how__step:nth-child(3n + 2) .how__text, .srate:nth-child(1), .mapstats > div:nth-child(2) { background: var(--card); color: var(--ink); }
.how__step:nth-child(3n) .how__text, .mapstats > div:nth-child(1) { background: var(--pale); color: var(--ink); }
.founder .proof, .timecalc__eq .is-main, .mapstats > div:nth-child(1) { place-content: center; justify-items: center; width: 9.5rem; aspect-ratio: 1; padding: 12px; border-radius: 50%; text-align: center; }
/* the round honey ones are one sticker wherever they are: size, tilt, figure and label alike (owner 2026-11-03) */
.founder .proof, .timecalc__eq p.is-main { width: 12rem; gap: 4px; padding: 12px; rotate: -3deg; font-size: .9375rem; font-weight: 700; line-height: 1.25; }
:is(.founder .proof, .timecalc__eq .is-main) strong { font-size: 2rem; line-height: 1.05; }
.timecalc__eq .is-main span { font-size: inherit; font-weight: inherit; color: inherit; }
.how__step:nth-child(3n + 1) .how__text, .how__step:nth-child(3n) .how__text, .srate:nth-child(2), .blog .proof, .founder .proof, .timecalc__eq .is-main, .mapstats > div:nth-child(1) {
  border: 3px solid #fff; outline: 2.5px solid var(--ink); }
.how__step:nth-child(3n + 2) .how__text::before, .srate:nth-child(1)::before, .mapstats > div:nth-child(2)::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 72px; height: 20px; translate: -50% 0; rotate: -4deg;
  background: rgba(242, 169, 0, .55); pointer-events: none; }
/* Reviews read row by row from the top: newest first along the top row. Without JS a top-aligned grid;
   with JS each card drops into the shortest column, in order (site.js › masonry). */
.rv { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.rv.is-masonry { display: flex; align-items: flex-start; }
.rv__col { flex: 1; min-width: 0; display: grid; gap: 20px; }
/* the columns stand still; their bottom fades into the section's ground, under the button to all reviews */
.rvm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; max-height: clamp(640px, 58vw, 780px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.rvm__col { display: grid; gap: 20px; min-width: 0; }
.rvm + .sec__more { position: relative; margin-top: -56px; }
@media (max-width: 1000px) { .rvm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rvm__col:nth-child(3) { display: none; } }
@media (max-width: 640px) { .rvm { grid-template-columns: minmax(0, 1fr); max-height: 720px; } .rvm__col:nth-child(2) { display: none; } }
.rv__card { display: grid; gap: 12px; padding: 24px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.rv__top { display: flex; align-items: center; justify-content: space-between; min-height: 18px; }
.rv__top .stars { font-size: 15px; }
.rv__src { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; color: var(--ink-3); }
.rv__src svg { font-size: 13px; }
.rv__title { font-weight: 800; font-size: 1.0625rem; }
.rv__card blockquote p { color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.rv__card figcaption { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.rv__card figcaption > span:last-child { display: grid; line-height: 1.25; }
.rv__card strong { font-size: .9375rem; }
.rv__card small { font-size: .8125rem; color: var(--ink-3); }
.rv__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-family: var(--f-display); font-size: .9rem; flex: none; }
.rv__av { background: var(--fill); color: var(--ink); }
.rfilter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.rcount { font-size: .9375rem; color: var(--ink-3); }

/* ── Pricing ───────────────────────────────────────────────────────── */
/* How the free week works, under the plans: its own panel, a numbered path */
.trial { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: center;
  max-width: 1080px; margin: clamp(32px, 4vw, 48px) auto 0; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--card); box-shadow: 0 0 0 2px var(--brand) inset; }
.trial__copy { display: grid; gap: 14px; justify-items: start; }
.trial__copy .h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.tl { position: relative; display: grid; gap: 22px; }
.tl::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 3px; border-radius: 2px; background: linear-gradient(var(--pale) 0 50%, var(--line-strong) 50%); }
.tl li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 2px 16px; align-items: start; }
.tl__ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--card); color: var(--ink);
  font-size: 24px; line-height: 1; box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tl li:first-child .tl__ic { background: var(--pale); color: var(--ink); box-shadow: none; }
.tl strong { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; padding-top: 4px; }
.tl p { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 860px) { .trial { grid-template-columns: 1fr; } }

.pc--base .pc__incl--same, .pc:not(.pc--base) .pc__incl--full { display: none; }
.pcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; padding-top: 22px; align-items: stretch; }
.pc { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px; margin-bottom: 6px; border-radius: 28px; background: var(--card); box-shadow: 0 0 0 2.5px var(--ink) inset; }
.pc__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.pc__name { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; }
.pc__save { padding: 4px 10px; border-radius: 10px; background: var(--success-subtle); color: var(--success-ink); font-size: .875rem; font-weight: 800; white-space: nowrap; }
.pc__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 10px; }
.pc__price s { flex-basis: 100%; font-size: .9375rem; font-weight: 600; color: var(--ink-3); text-decoration-thickness: 1.5px; }
.pc__price s.is-empty { visibility: hidden; }
.pc__price strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.3rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.02em; }
.pc__price span { color: var(--ink-2); font-weight: 600; }
.pc__sub { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.pc__saving { display: flex; align-items: center; gap: 8px; min-height: 1.5em; margin-bottom: 18px; font-size: .9375rem; color: var(--success-ink); font-weight: 600; }
.pc__saving svg { font-size: 18px; color: var(--success); }
.pc .btn { width: 100%; }
.pc__fine { margin-top: 2px; }
.pc__incl { display: grid; gap: 10px; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.pc__incl-t { font-weight: 800; font-size: .9375rem; }
.pc__incl li:not(.pc__incl-t) { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); line-height: 1.4; }
.pc__incl svg { font-size: 1rem; color: var(--success); margin-top: 2px; }
.pc__fine { font-size: .8125rem; color: var(--ink-3); text-align: center; }
/* The yearly plan: in the brand frame under its ribbon, its shelf in the same honey, with the one filled button of the row. */
.pc--best { box-shadow: 0 0 0 4px var(--brand) inset; }
.pc__ribbon { position: absolute; top: -16px; left: 50%; translate: -50% 0; padding: 7px 16px; border-radius: 12px; background: var(--brand); color: var(--brand-ink);
  font-weight: 800; font-size: .875rem; white-space: nowrap; box-shadow: 0 0 0 2.5px var(--ink); }
.plans__guarantee { display: flex; align-items: flex-start; justify-content: center; gap: 12px; max-width: 760px; margin: 32px auto 0; color: var(--ink-2); font-size: 1rem; }
.plans__guarantee svg { font-size: 24px; color: var(--success); margin-top: 1px; }
.plans__guarantee strong { color: var(--ink); }
@media (max-width: 900px) { .pcs { grid-template-columns: 1fr; max-width: 460px; gap: 32px; } .pc--best { order: -1; }
  .pcs .pc--best .pc__incl--full { display: grid; } .pc--best .pc__incl--same { display: none; }
  .pc--base .pc__incl--full { display: none; } .pc--base .pc__incl--same { display: grid; }
  .pc__price s.is-empty, .pc__saving:empty { display: none; } .pc__sub { margin-bottom: 18px; } }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faqwrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.faqwrap__head { position: sticky; top: calc(var(--top-h) + 32px); display: grid; gap: 16px; justify-items: start; }
.faq__group { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 34px 0 6px; }
.faq__group:first-child { margin-top: 0; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding: 16px 0; cursor: pointer;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.4; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line-strong) inset; transition: transform .3s var(--ease), background-color .2s; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 1px; }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i { transform: rotate(45deg); background: var(--brand); box-shadow: none; color: var(--brand-ink); }
.faq__a p { color: var(--ink-2); padding: 0 48px 22px 0; max-width: 62ch; }
.faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
@media (max-width: 900px) { .faqwrap { grid-template-columns: 1fr; } .faqwrap__head { position: static; } }

/* ── Final CTA: the rounded yellow card ─────────────────────────────── */
.final { margin: 0 var(--gutter) clamp(30px, 3vw, 46px); padding: clamp(64px, 9vw, 104px) 0; border-radius: 44px; overflow: hidden; color: var(--brand-ink);
  background: var(--brand); }
.final__grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.final__copy { display: grid; gap: 20px; justify-items: start; }
.final__mascot { width: 112px; height: 112px; border-radius: 28px; rotate: -6deg; }
.final__title { max-width: 13em; font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
.final .lead { color: var(--brand-ink); }
.qr { background: var(--card); padding: 16px 16px 12px; border-radius: 24px; text-align: center; rotate: 2deg; }
.qr img { width: 148px; height: 148px; }
.qr figcaption { font-size: .8125rem; font-weight: 700; margin-top: 8px; color: var(--ink-2); }
/* As the card scrolls into view (.is-placed, site.js) only its pictures move: the app icon and then the QR card are
   put down like the stickers; the words and the store buttons stand still (owner 2026-11-03) */
.final__mascot { --tilt: 10deg; }
.qr { --tilt: -8deg; }
.js .final:not(.is-placed) :is(.final__mascot, .qr) { opacity: 0; }
.final.is-placed .final__mascot { animation: how-slap .6s cubic-bezier(.2, .7, .3, 1) both; }
.final.is-placed .qr { animation: how-slap .6s cubic-bezier(.2, .7, .3, 1) .18s both; }
/* The same on every page: its pictures are put down like the home page's — the app icon and the QR card on the
   download, thank-you and newsletter pages, the newsletter's postcard (each gets .is-placed, site.js) */
:is(.dl .mascot, .postcard) { --tilt: 10deg; }
.dl .qr { --tilt: -8deg; }
.js :is(.dl .mascot, .dl .qr, .postcard):not(.is-placed) { opacity: 0; }
:is(.dl .mascot, .dl .qr, .postcard).is-placed { animation: how-slap .6s cubic-bezier(.2, .7, .3, 1) both; }
.dl .qr.is-placed { animation-delay: .18s; }
@media (max-width: 760px) { .final__grid { grid-template-columns: 1fr; } .final .qr { display: none; } }

/* ── Footer ────────────────────────────────────────────────────────── */
.foot { background: var(--d-page); color: var(--d-ink-3); padding: clamp(56px, 7vw, 80px) 0 28px; font-size: .9375rem; }
.foot__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.brand--foot { color: var(--d-ink); font-size: 1.35rem; }
.foot__brand { display: grid; gap: 16px; justify-items: start; align-content: start; }
.foot__brand p { max-width: 24em; }
.foot__col h2 { font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--d-ink); margin-bottom: 10px; }
.foot__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.foot a:hover { color: var(--d-ink); }
.stores--foot .store { height: 46px; box-shadow: 0 0 0 1px var(--d-border) inset; }
.foot__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--d-hover); font-size: .8125rem; }
.foot .lang { color: var(--d-ink-2); }
.foot__tools { display: flex; align-items: center; gap: 20px; }
.foot__up { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 3px; border-radius: 50%; background: var(--d-hover); color: var(--d-ink); font-size: 18px;
  box-shadow: 0 0 0 1px var(--d-border) inset, 0 3px 0 var(--d-border); transition: transform .12s, box-shadow .12s; }
.foot__up svg { rotate: 180deg; }
.foot__up:active { transform: translateY(3px); box-shadow: 0 0 0 1px var(--d-border) inset; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* ── Inner pages ───────────────────────────────────────────────────── */
.phead { padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 48px); background: linear-gradient(var(--brand-subtle), var(--brand-subtle)) var(--bg); }
.phead:has(+ .tools) { margin-bottom: 0; }
.phead__in { display: grid; gap: 16px; justify-items: start; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .875rem; color: var(--ink-3); }
.crumbs a { display: inline-block; min-width: 44px; padding-block: 14px; margin-block: -14px; color: var(--brand-text); font-weight: 600; } /* 44 px tall to tap, same line height */
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9375rem; color: var(--ink-2); font-weight: 600; }
.meta span { display: inline-flex; align-items: center; gap: 7px; }
.meta svg { font-size: 17px; color: var(--ink-3); }

.tools { position: sticky; top: var(--top-h); z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
/* every control in the bar is one size: 44 px tall, radius 12, the same 1.5 px ring; the chips (buttons) add their shelf */
.tools__in { display: flex; align-items: center; gap: 12px; padding-block: 12px; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search svg { position: absolute; left: 14px; z-index: 1; top: 50%; translate: 0 -50%; font-size: 18px; color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; height: 44px; padding: 0 12px 0 40px; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 1rem; box-shadow: 0 0 0 1.5px var(--line-strong) inset; }
.search input:focus { outline: none; box-shadow: 0 0 0 2px var(--ink) inset; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; order: 3; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
/* the books page's topics: the whole list on their own rows under the bar; on a phone one row to swipe, edge to edge */
.chips--topics { margin-top: 20px; }
@media (min-width: 761px) { .chips--topics { flex-wrap: wrap; gap: 8px 6px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .chips.chips--topics button { padding-inline: 12px; } }   /* so the eleven Hungarian topics fit one line on a wide screen */
@media (min-width: 761px) {
  .tools__in { flex-wrap: nowrap; }
  .tools .search { flex: 1 1 280px; min-width: 200px; }
  .tools .sort { flex: none; margin-left: auto; }
}
@media (max-width: 760px) {
  /* search and sort share the first line; the select says what it sorts by, the label stays for screen readers */
  .tools__in { gap: 10px; }
  .tools .search { flex: 1 1 0; min-width: 0; max-width: none; }
  .tools .sort { flex: none; margin-left: 0; }
  .tools .sort > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.chips button, .chips a { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 3px; border: 0; padding: 0 14px; border-radius: 12px; background: var(--card); font-size: .9375rem; font-weight: 650; color: var(--ink-2);
  box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 3px 0 var(--line-strong); white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.chips button:active, .chips a:active { transform: translateY(3px); box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 0 0 var(--line-strong); }
.chips button:hover, .chips a:hover { color: var(--ink); }
.chips [aria-pressed="true"] { background: var(--brand-subtle); color: var(--ink); box-shadow: 0 0 0 2px var(--brand) inset, 0 3px 0 var(--brand); }
.sort { display: flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--ink-3); margin-left: auto; }
.sort select { height: 44px; border: 0; border-radius: 12px; padding: 0 34px 0 12px; color: var(--ink); font: inherit; font-weight: 650; font-size: .9375rem; cursor: pointer;
  -webkit-appearance: none; appearance: none; box-shadow: 0 0 0 1.5px var(--line-strong) inset;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2352525c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px; }
.sort select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink) inset; }
.count { font-size: .9375rem; color: var(--ink-3); margin: 28px 0 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 36px clamp(16px, 2vw, 28px); }
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.empty { padding: 48px 0; color: var(--ink-2); }

.bcard { display: grid; gap: 4px; align-content: start; }
.bcover { display: block; position: relative; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: var(--fill); box-shadow: var(--shadow-cover); margin-bottom: 10px; transition: transform .35s var(--ease), box-shadow .35s; }
.bcover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 3%, rgba(0,0,0,.08) 4.5%, rgba(0,0,0,0) 8%); pointer-events: none; }
.bcover img { width: 100%; height: 100%; object-fit: cover; }
.bcard:hover .bcover { transform: translateY(-4px); }
.bcard__t { font-weight: 700; font-size: .9375rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__a { font-size: .875rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcard__m { font-size: .8125rem; color: var(--ink-3); }

/* Book page */
.bk { padding: 0 0 clamp(48px, 6vw, 80px); }
.bk__head { padding-top: clamp(20px, 3vw, 32px); }
.bk__top { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(28px, 6vw, 72px); align-items: center; margin-top: 24px; }
.bigcover { position: relative; border-radius: 4px 10px 10px 4px; overflow: hidden; aspect-ratio: 2 / 3; background: var(--fill);
  box-shadow: 0 2px 3px rgba(9,9,11,.08), 0 40px 60px -30px rgba(9,9,11,.55), 0 0 0 1px rgba(9,9,11,.04); transform: rotate(-1.5deg); }
.bigcover img { width: 100%; height: 100%; object-fit: cover; }
.bigcover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.3) 0, rgba(255,255,255,0) 2.4%, rgba(0,0,0,.14) 3.6%, rgba(0,0,0,0) 7%), linear-gradient(180deg, rgba(255,255,255,.1), transparent 30%); }
/* the cover, with the free first chapter as a round honey die-cut sticker on its corner, put down like the others */
.bk__cover { position: relative; }
.bk__free { position: absolute; right: -24px; bottom: -20px; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 2px; width: 7.5rem;
  aspect-ratio: 1; padding: 10px; border: 3px solid #fff; outline: 2.5px solid var(--ink); border-radius: 50%; background: var(--brand); color: var(--brand-ink);
  text-align: center; font-size: .8125rem; font-weight: 700; line-height: 1.2; rotate: 8deg; }
.bk__free strong { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; line-height: 1; }
.bk__info { display: grid; gap: 18px; justify-items: start; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; min-height: 36px; margin-bottom: 3px; padding: 0 12px; border-radius: 12px; font-size: .875rem; font-weight: 700; background: var(--card); box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 3px 0 var(--line-strong); color: var(--ink); }
.tag:hover { background: var(--brand-subtle); }
.bk__author { font-size: 1.2rem; color: var(--ink-2); margin-top: -6px; }
.bk__cta { display: grid; gap: 10px; justify-items: start; margin-top: 6px; }
.bk__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 6vw, 80px); align-items: start; margin-top: clamp(16px, 3vw, 40px); }
.bk__main { display: grid; gap: clamp(48px, 6vw, 72px); min-width: 0; }
.bk__main section > .h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 18px; }
.prose p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; max-width: 66ch; }
.prose p + p { margin-top: 1em; }
.ideas { display: grid; gap: 14px; counter-reset: idea; }
.ideas li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 16px; padding: 22px 24px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 2.5px var(--ink) inset; }
.ideas li::before { counter-increment: idea; content: counter(idea); grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--pale); font-family: var(--f-display); font-size: 1.5rem; line-height: 1; color: var(--ink); }
.ideas h3 { font-size: 1.125rem; }
.ideas p { color: var(--ink-2); }
.excerpt { background: var(--card); border-radius: 28px; padding: clamp(24px, 4vw, 48px); box-shadow: 0 0 0 2.5px var(--ink) inset; }
.excerpt__kick { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: var(--success-ink); margin-bottom: 6px; }
.excerpt__title { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; margin-bottom: 16px; }
.excerpt__text { font: 400 clamp(1.06rem, 1.4vw, 1.2rem)/1.75 var(--f-read); }
.excerpt__text p + p { margin-top: 1em; }
.excerpt__text h4 { font: 700 1.0625rem/1.4 var(--f-text); margin: 1.3em 0 .4em; }
.excerpt__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.excerpt__more p { color: var(--ink-2); font-size: .9375rem; }
.who { display: grid; gap: 12px; }
.bk__main .who { padding: 22px 24px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 2.5px var(--ink) inset; }
.who li { display: flex; gap: 12px; color: var(--ink-2); }
.who li svg { font-size: 1rem; margin-top: .3em; color: var(--success); }
.aside { display: grid; gap: 20px; position: sticky; top: calc(var(--top-h) + 24px); }
.box { background: var(--card); border-radius: 24px; padding: 24px; box-shadow: 0 0 0 2.5px var(--ink) inset; }
.box h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; margin-bottom: 14px; }
.chapters { display: grid; counter-reset: ch; }
.chapters li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }
.chapters li:first-child { border-top: 0; padding-top: 0; }
.chapters li::before { counter-increment: ch; content: counter(ch); font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chapters li svg { font-size: 13px; color: var(--ink-3); }
.chapters li.is-free { color: var(--ink); font-weight: 700; }
.chapters li.is-free svg { color: var(--success); }
@media (max-width: 960px) { .bk__body { grid-template-columns: 1fr; } .aside { position: static; } }
@media (max-width: 680px) { .bk__top { grid-template-columns: 1fr; } .bk__cover { width: min(220px, 60vw); } .bk__free { right: -36px; width: 6.5rem; } }
.sec--tint { background: var(--bg-tint); padding: clamp(56px, 7vw, 88px) 0; }
.related { padding: 0 0 var(--region); }
.related .h2 { margin-bottom: clamp(24px, 3vw, 36px); }

/* The practice pieces the step pictures use: the progress bar and the answer chips */
.practice__bar { display: flex; gap: 6px; flex: 1; max-width: 260px; }
.practice__bar i { flex: 1; height: 10px; border-radius: 5px; background: var(--fill); transition: background-color .35s; }
.practice__bar i.done { background: var(--success); }
.chip { width: 100%; min-height: 64px; text-align: left; padding: 12px 14px; margin-bottom: 3px; border: 0; border-radius: 16px; background: var(--card); font-size: .9375rem; line-height: 1.38;
  box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 3px 0 var(--line-strong); transition: transform .12s, box-shadow .15s, background-color .2s, color .2s; }
.chip:active { transform: translateY(3px); box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 0 0 var(--line-strong); }
[data-side="t"] .chip { font-weight: 700; }
.chip.is-sel { background: var(--brand-subtle); box-shadow: 0 0 0 2px var(--brand) inset, 0 3px 0 var(--brand); }
.chip.is-ok { background: var(--success-subtle); color: var(--success-ink); box-shadow: 0 0 0 2px var(--success) inset, 0 3px 0 var(--success); cursor: default; }
.chip.is-bad { background: var(--danger-subtle); box-shadow: 0 0 0 2px var(--danger) inset, 0 3px 0 var(--danger); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Topic page */

/* Support and account deletion: the main column (a grouped list, the steps) and a column of cards beside it */
.hpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(28px, 4vw, 48px); align-items: start; }
.hpage__main, .hpage__side { display: grid; gap: 20px; min-width: 0; }
.hpage__main > .h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
@media (max-width: 900px) { .hpage { grid-template-columns: minmax(0, 1fr); } }
/* a grouped list (HIG lists and tables): one ink-framed card, rows split by hairlines that start at the text, a chevron
   on each row; the row lights honey under the pointer and while pressed */
.glist { border: 2.5px solid var(--ink); border-radius: 24px; background: var(--card); overflow: hidden; }
.glist__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 80px; padding: 16px 20px;
  transition: background-color .15s; }
.glist li + li .glist__row::before { content: ""; position: absolute; top: 0; left: 84px; right: 0; border-top: 1px solid var(--line-strong); }
.glist__row:hover, .glist__row:active { background: var(--brand-subtle); }
.glist__row > svg { font-size: 14px; color: var(--ink-3); }
.help__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-subtle); font-size: 26px; line-height: 1; }
.help__ic svg { font-size: 22px; }
.help__txt { display: grid; gap: 2px; }
.help__txt strong { font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; line-height: 1.2; }
.help__txt span { font-size: .9375rem; color: var(--ink-2); line-height: 1.4; }
/* the side cards: write an e-mail, cancel in the store */
.mailbox { display: grid; gap: 10px; justify-items: start; }
.mailbox h2 { margin: 6px 0 0; }
.mailbox p { color: var(--ink-2); }
.mailbox .mailbox__addr { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); word-break: break-all; }
.mailbox__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 6px; }
.help__cancel { display: grid; gap: 14px; scroll-margin-top: calc(var(--top-h) + 24px); }
.help__cancel h2 { margin-bottom: 0; }
.help__stores { display: grid; gap: 16px; }
.help__stores > span { display: grid; gap: 6px; align-content: start; }
.hpage__main .help__stores { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }   /* side by side in the wide column */
.help__stores .btn { justify-content: flex-start; }
.help__stores small { font-size: .8125rem; color: var(--ink-3); }
.help__stores .btn svg { font-size: 18px; }
.steps { display: grid; gap: 12px; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; color: var(--ink-2); }
.steps li::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: .85rem; }

/* Map */
/* the two stickers stand side by side at their own heights (the paper one is not stretched to the disc's), each
   with its figure and label centred, as the store ratings */
.mapstats { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.mapstats > div { justify-items: center; text-align: center; }
.mapstats strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; }
.mapstats span { font-weight: 700; }
/* The reader map (map/UserMap.tsx): the view switch and the coverage meter above, the map in an ink frame with its
   shelf, as the home page's panels. Leaflet and globe.gl draw inside; `isolation` keeps their stacking (Leaflet's
   panes sit at z-index 400+) under the sticky header. */
.umap__bar { display: flex; margin-bottom: 20px; }
.umap__bar .seg { overflow-x: auto; scrollbar-width: none; }
.umap__bar .seg::-webkit-scrollbar { display: none; }
.umap__bar .seg button { padding: 0 14px; }

.umap__frame { position: relative; isolation: isolate; height: clamp(420px, 56vw, 600px); border: 2.5px solid var(--ink); border-radius: 24px; overflow: hidden; }
.umap__frame--wait, .umap__frame--light { background: var(--bg); }
.umap__frame--dark { background: var(--d-card); }
.umap__frame--globe-light { background: var(--bg); }
.umap__frame--globe-dark { background: radial-gradient(circle at 50% 44%, var(--d-hover) 0%, var(--d-card) 42%, var(--d-page) 100%); }
.umap__map { width: 100%; height: 100%; }
.umap .leaflet-container { background: transparent; font-family: inherit; }
.umap .leaflet-tooltip { font: 500 .8125rem/1.3 var(--f-text); padding: 6px 10px; border: 0; border-radius: 10px; background: var(--d-card); color: var(--d-ink); box-shadow: none; }
.umap .leaflet-tooltip-top::before { border-top-color: var(--d-card); }
.umap .leaflet-bar { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 3px 0 var(--line-strong); }
.umap .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; border: 0; background: var(--card); color: var(--ink); font: 600 1.25rem/44px var(--f-text); }
.umap .leaflet-bar a + a { border-top: 1px solid var(--line-strong); }
.umap .leaflet-bar a:hover { background: var(--bg); }
.umap__reset { position: absolute; z-index: 1000; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--card); color: var(--ink);
  font-size: 1.1rem; box-shadow: 0 0 0 1.5px var(--line-strong) inset, 0 3px 0 var(--line-strong); }
.umap__reset:active { transform: translateY(3px); box-shadow: 0 0 0 1.5px var(--line-strong) inset; }
.umap__legend { position: absolute; z-index: 1000; left: 12px; bottom: 12px; display: grid; gap: 4px; padding: 8px 12px; border-radius: 12px; background: var(--card); color: var(--ink-2);
  font-size: .8125rem; font-weight: 600; box-shadow: 0 0 0 1.5px var(--line-strong) inset; pointer-events: none; }
.umap__legend span { display: flex; align-items: center; gap: 8px; }
.umap__legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--line-strong); }
.umap__legend i.is-on { background: var(--brand); }
:is(.umap__frame--dark, .umap__frame--globe-dark) .umap__legend { background: var(--d-card); color: var(--d-ink-2); box-shadow: 0 0 0 1px var(--d-border) inset; }
:is(.umap__frame--dark, .umap__frame--globe-dark) .umap__legend i:not(.is-on) { background: var(--d-border); }
.umap__hint { margin-top: 16px; text-align: center; }
.umap__chips { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 24px 0 0; padding: 0; }
.umap__chips button { gap: 8px; }
.umap__chips span { min-width: 24px; padding: 1px 7px; border-radius: 8px; background: var(--brand-subtle); color: var(--ink); font-size: .8125rem; font-weight: 750; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .umap__bar .seg { width: 100%; } }

/* Download / 404 */
.dl { min-height: calc(100svh - var(--top-h)); display: grid; place-items: center; text-align: center; padding: 64px 0; background: linear-gradient(var(--brand-subtle), var(--brand-subtle)) var(--bg); }
.dl__in { display: grid; gap: 20px; justify-items: center; max-width: 560px; }
.dl__in img.mascot { width: 104px; height: 104px; border-radius: 26px; rotate: -6deg; }
.dl .stores { justify-content: center; }
.dl .qr { rotate: none; margin-top: 8px; box-shadow: 0 0 0 2.5px var(--ink) inset; }
.nf { font-family: var(--f-display); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; }

/* Legal */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; padding-bottom: 96px; }
.toc { position: sticky; top: calc(var(--top-h) + 24px); max-height: calc(100vh - var(--top-h) - 48px); overflow: auto; font-size: .875rem; }
.toc h2 { font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; color: var(--ink-2); line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.doc { max-width: 74ch; font-size: 1rem; line-height: 1.72; color: var(--ink-2); }
.doc h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--ink); margin: 2.2em 0 .6em; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.0625rem; color: var(--ink); margin: 1.6em 0 .4em; }
.doc p, .doc ul, .doc ol { margin: 0 0 1em; }
.doc ul { list-style: disc; padding-left: 1.3em; } .doc ol { list-style: decimal; padding-left: 1.3em; }
.doc a { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.doc strong { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .9rem; display: block; overflow-x: auto; }
.doc td, .doc th { border: 1px solid var(--line-strong); padding: 8px 10px; text-align: left; vertical-align: top; }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); } .toc { position: static; max-height: none; } .toc ol { columns: 2; } }

/* Newsletter */
/* a page of one section (the newsletter, download, thank-you and 404 pages) fills the screen below the bar */
.blog { display: grid; align-items: center; min-height: calc(100svh - var(--top-h)); background: linear-gradient(var(--brand-subtle), var(--brand-subtle)) var(--bg); }
.news { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 112px); }
.news form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.news input { flex: 1 1 240px; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; box-shadow: 0 0 0 1.5px var(--line-strong) inset; }
.news input:focus { outline: none; box-shadow: 0 0 0 2px var(--ink) inset; }
/* The newsletter's postcard: an airmail edge (honey and ink stripes), the message left, stamp + postmark + address right */
.postcard { padding: 10px; border: 2.5px solid var(--ink); border-radius: 18px; rotate: 2deg;
  background: repeating-linear-gradient(135deg, var(--brand) 0 14px, var(--card) 14px 22px, var(--ink) 22px 36px, var(--card) 36px 44px); }
.postcard__in { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 300px; border-radius: 10px; background: var(--card); }
.postcard__msg { display: grid; align-content: center; gap: 12px; padding: clamp(20px, 3vw, 32px); border-right: 2px dashed var(--line-strong); font: 400 1.05rem/1.6 var(--f-read); color: var(--ink-2); }
.postcard__msg b { font: 400 1.6rem/1.1 var(--f-display); color: var(--ink); }
.postcard__sign { margin-top: 4px; font-weight: 700; color: var(--ink); }
.postcard__side { position: relative; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(18px, 2.5vw, 26px); }
/* perforated edge: a grid of holes, with the inner box filled back in so only the edge is punched */
.postcard__stamp { justify-self: end; display: grid; place-items: center; width: 84px; height: 100px; padding: 6px; rotate: 4deg; background: var(--brand);
  -webkit-mask: radial-gradient(circle 4px at 50% 50%, transparent 97%, #000) -4px -4px / 10px 10px round, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle 4px at 50% 50%, transparent 97%, #000) -4px -4px / 10px 10px round, linear-gradient(#000 0 0) content-box; }
.postcard__stamp img { width: 62px; height: 62px; border-radius: 10px; background: var(--card); }
.postcard__mark { position: absolute; top: 70px; right: 84px; display: grid; place-items: center; align-content: center; width: 92px; height: 92px; border: 2.5px solid var(--ink-3);
  border-radius: 50%; color: var(--ink-3); rotate: -14deg; text-transform: none; line-height: 1.1; opacity: .85; }
.postcard__mark span { font: 400 .8rem/1.1 var(--f-display); }
.postcard__mark small { font-size: .6875rem; font-weight: 700; }
.postcard__mark::after { content: ""; position: absolute; left: 70%; top: 34%; width: 90px; height: 30px;
  background: repeating-linear-gradient(transparent 0 5px, var(--ink-3) 5px 7.5px); -webkit-mask: radial-gradient(60px 18px at 50% 100%, transparent 70%, #000 71%); opacity: .8; }
.postcard__to { align-self: end; display: grid; gap: 18px; }
.postcard__to i { display: block; min-height: 26px; border-bottom: 2px solid var(--line-strong); font: 400 1.15rem/1 var(--f-display); font-style: normal; color: var(--ink); }
@media (max-width: 520px) {
  .postcard__in { grid-template-columns: minmax(0, 1fr); }
  .postcard__msg { border-right: 0; border-bottom: 2px dashed var(--line-strong); }
  .postcard__side { min-height: 210px; }
  .postcard__mark { top: 20px; right: 112px; }
}
.news__ok { font-weight: 700; color: var(--success-ink); }
.news__err { font-weight: 700; color: var(--danger-ink); }
@media (max-width: 860px) { .news { grid-template-columns: 1fr; } }

/* Narrow phones: the three tubes stay side by side, so the pipe can drop into each; a little smaller */
@media (max-width: 600px) {
  .results__card { padding: 28px 2px 24px; }
  .tube { width: 40px; height: 104px; }
  .tube__label { text-wrap: balance; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}