/* Copy Machine (Kreatív Kontroll) – shared design system for every page.
   Kai, 2026-09-24, card 17da1f32.
   Structure borrowed from the HorizonX "Bruma Roasters" editorial landing
   (paper card, tag row, catalogue numbering, framed side image); colours and
   type are the Kreatív Kontroll brand (agents/kaidesigner/.claude/references/kk-brand-guideline.md). */

:root {
  /* KK brand core */
  --ink: #0F1C38;          /* navy, main text + dark surfaces */
  --ink-deep: #091128;
  --red: #BF1E2D;          /* KK red: CTA, accent. 5.6:1 on --paper, AA for text */
  --red-dark: #9C1724;     /* hover / pressed */
  --paper: #F4F5F7;        /* cool off-white page, not cream (gate 2026-09-24) */
  --paper-2: #E9ECF1;      /* deeper paper, cards on paper */
  --paper-3: #D8DDE5;      /* rules, drawer faces */
  --white: #FFFFFF;
  --muted: #4B5468;        /* secondary text on paper: 7.2:1 on --paper */
  --muted-light: #B9C1D3;  /* secondary text on navy: 8.9:1 on --ink */
  --line: rgba(15, 28, 56, .14);
  --line-strong: rgba(15, 28, 56, .32);
  --ok: #1E6B4A;           /* MEGFELEL label: 6.1:1 on --paper */

  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius: 4px;          /* sheet corners: square-ish paper, not app cards (gate: generative signature, 2026-09-24) */
  --radius-sm: 4px;
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 56px);
  --shadow: 0 1px 0 rgba(15, 28, 56, .05), 0 18px 50px -24px rgba(15, 28, 56, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.62 var(--font-body);
  overflow-x: hidden;
}
/* paper grain, full-bleed, never a flat canvas */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.06; margin: 0; letter-spacing: -.01em; }
em { font-style: italic; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }

/* ---------- catalogue micro type ---------- */
.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .08em;
  text-transform: none; color: var(--muted); display: inline-flex; gap: .6em; align-items: center;
}
.eyebrow b { color: var(--red); font-weight: 500; }
.eyebrow b { white-space: nowrap; }
.sec-no {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--muted);
  display: flex; justify-content: space-between; border-top: 1px solid var(--line-strong);
  padding-top: 12px; margin-bottom: clamp(28px, 4vw, 48px);
}
.sec-title { font-size: clamp(38px, 5.4vw, 72px); max-width: 16ch; overflow-wrap: break-word; hyphens: manual; }
.two .sec-title { font-size: clamp(38px, 4.3vw, 60px); }
.sec-title em { color: var(--red); }
.lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); max-width: 58ch; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border-radius: 999px; border: 0;
  background: var(--b); color: #fff; font: 600 17px/1.2 var(--font-body);
  text-decoration: none; cursor: pointer; transition: background .2s, transform .2s;
  box-shadow: 0 10px 24px -12px rgba(191, 30, 45, .8);
}
.btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--ink { --b: var(--ink); box-shadow: none; }
.btn--ink:hover { background: var(--ink-deep); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--block { width: 100%; }
.link-quiet { color: var(--muted); font-size: 15px; text-underline-offset: 4px; }
.link-quiet:hover { color: var(--ink); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 244, 238, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.site-head .logo img { height: 38px; width: auto; }
.site-head .cat { margin-left: auto; margin-right: auto; color: var(--muted); }
.price-pill { display: flex; align-items: center; gap: 14px; }
.price-pill .p-meta { text-align: right; line-height: 1.25; }
.price-pill .p-now { font-weight: 700; font-size: 16px; }
.price-pill .p-now small { font-weight: 500; font-size: .82em; color: var(--muted); white-space: nowrap; }
.price-pill .p-next { font-size: 12.5px; color: var(--muted); }
.price-pill .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }

/* tag row under the header (Bruma "Single Origin / Small Batch" row) */
.tag-row { border-bottom: 1px solid var(--line); overflow: hidden; }
.tag-row .track { display: flex; gap: 34px; white-space: nowrap; padding: 11px 17px; /* 17+17 = one gap, keeps the -50% loop seamless and the first item off the edge */ width: max-content; animation: ticker 38s linear infinite; }
.tag-row span { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.tag-row span::after { content: "/"; margin-left: 34px; color: var(--red); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- hero ---------- */
.hero { padding: clamp(18px, 2.4vw, 32px) 0 0; }
.hero-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px;
  padding: clamp(28px, 4vw, 60px); position: relative; overflow: hidden;
}
.hero-card::after { /* faint ruled paper on the right half */
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 50%; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(15, 28, 56, .05) 31px 32px);
  mask-image: linear-gradient(to left, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent);
}
.hero h1 { font-size: clamp(64px, 9vw, 134px); line-height: .9; margin: 18px 0 18px; }
.hero h1 em { color: var(--red); display: block; }
.hero .claim { font-family: var(--font-display); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; max-width: 20ch; margin-bottom: 16px; }
.hero .lede { margin-bottom: 26px; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.hero .assure { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 14px; color: var(--muted); }
.hero .assure span::before { content: "✓"; color: var(--red); font-weight: 700; margin-right: 6px; }
.hero-art { position: relative; z-index: 1; align-self: center; }
.hero-art svg { width: 108%; max-width: none; height: auto; margin-right: -4%; }
.hero-side-note { position: absolute; left: clamp(28px, 4vw, 60px); bottom: 20px; font-size: 12.5px; color: var(--muted); }

/* ---------- hook band (navy) ---------- */
.band-ink { background: linear-gradient(165deg, var(--ink), var(--ink-deep)); color: var(--paper); position: relative; overflow: hidden; }
.band-ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(191, 30, 45, .22), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 60px 60px;
}
.band-ink .sec-no { color: var(--muted-light); border-color: rgba(248, 244, 238, .25); }
.band-ink .lede { color: var(--muted-light); }
.hook { padding: clamp(72px, 9vw, 130px) 0; }
.hook-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; position: relative; }
.hook blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 3.9vw, 56px); line-height: 1.1; }
.hook blockquote em { color: #FF8A94; } /* light red on navy: 6.4:1 */
.hook .cite { margin-top: 22px; color: var(--muted-light); font-size: 15px; }

/* swap figure: two headlines trade their brand name */
.swap { background: rgba(248, 244, 238, .06); border: 1px solid rgba(248, 244, 238, .18); border-radius: var(--radius); padding: 26px; }
.swap-card { background: var(--paper); color: var(--ink); border-radius: 6px; padding: 18px 20px; position: relative; }
.swap-card + .swap-card { margin-top: 14px; }
.swap-card .who { font-family: var(--font-mono); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.swap-card .hl { font-family: var(--font-display); font-size: 22px; line-height: 1.2; margin-top: 8px; }
.swap-card .brand { display: inline-block; background: var(--paper-3); border-radius: 6px; padding: 0 6px; animation: brandswap 6s ease-in-out infinite; }
.swap-card:nth-child(2) .brand { animation-delay: -3s; }
@keyframes brandswap { 0%, 38% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-10px); opacity: 0; } 55% { transform: translateY(10px); opacity: 0; } 62%, 100% { transform: translateY(0); opacity: 1; } }
.swap-verdict { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--muted-light); }
.swap-verdict .stamp-mini { color: #fff; background: var(--red); border-radius: 6px; padding: 4px 9px; letter-spacing: .06em; }

/* ---------- generic section ---------- */
.sec { padding: clamp(64px, 7vw, 108px) 0; }
.sec--tight { padding: clamp(56px, 6vw, 90px) 0; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }

/* ledger: the corpus behind the machine */
.ledger { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); margin-top: 48px; }
.ledger > div { padding: 26px 22px 24px 0; }
.ledger > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.ledger .num { font-family: var(--font-display); font-size: clamp(44px, 5vw, 72px); line-height: 1; }
.ledger .num small { font-size: .45em; }
.ledger .lab { font-size: 15px; color: var(--muted); margin-top: 8px; }
.bars { margin-top: 36px; }
.bars svg { width: 100%; height: auto; }
.bar-fill { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.is-in .bar-fill { transform: scaleX(1); }

/* index of uses: table of contents with dot leaders */
.toc { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(32px, 5vw, 80px); }
.toc li { break-inside: avoid; display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toc .t { font-family: var(--font-display); font-size: 24px; line-height: 1.2; }
.toc .dots { flex: 1; border-bottom: 1.5px dotted var(--line-strong); transform: translateY(-5px); min-width: 20px; }
.toc .s { font-family: var(--font-mono); font-size: 12.5px; color: var(--red); white-space: nowrap; }

/* seven skills: exploded diagram + list */
.skills { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); }
.skills-art { position: sticky; top: 96px; align-self: start; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.skills-art .cap { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.callout circle.dot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; transition: fill .25s; }
.callout text { font-family: var(--font-mono); font-size: 16px; fill: var(--ink); }
.callout.on circle.dot { fill: var(--red); stroke: var(--red); }
.callout.on text { fill: #fff; }
/* Narrow screens: the exploded figure (viewBox 560) renders at 302 px at 390, 272 at 360, 232 at 320, so the
   16px callout numbers fall under the 11 px floor of legible() (kai.js) and get hidden. Three steps keep them at
   >= 11 px rendered; the circle grows with the digit, the translate keeps the digit centred (baseline 0.28 em under
   the centre, as at 16px with y = cy + 4.5). From 768 up the svg is wide
   enough for 16px (0 hidden), the first step covers the single-column range below 520. Widths measured 2026-10-01, card b2f2b287. */
@media (max-width: 520px) {
  .callout text { font-size: 21px; transform: translateY(1.4px); }
  .callout circle.dot { r: 18px; }
}
@media (max-width: 400px) {
  .callout text { font-size: 23px; transform: translateY(1.9px); }
  .callout circle.dot { r: 19px; }
}
@media (max-width: 360px) {
  .callout text { font-size: 27px; transform: translateY(3.1px); }
  .callout circle.dot { r: 22px; }
}
.part { transition: fill .25s, stroke .25s; }
.part.on { fill: rgba(191, 30, 45, .14); stroke: var(--red); }
.skill-list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.skill-list li { display: grid; grid-template-columns: 56px 1fr; gap: 8px 18px; padding: 24px 0; border-bottom: 1px solid var(--line); cursor: default; }
.skill-list li:first-child { border-top: 1px solid var(--line-strong); }
.skill-list .n { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--muted); transition: color .25s; }
.skill-list li.on .n, .skill-list li:hover .n { color: var(--red); }
.skill-list code { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); background: var(--paper-2); padding: 2px 8px; border-radius: 6px; }
.skill-list h3 { font-size: 27px; margin: 6px 0 6px; }
.skill-list p { color: var(--muted); margin: 0; font-size: 16px; }

/* library shelf */
.shelf-wrap { background: var(--paper-2); border-radius: var(--radius); padding: clamp(24px, 3vw, 44px); margin-top: 48px; }
.shelf-wrap svg { width: 100%; height: auto; overflow: visible; }
.spine { cursor: pointer; transition: transform .35s cubic-bezier(.2, .7, .2, 1); transform-box: fill-box; }
.spine:hover, .spine:focus-visible, .spine.on { transform: translateY(-22px); outline: none; }
.spine text { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.spine .vol { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.shelf-legend { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 18px; font-size: 15px; color: var(--muted); }
.shelf-legend b { color: var(--ink); font-weight: 600; }
.shelf-list { display: none; }

/* before / after with the fonok score */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.sheet { background: var(--white); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 30px 26px; position: relative; }
.sheet .checks span:first-child { color: var(--ink); }
.sheet--bad { background: #F3EFE8; }
.sheet .who { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.sheet .hl { font-family: var(--font-display); font-size: 30px; line-height: 1.15; margin-bottom: 14px; }
.sheet .body { font-size: 16px; color: var(--ink); }
.sheet--bad .hl, .sheet--bad .body { color: #3A4254; }
.mark { background: linear-gradient(transparent 58%, rgba(191, 30, 45, .22) 58%); }
.pen { position: absolute; top: -17px; right: 22px; font-family: var(--font-display); font-style: italic; color: var(--red); font-size: 20px; background: var(--paper); border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 14px 4px; transform: rotate(-4deg); white-space: nowrap; box-shadow: 0 6px 14px rgba(9, 17, 40, .25); }
.score { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.gauge circle { fill: none; stroke-width: 10; }
.gauge .track { stroke: var(--paper-3); }
.gauge .val { stroke: var(--red); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 0 999; transition: stroke-dasharray 1.4s cubic-bezier(.2, .7, .2, 1); }
.sheet--good .gauge .val { stroke: var(--ok); }
/* five separators = the five criteria, 5 points each */
.gauge .seg line { stroke: var(--white, #FFFFFF); stroke-width: 3; }
.gauge text { font-family: var(--font-display); font-size: 30px; fill: var(--ink); }
.gauge .of { font-family: var(--font-mono); font-size: 16px; fill: var(--muted); }
.checks { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.checks li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.checks .v { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid currentColor; border-radius: 3px; padding: 2px 7px; white-space: nowrap; }  /* stamp form (Lead 55177/55210); the HTML keeps "Megbukik" so Máté's patch anchor still matches */
.checks .v.no { color: var(--red); }
.checks .v.ok { color: var(--ok); }
.ba-note { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* first hour timeline */
.hour { margin-top: 48px; }
.hour svg { width: 100%; height: auto; }
.hour .draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 2.2s ease; }
.is-in .hour .draw, .hour.is-in .draw { stroke-dashoffset: 0; }
.hour-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; }
.hour-steps h3 { font-size: 24px; margin: 6px 0 6px; }
.hour-steps p { font-size: 15.5px; color: var(--muted); margin: 0; }
/* FIG 9: steps 1-3 in ink, the end point (the rewritten text) in red */
.hour-steps .mono { color: var(--ink); }
.hour-steps .is-end .mono, .hour-steps .is-end h3 { color: var(--red); }
.hour .tl-ring { transform-box: fill-box; transform-origin: center; animation: tl-pulse 2.4s ease-out infinite; }
@keyframes tl-pulse { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
/* Below 1024 px the 1100-unit viewBox renders at k≈0.3-0.65, so legible() would hide 18 px numbers
   (FLOOR 11 px). Scale numbers, dots and strokes up so the four marks stay readable.
   Measured 2026-09-25: 390 px viewport -> k≈0.31, 320 px -> k≈0.25. */
@media (max-width: 1024px) {
  .hour .tl-marks { font-size: 26px; }
  .hour .tl-marks circle { stroke-width: 3; }
}
@media (max-width: 767px) {
  .hour .tl-marks { font-size: 46px; }
  .hour .tl-marks text { transform: translateY(-4px); }
  .hour .tl-marks circle { r: 16px; stroke-width: 5; }
  .hour .tl-marks .tl-end { r: 24px; }
  .hour .tl-marks .tl-ring { r: 26px; stroke-width: 4; }
  .hour .draw { stroke-width: 5; }
  .hour .runner { r: 11px; }
}

/* for whom */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; }
.fit > div { border-radius: var(--radius); padding: 32px; }
.fit .yes { background: var(--ink); color: var(--paper); }
.fit .no { background: var(--paper-2); }
.fit h3 { font-size: 32px; margin-bottom: 16px; }
.fit ul { margin: 0; padding: 0; list-style: none; }
.fit li { padding: 11px 0 11px 30px; position: relative; border-top: 1px solid rgba(128, 128, 128, .22); }
.fit .yes li::before { content: "✓"; position: absolute; left: 2px; color: #FF8A94; font-weight: 700; }
.fit .no li::before { content: "×"; position: absolute; left: 4px; color: var(--red); font-weight: 700; font-size: 20px; line-height: 1.2; }

/* price ladder */
.ladder { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 40px); margin-top: 44px; }
.ladder svg { width: 100%; height: auto; }
.ladder .step { transition: opacity .6s; }
.ladder text { font-family: var(--font-body); }
.pulse { animation: pulse 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }

/* offer */
.offer { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--white); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow); overflow: hidden; margin-top: 44px; }
.offer-list { padding: clamp(28px, 4vw, 52px); }
.offer-list ul { list-style: none; margin: 18px 0 0; padding: 0; }
.offer-list li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.offer-list li span:last-child { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); align-self: center; }
.offer-buy { background: linear-gradient(165deg, var(--ink), var(--ink-deep)); color: var(--paper); padding: clamp(28px, 4vw, 52px); position: relative; display: flex; flex-direction: column; justify-content: center; }
.offer-buy .price { font-family: var(--font-display); font-size: clamp(56px, 6vw, 84px); line-height: 1; }
.offer-buy .price small { font-family: var(--font-body); font-size: 18px; color: var(--muted-light); margin-left: 6px; }
.offer-buy .terms { color: var(--muted-light); font-size: 15px; margin: 10px 0 24px; }
.offer-buy .fine { color: var(--muted-light); font-size: 13.5px; margin-top: 14px; }
.stamp { position: absolute; right: -18px; top: -18px; width: 150px; height: 150px; }
.stamp .ring { animation: spin 24s linear infinite; transform-origin: 75px 75px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* faq */
.faq { max-width: 900px; margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--font-display); font-size: 25px; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 300; font-size: 30px; line-height: 1; color: var(--red); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); max-width: 70ch; padding-bottom: 12px; }

/* lead magnet band */
.freebie { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.test-card { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 26px; transform: rotate(1.5deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.test-card .hd { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.test-card .q { font-family: var(--font-display); font-size: 22px; margin-bottom: 14px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.inline-form input { flex: 1 1 240px; min-height: 52px; border-radius: 999px; border: 1.5px solid rgba(248, 244, 238, .4); background: rgba(248, 244, 238, .08); color: var(--paper); padding: 0 22px; font: 16px var(--font-body); }
.inline-form input::placeholder { color: var(--muted-light); }

/* ---------- footer ---------- */
.site-foot { background: var(--ink-deep); color: var(--muted-light); padding: 64px 0 36px; font-size: 15px; }
.site-foot .top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(248, 244, 238, .14); }
.site-foot .logo img { height: 44px; width: auto; margin-bottom: 16px; }
.site-foot h4 { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--paper); margin-bottom: 12px; font-weight: 500; }
.site-foot a { color: var(--paper); text-underline-offset: 4px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { padding: 4px 0; }
.site-foot .mail { font-family: var(--font-display); font-size: 26px; }
.site-foot .legal { padding-top: 24px; font-size: 13px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------- funnel pages (checkout, upsell, downsell, thanks, freebie) ---------- */
.steps { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.steps .st { display: inline-flex; align-items: center; gap: 8px; }
.steps .st i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.steps .st.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps .st.now { color: var(--ink); font-weight: 500; }
.steps .st.now i { background: var(--red); border-color: var(--red); color: #fff; }
.steps .sep { width: 28px; height: 1px; background: var(--line-strong); }

.funnel { padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 7vw, 110px); }
.funnel h1 { font-size: clamp(40px, 5vw, 68px); margin: 18px 0 14px; }
.funnel h1 em { color: var(--red); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); margin-top: 32px; align-items: start; }
.panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 36px); }
.panel + .panel { margin-top: 22px; }
.panel h2 { font-size: 28px; margin-bottom: 18px; display: flex; gap: 12px; align-items: baseline; }
.panel h2 .mono { color: var(--red); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14.5px; font-weight: 600; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select {
  min-height: 50px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--paper);
  padding: 0 16px; font: 16px var(--font-body); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 4px rgba(15, 28, 56, .1); }
.field .hint { font-size: 13.5px; color: var(--muted); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: 130px 1fr; gap: 14px; }
.company { border: 1.5px dashed var(--line-strong); border-radius: 6px; padding: 4px 18px; margin: 4px 0 8px; }
.company summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 15px; }
.bump { border: 2px dashed var(--red); background: #FBEFEF; border-radius: 6px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; margin: 8px 0 4px; }
.bump .tag { font-family: var(--font-mono); font-size: 11.5px; color: #fff; background: var(--red); border-radius: 6px; padding: 3px 8px; letter-spacing: .06em; }
.bump strong { font-size: 17px; }
.bump p { margin: 4px 0 0; font-size: 14.5px; color: #3A4254; }
.bump .amt { font-weight: 700; white-space: nowrap; }
.check { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 14.5px; padding: 10px 0; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--red); }
.check a { text-underline-offset: 3px; }
.card-box { border: 1.5px solid var(--line-strong); border-radius: 6px; padding: 18px; background: var(--paper); }
.card-box .test-flag { font-family: var(--font-mono); font-size: 12px; color: #fff; background: #B85C00; border-radius: 6px; padding: 3px 8px; display: inline-block; margin-bottom: 10px; }
.card-row { display: grid; grid-template-columns: 1fr 90px 70px; gap: 10px; }
.card-row div { min-height: 48px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.summary { position: sticky; top: 92px; }
.summary .item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.summary .item.muted { color: var(--muted); }
.summary .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; }
.summary .total b { font-family: var(--font-display); font-size: 38px; font-weight: 400; }
.summary .sum-guar { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; margin-top: 18px; font-size: 14px; color: var(--muted); }
.mini-art { background: var(--paper-2); border-radius: 6px; padding: 12px; margin-bottom: 18px; }

.offer-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 18px; }
.offer-hero .art { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.offer-hero ul { padding: 0; list-style: none; margin: 18px 0 24px; }
.offer-hero li { padding: 9px 0 9px 28px; position: relative; border-bottom: 1px solid var(--line); }
.offer-hero li::before { content: "✓"; position: absolute; left: 2px; color: var(--red); font-weight: 700; }
.one-click { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.one-click .note { font-size: 14px; color: var(--muted); }
.big-price { font-family: var(--font-display); font-size: 52px; line-height: 1; }
.big-price small { font-family: var(--font-body); font-size: 16px; color: var(--muted); margin-left: 6px; }
.alert-ok { display: flex; gap: 12px; align-items: center; background: #E7F1EB; color: #134A33; border-radius: 6px; padding: 12px 16px; font-size: 15px; }
.alert-ok i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }

.dl-card { background: linear-gradient(165deg, var(--ink), var(--ink-deep)); color: var(--paper); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 40px); display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; }
.dl-card .meta { color: var(--muted-light); font-size: 14px; margin-top: 8px; }
.next3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.next3 > div { background: var(--white); border-radius: 6px; box-shadow: var(--shadow); padding: 22px; }
.next3 .k { font-family: var(--font-mono); font-size: 12px; color: var(--red); }
.next3 h3 { font-size: 24px; margin: 8px 0 8px; }
.next3 p { font-size: 15px; color: var(--muted); margin: 0; }

/* legal pages */
.legal-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: 36px; }
.legal-doc nav { position: sticky; top: 92px; align-self: start; font-size: 14.5px; }
.legal-doc nav a { display: block; padding: 7px 0; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.legal-doc nav a:hover { color: var(--ink); }
.legal-doc article { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 56px); max-width: 780px; }
.legal-doc article h2 { font-size: 30px; margin: 34px 0 12px; }
.legal-doc article h2:first-child { margin-top: 0; }
.legal-doc article p, .legal-doc article li { font-size: 16px; color: #2A3348; }
.legal-doc .missing { background: #FFF3D6; border-left: 4px solid #B85C00; padding: 10px 14px; border-radius: 6px; font-size: 14.5px; }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.rv.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .site-head .cat { display: none; }
  .price-pill { margin-left: auto; }
  .hero-card { grid-template-columns: minmax(0, 1fr); }
  .hero-card::after { width: 100%; top: 50%; }
  .hero-side-note { display: none; }
  .hero-art svg { width: 100%; margin-right: 0; }
  .hook-grid, .two, .skills, .freebie, .offer, .co-grid, .offer-hero { grid-template-columns: 1fr; }
  .skills-art { position: relative; top: 0; }
  .summary { position: relative; top: 0; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ledger > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hour-steps { grid-template-columns: 1fr 1fr; }
  .legal-doc { grid-template-columns: 1fr; }
  .legal-doc nav { position: relative; top: 0; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .site-head .wrap { min-height: 60px; gap: 12px; }
  .site-head .logo img { height: 30px; }
  .price-pill .p-next { display: none; }
  .price-pill .p-now { font-size: 14px; }
  .price-pill .btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
  .hero-card { padding: 26px 20px 20px; border-radius: 6px; }
  .hero h1 { font-size: 64px; }
  .hero .cta-row .btn { width: 100%; }
  .eyebrow { display: block; line-height: 1.6; }
  .eyebrow b { margin-right: .6em; }
  .ledger .num small { display: block; margin-top: 6px; }
  .toc { columns: 1; }
  .toc .t { font-size: 21px; }
  .ba, .fit, .next3 { grid-template-columns: 1fr; }
  .sheet { padding: 22px 20px; }
  .sheet .hl { font-size: 25px; }
  .score { grid-template-columns: 88px 1fr; gap: 14px; }
  .pen { font-size: 16px; }
  .hour-steps { grid-template-columns: 1fr; gap: 16px; }
  .skill-list li { grid-template-columns: 44px 1fr; }
  .skill-list .n { font-size: 32px; }
  .skill-list h3 { font-size: 23px; }
  .shelf-wrap { padding: 16px 12px; }
  .shelf-list { display: block; columns: 2; column-gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
  .shelf-list li { padding: 3px 0; break-inside: avoid; }
  .shelf-list b { font-family: var(--font-mono); font-weight: 500; color: var(--red); font-size: 12px; margin-right: 4px; }
  .stamp { width: 150px; height: 150px; right: -6px; top: -40px; }
  .offer-buy { padding-top: 64px; }
  .faq summary { font-size: 21px; }
  .site-foot .top { grid-template-columns: 1fr; gap: 28px; }
  .row-2 { grid-template-columns: 1fr; gap: 0; }
  .row-3 { grid-template-columns: 110px 1fr; }
  .bump { grid-template-columns: auto 1fr; }
  .bump .amt { grid-column: 2; }
  .card-row { grid-template-columns: 1fr 1fr; }
  .card-row div:first-child { grid-column: 1 / -1; }
  .dl-card { grid-template-columns: 1fr; }
  .dl-card svg { width: 96px; }
  .steps .sep { width: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .bar-fill { transform: scaleX(1); }
  .hour .draw { stroke-dashoffset: 0; }
}

/* ---------- hero figure motion (FIG 1). One 10 s loop: type line 1, line 2, body, stamp, reset. ---------- */
.hx-cover { animation: hx-type 10s steps(22, end) infinite; }
.hx-c2 { animation-name: hx-type2; }
/* covers fade out once a line is typed, so the slid-out white block never shows beside the paper */
@keyframes hx-type { 0% { transform: translateX(0); opacity: 1; } 22% { transform: translateX(222px); opacity: 1; } 23%, 88% { transform: translateX(222px); opacity: 0; } 89% { transform: translateX(0); opacity: 0; } 94%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes hx-type2 { 0%, 22% { transform: translateX(0); opacity: 1; } 46% { transform: translateX(222px); opacity: 1; } 47%, 88% { transform: translateX(222px); opacity: 0; } 89% { transform: translateX(0); opacity: 0; } 94%, 100% { transform: translateX(0); opacity: 1; } }
.hx-body { animation: hx-body 10s ease infinite; }
@keyframes hx-body { 0%, 48% { opacity: 0; } 56%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
.hx-stamp > * { animation: hx-stamp 10s cubic-bezier(.3, 1.6, .5, 1) infinite; transform-box: view-box; transform-origin: 0 0; }
@keyframes hx-stamp { 0%, 60% { opacity: 0; transform: scale(1.8); } 64%, 88% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(1); } }
.hx-key { animation: hx-key 1.1s ease-in-out infinite; animation-delay: var(--d); }
@keyframes hx-key { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(4px); } }
.hx-lever { transform-origin: 468px 214px; animation: hx-lever 10s ease-in-out infinite; }
@keyframes hx-lever { 0%, 44%, 52%, 100% { transform: rotate(0); } 48% { transform: rotate(-9deg); } }
.hx-tag { transform-origin: 550px 176px; animation: hx-swing 4s ease-in-out infinite; }
@keyframes hx-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
.hx-card { animation: hx-card 7.2s ease-in-out infinite; animation-delay: var(--d); opacity: 0; }
@keyframes hx-card { 0% { transform: translate(0, 0) rotate(-6deg); opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(110px, -300px) rotate(8deg); opacity: 0; } }
.runner { animation: run 8s linear infinite; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(1020px); } }
@media (prefers-reduced-motion: reduce) {
  .hx-cover { opacity: 0; }
  .hx-body, .hx-stamp > *, .hx-card { opacity: 1; }
}

/* ---------- sales page v2 (Felix copy v1, 2026-09-24 21:20) ---------- */
.tag-row b { color: var(--ink); font-weight: 500; }
.hero h1.h1-line { font-size: clamp(52px, 6.2vw, 92px); line-height: .98; margin: 18px 0 20px; }
.cover-word { position: relative; display: inline-block; color: var(--red); font-style: italic; }
.cover-word::after { /* a navy tape that covers the word, then peels off: "takard le a logót" */
  content: ""; position: absolute; left: -4px; right: -6px; top: 14%; bottom: 4%; background: var(--ink); border-radius: 3px;
  transform-origin: left center; transform: scaleX(0); animation: cover 7s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes cover { 0%, 18% { transform: scaleX(0); } 26%, 58% { transform: scaleX(1); } 66%, 100% { transform: scaleX(0); transform-origin: right center; } }
.hero .claim { max-width: 24ch; }

.story p { color: var(--muted-light); font-size: 18px; max-width: 58ch; }
.story .sec-title { margin-bottom: 26px; }
.story .punch { color: var(--paper); font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; margin: 6px 0 18px; }
.cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(248, 244, 238, .18); }
.cost p { color: var(--muted-light); margin-top: 12px; }
.cost blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.12; color: var(--paper); }
.cost blockquote em { color: #FF8A94; }

.strike { position: relative; display: inline-block; }
.strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .09em; background: var(--red); transform-origin: left; transform: scaleX(0) rotate(-3deg); transition: transform .9s cubic-bezier(.6, 0, .3, 1) .4s; }
.is-in .strike::after, .strike.is-in::after { transform: scaleX(1) rotate(-3deg); }
.three-intro { margin: clamp(36px, 4vw, 56px) 0 18px; font-size: 18px; font-weight: 600; }
.three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.three li { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 26px 22px; }
.three .k { font-family: var(--font-display); font-size: 54px; line-height: 1; color: var(--red); }
.three p { font-family: var(--font-display); font-size: 23px; line-height: 1.25; margin: 14px 0 0; }
.three-close { margin-top: 22px; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); }

.adat { background: #FFF3D6; color: #4A2F00; border-left: 4px solid #B85C00; border-radius: 8px; padding: 12px 16px; font-size: 14.5px; margin: 28px 0 0; max-width: 900px; }
.adat b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; margin-right: 8px; color: #7A3D00; }
.faq .adat { margin: 0 0 16px; color: #4A2F00; }

.sec-title--wide { max-width: 22ch; }
.sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.sources > div { border-top: 2px solid var(--ink); padding-top: 16px; }
.sources .k { font-family: var(--font-mono); font-size: 12.5px; color: var(--red); }
.sources h3 { font-size: 25px; margin: 6px 0 8px; }
.sources p { color: var(--muted); font-size: 15.5px; margin: 0; }
.founder { margin-top: 32px; font-size: 18px; max-width: 70ch; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.quotes-cap { grid-column: 1 / -1; color: var(--muted); margin: 0; }
.quotes figure { margin: 0; background: var(--paper-2); border-radius: var(--radius); padding: 26px 28px; position: relative; }
.quotes figure::before { content: "„"; position: absolute; right: 22px; top: -18px; font-family: var(--font-display); font-size: 110px; line-height: 1; color: var(--red); opacity: .25; }
.quotes blockquote { margin: 0 0 16px; font-family: var(--font-display); font-size: 21px; line-height: 1.35; }
.quotes figcaption { font-size: 14.5px; color: var(--muted); }
.quotes figcaption b { display: block; color: var(--ink); font-weight: 600; }
.toc-note { margin-top: 26px; color: var(--muted); max-width: 70ch; }

.runs { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.runs .lede { margin-top: 18px; }
.runs .lede b { color: var(--ink); }
.runs-art { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.runs-art svg { width: 100%; height: auto; }
.runs-art .wire { stroke-dasharray: 5 6; animation: wire 1.2s linear infinite; }
@keyframes wire { to { stroke-dashoffset: -22; } }
.fig-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.skill-list .means { color: var(--ink); font-style: italic; margin-top: 8px; border-left: 2px solid var(--red); padding-left: 12px; }
.shelf-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: end; margin-bottom: 20px; }
.shelf-head h3 { font-size: clamp(28px, 3vw, 40px); }
.shelf-head p { margin: 0; color: var(--muted); }
.shelf-wrap .also { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; font-size: 15px; color: var(--muted); }
.shelf-wrap .also b { color: var(--ink); font-weight: 600; }

.band-paper { background: var(--paper-2); }
.rules { list-style: none; margin: 8px 0 0; padding: 0; }
.rules li { padding: 11px 0 11px 30px; position: relative; border-top: 1px solid var(--line); }
.rules li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.proof { background: transparent; }
.proof svg { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(15, 28, 56, .18)); transform: rotate(1.2deg); }
.pr-hit { fill: #BF1E2D; }
.pr-mark { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1s ease .5s; }
.is-in .pr-mark { stroke-dashoffset: 0; }
.hour-close { margin-top: 30px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); max-width: 40ch; }

.math { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 40px); margin-top: 40px; }
.math svg { width: 100%; height: auto; }
.math-close { margin-top: 28px; }
.offer-count { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); }

.guar { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(26px, 4vw, 52px); max-width: 1000px; }
.guar .stamp { position: static; width: 170px; height: 170px; }
.guar h2 { font-size: clamp(38px, 4.4vw, 60px); margin: 10px 0 14px; }
.guar h2 em { color: var(--red); }
.guar .fine { font-size: 14px; color: var(--muted); margin: 0; }

.fork { margin-top: 36px; }
.fork-art { width: 100%; height: auto; }
.fork-art-m { display: none; width: 100%; max-width: 360px; height: auto; margin: 0 auto 28px; }
.fork .draw { stroke-dasharray: 1300; stroke-dashoffset: 1300; transition: stroke-dashoffset 2.2s ease; }
.fork.is-in .draw { stroke-dashoffset: 0; }
.roads { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.road { border-radius: var(--radius); padding: 26px 28px; }
.road .mono { letter-spacing: .02em; }
.road p { margin: 10px 0 0; font-size: 18px; }
.road--a { border: 1.5px dashed rgba(248, 244, 238, .35); color: var(--muted-light); }
.road--b { background: var(--paper); color: var(--ink); }
.road--b .mono { color: var(--red); }
.close-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; color: var(--muted-light); font-size: 15px; }
.freebie--paper .test-card { background: var(--white); box-shadow: var(--shadow); }

@media (max-width: 1024px) {
  .cost, .runs, .shelf-head { grid-template-columns: 1fr; }
  .three, .sources { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .shelf-wrap .also { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 767px) {
  .hero h1.h1-line { font-size: 46px; }
  .roads, .guar { grid-template-columns: 1fr; }
  .guar .stamp { width: 150px; height: 150px; }
  .three p { font-size: 21px; }
  .close-cta .btn { width: 100%; }
  .fork-art { display: none; }
  .fork-art-m { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-word::after { display: none; }
  .strike::after { transform: scaleX(1) rotate(-3deg); }
  .pr-mark, .fork .draw { stroke-dashoffset: 0; }
}

/* keep amount + currency together inside flex buttons */
.nw { white-space: nowrap; }
.freebie h2 + p, .freebie .sec-title + p { margin-top: 18px; }

/* narrow chart variants: the 1100-wide charts drop below the 11 px floor up to ~1023 */
.only-m { display: none; }
@media (max-width: 1023px) {
  .only-d { display: none; }
  .only-m { display: block; max-width: 520px; }
  .shelf-list { display: block; columns: 2; column-gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
  .shelf-list li { padding: 3px 0; break-inside: avoid; }
  .shelf-list b { font-family: var(--font-mono); font-weight: 500; color: var(--red); font-size: 12px; margin-right: 4px; }
}
@media (max-width: 767px) {
  /* wide diagrams scroll inside their card instead of shrinking */
  .ladder, .runs-art { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ladder svg { min-width: 680px; }
  .runs-art svg { min-width: 620px; }
  .ladder::after, .runs-art::after { content: "húzd oldalra →"; display: block; margin-top: 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--muted); position: sticky; left: 0; }
  /* long CTA labels: centre and let the price drop to its own line */
  .btn { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 2px; }
}

/* ---------- checkout v2 (Felix section 3) ---------- */
.bump { cursor: pointer; }
.bump input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--red); }
.bump-art { width: 88px; height: auto; }
.bump-art .drip { animation: drip 1s linear infinite; }
@keyframes drip { to { stroke-dashoffset: -12; } }
.check .hint-under { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.company .opt { font-weight: 400; color: var(--muted); }
.card-box { margin-top: 14px; }
.card-note { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.pay { margin-top: 20px; min-height: 60px; font-size: 18px; }
.pay-guar { font-size: 14.5px; margin: 14px 0 6px; }
.trust { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; color: var(--muted); margin: 0; }
.trust svg { flex: none; transform: translateY(2px); }
.muted-s { color: var(--muted); font-size: 13px; }
.in-box { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.in-box li { padding: 4px 0 4px 22px; position: relative; }
.in-box li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.mini-art svg { width: 100%; height: auto; display: block; }
.blink { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 767px) {
  .bump { grid-template-columns: auto 1fr; }
  .bump-art { display: none; }
  .funnel h1 { font-size: 40px; }
}
[hidden] { display: none !important; }
ol.steps { list-style: none; margin: 0; padding: 0; }
/* SVG labels below the 11 px legibility floor are removed by cm.js legible() */
svg text.lbl-off { display: none; }

/* ===== funnel v2: upsell, downsell, köszönő (Kai 0924) ===== */
.test-flag { font-family: var(--font-mono); font-size: 12px; color: #fff; background: #B85C00; border-radius: 4px; padding: 3px 8px; display: inline-block; margin-bottom: 10px; }
.offer-hero h1 { font-size: clamp(36px, 4.2vw, 58px); margin: 0 0 16px; }
.offer-hero h1 em { color: var(--red); }
.up-art, .book-art { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.up-art .up-wake { animation: up-wake 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes up-wake { 0%, 40% { fill: #B9C1D3; transform: scale(1); } 55% { fill: #BF1E2D; transform: scale(1.4); } 70%, 100% { fill: #BF1E2D; transform: scale(1); } }
.up-body { margin-top: clamp(36px, 5vw, 64px); }
.up-body p { font-size: 17px; }
.up-offer h2 { font-size: 28px; }
.up-list { list-style: none; padding: 0; margin: 0 0 24px; }
.up-list li { padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); position: relative; font-size: 16px; }
.up-list li::before { content: "✓"; position: absolute; left: 4px; top: 12px; color: var(--red); font-weight: 700; }
.up-form { width: 100%; }
.one-click form { margin: 0; }
.link-btn { background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer; text-decoration: underline; font-family: inherit; text-align: left; }
.book-stage { display: grid; place-items: center; }
.book-art .book { animation: book-float 6s ease-in-out infinite; }
@keyframes book-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.book-art .pdf-tag { animation: none; }
.honest { border-left: 3px solid var(--red); padding-left: 14px; }
.ty-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr); }
.dl-card .dl-title { font-size: 34px; color: var(--paper); margin: 0 0 14px; }
.zip-art { width: 120px; height: 120px; overflow: visible; }
.zip-art .zip-arrow { animation: zip-drop 1.6s ease-in-out infinite; }
@keyframes zip-drop { 0% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
.dl-rows { display: grid; gap: 12px; }
.dl-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid rgba(244, 245, 247, .16); }
.dl-row span { font-size: 16px; }
.btn--ghost-light { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
.btn--ghost-light:hover { background: var(--paper); color: var(--ink); }
.ty-h2 { font-size: clamp(30px, 3vw, 40px); margin: clamp(36px, 4vw, 56px) 0 0; }
.ty-help { margin-top: 32px; gap: 20px; }
.ty-help .panel + .panel { margin-top: 0; }
.ty-help h2 { font-size: 26px; margin-bottom: 10px; }
.ty-guar { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.ty-stamp { width: 64px; height: 64px; }
.ty-inv { margin-top: 18px; font-size: 15px; color: var(--muted); }
.ty-inv p { margin: 0 0 10px; }
.consent-ok { display: flex; gap: 10px; align-items: flex-start; background: #E7F1EB; color: #134A33; border-radius: 4px; padding: 10px 12px; }
.consent-ok i { font-style: normal; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 12px; margin-top: 2px; }
.ty-elallas { margin-top: 20px; }
.muted-s { font-size: 14px; }
@media (max-width: 1023px) {
  .offer-hero, .ty-grid { grid-template-columns: 1fr; }
  .book-stage { order: -1; }
}
@media (max-width: 767px) {
  .dl-card { grid-template-columns: 1fr; }
  .zip-art { width: 88px; height: 88px; }
  .dl-row .btn { width: 100%; }
  .up-body { grid-template-columns: 1fr; }
  .ty-help { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .up-art .up-wake, .book-art .book, .zip-art .zip-arrow { animation: none; }
}
.ty-help { align-items: stretch; }
.big-price small { display: block; margin: 8px 0 0; }
.dl-card { align-items: start; }
@media (max-width: 1023px) { .next3 { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .up-body .up-offer { order: -1; } }

/* ===== lead magnet: /ingyenes (Kai 0924) ===== */
.lm-band { background: var(--ink); color: var(--paper); border: 0; }
.lm-band p { margin: 0; padding: 12px 0; font-size: 15px; text-align: center; }
.lm-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.lm-hero h1 { font-size: clamp(42px, 5.2vw, 76px); margin: 0 0 18px; }
.lm-hero h1 em { color: var(--red); }
.lm-art { display: block; width: 100%; max-width: 620px; height: auto; margin-top: 30px; box-shadow: var(--shadow); border-radius: 6px; }
.lm-art .lm-b1 { animation: lm-a 6s steps(1, end) infinite; }
.lm-art .lm-b2 { animation: lm-b 6s steps(1, end) infinite; }
@keyframes lm-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lm-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.lm-art .lm-verdict { animation: lm-stamp 6s ease-in-out infinite; transform-box: fill-box; }
@keyframes lm-stamp { 0%, 10% { opacity: 0; } 18%, 92% { opacity: 1; } 100% { opacity: 0; } }
.lm-form-panel { position: sticky; top: 92px; }
.lm-form-panel h2 { font-size: 32px; margin-bottom: 16px; }
.lm-form-panel .btn { margin-top: 18px; }
.lm-form-panel .note { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.lm-ok { text-align: left; }
.lm-mail { width: 120px; height: 90px; margin-bottom: 14px; }
.lm-five { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.lm-five li { background: var(--white); border-radius: 6px; box-shadow: var(--shadow); padding: 20px; display: grid; gap: 10px; align-content: start; }
.lm-five .k { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--red); }
.lm-five h3 { font-size: 22px; margin: 0 0 6px; }
.lm-five p { font-size: 15px; color: var(--muted); margin: 0; }
.lm-end { font-size: 19px; max-width: 64ch; margin-top: 28px; }
.lm-who-list { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; max-width: 760px; }
.lm-who-list li { padding: 14px 16px 14px 44px; background: var(--white); border-radius: 6px; position: relative; font-size: 17px; }
.lm-who-list li::before { content: "✓"; position: absolute; left: 16px; color: var(--red); font-weight: 700; }
.lm-who { padding-bottom: clamp(56px, 7vw, 100px); }
@media (max-width: 1023px) {
  .lm-hero { grid-template-columns: 1fr; }
  .lm-form-panel { position: static; }
  .lm-five { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .lm-five { grid-template-columns: 1fr; }
  .lm-hero h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-art .lm-b1, .lm-art .lm-verdict { animation: none; }
  .lm-art .lm-b2 { animation: none; opacity: 0; }
}

/* n.04 measurement block, synced from Máté's build (services/copy-machine/public/assets/cm-funkcio.css, Doc 21:56) */
.meres-sor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: center; margin: 48px 0 40px; }
.meres-abra { width: 100%; max-width: 420px; height: auto; }
#osszevetes .ba .sheet .hl { font-size: clamp(22px, 2.4vw, 30px); }
#osszevetes .ba { margin: 28px 0 32px; }
@media (max-width: 767px) { .meres-sor { grid-template-columns: 1fr; gap: 24px; } #osszevetes .who span:last-child { display: none; } }

/* FIG 1 paper below 768 px. The hero SVG renders at k ~0.48-0.5 there (viewBox 620 -> 295-310 px,
   measured 2026-09-24 at 320/390), so the 19 px headline falls under legible()'s 11 px floor.
   Enlarge headline + stamp, widen the paper, resize the typing covers to the new lines.
   CSS only: the element count of FIG 1 stays the same. The label stays hidden (12.5 px x 0.5). */
@media (max-width: 767px) {
  .hx-paper > rect:first-child { x: 170px; width: 282px; }
  .hx-clip { x: 170px; width: 282px; }  /* covers are clipped to the paper (#hxClip, Máté 55261): keep it the paper's size */
  .hx-paper > text:nth-of-type(2), .hx-paper > text:nth-of-type(3) { font-size: 23.5px; }
  .hx-paper > text:nth-of-type(2) { transform: translate(-26px, -8px); }
  .hx-paper > text:nth-of-type(3) { transform: translate(-26px, -3px); }
  .hx-c1 > rect:first-child { x: 180px; y: 54px; width: 272px; height: 28px; }
  .hx-c2 > rect:first-child { x: 180px; y: 84px; width: 272px; height: 28px; }
  .hx-c1 > rect:last-child { x: 180px; y: 56px; height: 24px; }
  .hx-c2 > rect:last-child { x: 180px; y: 86px; height: 24px; }
  .hx-cover { animation-name: hx-type-m; }
  .hx-c2 { animation-name: hx-type2-m; }
  .hx-body { transform: translate(-26px, 6px); }
  .hx-stamp { transform: translate(330px, 158px) rotate(-5deg); }
  .hx-stamp > rect { x: -92px; y: -27px; width: 184px; height: 56px; }
  .hx-stamp > text { font-size: 23.5px; }
  .hx-stamp > text:nth-of-type(2) { dominant-baseline: central; }
}
@keyframes hx-type-m { 0% { transform: translateX(0); opacity: 1; } 22% { transform: translateX(274px); opacity: 1; } 23%, 88% { transform: translateX(274px); opacity: 0; } 89% { transform: translateX(0); opacity: 0; } 94%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes hx-type2-m { 0%, 22% { transform: translateX(0); opacity: 1; } 46% { transform: translateX(274px); opacity: 1; } 47%, 88% { transform: translateX(274px); opacity: 0; } 89% { transform: translateX(0); opacity: 0; } 94%, 100% { transform: translateX(0); opacity: 1; } }

/* Price tag below 768 px, HTML overlay (kártya 17da1f32, mérve 2026-09-25). The SVG .hx-tag's
   three text lines need >=22 SVG units at k~0.5 to clear legible()'s 11 px floor (mérve 0925:
   k=0.5 at 390 px); a 3-line decorative tag that small can't fit text that large. Hide the SVG
   tag, show an HTML badge instead: real CSS px, not a scaled SVG shape.
   NOT position:absolute over the artwork (0925 utojavitas, karya 17da1f32): egy abszolut
   pozicionalt jelveny barmely fix szazalekos hely mellett belelog a surun rajzolt papirba vagy
   a gepbe valamelyik szelessegen. Statikus elemkent a kep ALA folyik, igy garantaltan nem metsz
   egyetlen svg-beli szoveget sem, merestol fuggetlenul. */
.hx-tag-m { display: none; }
@media (max-width: 767px) {
  .hx-tag { display: none; }
  .hx-tag-m {
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    background: #FFFFFF;
    border: 1px solid rgba(15, 28, 56, .45);
    border-radius: 4px;
    padding: 7px 16px;
    text-align: center;
    font-family: var(--font-display, "DM Serif Display", Georgia, serif);
    font-size: 17px;
    line-height: 1.3;
    color: #0F1C38;
    box-shadow: 0 4px 10px rgba(15, 28, 56, .18);
  }
  .hx-tag-m span {
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    color: #BF1E2D;
    margin-top: 2px;
  }
}
/* 320-359 px: the 44 px ledger figures ("1,06") are wider than a half column. Measured 2026-09-24: scrollWidth 346 at 320. */
@media (max-width: 359px) { .ledger .num { font-size: 36px; } }