/* EXTRACTED VERBATIM from public/pitch/landing.html — do not hand-edit.
   The English pitch page (public/pitch/en/index.html) and the questions page
   (public/pitch/kerdesek.html) are structural siblings of the Hungarian landing page and must not
   carry a paraphrase of its styles; a paraphrase is how pages drift apart, which CLAUDE.md already
   records happening once with docs/design/prototype-en.html.

   landing.html keeps its styles INLINE on purpose (one request, no render-blocking fetch on the
   marketing page). This file is a copy for the sibling pages, which are secondary surfaces where
   one extra request does not matter. If landing.html's styles change, re-extract:

     python3 -c "import io,re; s=io.open('public/pitch/landing.html',encoding='utf-8').read(); \
       print(re.search(r'<style>(.*?)</style>', s, re.S).group(1))" > public/pitch/pitch.css

   and re-add this header. Extracted 2026-09-18 (v4: the type-scale + signature-removal pass; the
   reveal mechanism is gone, so sibling pages' .rev classes are inert). */


@font-face{font-family:'Geist';font-style:normal;font-weight:400 800;font-display:swap;src:url(/pitch/fonts/geist-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Geist';font-style:normal;font-weight:400 800;font-display:swap;src:url(/pitch/fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/pitch/fonts/inter-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/pitch/fonts/inter-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;}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/pitch/fonts/inter-400-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/pitch/fonts/inter-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;}
  :root{
    --mk-canvas:#EFEFF0; --mk-surface:#FFFFFF; --mk-surface-dim:#F5F5F6; --mk-surface-muted:#E7E7E9;
    --mk-ink:#141414; --mk-ink-2:#3A3A3C; --mk-ink-faint:#63636A;
    --mk-border:#DEDEE1; --mk-divider:#E7E7E9;
    --mk-accent:#2E2E30; --mk-accent-hover:#3D3D40; --mk-on-accent:#FFFFFF; --mk-on-accent-faint:rgba(255,255,255,.68);
    /* --mk-amber-ink is #6B4E1F, the app's value. From 2026-09-16 this file carried #874012 (orange-brown)
       because #6B4E1F read as olive; on 2026-10-24 the owner chose olive for both, the pitch pages and
       the app, so one value serves both and tokens-sync.test.ts has no exception left for it. */
    --mk-amber:#E08A2B; --mk-amber-ink:#6B4E1F; --mk-amber-tint:#FFF7EC; --mk-amber-edge:#F3DEB8;
    --mk-ok:#3F9142; --mk-ok-tint:#EAF5EC; --mk-ok-edge:#CBE6D0; --mk-ok-ink:#256B33;
    --mk-control-edge:#85858C;
    --mk-r-xl:28px; --mk-r-lg:22px; --mk-r-md:16px; --mk-r-sm:12px;
    --mk-shadow:0 1px 2px rgba(20,20,20,.04),0 14px 34px -18px rgba(20,20,20,.16);
    --mk-shadow-lg:0 2px 6px rgba(20,20,20,.06),0 40px 80px -28px rgba(20,20,20,.42);
    --fd:'Geist',ui-sans-serif,system-ui,sans-serif; --fb:'Inter',ui-sans-serif,system-ui,sans-serif;
    --pad:clamp(18px,5vw,80px);
    /* Type scale, spacing ruler and the raised shadow, 2026-09-18. Mirrors src/styles/marsha-bento.css
       (the design system's .mk-theme block), which this page cannot load — its styles are inline on purpose,
       see the header of pitch.css. Seven sizes, four weights; the audit that prompted it counted 16 and 9. */
    --mk-t-display:clamp(42px,7.4vw,82px);
      /* Type scale: seven roles, defined once (same values as landing.html). The hero h1 and --mk-t-display keep their own. */
      --t-xs:12px; --t-s:14px; --t-body:17px; --t-lede:19px; --t-h3:22px; --t-h2:32px;
      --mk-sp-1:8px; --mk-sp-2:16px; --mk-sp-3:24px; --mk-sp-4:32px; --mk-sp-5:48px; --mk-sp-6:64px;
      --mk-section:clamp(48px,6vw,80px);
      --mk-shadow-raised:0 1px 2px rgba(20,20,20,.05),0 20px 44px -22px rgba(20,20,20,.30);
  }
  @media(min-width:1024px){:root{--t-lede:21px;--t-h3:28px;--t-h2:40px}}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--mk-canvas);color:var(--mk-ink);font-family:var(--fb);font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  /* Sections that also carry .in must set padding-block, never the padding shorthand:
     the shorthand resets left/right to 0, and at equal specificity the later rule wins,
     so the section goes flush to the viewport while the nav keeps its gutter. */
  .in,.wrap{max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
  h1,h2,h3{font-family:var(--fd);color:var(--mk-ink)}
  a{color:inherit}
  svg{display:block}
  .ico{width:20px;height:20px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round}

  /* reveal motion */
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  /* top bar */
  .top{position:sticky;top:0;z-index:40;background:rgba(239,239,240,.82);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--mk-border)}
  .top .in{display:flex;align-items:center;justify-content:space-between;height:62px}
  .brand{font-family:var(--fd);font-weight:800;font-size:var(--t-lede);letter-spacing:.16em;text-transform:lowercase}
  .btn{font-family:var(--fd);font-weight:700;font-size:var(--t-body);border-radius:var(--mk-r-md);padding:0 22px;min-height:47px;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn .ico{width:18px;height:18px}
  .btn--primary{background:var(--mk-accent);color:var(--mk-on-accent);box-shadow:var(--mk-shadow)}
  .btn--primary:hover{background:var(--mk-accent-hover)}
  .btn--ghost{background:var(--mk-surface);color:var(--mk-ink);border-color:var(--mk-border)}
  .btn--ghost:hover{border-color:#bfbfc4}
  .top .btn{min-height:41px;font-size:var(--t-s)}
  /* /kerdesek and /indulas: the landing's header, so one click from it the header keeps its shape (review 2026-10-19 #12). */
  .hd__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
  .hd__logo{display:block;height:19px;width:auto}
  @media(min-width:1024px){.hd__logo{height:21px}}
  .hd__nav{display:flex;align-items:center;margin-right:-8px}
.dsw{display:inline-flex;align-items:center;gap:2px;padding:3px;margin-right:6px;border-radius:var(--mk-r-md);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent)}
.dsw__l{display:inline-flex;align-items:center;padding:0 10px 0 12px;font-size:var(--t-s);font-weight:500;line-height:1;opacity:.75}
.dsw__l::after{content:"";width:1px;height:18px;margin-left:12px;background:currentColor;opacity:.4}
.dsw__a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:var(--mk-r-sm);font-size:var(--t-s);font-weight:600;line-height:1;color:inherit;text-decoration:none;white-space:nowrap}
.dsw__a svg{flex:none}
.dsw__a:hover,.dsw__a:focus-visible{background:color-mix(in srgb,currentColor 12%,transparent)}
.dsw__a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* UX-33: on a phone the switch keeps its words (Szakember, Ügyfél) under their icons, so the two demos are told apart without a tap. */
@media(max-width:480px){.hd__in{gap:8px}.dsw{margin-right:0}.dsw__l{padding:0 4px 0 7px;font-size:var(--t-xs)}.dsw__l::after{margin-left:4px}.dsw__a{flex-direction:column;justify-content:center;gap:2px;min-height:38px;padding:0 6px;font-size:var(--t-xs)}.dsw__a svg{width:14px;height:14px}}
@media(max-width:380px){.dsw__a{padding:0 4px}}
  .hd__login{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:12px;font:700 var(--t-s)/1 var(--font-display,var(--fd));color:var(--mk-ink);text-decoration:none}
  .hd__login:active{background:var(--mk-surface-dim)}
  .hd__login:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #141414}

  /* footer */
  .ft{margin-top:auto;border-top:1px solid var(--mk-border)}
  .ft__in{display:flex;flex-direction:column;gap:12px;padding-top:24px;padding-bottom:32px}
  .ft__logo{display:block;height:18px;width:auto;align-self:flex-start}
  .ft__nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
  .ft__nav>a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:12px;font:600 var(--t-s)/1 var(--font-display,var(--fd));color:var(--mk-ink-2);text-decoration:none}
  .ft__nav>a:hover{color:var(--mk-ink)}
  .ft__small{font:400 var(--t-xs)/1.5 var(--font-body,var(--fb));color:var(--mk-ink-faint);display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
  .ft__small a{color:inherit;display:inline-block;padding:8px 0}
  @media(min-width:640px){
    .ft__in{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:40px}
    .ft__logo{height:20px;align-self:center}
    .ft__small{flex-basis:100%}
  }

  /* hero */
  .hero-bg{position:relative;overflow:hidden}
  .hero-bg::before{content:"";position:absolute;inset:0;background:
     radial-gradient(120% 80% at 78% -6%, rgba(224,138,43,.10), transparent 55%),
     radial-gradient(90% 70% at 8% 0%, rgba(46,46,48,.06), transparent 50%);
     pointer-events:none}
  /* THE HERO HAD NO HEIGHT (owner, 2026-09-21: "when i opened landing page, the next section
     creeped in, usually hero should take up the whole area of the screen before scrolling").
     Half right, and the half that matters is not the one he named: a deliberate peek at the next
     section is GOOD, it says there is more. What was wrong is that this had no height at all, so
     it ended wherever the copy ended, left ~140px of dead space, and then sliced the next heading
     in half at the fold. That reads as a mistake, not as an invitation.
     So: fill the viewport MINUS the sticky nav MINUS a deliberate peek, and centre the content in
     what is left rather than letting it hang from the top with a hole underneath.
     62px is measured, not guessed — `.top`'s bottom border sits at y=62 at both 1280px and 430px.
     132px is the peek, measured not chosen: the next section's own padding-top (clamp 38-68px)
     comes before its heading, so 84px was spent entirely on padding and left a ~16px sliver of the
     heading — the cropped look this change removes, just smaller. 132 clears both.
     svh, not vh: vh on a phone is the tallest the viewport ever gets, so the hero would run under
     the browser chrome and the peek would be invisible exactly where it is needed most.
     On a phone the stacked hero is already taller than this, so min-height simply does nothing. */
  .hero{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:start;align-content:center;min-height:calc(100svh - 62px - 132px);padding:clamp(20px,2.4vw,40px) 0 clamp(40px,5vw,72px)}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mk-amber-ink);background:var(--mk-amber-tint);border:1px solid var(--mk-amber-edge);padding:6px 13px;border-radius:999px}
  .hero h1{font-weight:800;letter-spacing:-.045em;line-height:.95;font-size:clamp(42px,7.4vw,82px);margin:20px 0 0;text-wrap:balance}
  .hero .lede{font-size:var(--t-lede);color:var(--mk-ink-2);margin:22px 0 0;max-width:44ch;line-height:1.55}
  .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
  .cta .btn{min-height:54px;font-size:var(--t-body);padding:0 28px}
  .microproof{margin-top:22px;font-size:var(--t-s);color:var(--mk-ink-faint);line-height:1.5}
  .microproof b{color:var(--mk-ink-2);font-weight:600}
  .microproof .ico{width:17px;height:17px;color:var(--mk-ok);display:inline-block;vertical-align:-3px;margin-right:8px}

  /* hero product mock */
  .mock{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-xl);box-shadow:var(--mk-shadow-lg);padding:20px;max-width:400px;margin-left:auto}
  .heroshot{display:block;width:100%;max-width:860px;margin-left:auto;height:auto;border-radius:var(--mk-r-xl);box-shadow:var(--mk-shadow-lg)}
  .mock__hd{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--mk-divider)}
  .mock__ava{flex:none;width:44px;height:44px;border-radius:999px;background:var(--mk-accent);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:var(--t-body)}
  .mock__nm{font-family:var(--fd);font-weight:700;font-size:var(--t-body);letter-spacing:-.01em}
  .mock__rl{font-size:var(--t-s);color:var(--mk-ink-faint);margin-top:1px}
  .mock__svc{padding:15px 0 4px}
  .mock__svc .t{font-family:var(--fd);font-weight:680;font-size:var(--t-body)}
  .mock__meta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
  .chipm{font-size:var(--t-xs);font-weight:600;color:var(--mk-ink-2);background:var(--mk-surface-muted);border-radius:999px;padding:4px 10px;font-variant-numeric:tabular-nums}
  .chipm.pr{color:var(--mk-ink);background:transparent;border:1px solid var(--mk-border)}
  .mock__lbl{font-size:var(--t-xs);font-weight:600;color:var(--mk-ink-faint);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 9px}
  .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .slot{border:1px solid var(--mk-border);border-radius:var(--mk-r-sm);padding:10px 6px;text-align:center;font-size:var(--t-s);font-weight:600;font-variant-numeric:tabular-nums;color:var(--mk-ink-2)}
  .slot.sel{border-color:var(--mk-ok-edge);background:var(--mk-ok-tint);color:var(--mk-ok-ink);box-shadow:inset 0 0 0 1px var(--mk-ok-edge)}
  .slot small{display:block;font-weight:500;color:inherit;opacity:.75;font-size:var(--t-xs);margin-top:2px}
  .mock__go{margin-top:14px;width:100%;background:var(--mk-accent);color:#fff;border:none;border-radius:var(--mk-r-md);padding:13px;font-family:var(--fd);font-weight:700;font-size:var(--t-s);display:flex;align-items:center;justify-content:center;gap:8px}
  .mock__sms{margin-top:12px;display:flex;gap:10px;align-items:flex-start;background:var(--mk-surface-dim);border-radius:var(--mk-r-md);padding:11px 13px;font-size:var(--t-s);color:var(--mk-ink-2)}
  .mock__sms .ico{width:16px;height:16px;color:var(--mk-ink-faint);flex:none;margin-top:1px}
  .mock__sms b{color:var(--mk-ink);font-weight:650}

  /* trust strip */
  .strip{border-top:1px solid var(--mk-divider);border-bottom:1px solid var(--mk-divider);background:var(--mk-surface)}
  .strip .in{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;padding:18px var(--pad)}
  .strip .t{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:640;font-size:var(--t-s);color:var(--mk-ink-2)}
  .strip .t .ico{width:18px;height:18px;color:var(--mk-ok)}

  /* sections */
  section{padding-top:clamp(38px,5.5vw,68px);padding-bottom:clamp(38px,5.5vw,68px);border-top:1px solid var(--mk-divider)}
  section:first-of-type,.strip+section{border-top:none}
  .lab{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:28px}
  .lab h2{font-weight:700;letter-spacing:-.025em;font-size:var(--t-h2);line-height:1.05}
  .lab span{color:var(--mk-ink-faint);font-size:var(--t-body)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .card{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-lg);box-shadow:var(--mk-shadow);padding:26px;transition:transform .2s,box-shadow .2s}
  .card .ci{width:42px;height:42px;border-radius:var(--mk-r-md);background:var(--mk-surface-muted);display:grid;place-items:center;color:var(--mk-ink);margin-bottom:16px}
  .card .ci .ico{width:22px;height:22px}
  .card .step{font-family:var(--fd);font-weight:800;font-size:var(--t-s);color:var(--mk-amber-ink);letter-spacing:.1em;margin-bottom:10px}
  .card .kh{font-family:var(--fd);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em}
  .card p{color:var(--mk-ink-faint);font-size:var(--t-body);margin-top:8px;line-height:1.5}

  /* offer */
  .offer{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 32px}
  .o{display:flex;gap:12px;align-items:center;font-family:var(--fb);font-weight:500;font-size:var(--t-body);letter-spacing:-.01em;padding:16px 0;border-bottom:1px solid var(--mk-divider)}
  .o .ck{flex:none;width:28px;height:28px;border-radius:999px;background:var(--mk-ok-tint);border:1px solid var(--mk-ok-edge);color:var(--mk-ok-ink);display:grid;place-items:center}
  .o .ck .ico{width:16px;height:16px;stroke-width:2.4}

  /* statement */
  .statement{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-xl);box-shadow:var(--mk-shadow);padding:clamp(38px,5vw,72px) clamp(24px,4vw,60px);text-align:center}
  .statement p{font-family:var(--fd);font-weight:750;letter-spacing:-.03em;line-height:1.14;font-size:var(--t-h2);max-width:22ch;margin:0 auto;text-wrap:balance}
  .statement .em{color:var(--mk-ink-faint)}

  /* pricing */
  .pricing{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .pc{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-lg);box-shadow:var(--mk-shadow);padding:32px;display:flex;flex-direction:column}
  /* margin-top:auto bottom-aligns the two CTAs even though the cards hold different amounts of text */
  .pc .btn{margin-top:auto;align-self:flex-start}
  .pc p:last-of-type{margin-bottom:24px}
  .pc .t{font-size:var(--t-s);font-weight:700;color:var(--mk-ink-faint);font-family:var(--fd);letter-spacing:.05em;text-transform:uppercase}
  .pc .big{font-family:var(--fd);font-weight:800;font-size:var(--t-h2);letter-spacing:-.035em;margin:10px 0 8px}
  .pc .big.free{color:var(--mk-ok-ink)}
  .pc p{color:var(--mk-ink-2);font-size:var(--t-body);line-height:1.55}
  .pc .was{font-family:var(--fd);font-weight:650;font-size:var(--t-s);color:var(--mk-ink-faint);margin-top:10px}
  .pc .was s{text-decoration-thickness:2px;text-decoration-color:var(--mk-amber)}
  .pc .big.tight{margin-top:2px}

  /* faq */
  .faq{border-top:1px solid var(--mk-border)}
  .faq details{border-bottom:1px solid var(--mk-border)}
  .faq summary{cursor:pointer;list-style:none;padding:21px 2px;font-family:var(--fd);font-weight:680;font-size:var(--t-lede);letter-spacing:-.015em;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .pm{flex:none;color:var(--mk-ink-faint);transition:transform .2s}
  .faq details[open] summary .pm{transform:rotate(45deg)}
  .faq details p{padding:0 2px 22px;color:var(--mk-ink-2);font-size:var(--t-body);max-width:60ch;line-height:1.55}

  /* dark closing */
  .foot{background:var(--mk-accent);color:var(--mk-on-accent);border-radius:var(--mk-r-xl);padding:clamp(32px,5vw,60px);display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center;box-shadow:var(--mk-shadow-lg);margin-bottom:18px;position:relative;overflow:hidden}
  .foot::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 88% -10%, rgba(224,138,43,.18), transparent 55%);pointer-events:none}
  .foot>*{position:relative}
  .foot h3{color:var(--mk-on-accent);font-family:var(--fd);font-weight:700;letter-spacing:-.025em;font-size:var(--t-h2);line-height:1.02;margin:0 0 13px;text-wrap:balance}
  .foot p{color:var(--mk-on-accent-faint);font-size:var(--t-body);max-width:36ch;margin:0 0 26px}
  .foot .cta .btn--primary{background:var(--mk-surface);color:var(--mk-ink);box-shadow:none}
  .foot .cta .btn--ghost{background:transparent;color:var(--mk-on-accent);border-color:rgba(255,255,255,.32)}
  .footmeta{display:flex;flex-direction:column;align-self:start}
  .footmeta .it{display:flex;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:var(--t-s)}
  .footmeta .it:last-child{border-bottom:none}
  .signup{display:flex;flex-direction:column;gap:10px;max-width:34ch;margin:0 0 12px}
  .signup input,.signup textarea{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:12px;color:var(--mk-on-accent);padding:12px 14px;font:inherit;font-size:var(--t-body)}/* 16px, not 15: iOS Safari zooms the whole page when a focused input is under 16px, and this is the only conversion form on the site. */
  .signup textarea{resize:vertical;min-height:64px}
  .signup input::placeholder,.signup textarea::placeholder{color:var(--mk-on-accent-faint)}
  .signup input:focus,.signup textarea:focus{outline:none;border-color:var(--mk-surface);background:rgba(255,255,255,.18)}
  a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--mk-amber);outline-offset:2px}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .signup .btn--primary{background:var(--mk-surface);color:var(--mk-ink);box-shadow:none;margin-top:2px}
  .signup .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
  .signup__hint{color:var(--mk-on-accent-faint);font-size:var(--t-s);max-width:34ch;margin:0 0 8px}
  .signup__msg{font-size:var(--t-s);margin:0 0 8px;min-height:1.1em;max-width:34ch}
  .signup__msg.ok{color:#e4ffe9}
  .signup__msg.err{color:#ffe0d6}
  .foot .altlink{color:var(--mk-on-accent);font-size:var(--t-s);text-decoration:underline;opacity:.8}
  .foot .signup__mail{grid-column:1/-1;max-width:none;margin:14px 0 0;text-align:center;font-family:var(--fd);font-weight:600;font-size:var(--t-lede);letter-spacing:-.01em;color:var(--mk-on-accent)}
  .foot .signup__mail a{color:inherit;text-decoration:none}
  .foot .signup__mail a:hover{text-decoration:underline}
  .footmeta dt{color:var(--mk-on-accent-faint)}
  .footmeta dd{margin:0;font-family:var(--fd);font-weight:700}
  .end{text-align:center;color:var(--mk-ink-faint);font-size:var(--t-xs);padding:8px 0 40px}

  /* WHAT WORKS TODAY / WHAT DOES NOT. A ruled list, not cards: the page already spends its
     card budget on the three steps and the two prices, and a third set of eight made the
     inventory read as more product rather than as less. Hairline rules are the FAQ's device,
     borrowed here because both are "run your eye down it" content. */
  /* DESTINATIONS STRIP. They are a list, so they are set as one: as prose they cost 19 words
     inside a 44-word lede (owner, 2026-09-16), as three labels the eye takes them in at once.
     Above the buttons because they are part of the offer; the microproof below, because a
     reassurance belongs after the ask. */
  .dests{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;padding-top:16px;border-top:1px solid var(--mk-divider)}
  .dests span{display:inline-flex;align-items:center;gap:7px;font-family:var(--fd);font-weight:600;font-size:var(--t-s);color:var(--mk-ink-2)}
  .dests svg{width:15px;height:15px;color:var(--mk-ok);flex:none}

  /* PRICING IS NOW THE ONLY PLACE FEATURES ARE ENUMERATED (owner, 2026-09-16). The whole
     "Mi megy már, és mi nem" section is gone: the page listed its features three times — in the
     steps, in that section, and here — and this is where the reader is actually asking. The
     requests screenshot came with it rather than being deleted, because ten rows of ticks read as
     a spreadsheet and that screen is the only picture of the product deciding something. */
  .cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
  .cmp .pc{display:flex;flex-direction:column}
  .plist{list-style:none;margin:14px 0 18px;padding:0}
  .plist li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--mk-divider);font-size:var(--t-s);line-height:1.4}
  .plist li:first-child{border-top:0}
  .plist .m{flex:none;width:16px;height:16px;margin-top:2px}
  .plist .yes{color:var(--mk-ok)}
  .plist .no{color:var(--mk-ink-faint);opacity:.45}
  .plist li.off{color:var(--mk-ink-faint)}
  .pc .btn{margin-top:auto}
  /* A HEADING THAT WRAPS PUSHED EVERYTHING UNDER IT (owner caught this 2026-09-16). `.pc .big` and
     `.step .kh` had no line-height and no reserved height, so "Most ingyenes" wrapping started the
     left card's list lower than the right card's — and in a COMPARISON, rows that do not align
     cannot be compared, which is the section's only job. Tightened leading plus two lines reserved
     in every card, so one-line and two-line headings occupy the same box. */
  .pc .big{line-height:1.03;min-height:2.06em;display:flex;align-items:flex-start}
  .step .kh{line-height:1.25;min-height:2.5em}
  /* One row, four facts, under the price where the question is asked. */
  .trust{margin-top:20px;padding-top:16px;border-top:1px solid var(--mk-divider);color:var(--mk-ink-2);font-size:var(--t-s);line-height:1.6;max-width:70ch}
  .trust b{color:var(--mk-ink)}
  /* The unbuilt three, OUTSIDE the cards: nothing unbuilt ever sits inside a list of what you pay for. */
  .soon2{margin-top:30px;padding-left:16px;border-left:2px solid var(--mk-amber-edge);max-width:640px}
  .soon2 h3{font-family:var(--fd);font-weight:700;font-size:var(--t-h3);color:var(--mk-amber-ink);margin-bottom:10px}
  .srow{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--mk-divider)}
  .srow:first-of-type{border-top:0}
  .srow__c{flex:1 1 auto;min-width:0}
  .srow .t{font-family:var(--fd);font-weight:700;font-size:var(--t-h3);display:block}
  /* A bare noun cannot be voted on — "Számlázás" could mean we issue it or we connect to what he
     already uses, and those are different products, one regulated. One qualifier line each. */
  .srow .d{color:var(--mk-ink-faint);font-size:var(--t-s);line-height:1.45;margin-top:2px}
  .vrow{display:flex;align-items:center;gap:7px;flex:none}
  .vb{width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--mk-border);background:var(--mk-surface);border-radius:999px;cursor:pointer;color:var(--mk-ink-faint)}
  .vb:hover{border-color:#bfbfc4;color:var(--mk-ink)}
  .vb[aria-pressed="true"]{background:var(--mk-ink);border-color:var(--mk-ink);color:#fff}
  .vb:disabled{cursor:default}
  .vb svg{width:15px;height:15px}
  .fshot img{display:block;width:100%;height:auto;border-radius:var(--mk-r-md);border:1px solid var(--mk-border);box-shadow:var(--mk-shadow)}
  .fshot figcaption{color:var(--mk-ink-faint);font-size:var(--t-s);line-height:1.45;margin-top:10px}
  @media(max-width:620px){ .cmp{grid-template-columns:minmax(0,1fr)} }

  /* Early-access card. Light, because a second dark card before the dark closing block turned the
     page's one emphatic surface into wallpaper. It reuses .signup for the fields and overrides
     only the four colours that assume a dark ground. */
  .ea{margin-top:20px;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-lg);box-shadow:var(--mk-shadow);padding:clamp(24px,3.2vw,36px);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,3vw,40px);align-items:center}
  .ea h3{font-family:var(--fd);font-weight:700;letter-spacing:-.025em;font-size:var(--t-h3);line-height:1.08;margin-bottom:11px;text-wrap:balance}
  .ea p{color:var(--mk-ink-2);font-size:var(--t-body);line-height:1.55;max-width:46ch}
  .signup--l{max-width:none;margin:0}
  .signup--l input{background:var(--mk-surface-dim);border-color:var(--mk-border);color:var(--mk-ink)}
  .signup--l input::placeholder{color:var(--mk-ink-faint)}
  .signup--l input:focus{border-color:var(--mk-accent);background:var(--mk-surface)}
  .signup--l .btn--primary{background:var(--mk-accent);color:var(--mk-on-accent);box-shadow:var(--mk-shadow)}
  .ea .signup__hint{color:var(--mk-ink-faint);max-width:none}
  .ea .signup__msg{max-width:none}
  .ea .signup__msg.ok{color:var(--mk-ok-ink)}
  .ea .signup__msg.err{color:#A33A1F}
  @media(max-width:900px){.finv{grid-template-columns:1fr}.fshot{max-width:260px;margin:4px auto 0}.ea{grid-template-columns:1fr}}

  /* mobile sticky */
  .mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:none;gap:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--mk-border);border-radius:var(--mk-r-xl);box-shadow:var(--mk-shadow-lg);padding:10px}
  .mbar .btn{flex:1;min-height:48px}

  @media(max-width:900px){
    .hero{grid-template-columns:1fr;gap:34px}
    .mock{margin:0 auto}
  .heroshot{margin:0 auto}
    .grid3,.offer,.pricing{grid-template-columns:1fr}
    .offer{gap:0}
    .foot{grid-template-columns:1fr;gap:26px}
    .mbar{display:flex}
    body{padding-bottom:84px}
    /* The pages that load this file (kerdesek, indulas) have NO sticky bar, so both nav buttons
       stay on a phone. Until 2026-09-24 they were hidden, leaving no login and no signup at all.
       The icon goes so the pair fits a 360px screen. */
    .top .btn{padding:0 12px}
    .top .btn .ico{display:none}
  }

  .mapsec{padding-block:clamp(40px,6vw,84px) clamp(12px,2vw,28px)}
  .mapsec__head{max-width:620px;margin:0 0 clamp(24px,3vw,38px)}
  .mapsec .eyebrow{font-family:var(--fd);font-weight:700;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mk-amber-ink);margin:0 0 14px}
  .mapsec h2{font-family:var(--fd);font-weight:700;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.025em;color:var(--mk-ink);margin:0 0 14px;text-wrap:balance}
  .mapsec .sub{font-size:var(--t-body);line-height:1.55;color:var(--mk-ink-2);margin:0;max-width:48ch}
  .mapsec .sub b{color:var(--mk-ink);font-weight:600}
  .heroA{max-width:620px;margin:0 auto;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-xl);overflow:hidden;box-shadow:var(--mk-shadow-lg)}
  .rt{padding:6px}.rt__row{padding:13px 15px 11px}.rt__row+.rt__row{border-top:1px solid var(--mk-divider)}
  .rt__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:10px}
  .rt__t{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:800;font-size:var(--t-s);color:var(--mk-ink)}
  .rt__badge{width:9px;height:9px;border-radius:99px}.rt__badge.bad{background:#C0492E}.rt__badge.good{background:var(--mk-ok)}
  .rt__km{font-family:var(--fd);font-weight:700;font-size:var(--t-xs);padding:4px 11px;border-radius:99px;white-space:nowrap}
  .rt__km.bad{color:#C0492E;background:#FBEDE9;border:1px solid #F0CFC5}.rt__km.good{color:var(--mk-ok-ink);background:var(--mk-ok-tint);border:1px solid var(--mk-ok-edge)}
  .rt__map{border-radius:14px;overflow:hidden;border:1px solid var(--mk-border);background:#EDEBE4}
  .heroA svg.mk{display:block;width:100%;height:auto}
  .heroA .route{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
  .heroA .pinG{opacity:0;transform:translateY(-6px) scale(.4);transform-box:fill-box;transform-origin:50% 100%}
  .heroA .fadeG{opacity:0}
  .heroA.show .route{animation:mkdraw var(--dur,1.2s) var(--ease,ease) var(--d,0s) forwards}
  .heroA.show .pinG{animation:mkpop .4s cubic-bezier(.3,1.45,.45,1) var(--d,0s) forwards}
  .heroA.show .fadeG{animation:mkfade .5s ease var(--d,0s) forwards}
  @keyframes mkdraw{to{stroke-dashoffset:0}}
  @keyframes mkpop{to{opacity:1;transform:none}}
  @keyframes mkfade{to{opacity:1}}
  @media(prefers-reduced-motion:reduce){.heroA .route{stroke-dashoffset:0}.heroA .pinG,.heroA .fadeG{opacity:1;transform:none}.heroA.show .route,.heroA.show .pinG,.heroA.show .fadeG{animation:none}}

  .tback{padding-block:clamp(48px,7vw,96px) clamp(20px,3vw,40px)}
  .tback__head{max-width:640px;margin:0 0 clamp(30px,4vw,48px)}
  .tback .eyebrow{font-family:var(--fd);font-weight:700;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mk-ok-ink);margin:0 0 14px}
  .tback h2{font-family:var(--fd);font-weight:700;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.025em;color:var(--mk-ink);margin:0 0 16px}
  .tback .sub{font-size:var(--t-body);line-height:1.55;color:var(--mk-ink-2);margin:0;max-width:52ch}
  .tback__pay{font-family:var(--fd);font-weight:700;font-size:var(--t-body);line-height:1.35;letter-spacing:-.02em;color:var(--mk-ink);margin:clamp(22px,2.6vw,30px) 0 0;max-width:30ch}
  /* D2: "Így néz ki" step cards and "Ki csinálja" block */
  /* One card type: a numbered step, its claim, and the screenshot of that moment.
     The shot is cropped to a fixed ratio and top-anchored so three different source
     images still line the cards up. */
  .step{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-lg);box-shadow:var(--mk-shadow);padding:22px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
  .step .n{font-family:var(--fd);font-weight:800;font-size:var(--t-xs);letter-spacing:.14em;color:var(--mk-amber-ink);background:var(--mk-amber-tint);border:1px solid var(--mk-amber-edge);border-radius:999px;padding:4px 11px;align-self:flex-start}
  .step .kh{font-family:var(--fd);font-weight:700;font-size:var(--t-h3);letter-spacing:-.02em}
  .step p{color:var(--mk-ink-2);font-size:var(--t-body);line-height:1.55}
  /* The shot is a SCREEN, not a bleed (user, 2026-08-21: "should show more screen, not just a
     fraction, and it should look better like some shadow underneath, like a real screen"). It used
     to run off the card bottom (radius top-only, border-bottom:none) inside a 1/1 box cropped from
     `left top` — and the phone rule made that box 5/4 LANDSCAPE, so a portrait source lost roughly a
     third of its height on the screen this page is mostly read on. Now: 9/10, which is between the
     three sources' own ratios (0.87 / 0.95 / 1.0) so every one of them is nearly whole; framed on
     all four sides; and lifted off the card by a shadow instead of sinking into it. */
  /* THE SHOT SITS ON A PANEL, IT DOES NOT RUN TO THE CARD EDGE (user, 2026-08-25: "why not any
     margin on the actual print screens? like on olnu's previews, look much better"). It had 2px of
     side padding and 4px at the bottom inside a card padded to 22px, so the image cleared the text
     above it and then collided with three edges — which is what made it read as a cropped bleed
     rather than a screenshot someone framed. Now the shot inherits the card's own 22px measure via
     a tinted inset panel: even margin on all four sides, and the panel's ground separates the
     screen from the card the way olnu's previews do. */
  .step .shot{margin-top:auto;background:var(--mk-surface-dim);border:1px solid var(--mk-border);border-radius:var(--mk-r-md);padding:18px}
  .step .shot img{display:block;width:100%;height:auto;aspect-ratio:9/10;object-fit:cover;object-position:top center;border-radius:var(--mk-r-sm);border:1px solid var(--mk-border);box-shadow:0 12px 26px -10px rgba(23,20,17,.28),0 2px 6px rgba(23,20,17,.06)}
  @media(max-width:860px){.grid3{grid-template-columns:1fr}}
  
  /* ============================================================================================
     2026-09-18 PASS — reads as one layer over the rules above, on purpose. The older rules keep
     their per-element numbers so the diff stays reviewable; this block is the type scale, the
     rhythm and the signature removals (see docs/session_notes.md, 2026-09-18). When the older
     rules are next touched, fold these in and delete the block. */
/* ============ ROUND 2, kept: the signature removals ============ */
.hero-bg::before{display:none}
.top{background:var(--mk-canvas);backdrop-filter:none}
.mbar{background:var(--mk-surface);backdrop-filter:none;border-radius:var(--mk-r-md);box-shadow:var(--mk-shadow)}
.btn{border-radius:var(--mk-r-md)}
.eyebrow,.step .n,.rt__km{background:none;border:0;padding:0;border-radius:0}
.vb{border-radius:8px}
.step{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.step .shot{background:none;border:0;padding:0;border-radius:0}
.statement{background:none;border:0;box-shadow:none;padding:0;text-align:left}
.dests{border-top:0;padding-top:0}
.dests span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mk-amber);flex:none}
.endlinks{display:inline-flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;opacity:.8;margin-top:4px}
.endlinks a{color:inherit}
/* the contact card and the hero render stay as they were (owner, round 3) */

/* ============ ROUND 3: one type scale, one weight set, one rhythm ============ */
/* raise the screens: they are objects on the canvas, not part of it */
/* screens: a light well (the object on the canvas) holding a straight-on phone (the device the
   screenshot actually came from). Flat, no perspective, no photo. */
.step .shot{background:var(--mk-surface-dim);border:1px solid var(--mk-border);border-radius:var(--mk-r-lg);
  padding:28px 28px 0;overflow:hidden;box-shadow:var(--mk-shadow)}
.step .shot img{aspect-ratio:9/11;border:8px solid var(--mk-ink);border-bottom:0;border-radius:34px 34px 0 0;
  box-shadow:var(--mk-shadow-raised);background:var(--mk-ink)}
.fshot img{border:8px solid var(--mk-ink);border-radius:34px;box-shadow:var(--mk-shadow-raised);background:var(--mk-ink)}
.fshot img{box-shadow:var(--mk-shadow-raised)}
.heroA{box-shadow:var(--mk-shadow-raised)}

/* --- weights: 400 / 600 / 700 / 800 only --- */
.hero h1{font-weight:800;letter-spacing:-.04em}
.lab h2,.mapsec h2,.tback h2,.foot h3,.pc .big{font-weight:700;letter-spacing:-.025em}
.step .kh,.pc .t,.srow .t,.soon2 h3,.rt__t{font-weight:700;letter-spacing:-.015em}
.statement p{font-weight:600;letter-spacing:-.02em}
.dests span,.microproof b,.mapsec .sub b,.trust b,.footmeta dd,.pc .was{font-weight:600;letter-spacing:0}
.brand{letter-spacing:.14em}

/* --- sizes: seven steps, nothing in between --- */
.hero .lede{font-size:var(--t-lede);line-height:1.45}
.lab h2,.mapsec h2,.tback h2,.foot h3{font-size:var(--t-h2);line-height:1.1}
.step .kh,.pc .t,.srow .t,.soon2 h3{font-size:var(--t-h3);line-height:1.2}
.pc .t{text-transform:none;letter-spacing:-.015em;color:var(--mk-ink)}
.step p,.mapsec .sub,.tback__pay,.pc p,.foot p,.lab span,.signup input,.signup textarea,.srow .d,.statement p+p{font-size:var(--t-body);line-height:1.5}
.tback__pay{font-family:var(--fb);font-weight:400;color:var(--mk-ink-2);max-width:44ch;letter-spacing:0}
.dests span,.microproof,.plist li,.trust,.fshot figcaption,.footmeta .it,.pc .was,.rt__t,.rt__km,.srow .d,.signup__hint,.cta .btn,.btn{font-size:var(--t-s)}
.btn,.cta .btn{font-size:var(--t-body)}
.eyebrow,.mapsec .eyebrow,.step .n,.rt__km,.end{font-size:var(--t-xs)}
.eyebrow,.mapsec .eyebrow{letter-spacing:.12em}
.statement p{font-size:var(--t-h2);line-height:1.15;max-width:28ch;color:var(--mk-ink)}
.foot .signup__mail{font-size:var(--t-lede);text-align:left;margin-top:var(--mk-sp-2)}
.rt__km{font-size:var(--t-s);font-weight:600;white-space:normal;text-align:right}
.rt__km.bad,.rt__km.good{background:none;border:0}  /* .rt__km.bad outranks .rt__km, so the pill removal above did not reach it */

/* --- colour is a hierarchy step too: three inks, used in order --- */
.lab span,.microproof,.fshot figcaption,.pc .was,.srow .d,.end{color:var(--mk-ink-faint)}
.dests span{color:var(--mk-ink-2)}
.mapsec .sub span[style]{opacity:1!important;color:var(--mk-ink-faint)}   /* the 55% disclaimer failed AA at 15px */
.plist .no{opacity:.7}

/* --- buttons: two heights, not four --- */
.btn,.cta .btn,.mbar .btn{min-height:48px;padding:0 24px}
.top .btn{min-height:40px;padding:0 18px}

/* --- rhythm: one section spacing; one 8-step scale inside --- */
section,.mapsec,.tback{padding-block:var(--mk-section)}
.hero{padding:var(--mk-sp-3) 0 var(--mk-sp-6)}
.hero h1{margin-top:var(--mk-sp-2)}
.hero .lede{margin-top:var(--mk-sp-3)}
.dests{margin-top:var(--mk-sp-2);gap:var(--mk-sp-1) 22px}
.cta{margin-top:var(--mk-sp-4)}
.microproof{margin-top:var(--mk-sp-2)}
.lab{margin-bottom:var(--mk-sp-4);gap:var(--mk-sp-1) var(--mk-sp-2)}
.mapsec__head,.tback__head{margin-bottom:var(--mk-sp-4)}
.tback__pay{margin-top:0}
.grid3{gap:var(--mk-sp-4)}
.step{gap:0}
.step .kh{margin-top:0}
.step p{margin-top:var(--mk-sp-1)}
.step .shot{margin-top:var(--mk-sp-3)}
.statement p{margin:0}
.pc{padding:var(--mk-sp-4)}
.plist{margin:var(--mk-sp-3) 0 var(--mk-sp-3)}
.plist li{padding:10px 0}
.trust{margin-top:var(--mk-sp-3);padding-top:var(--mk-sp-2)}
.soon2{margin-top:var(--mk-sp-4)}
.vote-free{max-width:none;flex-direction:row;align-items:stretch;gap:var(--mk-sp-1);margin:var(--mk-sp-2) 0 0;padding-top:var(--mk-sp-2);border-top:1px solid var(--mk-divider)}
.vote-free textarea{min-height:48px;resize:none;font-size:var(--t-body);background:var(--mk-surface);border-color:var(--mk-border);color:var(--mk-ink)}
.vote-free textarea::placeholder{color:var(--mk-ink-faint)}
.vote-free textarea:focus{border-color:var(--mk-accent);background:var(--mk-surface)}
.vote-free .btn{flex:none;align-self:flex-start}
@media(max-width:620px){.vote-free{flex-direction:column}}
.foot{padding:clamp(32px,5vw,56px)}
.foot h3{margin-bottom:var(--mk-sp-2)}
.foot p{margin-bottom:var(--mk-sp-3)}

/* --- alignment: the three columns share rows, so screens start on one line (subgrid, no min-height hacks) --- */
@media(min-width:861px){
  .grid3{grid-template-rows:auto auto auto}
  .step{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
  .step .shot{margin-top:0;align-self:start}
  .cmp{grid-template-rows:auto auto auto 1fr auto}
  .cmp .pc{display:grid;grid-template-rows:subgrid;grid-row:span 5}
  .pc .btn{align-self:end;justify-self:start}
}
/* --- hierarchy bugs found in the phone screenshots --- */
/* equal-height hacks that become holes on one column */
.step .kh{min-height:0}
.pc .big{min-height:0;display:block;line-height:1.05}
@media(max-width:620px){.pc .was[aria-hidden]{display:none}}
/* the step number sits in the title line, not alone on a line above it */
.step .n{display:none}
.grid3{counter-reset:s}
.step .kh::before{counter-increment:s;content:counter(s);display:inline-block;min-width:1.4em;color:var(--mk-amber);font-weight:700}
/* pricing: tier name is the anchor; current price next; list price is a footnote under it, not a strike-through above it */
.pc .was{order:2;margin:var(--mk-sp-1) 0 0}
.pc .was s{text-decoration:none;color:inherit}
.pc .big{order:1;margin-top:var(--mk-sp-1)}
.pc .plist{order:3}
.pc .btn{order:4}
.pc .t{order:0}
/* the subtitle beside an H2 wraps under it on phones and read as a paragraph; give it its own line everywhere */
.lab{flex-direction:column;align-items:flex-start;gap:var(--mk-sp-1)}
.lab span{max-width:52ch}

  .vote-free__msg{max-width:none;color:var(--mk-ink-2)}
  .vote-free__msg.ok{color:var(--mk-ok-ink)}
  .vote-free__msg.err{color:#A33A1F}


/* ── A CLAIM AND THE SCREEN THAT PROVES IT, SIDE BY SIDE (2026-09-21) ────────────────────────────
   Two sections argued in words and showed nothing: the review breather and "Az este megint a
   tiéd". Both now carry a phone shot, and both reuse `.fshot` so the frame, the radius, the border
   and the caption are the ones the page already uses — the owner's ask was that they "look
   consistent with rest of the screens on the page", so nothing new was invented for them.

   The section becomes a two-column grid only when there is room for one. Below 860px the shot goes
   under the text and is capped, because a full-width phone screenshot on a phone is a screenshot
   of a phone the size of the phone, which reads as a glitch rather than as an illustration. */
.statement + .sideshot, .tback .sideshot, .statement ~ .sideshot { margin: 0 }
/* One text column and one shot, vertically centred against each other. It was briefly three grid
   items (heading, payoff, shot) for the evening section, and a shot spanning two rows inflates the
   tracks it spans — the heading and the payoff drifted ~180px apart. That section is a photograph
   now and this rule serves only the review breather, which has a single text child, so the wrapper
   that fixed it is gone with it. */
section:has(> .sideshot){display:grid;grid-template-columns:1fr minmax(240px,300px);gap:clamp(24px,4vw,56px);align-items:center}
.sideshot{margin:0}
@media(max-width:860px){
  section:has(> .sideshot){display:block}
  .sideshot{max-width:260px;margin:clamp(22px,4vw,30px) auto 0}
}

/* ── THE NAV GOT ITS TRANSPARENCY BACK, AND EVERY PHONE SHOT IS ONE SIZE (2026-09-22) ──────────
   NAV: owner, "top nav bar should be semi transparent so it's not taking up too much precious
   screen space regardless of where user scrolls". It was ALREADY written that way at the top of
   this sheet — rgba + a blur — and a later rule in the 2026-09-18 block overrode both with a flat
   `background:var(--mk-canvas);backdrop-filter:none`, so the bar has been solid ever since. This
   restores the intent rather than inventing a new one, a shade more transparent than the
   original .82 because the bar is now pinned over a hero that fills the screen.

   SHOT SIZES: owner, "on phone, some screens are huge whereas others are tiny". Two families had
   drifted apart — the three step shots ran the full column width (~358px on a phone) while every
   .fshot was capped at 260. Same bezel, same product, two sizes. They are now capped together AND
   cropped to the same 9/11 frame, which is the step shots' existing proportion: a 721x1560 phone
   screenshot shown whole is two and a half times taller than a step shot beside it, so matching
   the width alone would not have matched the size.

   The crop is also the fix for the reviews shot being "too long", with the contact box at its
   foot that has nothing to do with reviews — object-position:top means the frame keeps the
   heading and the first reviews and drops the rest, with no second screenshot to maintain. */
.top{background:rgba(239,239,240,.72);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.fshot img{aspect-ratio:9/11;object-fit:cover;object-position:top center}
@media(max-width:860px){
  .step .shot{max-width:300px;margin-left:auto;margin-right:auto}
  .fshot,.sideshot{max-width:300px}
}

/* ── THE EVENING SECTION IS A PHOTOGRAPH WITH THE LINE ON IT (2026-09-22) ──────────────────────
   Owner supplied the picture (Hármashatárhegy, over the Buda hills) and asked for the text on top
   of it rather than beside it, matching the hero's photographic treatment.

   TWO FILES, NOT ONE. A 2:1 crop letterboxed on a phone is a grey strip with a caption; the
   narrow file is framed on the lit meadow and the nearest roofs so the copy still has somewhere
   quiet to sit. <picture> picks, so a phone never downloads the 1800px one.

   THE SCRIM IS A GRADIENT, NOT A FLAT TINT. The picture is dark at the foot and hazy pale at the
   top, so a uniform overlay either greys out the sky or leaves white text on haze. The gradient
   is heaviest exactly where the type sits and nearly absent over the hills.

   text-shadow ON TOP OF the scrim, deliberately belt-and-braces: a photograph is not a design
   token and this one could be swapped for a lighter picture by someone who does not re-check the
   contrast. The shadow keeps the line readable if that happens. */
.estefig{position:relative;margin:0;border-radius:var(--mk-r-xl);overflow:hidden;isolation:isolate}
.estefig img{display:block;width:100%;height:auto;object-fit:cover}
.estefig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,14,22,.86) 0%,rgba(10,14,22,.62) 34%,rgba(10,14,22,.22) 62%,rgba(10,14,22,.06) 100%)}
.estefig__copy{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(22px,4vw,48px) clamp(20px,4vw,52px) clamp(46px,5vw,58px);max-width:34ch}
.estefig__copy h2{font-family:var(--fd);font-weight:700;font-size:var(--t-h2);line-height:1.05;
  letter-spacing:-.025em;color:#fff;margin:0 0 10px;text-shadow:0 1px 18px rgba(8,12,20,.55)}
.estefig__copy p{font-family:var(--fb);font-size:var(--t-body);line-height:1.5;margin:0;
  color:rgba(255,255,255,.88);text-shadow:0 1px 14px rgba(8,12,20,.5)}
.estefig__credit{position:absolute;right:clamp(12px,2vw,18px);bottom:clamp(10px,1.4vw,14px);z-index:1;
  font-family:var(--fb);font-size:var(--t-xs);line-height:1.3;color:rgba(255,255,255,.62);margin:0;text-align:right}
.estefig__credit a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:2px}
/* The section wrapper stops being a text column here — the figure IS the section. */
.tback:has(.estefig){padding-block:clamp(40px,6vw,84px) clamp(20px,3vw,40px)}
@media(max-width:700px){
  .estefig__copy{max-width:none}
}