/* ===== 00-fonts.css ===== */
/* Outfit – saját tárhelyről (nincs Google Fonts CDN → nincs adattovábbítás a Google felé) · @fontsource/outfit, OFL 1.1 */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/outfit-latin-ext-300-normal.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: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/outfit-latin-300-normal.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: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/outfit-latin-ext-400-normal.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: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/outfit-latin-400-normal.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: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/outfit-latin-ext-500-normal.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: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/outfit-latin-500-normal.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; }
/* Metrikailag illesztett tartalék (Arial) – CLS-mentes font-swap (SPEC §2.2) */
@font-face{font-family:'Outfit fb';src:local('Arial'),local('ArialMT');size-adjust:98.4%;ascent-override:101.6%;descent-override:26.4%;line-gap-override:0%}

/* ===== 01-tokens.css ===== */
/* =====================================================================
   01-tokens.css – design tokens (SPEC §2). Stage 0 (S0b).
   Raw palette + semantic layer. Components read ONLY the semantic tokens,
   except the always-dark objects (nav, drawer, thumb bar, ticket, voucher,
   promo, booking/voucher steps), which re-declare the dark semantic set.
   ===================================================================== */

/* ---------- 2.1 raw palette + semantic layer (exact SPEC values) ---------- */
:root{
  color-scheme: dark;
  /* raw – dark */
  --bg:#0F0B08; --bg-2:#15100C; --surface:#1B1510; --surface-2:#231B14; --surface-3:#2B1F15;
  --text:#F2E9DD; --text-2:#CDBFAF; --muted:#A99888; --faint:#8A796A;
  --accent:#D2A274; --accent-2:#E8CBA2; --accent-3:#B8864E; --ink:#17100A;
  --gold-grad:linear-gradient(160deg,#F4D9A8 0%,#D2A274 48%,#B8864E 100%);
  --err:#F0A58F; --ok:#BFD9AC;
  --line:rgba(242,233,221,.10);          /* decorative hairlines only */
  --line-2:rgba(242,233,221,.18);        /* decorative only – NEVER a control edge */
  --line-ui:rgba(242,233,221,.40);       /* every input/chip/day/slot/ghost-button edge (3.39:1) */
  --line-gold:rgba(210,162,116,.38);
  --glass:rgba(21,16,12,.90); --glass-solid:rgba(21,16,12,.97);
  --glow:rgba(210,162,116,.16); --glow-deep:rgba(140,90,50,.14);
  /* raw – paper ("inside the studio") */
  --paper:#F2E9DD; --paper-2:#E8DCCB; --paper-ink:#1E160F; --paper-muted:#5C4A3A;
  --accent-ink:#7A4F27; --err-paper:#9E3B24; --ok-paper:#3D6A37;
  --line-paper:rgba(23,16,10,.14); --line-paper-ui:rgba(23,16,10,.55);
}

/* semantic – dark (default) and every always-dark object */
:root,
.theme-dark,
.nav, .drawer, .thumbbar, .foot, .voucher, .bstep, .bbar, .lang-hint, .ticket, .promo{
  --page:var(--bg); --fg:var(--text); --fg-2:var(--muted); --fg-3:var(--faint);
  --hair:var(--line); --hair-2:var(--line-2); --edge:var(--line-ui);
  --accent-fg:var(--accent); --link:var(--accent-2);
  --err-fg:var(--err); --ok-fg:var(--ok); --info-fg:var(--accent-2);
  --card:var(--surface); --card-2:var(--surface-2); --field:rgba(242,233,221,.03);
  --focus:var(--accent-2);
  --btn-primary-bg:var(--text); --btn-primary-fg:var(--ink); --btn-primary-hover:var(--accent-2);
  /* S0b additions (semantic, both themes – CONTRACTS §5.1) */
  --tint:rgba(242,233,221,.08);          /* hover wash on ghost controls */
  --tint-2:rgba(242,233,221,.05);        /* subtle wash (rows, quiet hover) */
  --focus-edge:var(--accent);            /* input border while focused */
  --focus-ring:rgba(232,203,162,.35);    /* input focus halo */
  --sel-bg:var(--text); --sel-fg:var(--ink); --sel-sub:rgba(23,16,10,.72);  /* inverted "selected" pills */
  --tag-bg:var(--accent); --tag-fg:var(--ink);
  --check-bg:var(--accent); --check-fg:var(--ink);   /* checked boxes / done circles */
  --autofill:#221a13;
}
.nav, .drawer, .thumbbar, .foot, .voucher, .bstep, .bbar, .lang-hint, .ticket, .promo, .theme-dark{ color-scheme:dark; }

.theme-paper{
  color-scheme: light;
  --page:var(--paper); --fg:var(--paper-ink); --fg-2:var(--paper-muted); --fg-3:var(--paper-muted);
  --hair:var(--line-paper); --hair-2:rgba(23,16,10,.24); --edge:var(--line-paper-ui);
  --accent-fg:var(--accent-ink); --link:var(--accent-ink);
  --err-fg:var(--err-paper); --ok-fg:var(--ok-paper); --info-fg:var(--accent-ink);
  --card:var(--paper-2); --card-2:#DFD1BD; --field:rgba(23,16,10,.03);
  --focus:var(--paper-ink);
  --btn-primary-bg:var(--paper-ink); --btn-primary-fg:var(--paper); --btn-primary-hover:#3A2B1F;
  --tint:rgba(23,16,10,.06); --tint-2:rgba(23,16,10,.04);
  --focus-edge:var(--accent-ink); --focus-ring:rgba(122,79,39,.28);
  --sel-bg:var(--paper-ink); --sel-fg:var(--paper); --sel-sub:rgba(242,233,221,.78);
  --tag-bg:var(--accent-ink); --tag-fg:var(--paper);
  --check-bg:var(--accent-ink); --check-fg:var(--paper);
  --autofill:#ebe0cf;
  background:var(--page); color:var(--fg);
}

/* ---------- 2.2 typography ---------- */
:root{
  --font:'Outfit','Outfit fb',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-mega:clamp(2.8rem,.5rem + 9.5vw,9rem);         /* 500, -.04em, lh .98 – booking H2, contact H2 */
  --fs-display:clamp(2.6rem,1.4rem + 4.4vw,5.6rem);   /* 500, -.035em, lh 1.02 – H1s */
  --fs-h2:clamp(2.1rem,1.3rem + 3vw,4.2rem);          /* 500, -.03em, lh 1.04 */
  --fs-statement:clamp(1.75rem,1.1rem + 2.9vw,3.8rem);/* 300, -.025em, lh 1.16 */
  --fs-h3:clamp(1.3rem,1.1rem + .8vw,2rem);           /* 500, -.02em, lh 1.12 */
  --fs-h4:clamp(1.125rem,1rem + .4vw,1.3rem);         /* 500, -.01em, lh 1.25 */
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);     /* 300, lh 1.6, max 38ch on dark (400 on paper) */
  --fs-body:1rem;                                      /* 400, lh 1.65; 1.0625rem at ≥900px */
  --fs-sm:.875rem; --fs-xs:.8125rem;                   /* 400 */
  --fs-caps:.75rem;                                    /* 500, uppercase, ls .16em */
  --fs-total:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);    /* 500, tabular */
  --fs-btn:.95rem;                                     /* 500, ls .01em, lh 1 */
}
@media (min-width:900px){ :root{ --fs-body:1.0625rem; } }

/* ---------- 2.3 space, shape, depth, motion, layers ---------- */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --wrap:1320px; --gut:clamp(18px,5vw,56px); --col-gap:clamp(16px,2vw,28px);
  --section-pad:clamp(88px,56px + 7vw,184px); --head-gap:clamp(40px,5vw,80px);
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-card:22px; --r-lg:26px; --r-xl:30px; --r-pill:999px;
  --sh-card:0 24px 60px -30px rgba(0,0,0,.7);
  --sh-lift:0 40px 100px -30px rgba(0,0,0,.8);
  --sh-object:0 50px 90px -30px rgba(0,0,0,.85);
  --sh-paper:0 30px 60px -32px rgba(60,38,20,.35);
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --d1:.18s; --d2:.35s; --d3:.6s;
  --nav-h:56px; --nav-top:calc(8px + env(safe-area-inset-top)); --nav-clear:calc(var(--nav-top) + var(--nav-h));
  --bar-clear:0px; --tap:44px; --tap-primary:52px;
  --z-sticky:50; --z-bbar:60; --z-thumb:75; --z-nav:80; --z-hint:85; --z-grain:90; --z-promo:95; --z-skip:100;
}
@media (min-width:1100px){ :root{ --nav-h:60px; --nav-top:16px; } }   /* nav-clear 76px */

/* ---------- contrast preferences (SPEC §2.4) ---------- */
@media (prefers-contrast:more){
  :root, .theme-dark, .nav, .drawer, .thumbbar, .foot, .voucher, .bstep, .bbar, .lang-hint, .ticket, .promo{
    --fg-2:var(--text-2); --hair-2:var(--line-ui);
  }
  .theme-paper{ --fg-2:var(--paper-ink); --hair-2:var(--line-paper-ui); }
}

/* ===== 02-base.css ===== */
/* =====================================================================
   02-base.css – reset, document, typography defaults, scroll model,
   utilities, grain (SPEC §2.2, §3). Stage 0 (S0b).
   ===================================================================== */

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,fieldset,legend{ margin:0; }
fieldset{ padding:0; border:0; min-width:0; }
legend{ padding:0; }
/* lists that carry a class are UI lists; classless lists (legal prose) keep their bullets */
ul[class],ol[class]{ list-style:none; padding:0; }
img,picture,video,canvas{ display:block; max-width:100%; height:auto; }
svg{ max-width:100%; }
input,button,textarea,select{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
textarea{ resize:vertical; }
table{ border-collapse:collapse; }
dialog{ color:inherit; }
[hidden]{ display:none !important; }

/* ---------- document ---------- */
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  overflow-x:clip;                                   /* the ONLY overflow rule (never hidden on a sticky ancestor) */
  scroll-padding-top:var(--nav-clear);               /* D14 scroll model */
  scroll-padding-bottom:var(--bar-clear);
  background:var(--bg);
}
body{
  min-height:100vh;
  overflow-x:clip;
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-body); font-weight:400; line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;   /* dark only */
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
body.theme-paper,.theme-paper{ -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; }
main{ display:block; }
main[tabindex="-1"]:focus{ outline:none; }          /* skip-link target – not an interactive control */

/* ---------- typography defaults ---------- */
h1,h2,h3,h4,h5,h6{ font-weight:500; line-height:1.12; text-wrap:balance; overflow-wrap:break-word; }
h1{ font-size:var(--fs-display); letter-spacing:-.035em; line-height:1.02; }
h2{ font-size:var(--fs-h2); letter-spacing:-.03em; line-height:1.04; }
h3{ font-size:var(--fs-h3); letter-spacing:-.02em; }
h4{ font-size:var(--fs-h4); letter-spacing:-.01em; line-height:1.25; }
p,li,dd,blockquote,figcaption{ text-wrap:pretty; overflow-wrap:break-word; }
strong,b{ font-weight:500; }
small{ font-size:var(--fs-sm); }
em{ font-style:italic; }
a{ color:inherit; text-decoration:none; }
/* links inside running copy (dictionary links, legal prose) – never inside UI lists (lists with a class) */
:where(p,dd,td,blockquote,figcaption,ul:not([class]) > li,ol:not([class]) > li,.acc__a,.status,.bcheck) a:not([class]){
  color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
  transition:text-decoration-color var(--d2) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  :where(p,dd,td,blockquote,figcaption,ul:not([class]) > li,ol:not([class]) > li,.acc__a,.status,.bcheck) a:not([class]):hover{ text-decoration-color:transparent; }
}
.num,[data-tabular]{ font-variant-numeric:tabular-nums; }
::selection{ background:var(--accent); color:var(--ink); }
.theme-paper ::selection{ background:var(--paper-ink); color:var(--paper); }

/* ---------- focus (SPEC §4 states) ---------- */
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
[tabindex="-1"]:focus:not(:focus-visible){ outline:none; }

/* ---------- scroll model (SPEC §3, D14) ---------- */
:where(section[id]){ scroll-margin-top:calc(24px - var(--section-pad)); }  /* :where – a .bstep/.vstep stb. 16px-es értéke győzzön */
.bstep,.vstep,.ffield,[data-scroll-anchor]{ scroll-margin-top:16px; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }
html.is-locked{ overflow:hidden; scrollbar-gutter:stable; }

/* ---------- utilities ---------- */
.vh{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;
}
html[lang="hu"] .only-en,html[lang="en"] .only-hu{ display:none !important; }
html:not(.js) .js-only{ display:none !important; }

/* skip links (visible on focus) */
.skip{
  position:fixed; left:12px; top:12px; z-index:var(--z-skip);
  padding:12px 18px; min-height:var(--tap); border-radius:var(--r-pill);
  background:var(--text); color:var(--ink); font-weight:500; font-size:var(--fs-sm);
  translate:0 calc(-100% - 24px);
  transition:translate var(--d2) var(--ease);
}
.skip:focus,.skip:focus-visible{ translate:0 0; outline:2px solid var(--accent); outline-offset:3px; }
.skip + .skip{ left:auto; right:12px; }

/* ---------- grain (SPEC §3) – first child of body, aria-hidden, data-loop ---------- */
.grain{
  position:fixed; inset:-50%; z-index:var(--z-grain); pointer-events:none; opacity:.045;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .grain{ animation:fd-grain .9s steps(3) infinite; }
}
@keyframes fd-grain{
  0%,100%{ translate:0 0; }
  33%{ translate:-3% 2%; }
  66%{ translate:2% -3%; }
}

/* összetartozó szavak (pl. „2-es kapucsengő”) – ne törjön a kötőjelnél */
.nobr{ white-space:nowrap; }

/* ===== 03-layout.css ===== */
/* =====================================================================
   03-layout.css – wrap, grid, sections, paper chapter/sheet, arch utility,
   section heads (SPEC §3, §4). Stage 0 (S0b).
   Breakpoints (min-width): 600 sm · 900 md · 1100 lg · 1280 xl.
   ===================================================================== */

.wrap{
  width:100%;
  max-width:calc(var(--wrap) + 2 * var(--gut));
  padding-inline:var(--gut);
  margin-inline:auto;
}

/* 12-column grid: 4 cols <600, 6 cols 600–1099, 12 cols ≥1100. Always minmax(0,1fr). */
.g12{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--col-gap); }
.g12 > *{ min-width:0; }
@media (min-width:600px){ .g12{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (min-width:1100px){ .g12{ grid-template-columns:repeat(12,minmax(0,1fr)); } }

/* sections */
.section{ position:relative; padding-block:var(--section-pad); }
.section--tight{ padding-block:calc(var(--section-pad) * .6); }

/* paper chapter wrapper (#bent, D2) – WP3 adds the door in 15-bent.css */
.chapter{ position:relative; background:var(--page); color:var(--fg); }
/* inset paper sheet (#gyik) */
.sheet{
  margin-inline:clamp(8px,1.5vw,24px);
  border-radius:var(--r-xl);
  background:var(--page); color:var(--fg);
}

/* arch utility – the brand device (SPEC §1) */
.arch{ container-type:inline-size; }
.arch__frame{ border-radius:50cqi 50cqi var(--r-lg) var(--r-lg); overflow:clip; }
@supports not (width:1cqi){
  .arch__frame{ border-radius:999px 999px var(--r-lg) var(--r-lg); }
}

/* ---------- section head: eyebrow + h2.section__title + p.section__sub ---------- */
.section__head{ margin-bottom:var(--head-gap); max-width:60rem; }
.section__head > * + *{ margin-top:clamp(14px,1.6vw,22px); }
.section__title{ font-size:var(--fs-h2); font-weight:500; letter-spacing:-.03em; line-height:1.04; }
.section__title:focus{ outline:none; }   /* tabindex=-1 focus target after anchor navigation */
.section__sub{ font-size:var(--fs-lead); font-weight:300; line-height:1.6; color:var(--fg-2); max-width:46ch; }
.theme-paper .section__sub{ font-weight:400; }
.section__head--center{ text-align:center; margin-inline:auto; }
.section__head--center .section__sub{ margin-inline:auto; }
.section__head--center .eyebrow{ justify-content:center; }
@media (min-width:1100px){
  .section__head--split{
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap);
    align-items:end; max-width:none;
  }
  .section__head--split > *{ grid-column:1 / span 7; margin-top:0; }
  .section__head--split > .eyebrow{ grid-row:1; margin-bottom:clamp(14px,1.6vw,22px); }
  .section__head--split > .section__title{ grid-row:2; }
  .section__head--split > .section__sub,
  .section__head--split > .section__aside{ grid-column:8 / span 5; grid-row:2; align-self:end; }
}

/* eyebrow: caps label + 28px hairline (the hairline scales in when the head reveals) */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4;
  color:var(--accent-fg);
}
.eyebrow::before{
  content:""; flex:none; width:28px; height:1px; background:currentColor; opacity:.7;
  transform-origin:0 50%;
}
.eyebrow .ico{ width:16px; height:16px; }

/* end-of-section CTA row */
.sec-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px;
  margin-top:var(--head-gap);
}

/* ===== 04-components.css ===== */
/* =====================================================================
   04-components.css – global components (SPEC §4). Stage 0 (S0b).
   Every control edge uses --edge (= --line-ui / --line-paper-ui).
   States: :hover only under (hover:hover) and (pointer:fine); :focus-visible;
   :active → scale (never transform – GSAP owns transform); [aria-disabled]/:disabled;
   [aria-invalid]; .is-done; .is-attn; [aria-busy].
   Packages may EXTEND these only inside their own section scope.
   ===================================================================== */

/* inline mask icons for pseudo-elements (data URIs must never contain the literal "url" + "(" sequence – the build's url checker) */
:root{
  --m-arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --m-arrow-ur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E");
  --m-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --m-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/svg%3E");
  --m-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.7v.2'/%3E%3C/svg%3E");
}

/* ---------- .ico (sprite icon) ---------- */
.ico{
  display:inline-block; flex:none; width:1em; height:1em; vertical-align:-.14em; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.ico--sm{ width:16px; height:16px; }
.ico--lg{ width:28px; height:28px; stroke-width:1.25; }

/* ---------- .btn ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--tap-primary); padding:0 30px;
  border:1px solid transparent; border-radius:var(--r-pill);
  font-size:var(--fs-btn); font-weight:500; letter-spacing:.01em; line-height:1.1;
  white-space:nowrap; text-align:center; text-decoration:none; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
  /* opacity szándékosan nincs benne: a gomb lehet GSAP-belépés célpontja, a CSS-átmenet ott 0-n ragadna */
  transition:color var(--d2) var(--ease), background-color var(--d2) var(--ease), border-color var(--d2) var(--ease);
}
@media (max-width:599.98px){
  .btn{ padding:10px 24px; white-space:normal; text-wrap:balance; }
}
.btn:active{ scale:.98; }
.btn--light{ background:var(--btn-primary-bg); color:var(--btn-primary-fg); }
.btn--ghost{ background:transparent; border-color:var(--edge); color:var(--fg); }
@media (hover:hover) and (pointer:fine){
  .btn--light:hover{ background:var(--btn-primary-hover); }
  .btn--ghost:hover{ background:var(--tint); }
}
.btn--sm{ min-height:var(--tap); padding:0 20px; font-size:.86rem; }
.btn--lg{ min-height:60px; padding:0 36px; font-size:1rem; }
.btn--block{ display:flex; width:100%; }
@media (max-width:599.98px){
  .btn--sm{ padding:8px 18px; }
  .btn--lg{ padding:12px 28px; }
}
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.btn:disabled:active,.btn[aria-disabled="true"]:active{ scale:1; }
.btn[aria-busy="true"]{ cursor:progress; }
.btn[aria-busy="true"]::after{
  content:""; flex:none; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:fd-spin .8s linear infinite;
}
/* 18px arrow that exits right / re-enters left on hover */
.btn__ico{ display:inline-grid; place-items:center; flex:none; width:18px; height:18px; overflow:hidden; }
.btn__ico .ico{ width:18px; height:18px; stroke-width:1.6; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn:hover .btn__ico .ico{ animation:fd-arrow .45s var(--ease); }
}

/* ---------- .round (icon button) ---------- */
.round{
  display:inline-grid; place-items:center; flex:none; width:54px; height:54px;
  border-radius:50%; border:1px solid var(--edge); background:transparent; color:var(--fg);
  transition:background-color var(--d2) var(--ease), border-color var(--d2) var(--ease), opacity var(--d2) var(--ease);
}
.round .ico{ width:20px; height:20px; stroke-width:1.6; }
.round--sm{ width:44px; height:44px; }
.round--sm .ico{ width:18px; height:18px; }
.round:active{ scale:.96; }
.round:disabled,.round[aria-disabled="true"]{ opacity:.28; cursor:not-allowed; }
@media (hover:hover) and (pointer:fine){ .round:not(:disabled):not([aria-disabled="true"]):hover{ background:var(--tint); } }

/* ---------- .tlink (text link) ---------- */
.tlink{
  display:inline-flex; align-items:center; gap:8px; min-height:var(--tap);
  color:var(--link); font-weight:500; text-decoration:none;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(50% + .78em) / 0 1px;
  transition:background-size .5s var(--ease), color var(--d2) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .tlink:hover{ background-size:100% 1px; } }
.tlink:focus-visible{ background-size:100% 1px; }
.tlink--arrow::after,.tlink--ext::after{
  content:""; flex:none; width:1.05em; height:1.05em; background:currentColor;
  -webkit-mask:var(--m-arrow-r) center / contain no-repeat; mask:var(--m-arrow-r) center / contain no-repeat;
  transition:translate .45s var(--ease);
}
.tlink--ext::after{ -webkit-mask-image:var(--m-arrow-ur); mask-image:var(--m-arrow-ur); }
@media (hover:hover) and (pointer:fine){
  .tlink--arrow:hover::after{ translate:3px 0; }
  .tlink--ext:hover::after{ translate:2px -2px; }
}

/* ---------- .chip / .chips (static info pills) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; min-width:0;
  padding:8px 14px; border-radius:var(--r-pill); border:1px solid var(--hair-2);
  font-size:.82rem; font-weight:500; line-height:1.3; color:var(--fg);
}
.chip .ico{ width:16px; height:16px; color:var(--accent-fg); }
.chip--gold{ background:rgba(210,162,116,.12); border-color:var(--line-gold); }
a.chip{ border-color:var(--edge); transition:background-color var(--d2) var(--ease); }
@media (hover:hover) and (pointer:fine){ a.chip:hover{ background:var(--tint); } }

/* ---------- .tag ---------- */
.tag{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--tag-bg); color:var(--tag-fg);
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.12em; text-transform:uppercase; line-height:1.3; white-space:nowrap;
}

/* ---------- .card ---------- */
.card{ background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(22px,3vw,40px); color:var(--fg); }

/* ---------- radio / checkbox shells: native input stays focusable (.vh) ---------- */
.tchip,.dchip,.rchip,.bswitch,.bcheck{ -webkit-tap-highlight-color:transparent; }

/* .tchip – card radio:  label.tchip > input.vh[type=radio] + span.tchip__in > b + small + em */
.tchips{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
@media (min-width:1100px){ .tchips{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.tchip{ position:relative; display:block; min-width:0; cursor:pointer; }
.tchip__in{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:4px; align-content:start;
  height:100%; min-height:72px; padding:18px 44px 16px 18px;
  border-radius:18px; border:1px solid var(--edge); background:var(--field); color:var(--fg);
  transition:border-color var(--d2) var(--ease), background-color var(--d2) var(--ease);
}
.tchip__in::after{
  content:""; position:absolute; top:18px; right:16px; width:16px; height:16px; border-radius:50%;
  border:1px solid var(--edge); box-sizing:border-box;
  transition:border-width var(--d2) var(--ease), border-color var(--d2) var(--ease), background-color var(--d2) var(--ease);
}
.tchip__in b{ grid-column:1; font-size:1.05rem; font-weight:500; letter-spacing:-.01em; line-height:1.3; }
.tchip__in small{ grid-column:1 / -1; color:var(--fg-2); font-size:.86rem; line-height:1.45; }
.tchip__in em{ grid-column:2; grid-row:1; align-self:center; font-style:normal; font-size:.86rem; font-weight:500; color:var(--link); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (min-width:1100px){
  .tchip__in{ display:flex; flex-direction:column; gap:6px; }
  .tchip__in em{ margin-top:auto; padding-top:8px; align-self:flex-start; }
}
@media (hover:hover) and (pointer:fine){ .tchip:hover .tchip__in{ border-color:var(--fg-2); } }
.tchip input:checked + .tchip__in{
  border-color:var(--focus-edge);
  background:linear-gradient(160deg,rgba(210,162,116,.14),rgba(210,162,116,.04));
}
.tchip input:checked + .tchip__in::after{ border:5px solid var(--focus-edge); background:var(--ink); }
.theme-paper .tchip input:checked + .tchip__in::after{ background:var(--paper); }
.tchip:has(input:focus-visible) .tchip__in{ outline:2px solid var(--focus); outline-offset:3px; }
.tchip input:disabled + .tchip__in{ opacity:.45; cursor:not-allowed; }

/* .dchip – pill radio:  label.dchip > input.vh + span > b + em */
.dchips{ display:flex; flex-wrap:wrap; gap:8px; }
.dchip{ position:relative; display:inline-block; cursor:pointer; min-width:0; }
.dchip > input + span{
  display:inline-flex; align-items:baseline; gap:10px; min-height:var(--tap);
  padding:11px 18px; border-radius:var(--r-pill); border:1px solid var(--edge); background:var(--field); color:var(--fg);
  line-height:1.25;
  transition:background-color var(--d2) var(--ease), color var(--d2) var(--ease), border-color var(--d2) var(--ease);
}
.dchip > input + span b{ font-weight:500; }
.dchip > input + span em{ font-style:normal; font-size:.88rem; color:var(--fg-2); font-variant-numeric:tabular-nums; transition:color var(--d2) var(--ease); }
@media (hover:hover) and (pointer:fine){ .dchip:hover > input:not(:checked) + span{ border-color:var(--fg-2); } }
.dchip > input:checked + span{ background:var(--sel-bg); color:var(--sel-fg); border-color:var(--sel-bg); }
.dchip > input:checked + span em{ color:var(--sel-sub); }
.dchip:has(input:focus-visible) > span{ outline:2px solid var(--focus); outline-offset:3px; }
.dchip > input:disabled + span{ opacity:.45; cursor:not-allowed; }
@media (max-width:599.98px){
  .dchips{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dchip{ display:block; }
  .dchip > input + span{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:56px; padding:9px 16px; border-radius:16px; }
}

/* .qchip – toggle pill button (aria-pressed); .rchip – the same look as a radio */
.qchips{ display:flex; flex-wrap:wrap; gap:8px; }
.qchip,.rchip > input + span{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap);
  padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--edge); background:transparent; color:var(--fg);
  font-size:.92rem; font-weight:500; line-height:1.25; font-variant-numeric:tabular-nums; text-align:center;
  transition:background-color var(--d2) var(--ease), color var(--d2) var(--ease), border-color var(--d2) var(--ease);
}
.rchip{ position:relative; display:inline-block; cursor:pointer; }
@media (hover:hover) and (pointer:fine){
  .qchip:not([aria-pressed="true"]):hover,.rchip:hover > input:not(:checked) + span{ background:var(--tint); }
}
.qchip:active,.rchip:active > span{ scale:.97; }
.qchip[aria-pressed="true"],.rchip > input:checked + span{ background:var(--sel-bg); color:var(--sel-fg); border-color:var(--sel-bg); }
.rchip:has(input:focus-visible) > span{ outline:2px solid var(--focus); outline-offset:3px; }
.qchip:disabled,.qchip[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }

/* .bswitch – label.bswitch > input.vh[type=checkbox][role=switch] + span.bswitch__track > span + span.bswitch__txt > b + small */
.bswitch{
  position:relative; display:flex; align-items:center; gap:14px; min-height:56px;
  padding:12px 18px; border-radius:18px; border:1px dashed var(--edge); color:var(--fg); cursor:pointer;
  transition:border-color var(--d2) var(--ease), background-color var(--d2) var(--ease), opacity var(--d2) var(--ease);
}
.bswitch__track{
  position:relative; flex:none; width:46px; height:26px; border-radius:999px;
  background:var(--tint); box-shadow:inset 0 0 0 1px var(--edge);
  transition:background-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
.bswitch__track > span{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--fg);
  transition:translate .45s var(--ease), background-color var(--d2) var(--ease);
}
.bswitch__txt{ display:flex; flex-direction:column; min-width:0; line-height:1.4; }
.bswitch__txt b{ font-weight:500; }
.bswitch__txt small{ color:var(--fg-2); font-size:.86rem; }
@media (hover:hover) and (pointer:fine){ .bswitch:hover{ border-color:var(--fg-2); } }
.bswitch:has(input:checked){ border-style:solid; border-color:var(--focus-edge); background:rgba(210,162,116,.06); }
.bswitch input:checked + .bswitch__track{ background:var(--check-bg); box-shadow:none; }
.bswitch input:checked + .bswitch__track > span{ translate:20px 0; background:var(--check-fg); }
.bswitch:has(input:focus-visible) .bswitch__track{ outline:2px solid var(--focus); outline-offset:3px; }
.bswitch.is-off,.bswitch[aria-disabled="true"],.bswitch:has(input:disabled){ opacity:.45; cursor:not-allowed; }
.bswitch__why{ margin-top:8px; font-size:var(--fs-sm); color:var(--fg-2); }

/* .bcheck – label.bcheck > input.vh[type=checkbox] + span.bcheck__box + span(text) */
.bcheck{
  display:flex; align-items:flex-start; gap:14px; min-height:var(--tap); padding-block:10px;
  font-size:.92rem; line-height:1.55; color:var(--fg-2); cursor:pointer;
}
.bcheck__box{
  position:relative; flex:none; display:grid; place-items:center; width:22px; height:22px; margin-top:1px;
  border-radius:7px; border:1px solid var(--edge); background:var(--field);
  transition:background-color var(--d2) var(--ease), border-color var(--d2) var(--ease);
}
.bcheck__box::before{
  content:""; width:10px; height:5px; border-left:1.8px solid var(--check-fg); border-bottom:1.8px solid var(--check-fg);
  transform:translateY(-1px) rotate(-45deg) scale(0); transition:transform var(--d2) var(--ease);
}
.bcheck input:checked + .bcheck__box{ background:var(--check-bg); border-color:var(--check-bg); }
.bcheck input:checked + .bcheck__box::before{ transform:translateY(-1px) rotate(-45deg) scale(1); }
.bcheck:has(input:focus-visible) .bcheck__box{ outline:2px solid var(--focus); outline-offset:3px; }
.bcheck input[aria-invalid="true"] + .bcheck__box{ border-color:var(--err-fg); box-shadow:0 0 0 1px var(--err-fg); }
.bcheck a{ color:var(--link); text-decoration:underline; text-underline-offset:.2em; }

/* ---------- .ffield – floating label field ---------- */
.ffield{ position:relative; min-width:0; }
.ffield--full{ grid-column:1 / -1; }
.ffield input,.ffield textarea{
  display:block; width:100%; min-height:58px; padding:26px 18px 10px;
  border-radius:16px; border:1px solid var(--edge); background:var(--field); color:var(--fg);
  font-size:1rem; line-height:1.4; appearance:none; -webkit-appearance:none;
  transition:border-color var(--d2) var(--ease), background-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
.ffield textarea{ min-height:120px; padding-top:30px; resize:vertical; }
.ffield label{
  position:absolute; top:18px; left:19px; right:19px;
  color:var(--fg-2); font-size:1rem; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
  transform-origin:0 0; transition:transform var(--d2) var(--ease), color var(--d2) var(--ease);
}
.ffield__req{ margin-left:2px; color:var(--accent-fg); }
.ffield input:focus,.ffield textarea:focus{
  border-color:var(--focus-edge); box-shadow:0 0 0 3px var(--focus-ring);
  outline:2px solid transparent; outline-offset:2px;          /* visible in forced colors */
}
.ffield input:focus + label,.ffield input:not(:placeholder-shown) + label,
.ffield textarea:focus + label,.ffield textarea:not(:placeholder-shown) + label,
.ffield input:autofill + label{ transform:translateY(-11px) scale(.76); color:var(--link); }
.ffield input:-webkit-autofill + label{ transform:translateY(-11px) scale(.76); color:var(--link); }
.ffield input:-webkit-autofill,.ffield input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--fg); caret-color:var(--fg); box-shadow:0 0 0 100px var(--autofill) inset;
}
.ffield input:-webkit-autofill:focus{ box-shadow:0 0 0 100px var(--autofill) inset,0 0 0 3px var(--focus-ring); }
.ffield [aria-invalid="true"]{ border-color:var(--err-fg); }
.ffield [aria-invalid="true"]:focus{ border-color:var(--err-fg); box-shadow:0 0 0 3px rgba(240,165,143,.28); }
.ffield__hint{ margin-top:8px; padding-inline:4px; font-size:.82rem; line-height:1.5; color:var(--fg-2); }
.ffield__err,.bstep__err,.field-err{
  position:relative; margin-top:8px; padding:0 4px 0 28px;
  font-size:var(--fs-sm); line-height:1.5; color:var(--err-fg);
}
.ffield__err::before,.bstep__err::before,.field-err::before{
  content:""; position:absolute; left:4px; top:.2em; width:16px; height:16px; background:currentColor;
  -webkit-mask:var(--m-alert) center / contain no-repeat; mask:var(--m-alert) center / contain no-repeat;
}
.bfields{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
@media (min-width:600px){ .bfields{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- .status – p.status[role=status][aria-live=polite] ---------- */
.status{ position:relative; font-size:var(--fs-sm); line-height:1.55; color:var(--fg-2); }
.status--ok,.status--err,.status--info{ padding-left:28px; }
.status:empty{ display:none; }
.status--ok{ color:var(--ok-fg); --st-ico:var(--m-check); }
.status--err{ color:var(--err-fg); --st-ico:var(--m-alert); }
.status--info{ color:var(--info-fg); --st-ico:var(--m-info); }
.status--ok::before,.status--err::before,.status--info::before{
  content:""; position:absolute; left:0; top:.12em; width:18px; height:18px; background:currentColor;
  -webkit-mask:var(--st-ico) center / contain no-repeat; mask:var(--st-ico) center / contain no-repeat;
}

/* ---------- .acc – native <details class="acc__item"> ---------- */
.acc{ border-top:1px solid var(--hair); }
.acc__item{ border-bottom:1px solid var(--hair); }
.acc__q{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:56px; padding-block:16px; cursor:pointer; list-style:none;
  font-size:var(--fs-h4); font-weight:500; letter-spacing:-.01em; line-height:1.3; color:var(--fg);
  border-radius:8px;
}
.acc__q::-webkit-details-marker{ display:none; }
.acc__q::marker{ content:""; }
.acc__q:focus-visible{ outline-offset:4px; }
.acc__icon{ position:relative; flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--edge); color:var(--fg); }
.acc__icon::before,.acc__icon::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px;
  border-radius:2px; background:currentColor; transition:rotate .45s var(--ease), opacity .45s var(--ease);
}
.acc__icon::after{ rotate:90deg; }
.acc__item[open] > .acc__q .acc__icon::after{ rotate:180deg; opacity:0; }
.acc__a{ padding:0 48px 24px 0; color:var(--fg-2); max-width:68ch; }
.acc__a > * + *{ margin-top:.8em; }
@supports (interpolate-size:allow-keywords){ :root{ interpolate-size:allow-keywords; } }
.acc__item::details-content{
  block-size:0; overflow:clip;
  transition:block-size .45s var(--ease),content-visibility .45s allow-discrete;
}
.acc__item[open]::details-content{ block-size:auto; }
@media (prefers-reduced-motion:reduce){ .acc__item::details-content{ transition:none; } }

/* ---------- .rail – scroll-snap rail (no autoplay) ---------- */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(86%,420px); gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px;
}
.rail::-webkit-scrollbar{ display:none; }
.rail:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:var(--r-md); }   /* rails carry tabindex="0" + a label (keyboard scrolling) */
.rail > *{ min-width:0; scroll-snap-align:start; }
.rail__ctrl{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.rail__nav{ display:flex; gap:10px; }
.rail__count{ min-width:5ch; font-size:var(--fs-sm); color:var(--fg-2); font-variant-numeric:tabular-nums; }

/* ---------- .voucher – brand object (always dark) ---------- */
.voucher{
  --mx:50%; --my:50%;
  position:relative; display:flex; align-items:center; gap:7%;
  width:min(100%,520px); aspect-ratio:1.62; padding:0 8%;
  border-radius:var(--r-card); border:1px solid rgba(210,162,116,.45);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 300'%3E%3Cpath d='M102 300V272.1A18 18 0 0 1 138 272.1V300M90 300V253.5A30 30 0 0 1 150 253.5V300M78 300V234.9A42 42 0 0 1 162 234.9V300M66 300V216.3A54 54 0 0 1 174 216.3V300M54 300V197.7A66 66 0 0 1 186 197.7V300M42 300V179.1A78 78 0 0 1 198 179.1V300M30 300V160.5A90 90 0 0 1 210 160.5V300M18 300V141.9A102 102 0 0 1 222 141.9V300M6 300V123.3A114 114 0 0 1 234 123.3V300' fill='none' stroke='%23D2A274' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E") right -6% bottom -2% / auto 112% no-repeat,
    radial-gradient(120% 140% at 0 0,#3a2819 0%,#1a120c 55%,#0f0a07 100%);
  box-shadow:var(--sh-object);
  color:var(--text); overflow:clip; isolation:isolate;
  transform-style:preserve-3d;
  container-type:inline-size;
}
.voucher__arch{
  flex:none; display:grid; place-items:center; width:24%; aspect-ratio:.72;
  border:1.5px solid var(--accent); border-radius:999px 999px 6px 6px;
}
.voucher__arch span{
  font-size:2.6rem; font-size:clamp(1.5rem,11cqi,3.4rem); font-weight:500; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.voucher__text{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.voucher__text small{ font-size:.75rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); line-height:1.4; }
.voucher__text strong{ font-size:1.5rem; font-size:clamp(1.15rem,5.6cqi,1.9rem); font-weight:500; letter-spacing:-.02em; line-height:1.15; }
.voucher__line{ width:100%; height:1px; margin:10px 0 8px; background:linear-gradient(90deg,rgba(210,162,116,.55),transparent); }
.voucher__for{ font-size:1rem; font-size:clamp(.9rem,3.6cqi,1.1rem); font-weight:500; color:var(--text); overflow-wrap:anywhere; }
.voucher__what{ font-size:.82rem; font-size:clamp(.78rem,3cqi,.92rem); color:var(--text-2); }
.voucher__msg{
  margin-top:6px; font-size:.82rem; font-style:italic; color:var(--accent-2); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.voucher__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:12px; }
.voucher__meta em{
  font-style:normal; font-size:.75rem; letter-spacing:.16em; padding:4px 9px;
  border:1px dashed rgba(210,162,116,.6); border-radius:8px; color:var(--accent-2); white-space:nowrap;
}
.voucher__meta span{ font-size:.75rem; color:var(--text-2); }
.voucher__value{ margin-left:auto; font-size:1.2rem; font-size:clamp(1rem,4.4cqi,1.4rem); font-weight:500; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.voucher__shine{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(40% 60% at var(--mx) var(--my),rgba(255,230,190,.2),transparent 70%);
}
/* stamp scales with the card (container units) so it never covers the message line on narrow cards (S0v) */
.voucher .stamp{ left:4%; bottom:5.5%; font-size:.7rem; font-size:clamp(.56rem,2.85cqi,.78rem); padding:.55em 1.15em; gap:.6em; }
.voucher .is-empty{ color:var(--muted); text-decoration:underline dashed 1px; text-underline-offset:4px; }
.voucher--mini{ width:100%; aspect-ratio:auto; gap:18px; padding:20px 22px; }
.voucher--mini .voucher__arch{ width:56px; }
.voucher--mini .voucher__arch span{ font-size:1.6rem; }
@media (max-width:420px){
  .voucher:not(.voucher--mini){ gap:6%; padding:0 6.5%; }
  .voucher__meta em{ display:none; }
}

/* ---------- .stamp – aria-hidden double gold ring, hidden until .is-sent ---------- */
.stamp{
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border:2px solid var(--accent-2); border-radius:10px;
  box-shadow:inset 0 0 0 3px rgba(15,11,8,.85),inset 0 0 0 4px var(--accent-2);
  background:rgba(15,11,8,.72); color:var(--accent-2);
  font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1.2; white-space:nowrap;
  transform:rotate(-12deg); opacity:0; visibility:hidden; pointer-events:none;
}
.is-sent .stamp,.stamp.is-sent{ opacity:1; visibility:visible; }

/* ---------- .lang-toggle + .lang-hint ---------- */
.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none;
  height:44px; min-width:44px; padding:0 12px;
  border-radius:var(--r-pill); border:1px solid var(--edge); background:transparent; color:var(--fg);
  font-size:.8rem; font-weight:500; letter-spacing:.08em;
  transition:background-color var(--d2) var(--ease);
}
.lang-toggle .ico{ width:16px; height:16px; }
.lang-toggle__label{ display:inline-block; min-width:2.4ch; text-align:left; }
html:not(.js) .lang-toggle{ display:none; }
@media (hover:hover) and (pointer:fine){ .lang-toggle:hover{ background:var(--tint); } }
.lang-toggle:active{ scale:.96; }

.lang-hint{
  position:absolute; top:calc(100% + 12px); right:0; z-index:var(--z-hint);
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--line-gold);
  background:var(--glass); color:var(--text); box-shadow:var(--sh-card);
  font-size:.86rem; font-weight:500; line-height:1.3; white-space:nowrap; cursor:pointer;
  animation:fd-hint-in .45s var(--ease) both;
}
.lang-hint::before{
  content:""; position:absolute; top:-6px; right:var(--hint-x,22px); width:10px; height:10px;   /* --hint-x: set by the engine → arrow under the toggle */
  background:var(--glass-solid); border-left:1px solid var(--line-gold); border-top:1px solid var(--line-gold);
  rotate:45deg;
}
.lang-hint .ico{ width:16px; height:16px; color:var(--accent); }
.lang-hint.is-leaving{ opacity:0; transition:opacity .3s var(--ease); }
@media (hover:hover) and (pointer:fine){ .lang-hint:hover{ border-color:var(--accent); } }

/* ---------- .noscript-card ---------- */
.noscript-card{
  display:grid; gap:10px; padding:clamp(20px,3vw,32px);
  background:var(--card); border:1px solid var(--line-gold); border-radius:var(--r-lg); color:var(--fg);
}
.noscript-card p{ color:var(--fg-2); }
.noscript-card a{ color:var(--link); text-decoration:underline; }

/* ---------- .bstep – step card (booking + voucher, always dark) ---------- */
.bstep{
  position:relative; padding:clamp(22px,3vw,40px);
  background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg); color:var(--fg);
  transition:border-color .5s var(--ease);
}
.bstep.is-attn{ border-color:var(--accent); }
.bstep__head{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:14px; margin-bottom:22px; }
.bstep__num{ font-size:.8rem; font-weight:500; letter-spacing:.14em; color:var(--accent); font-variant-numeric:tabular-nums; }
.bstep__head h3{ grid-column:2; font-size:var(--fs-h3); font-weight:500; letter-spacing:-.02em; line-height:1.12; }
.bstep__sum{ grid-column:2; grid-row:2; margin-top:4px; font-size:var(--fs-sm); line-height:1.45; color:var(--fg-2); display:none; }
.bstep.is-done .bstep__sum:not(:empty){ display:block; }
.bstep__check{
  grid-column:3; grid-row:1; display:grid; place-items:center; width:30px; height:30px;
  border-radius:50%; border:1px solid var(--edge);
  transition:background-color .4s var(--ease), border-color .4s var(--ease);
}
.bstep__check::before{
  content:""; width:10px; height:5px; border-left:1.8px solid var(--ink); border-bottom:1.8px solid var(--ink);
  transform:translateY(-1px) rotate(-45deg) scale(0); transition:transform .45s var(--ease);
}
.bstep.is-done .bstep__check{ background:var(--accent); border-color:var(--accent); }
.bstep.is-done .bstep__check::before{ transform:translateY(-1px) rotate(-45deg) scale(1); }
.bstep__err{ margin:-6px 0 18px; }
.bstep__note{ margin-bottom:18px; font-size:var(--fs-sm); color:var(--fg-2); }
.bstep__sub{ margin:24px 0 12px; font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2); }

/* ---------- .bbar – sticky step bar, the form's LAST child; never submits; hidden ≥900 ---------- */
.bbar{
  position:sticky; bottom:0; z-index:var(--z-bbar);
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px;
  margin-top:14px; padding:12px 12px calc(12px + env(safe-area-inset-bottom)) 16px;
  border-radius:18px 18px 0 0; border:1px solid var(--line-2); border-bottom:0;
  background:var(--glass); color:var(--text);
  transition:opacity var(--d2) var(--ease);
}
.bbar__info{ min-width:0; }
.bbar__progress{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; width:84px; margin-bottom:7px; }
.bbar__progress span{ height:3px; border-radius:3px; background:rgba(242,233,221,.16); transition:background-color var(--d3) var(--ease); }
.bbar__progress span.is-done{ background:var(--accent); }
.bbar__line{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.bbar__sum{ min-width:0; flex:1; font-size:.82rem; line-height:1.35; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bbar__total{ flex:none; min-width:9ch; text-align:right; font-weight:500; font-variant-numeric:tabular-nums; }
.bbar.is-inert{ opacity:.35; }
@media (min-width:900px){ .bbar{ display:none; } }

/* ---------- .done – success panel (section[tabindex=-1]) ---------- */
.done{
  padding:clamp(24px,3.4vw,44px); border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line-gold); color:var(--fg);
}
.done:focus{ outline:none; }
.done:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.done h3{ font-size:var(--fs-h3); }
.done > p{ margin-top:12px; color:var(--fg-2); }
.done h4{ margin-top:28px; font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-fg); }
.done ol{ list-style:none; padding:0; counter-reset:fd-done; display:grid; gap:14px; margin-top:16px; }
.done ol > li{ position:relative; min-height:32px; padding-left:46px; counter-increment:fd-done; color:var(--fg); }
.done ol > li::before{
  content:counter(fd-done); position:absolute; left:0; top:-3px; display:grid; place-items:center;
  width:28px; height:32px; border:1px solid var(--accent-fg); border-radius:999px 999px 5px 5px;
  font-size:.8rem; font-weight:500; color:var(--accent-fg); font-variant-numeric:tabular-nums;
}
.done__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:28px; }
.done__demo{ margin-top:18px; font-size:var(--fs-xs); color:var(--fg-2); }

/* ---------- .hp – honeypot (aria-hidden wrapper; its input tabindex=-1 autocomplete=off) ---------- */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------- .facts – facts card ---------- */
.facts{
  padding:clamp(22px,2.6vw,34px); border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--hair); color:var(--fg);
}
.facts__h,.facts > h2,.facts > h3{
  margin-bottom:10px; font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4;
  color:var(--accent-fg);
}
.facts ul{ display:grid; list-style:none; padding:0; }
.facts li{
  display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:12px; align-items:start;
  padding-block:14px; border-top:1px solid var(--hair);
  font-size:var(--fs-sm); line-height:1.55;
}
.facts li:first-child{ border-top:0; padding-top:6px; }
.facts li > .ico{ width:18px; height:18px; margin-top:2px; color:var(--accent-fg); }
.facts li > :not(.ico){ grid-column:2; }
.facts li:not(:has(> .ico)){ display:block; }
.facts__note{ margin-top:12px; font-size:var(--fs-xs); color:var(--fg-2); }
@media (min-width:900px){ .facts li{ font-size:var(--fs-body); } }

/* ===== 05-nav.css ===== */
/* =====================================================================
   05-nav.css – nav pill, legal nav, drawer (dialog), thumb bar (SPEC §4.1–4.3, §13).
   Stage 0 (S0b). All of these are always-dark objects (tokens re-declared in 01-tokens.css).
   ===================================================================== */

/* ---------- nav pill ---------- */
.nav{
  position:fixed; z-index:var(--z-nav); top:var(--nav-top); left:12px; right:12px;
  display:flex; align-items:center; gap:8px;
  height:var(--nav-h); padding:6px 6px 6px 14px;
  border-radius:var(--r-pill); border:1px solid var(--line);
  background:rgba(21,16,12,.52); color:var(--text);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);   /* the only backdrop blur on the site */
  transition:background-color .4s var(--ease), border-color .4s var(--ease), translate .45s var(--ease);
}
.nav.is-scrolled{ background:var(--glass); border-color:var(--line-2); }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav,.nav.is-scrolled{ background:var(--glass-solid); }
}
@media (prefers-reduced-transparency:reduce){
  .nav,.nav.is-scrolled{ background:var(--glass-solid); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (min-width:1100px){
  .nav{ left:50%; right:auto; width:min(1180px,calc(100% - 32px)); translate:-50% 0; }
}
/* mobile hide-on-scroll (<900, set by core) */
.nav.is-hidden{ translate:0 calc(-100% - var(--nav-top) - 12px); }

.nav__brand{
  display:flex; align-items:center; gap:10px; flex:none; min-width:0; min-height:var(--tap);
  padding-right:6px; border-radius:var(--r-pill); color:var(--text);
}
.nav__mark{ flex:none; width:30px; height:36px; }
.nav__word{ font-size:1.02rem; font-weight:500; letter-spacing:-.01em; line-height:1; white-space:nowrap; }
.nav__word span{ color:var(--accent-2); }
@media (max-width:359.98px){ .nav__word{ display:none; } }

.nav__links{ display:none; align-items:center; gap:2px; margin-left:auto; min-width:0; }
@media (min-width:1280px){ .nav__links{ display:flex; } }
.nav__link{
  position:relative; display:inline-flex; align-items:center; min-height:var(--tap); padding:0 12px;
  border-radius:var(--r-pill); color:var(--text-2); font-size:.9rem; font-weight:400; white-space:nowrap;
  transition:color var(--d2) var(--ease), background-color var(--d2) var(--ease);
}
@media (hover:hover) and (pointer:fine){ .nav__link:hover{ color:var(--text); background:var(--tint); } }
.nav__link[aria-current]{ color:var(--text); }
.nav__link[aria-current]::after{
  content:""; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--accent);
}

.nav__end{ position:relative; display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; }
@media (min-width:1280px){ .nav__end{ margin-left:8px; } }
.nav__cta{ display:none; min-width:12ch; }
@media (min-width:900px){ .nav__cta{ display:inline-flex; } }
.nav__burger{
  position:relative; display:inline-grid; place-items:center; flex:none; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--line-ui); background:transparent; color:var(--text);
  transition:background-color var(--d2) var(--ease);
}
.nav__burger span{ position:absolute; left:13px; width:16px; height:1.5px; border-radius:2px; background:currentColor; }
.nav__burger span:first-child{ top:18px; }
.nav__burger span:last-child{ top:24px; }
@media (hover:hover) and (pointer:fine){ .nav__burger:hover{ background:var(--tint); } }
.nav__burger:active{ scale:.96; }
@media (min-width:1280px){ .nav__burger{ display:none; } }

/* ---------- legal nav (partials/nav-legal.html – no JS) ---------- */
.nav--legal .nav__back{ display:none; color:var(--text-2); font-weight:400; font-size:.9rem; padding-inline:8px; }
@media (min-width:600px){ .nav--legal .nav__back{ display:inline-flex; } }
@media (max-width:419.98px){ .nav--legal .nav__word{ display:none; } }
.legal__en{
  max-width:calc(var(--wrap) + 2 * var(--gut)); margin-inline:auto;
  padding:calc(var(--nav-clear) + 20px) var(--gut) 0;
  font-size:var(--fs-sm); color:var(--fg-2);
}

/* ---------- drawer (<dialog id="drawer">, showModal) ---------- */
.drawer{
  position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none;
  margin:0; padding:0; border:0;
  background:rgba(15,11,8,.985); color:var(--text);
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer::backdrop{ background:transparent; }
.drawer:not([open]){ display:none; }
.drawer__in{
  position:relative; isolation:isolate; display:flex; flex-direction:column; min-height:100%;
  padding:var(--nav-top) 12px calc(24px + env(safe-area-inset-bottom));
}
@media (min-width:1100px){ .drawer__in{ width:min(1180px,calc(100% - 32px)); margin-inline:auto; padding-inline:0; } }
.drawer__top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  height:var(--nav-h); padding:6px 6px 6px 14px; border:1px solid transparent;
}
.drawer__close .ico{ width:18px; height:18px; }
.drawer__nav{ flex:1; padding:clamp(12px,4vh,40px) 14px clamp(12px,3vh,32px); }
.drawer__links{ display:grid; }
.drawer__links > li{ border-bottom:1px solid var(--line); }
.drawer__link{
  display:flex; align-items:center; gap:16px; min-height:56px; padding-block:6px;
  font-size:clamp(1.75rem,7vw,2.4rem); font-weight:500; letter-spacing:-.03em; line-height:1.1; color:var(--text);
  transition:color var(--d2) var(--ease);
}
.drawer__num{ flex:none; min-width:2.2ch; font-size:.78rem; font-weight:500; letter-spacing:.12em; color:var(--accent); font-variant-numeric:tabular-nums; }
@media (hover:hover) and (pointer:fine){ .drawer__link:hover{ color:var(--accent-2); } }
.drawer__foot{ display:grid; gap:16px; padding:8px 14px 0; }
.drawer__contact{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; font-size:var(--fs-sm); color:var(--muted); }
.drawer__contact a{ display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); color:var(--text-2); }
.drawer__contact .ico{ width:16px; height:16px; color:var(--accent); }
.drawer__arch{
  position:absolute; z-index:-1; right:-14%; bottom:-4%; width:min(92vw,560px); height:auto; aspect-ratio:24/26;
  color:var(--accent); opacity:.05; pointer-events:none; stroke-width:.6;
}
@media (max-height:500px){
  .drawer__links{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:28px; }
  .drawer__link{ font-size:1.5rem; min-height:48px; }
}

/* ---------- thumb bar (#thumbbar, <900px) ---------- */
.thumbbar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-thumb);
  display:flex; align-items:center; gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--glass); border-top:1px solid var(--line-2); color:var(--text);
  translate:0 0; transition:translate .45s var(--ease);
}
@starting-style{ .thumbbar{ translate:0 100%; } }
.thumbbar.is-leaving{ translate:0 100%; }
@media (min-width:900px){ .thumbbar{ display:none !important; } }
.thumbbar__book{ flex:1; min-width:0; min-height:52px; flex-direction:column; gap:1px; padding:6px 18px; }
.thumbbar__next{ font-size:.72rem; font-weight:400; letter-spacing:0; color:var(--sel-sub); line-height:1.2; }
.thumbbar__label{ line-height:1.2; }
.thumbbar__call{ width:52px; height:52px; }
@media (prefers-reduced-motion:reduce){ .thumbbar{ transition:none; } }

/* ===== 06-footer.css ===== */
/* =====================================================================
   06-footer.css – footer#lablec: coda (index only), grid, bar (SPEC §4.4).
   Stage 0 (S0b). Always dark (also on the paper legal pages).
   ===================================================================== */

.foot{
  position:relative; background:var(--bg); color:var(--text);
  border-top:1px solid var(--line);
  padding-bottom:calc(var(--bar-clear) + 24px);
  -webkit-font-smoothing:antialiased;
}

/* ---------- 1. coda (index only): záró foglalás-gomb + utalvány-link (az íves idézet 2026-10-05-én kikerült) ---------- */
.foot__coda{
  position:relative; display:grid; justify-items:center; gap:clamp(28px,4vw,44px);
  padding:clamp(48px,6vw,88px) var(--gut) clamp(44px,5vw,72px);
  text-align:center;
}
.foot__coda::before{   /* warm floor light under the arch */
  content:""; position:absolute; left:50%; bottom:0; z-index:0; width:min(900px,120vw); aspect-ratio:2/1;
  translate:-50% 0; border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:radial-gradient(closest-side at 50% 100%,var(--glow),transparent);
  pointer-events:none;
}
.foot__cta{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 24px; }

/* ---------- 2. grid ---------- */
.foot__grid{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:40px 32px;
  padding-block:clamp(56px,7vw,88px) clamp(40px,5vw,64px);
}
.foot__coda + .foot__grid::before{
  content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px; background:var(--line);
}
@media (min-width:600px){ .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .foot__grid{ grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); } }
.foot__grid > *{ min-width:0; }

.foot__brand{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; column-gap:14px; }
.foot__brand .nav__mark{ width:36px; height:43px; }
.foot__word{ display:block; font-size:1.25rem; font-weight:500; letter-spacing:-.015em; line-height:1.15; }
.foot__word span{ color:var(--accent-2); }
.foot__role{ margin-top:8px; max-width:30ch; font-size:var(--fs-sm); line-height:1.55; color:var(--muted); }

.foot__h{
  margin-bottom:10px; font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4;
  color:var(--accent);
}
.foot__col p{ font-size:.94rem; line-height:1.6; color:var(--text-2); }
.foot__col p + p{ margin-top:8px; }
.foot__hours{ color:var(--muted) !important; font-size:var(--fs-sm) !important; }
.foot__list{ display:grid; }
.foot__list a,.foot__col > a:not(.tlink){
  display:flex; align-items:center; gap:10px; min-height:var(--tap);
  color:var(--text-2); font-size:.94rem; transition:color var(--d2) var(--ease);
}
.foot__list a .ico{ width:16px; height:16px; color:var(--accent); }
@media (hover:hover) and (pointer:fine){ .foot__list a:hover{ color:var(--text); } }
.foot__pages{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; }
@media (min-width:1100px){ .foot__pages{ grid-template-columns:minmax(0,1fr); } }
.foot__col .tlink{ margin-top:4px; font-size:.94rem; }

/* ---------- 3. bar ---------- */
.foot__bar{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 28px;
  padding-block:12px; font-size:.84rem; color:var(--muted);
}
.foot__bar::before{ content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px; background:var(--line); }
.foot__copy{ padding-block:12px; }
.foot__legal{ display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; }
.foot__legal a{ display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); color:var(--text-2); transition:color var(--d2) var(--ease); }
@media (hover:hover) and (pointer:fine){ .foot__legal a:hover{ color:var(--text); } }
.foot__legal a[aria-current]{ color:var(--accent-2); }

/* kapucsengő a stúdió-címnél (2026-10-06) */
.foot__col .foot__bell{ display:flex; align-items:center; gap:8px; margin-top:4px; font-size:var(--fs-sm); color:var(--text-2); }
.foot__bell .ico{ flex:none; width:15px; height:15px; color:var(--accent); }
.foot__bell strong{ font-weight:500; color:var(--text); }

/* ===== 07-motion.css ===== */
/* =====================================================================
   07-motion.css – motion helpers, loop pausing, reduced motion, forced colors,
   contrast-more (SPEC §2.4, §5). Stage 0 (S0b).
   NO CSS pre-hide of content, ever: every pre-state is set by JS (11-motion.js)
   and only on elements that are not in the viewport at init.
   ===================================================================== */

/* SplitText line masks for below-the-fold titles: keep Ő/Á accents and descenders */
.ln-mask{ overflow:visible !important; clip-path:inset(-.25em -.12em -.3em -.12em); }

/* eyebrow hairline reveal (11-motion adds .fd-pre to out-of-view eyebrows, removes it on enter) */
.eyebrow::before{ transition:scale 1s var(--ease); }
.eyebrow.fd-pre::before{ scale:0 1; }

/* magnetic / tilt targets */
[data-tilt]{ will-change:transform; }

/* loops: paused when off-screen (.is-paused, set by core) or when the tab is hidden */
.is-paused,.is-paused *,
html.is-hidden [data-loop],html.is-hidden [data-loop] *,html.is-hidden .grain{ animation-play-state:paused !important; }

/* keyframes shared by components */
@keyframes fd-spin{ to{ rotate:360deg; } }
@keyframes fd-arrow{
  0%{ translate:0 0; opacity:1; }
  45%{ translate:120% 0; opacity:0; }
  46%{ translate:-120% 0; opacity:0; }
  100%{ translate:0 0; opacity:1; }
}
@keyframes fd-hint-in{ from{ opacity:0; translate:0 -6px; } }
@keyframes fd-shimmer{ from{ background-position:-200% 0; } to{ background-position:200% 0; } }
/* generic loading shimmer bar (packages: .fd-shimmer on a block element) */
.fd-shimmer{
  background:linear-gradient(90deg,transparent 0%,rgba(242,233,221,.10) 50%,transparent 100%) 0 0 / 200% 100% no-repeat, var(--tint-2);
  animation:fd-shimmer 1.4s linear infinite;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .grain{ animation:none !important; }
  .eyebrow.fd-pre::before{ scale:1 1; }
}

/* ---------- contrast: more ---------- */
@media (prefers-contrast:more){
  .grain{ display:none; }
  .nav,.nav.is-scrolled{ background:var(--glass-solid); }
}

/* ---------- forced colors (Windows High Contrast) ---------- */
@media (forced-colors:active){
  .grain,.voucher__shine,.stamp,.foot__coda::before,.drawer__arch,[data-decor]{ display:none !important; }
  /* icons keep currentColor → they follow LinkText / ButtonText / CanvasText automatically */
  .btn,.round,.lang-toggle,.nav__burger,.qchip,.rchip > span,.dchip > span,.tchip__in,.bswitch,.bcheck__box,.ffield input,.ffield textarea{
    border:1px solid ButtonText;
  }
  .tchip input:checked + .tchip__in,
  .dchip > input:checked + span,
  .rchip > input:checked + span,
  .qchip[aria-pressed="true"],
  .bswitch:has(input:checked),
  .bcheck input:checked + .bcheck__box,
  [aria-pressed="true"],[aria-current="date"],[aria-current="location"]{
    border:3px solid CanvasText; forced-color-adjust:none; background:Canvas; color:CanvasText;
  }
  .bswitch input:checked + .bswitch__track > span{ background:CanvasText; }
  .bcheck input:checked + .bcheck__box::before{ border-color:CanvasText; }
  .voucher__arch span{ color:CanvasText; background:none; }
  .nav,.thumbbar,.bbar,.lang-hint{ border:1px solid CanvasText; }
}

/* ===== 10-hero.css ===== */
/* =====================================================================
   10-hero.css – Hero #hero (SPEC §9.1, D15). Owner: WP1.
   Mobile first: by-line → H1 (kicker + main) → lead → CTA row → arch door → proof 2×2.
   ≥1100: copy cols 1–6 (bottom-aligned) + proof under it, door cols 8–12.
   No 100svh below 1100, no CSS pre-hide, nothing clips or fades the LCP image.
   ===================================================================== */

.hero{
  position:relative; isolation:isolate;
  padding-block:calc(var(--nav-clear) + 24px) clamp(56px,9vw,96px);
}

/* warm light: two soft radial glows (no filter, nothing on the image) */
.hero__glow{ position:absolute; inset:0; z-index:-1; overflow:clip; pointer-events:none; }
.hero__glow::before,
.hero__glow::after{ content:""; position:absolute; border-radius:50%; }
.hero__glow::before{
  width:520px; height:520px; right:-160px; top:2%;
  background:radial-gradient(closest-side,var(--glow),transparent);
}
.hero__glow::after{
  width:420px; height:420px; left:-170px; bottom:-120px;
  background:radial-gradient(closest-side,var(--glow-deep),transparent);
}

.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr); }
.hero__copy{ min-width:0; }

/* by-line: a real face above the fold */
.hero__byline{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(22px,3.4vw,34px); }
.hero__face{
  flex:none; width:32px; height:32px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--line-gold), 0 0 0 4px var(--page);
}
.hero__who{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.hero__name{ font-size:.95rem; font-weight:500; color:var(--fg); }
.hero__role{ font-size:var(--fs-xs); color:var(--fg-2); }

/* H1 = kicker span + main span (each its own key; the main span is split into lines by data-intro) */
.hero__title{ margin:0; }
.hero__kicker{
  display:block; max-width:30ch; margin-bottom:clamp(12px,1.6vw,20px);
  font-size:.82rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.5;
  color:var(--accent-fg); text-wrap:balance;
}
.hero__h1{
  display:block; max-width:13em;
  font-size:var(--fs-display); font-weight:500; letter-spacing:-.035em; line-height:1.02;
  text-wrap:balance;
}
.hero__lead{
  max-width:34ch; margin-top:clamp(18px,2.4vw,30px);
  font-size:var(--fs-lead); font-weight:300; line-height:1.6; color:var(--fg-2);
}

/* CTA row: 1.4 / 1 on phones, stacks below 360px */
.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(26px,3.6vw,42px); }
@media (max-width:599.98px){
  .hero__cta{ flex-wrap:nowrap; }
  .hero__cta .btn{ padding-inline:16px; min-width:0; }
  .hero__book{ flex:1.4 1 0; }
  .hero__prices{ flex:1 1 0; }
}
@media (max-width:359.98px){
  .hero__cta{ flex-direction:column; }
  .hero__book,.hero__prices{ flex:none; width:100%; }
}

/* the arch door (brand device) */
.hero__door{ position:relative; margin:clamp(30px,7vw,52px) 0 0; }
.hero__door::before{                      /* door jamb: a hairline arch 10px outside the photo */
  content:""; position:absolute; inset:-9px; pointer-events:none;
  border:1px solid var(--line-gold);
  border-radius:calc(50cqi + 9px) calc(50cqi + 9px) calc(var(--r-lg) + 9px) calc(var(--r-lg) + 9px);
}
@supports not (width:1cqi){
  .hero__door::before{ border-radius:999px 999px calc(var(--r-lg) + 9px) calc(var(--r-lg) + 9px); }
}
.hero__frame{
  position:relative; aspect-ratio:10 / 11; max-height:62svh; width:100%;
  background:var(--surface);
  box-shadow:var(--sh-lift);
}
.hero__kb{ position:absolute; inset:0; transform-origin:62% 48%; }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }   /* portré: az arc maradjon a képben */
.hero__shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(15,11,8,0) 55%,rgba(15,11,8,.55));
}
.hero__caption{ display:none; }

/* proof row: 2×2 on phones */
.hero__proof{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:clamp(24px,5vw,36px); }
.hero__proof > li{ display:flex; min-width:0; }
.hero__proof .chip{
  flex:1 1 auto; align-items:flex-start; gap:9px;
  padding:11px 12px; border-radius:var(--r-md);
  font-size:.8rem; line-height:1.35;
}
.hero__proof .chip .ico{ margin-top:1px; }
.hero__proof-link > .chip{ border-color:var(--line-gold); }

/* ---------- ≥600: stacked, centred door, chips in one wrapped row ---------- */
@media (min-width:600px){
  .hero__door{ width:min(100%,560px); margin-inline:auto; }
  .hero__frame{ aspect-ratio:4 / 5; max-height:none; }
  .hero__proof{ display:flex; flex-wrap:wrap; justify-content:center; }
  .hero__proof .chip{ flex:0 1 auto; align-items:center; padding:8px 14px; border-radius:var(--r-pill); }
  .hero__proof .chip .ico{ margin-top:0; }
}

/* ---------- ≥1100: editorial split ---------- */
@media (min-width:1100px){
  .hero{
    display:flex; align-items:center;
    min-height:min(100svh,920px);
    padding-block:calc(var(--nav-clear) + 48px) clamp(48px,6vh,72px);
  }
  .hero__grid{
    grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:1fr auto;
    column-gap:var(--col-gap);
  }
  .hero__copy{ grid-column:1 / span 6; grid-row:1; align-self:end; }
  .hero__proof{ grid-column:1 / span 6; grid-row:2; justify-content:flex-start; margin-top:clamp(28px,4vh,44px); }
  .hero__door{
    grid-column:8 / span 5; grid-row:1 / span 2; align-self:center; justify-self:end;
    width:min(100%,calc(min(78svh,760px) * .8)); margin:0;
  }
  .hero__caption{
    display:block; position:absolute; left:calc(-1 * clamp(34px,2.6vw,44px)); bottom:calc(var(--r-lg) + 8px);
    writing-mode:vertical-rl; rotate:180deg;
    font-size:var(--fs-caps); font-weight:500; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
    color:var(--fg-3);
  }
}

/* Ken Burns – desktop only, paused off-screen by core ([data-loop] → .is-paused) */
@media (min-width:1100px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero__kb{ animation:hero-kb 28s var(--ease) infinite alternate; }
}
@keyframes hero-kb{
  from{ scale:1.02; translate:0 0; }
  to{ scale:1.12; translate:-2% -1.5%; }
}

@media (forced-colors:active){
  .hero__door::before,.hero__glow{ display:none; }
}

/* ===== 11-marquee.css ===== */
/* =====================================================================
   11-marquee.css – treatment marquee (SPEC §9.2). Owner: WP1.
   Static centred row without JS / with reduced motion (clipped, no scrollbar);
   31-marquee.js adds .is-running and clones the set for the seamless loop.
   Each child carries its own end margin so the track is exactly two equal halves
   (xPercent −50 loops without a seam).
   ===================================================================== */

.marquee{
  display:flex; justify-content:center; overflow:clip;
  padding-block:28px;
  border-block:1px solid var(--hair);
  user-select:none; -webkit-user-select:none;
}
.marquee.is-running{ justify-content:flex-start; }
.marquee__track{ display:flex; align-items:center; flex:none; width:max-content; }
.marquee__track > *{ flex:none; margin-inline-end:clamp(22px,2.6vw,44px); }
.marquee__track > span{
  font-size:clamp(2.4rem,1rem + 6vw,5.6rem); font-weight:500; letter-spacing:-.04em; line-height:1.08;
  white-space:nowrap; color:var(--fg);
}
.marquee__track > .is-outline{ color:transparent; -webkit-text-stroke:1px var(--fg); }
.marquee__sep{ display:inline-grid; place-items:center; color:var(--accent-fg); font-size:clamp(1.25rem,.7rem + 1.8vw,2.4rem); }
.marquee__sep .ico{ width:1em; height:1em; stroke-width:1.25; }
/* static row: no trailing separator */
.marquee:not(.is-running) .marquee__track > :last-child{ display:none; }

@media (forced-colors:active){
  .marquee__track > .is-outline{ color:CanvasText; -webkit-text-stroke:0; }
}

/* ===== 12-intro.css ===== */
/* =====================================================================
   12-intro.css – intro statement with photo pills (SPEC §9.3). Owner: WP1.
   The statement is split into words by 11-motion.js; the pills are opened by
   31-marquee.js through the .is-pre class (scale property, never transform).
   ===================================================================== */

.intro__wrap{ text-align:center; }
.intro .statement{
  max-width:18em; margin-inline:auto;
  font-size:var(--fs-statement); font-weight:300; letter-spacing:-.025em; line-height:1.16;
  text-wrap:balance;
}
.intro .statement:focus{ outline:none; }

.intro__kicker{
  margin-top:clamp(40px,5vw,72px);
  font-size:var(--fs-h4); font-weight:500; letter-spacing:-.01em; line-height:1.25;
  color:var(--accent-fg); text-wrap:balance;
}
.intro__text{
  max-width:52ch; margin:clamp(12px,1.4vw,18px) auto 0;
  font-size:var(--fs-lead); font-weight:300; line-height:1.6; color:var(--fg-2);
}

/* ===== 13-variaciok.css ===== */
/* =====================================================================
   13-variaciok.css – Variációk #szolgaltatasok (SPEC §9.4, D3). Owner: WP1.
   Layouts:
   - <900 (and no JS): every li.var = its own plate (4/3) above the body.
   - ≥900 without the stage: plate and body side by side (plate 4/5).
   - ≥1100 with JS (.vars.has-stage, 32-variaciok.js): the 4 plates live in one
     sticky stage (cols 1–5), the list in cols 7–12, active item marked.
   ===================================================================== */

/* ---------- list + items ---------- */
.var{ position:relative; min-width:0; padding-block:clamp(36px,6vw,56px); border-top:1px solid var(--hair); }
.var:last-child{ border-bottom:1px solid var(--hair); }

/* ---------- plates ---------- */
.var__plate{
  position:relative; aspect-ratio:4 / 3; margin:0 0 clamp(22px,4vw,32px);
  border-radius:var(--r-lg); overflow:clip; background:var(--card);
}
.var__plate img{ width:100%; height:100%; object-fit:cover; }
.var__plate--swe img{ object-position:50% 45%; }
.var__plate--sport img{ object-position:55% 25%; }
.var__plate--relax img{ object-position:50% 60%; }

/* köpöly graphic plate (no photo): bronze field, three cup rims, a marching glide path */
.var__plate--cup{ background:radial-gradient(120% 95% at 32% 28%,#3a2819 0%,#1a120c 55%,#0f0a07 100%); }
.var__cupart{ position:absolute; inset:0; width:100%; height:100%; max-width:none; }
.var__cups circle{ fill:none; stroke:var(--accent); stroke-width:1.5; }
.var__cups .var__rim{ stroke-opacity:.5; }
.var__glide{ fill:none; stroke:var(--accent); stroke-width:1.2; stroke-linecap:round; stroke-dasharray:4 8; opacity:.45; }
@media (prefers-reduced-motion:no-preference){
  .var__glide{ animation:var-glide 12s linear infinite; }
}
@keyframes var-glide{ to{ stroke-dashoffset:-120; } }
.var__platecap{
  position:absolute; left:14px; bottom:14px; max-width:calc(100% - 28px);
  padding:7px 12px; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--line-gold);
  font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.3;
  color:var(--link);
}

/* ---------- body ---------- */
.var__body{ min-width:0; }
.var__num{
  display:block; margin-bottom:10px;
  font-size:var(--fs-h2); font-weight:300; letter-spacing:-.02em; line-height:1;
  color:var(--accent-fg);
}
.var__head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.var__title{ font-size:var(--fs-h3); }
.var__desc{ max-width:52ch; margin-top:12px; color:var(--fg-2); }
.var__meta{
  display:flex; flex-wrap:wrap; gap:14px clamp(28px,4vw,48px);
  margin-top:clamp(18px,2.4vw,24px); padding-block:14px;
  border-block:1px solid var(--hair);
}
.var__meta dt{
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4;
  color:var(--fg-2);
}
.var__meta dd{ margin-top:4px; font-size:1.0625rem; font-weight:500; line-height:1.4; color:var(--fg); }
.var__with{ font-size:var(--fs-sm); font-weight:400; color:var(--fg-2); }
.var__chips{ margin-top:16px; }
.var__pick{ margin-top:12px; }

@media (min-width:600px){
  .var__body{
    --num-w:calc(var(--fs-h2) * 1.15);
    display:grid; grid-template-columns:var(--num-w) minmax(0,1fr); column-gap:clamp(14px,2vw,26px);
  }
  .var__body > *{ grid-column:2; }
  .var__num{ grid-column:1; grid-row:1; margin:0; align-self:baseline; }
  .var__head{ grid-row:1; align-self:baseline; }
  .var__pick{ justify-self:start; }
  .var__chips{ justify-self:start; }
}

/* ---------- ≥900 without the stage: plate beside the body ---------- */
@media (min-width:900px){
  .var{
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(36px,5vw,88px);
    align-items:center;
  }
  .var__plate{ aspect-ratio:4 / 5; max-height:min(70svh,640px); width:100%; margin:0; }
}

/* ---------- after the list ---------- */
.vars__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
  margin-top:clamp(32px,5vw,56px);
}
.vars__note{ color:var(--fg-2); max-width:46ch; }

/* ---------- ≥1100 with JS: one sticky stage ---------- */
@media (min-width:1100px){
  .vars.has-stage .vars__grid{
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:start;
  }
  /* bottom padding keeps the stage fully stuck while the last item is the active one
     (stage bottom = nav-clear + 24 + stage height; last item centred on the 55 % line, ≥ 46svh tall) */
  .vars.has-stage .vars__list{
    grid-column:7 / span 6; grid-row:1;
    padding-bottom:clamp(0px,calc(var(--nav-clear) + 24px + min(76svh,720px) - 78svh),240px);
  }
  .vars.has-stage .var{
    display:flex; flex-direction:column; justify-content:center;
    min-height:46svh; padding:clamp(40px,6vh,72px) 0 clamp(40px,6vh,72px) 32px;
  }
  /* active item: numeral → accent-2, title fg-2 → fg, 2px gold rule grows */
  .vars.has-stage .var::before{
    content:""; position:absolute; left:0; top:clamp(40px,6vh,72px); bottom:clamp(40px,6vh,72px); width:2px;
    border-radius:2px; background:var(--accent);
    scale:1 0; transform-origin:50% 0; transition:scale var(--d3) var(--ease);
  }
  .vars.has-stage .var.is-active::before{ scale:1 1; }
  .vars.has-stage .var__num,
  .vars.has-stage .var__title{ transition:color var(--d2) var(--ease); }
  .vars.has-stage .var__title{ color:var(--fg-2); }
  .vars.has-stage .var.is-active .var__title{ color:var(--fg); }
  .vars.has-stage .var.is-active .var__num{ color:var(--accent-2); }
  .vars.has-stage .vars__foot{ margin-left:calc((100% + var(--col-gap)) / 12 * 6); }

  .vars__stage{
    grid-column:1 / span 5; grid-row:1; align-self:start;
    position:sticky; top:calc(var(--nav-clear) + 24px);
    width:100%; height:min(76svh,720px); max-width:calc(min(76svh,720px) * .8);
    border-radius:var(--r-lg); overflow:clip; isolation:isolate;
    background:var(--card); box-shadow:var(--sh-lift);
  }
  .vars__plates{ position:absolute; inset:0; isolation:isolate; }
  .vars__stage .var__plate{
    position:absolute; inset:0; width:auto; max-height:none; aspect-ratio:auto; margin:0; border-radius:0;
    visibility:hidden; opacity:0;
  }
  .vars__stage .var__plate.is-on{ visibility:visible; opacity:1; }
  .vars__stage.is-fade .var__plate{ transition:opacity .2s var(--ease), visibility 0s linear .2s; }
  .vars__stage.is-fade .var__plate.is-on{ transition:opacity .2s var(--ease), visibility 0s; }
  .vars__stage .var__plate img{ object-position:50% 50%; }
  .vars__stage .var__plate--sport img{ object-position:55% 30%; }
  .vars__stage .var__platecap{ display:none; }   /* the stage chip names the plate */
  .vars__stage::after{
    content:""; position:absolute; inset:auto 0 0; height:34%; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,rgba(15,11,8,0),rgba(15,11,8,.55));
  }
  .vars__chip,
  .vars__count{
    position:absolute; z-index:2;
    border-radius:var(--r-pill); background:var(--glass); line-height:1.3;
  }
  .vars__chip{
    left:16px; bottom:16px; max-width:calc(100% - 32px);
    display:grid; overflow:clip; padding:8px 15px;
    border:1px solid var(--line-gold);
    font-size:.82rem; font-weight:500; color:var(--fg);
  }
  .vars__chip > span{ grid-area:1 / 1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vars__count{
    top:16px; right:16px; padding:6px 12px;
    border:1px solid var(--line-2);
    font-size:var(--fs-caps); font-weight:500; letter-spacing:.14em; color:var(--fg-2);
    font-variant-numeric:tabular-nums;
  }
}

@media (forced-colors:active){
  .var__cups circle,.var__glide{ stroke:CanvasText; }
  .vars.has-stage .var.is-active::before{ background:CanvasText; }
}

/* ===== 14-arak.css ===== */
/* =====================================================================
   14-arak.css – Árak #arak (SPEC §9.5) · WP2.
   Matrix: a real <table class="pricemx"> (explicit ARIA roles in the markup).
     ≥900   table, köpöly column framed in gold (.pricemx__col overlay, the last column – widths fixed via --ct)
     600–899 each row is a card: name/description left, price rows right
     <600   each row is a card: name on top, price rows below
   Facts box ("Jó tudni") cols 9–12 at ≥1100 (sticky when tall enough), after the matrix below that.
   Scoped under #arak / .pricemx / .pcell / .arak__* (unique to WP2). Tokens only.
   ===================================================================== */

/* ---------- head ---------- */
#arak .arak__aside{ display:grid; gap:14px; }
#arak .arak__aside .section__sub{ margin:0; }
#arak .arak__hint{
  display:flex; align-items:flex-start; gap:10px; max-width:46ch;
  font-size:var(--fs-sm); line-height:1.55; color:var(--link);
}
#arak .arak__hint .ico{ width:18px; height:18px; margin-top:.1em; color:var(--accent-fg); }

/* ---------- grid: matrix | facts ---------- */
.arak__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(36px,5vw,56px); }
.arak__matrix,.arak__side{ min-width:0; }
/* side by side from 1280 (measured: at 1100–1279 cols 1–8 leave ~86px price cells – too narrow for "15,000 HUF") */
@media (min-width:1280px){
  .arak__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:start; }
  .arak__matrix{ grid-column:1 / span 8; }
  .arak__side{ grid-column:9 / span 4; }
}
/* ≥1280 the matrix shares the row with the facts box: price size follows the narrower columns (EN "15,000 HUF" must fit) */
@media (min-width:1280px){ .pricemx .pcell__price{ font-size:clamp(1rem,.55rem + .75vw,1.25rem); } }
@media (min-width:1280px) and (min-height:760px){
  .arak__side{ position:sticky; top:calc(var(--nav-clear) + 24px); }
}

/* ---------- matrix: shared ---------- */
.pricemx__wrap{ --ct:26%; position:relative; isolation:isolate; }
.pricemx{ position:relative; z-index:1; width:100%; border-collapse:separate; border-spacing:0; color:var(--fg); }
.pricemx th{ font-weight:400; text-align:left; }
.pricemx__name{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.pricemx__name b{ font-size:var(--fs-h4); font-weight:500; letter-spacing:-.01em; line-height:1.25; }
.pricemx th[scope="row"] small{ display:block; margin-top:6px; max-width:34ch; font-size:var(--fs-sm); line-height:1.5; color:var(--fg-2); text-wrap:pretty; }

.pcell{
  position:relative; color:var(--fg); border-radius:var(--r-sm);
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
.pcell__price{ font-size:var(--fs-h4); font-weight:500; letter-spacing:-.01em; line-height:1.2; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pcell__go{
  font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.2;
  color:var(--accent-fg); white-space:nowrap;
}
.pcell:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.pcell:active{ scale:.985; }
.is-cup .pcell__price{ color:var(--accent-2); }

/* köpöly column frame (≥900) – decorative overlay under the cells, exactly the last column */
.pricemx__col{ display:none; }

/* ---------- <900: every row is a card ---------- */
@media (max-width:899.98px){
  .pricemx,.pricemx tbody{ display:block; }
  .pricemx colgroup{ display:none; }
  /* column headers leave the layout but stay in the accessibility tree (explicit roles) */
  .pricemx thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .pricemx tbody{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
  .pricemx tr{
    display:grid; grid-template-columns:minmax(0,1fr);
    padding:6px 8px 8px; border-radius:var(--r-lg);
    background:var(--card); border:1px solid var(--hair);
  }
  .pricemx th[scope="row"]{ display:block; padding:16px 12px 14px; }
  .pricemx td{ display:block; border-top:1px solid var(--hair); }
  .pricemx td.is-none{ display:none; }
  .pricemx td.is-cup{ margin-top:8px; border-top:0; }

  .pcell{ display:flex; align-items:center; gap:14px; min-height:54px; padding:10px 12px; }
  .pcell__lbl{ flex:1; min-width:0; color:var(--fg-2); font-size:.95rem; line-height:1.35; }
  .pcell__lbl small{ font-size:inherit; }
  .pcell__go{ display:none; }
  .pcell::after{
    content:""; flex:none; width:18px; height:18px; background:var(--accent-fg);
    -webkit-mask:var(--m-arrow-r) center / contain no-repeat; mask:var(--m-arrow-r) center / contain no-repeat;
    transition:translate .45s var(--ease);
  }
  .is-cup .pcell{
    background:linear-gradient(180deg,rgba(210,162,116,.10),rgba(210,162,116,.03));
    box-shadow:inset 0 0 0 1px var(--line-gold);
  }
  .is-cup .pcell__lbl{ color:var(--accent-fg); }
  .is-cup .pcell__lbl small{ color:var(--fg-2); white-space:nowrap; }
  @media (hover:hover) and (pointer:fine){
    .pcell:hover{ background:color-mix(in srgb,var(--fg) 6%,transparent); }
    .pcell:hover::after{ translate:3px 0; }
  }
}
/* 600–899: name and description on the left, price rows on the right */
@media (min-width:600px) and (max-width:899.98px){
  .pricemx tr{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:12px; padding:8px; grid-auto-flow:dense; }
  .pricemx th[scope="row"]{ grid-column:1; grid-row:1 / span 5; padding:16px 10px 16px 14px; }
  .pricemx td{ grid-column:2; }
  .pricemx th[scope="row"] + td:not(.is-none),
  .pricemx th[scope="row"] + td.is-none + td{ border-top:0; }
}

/* ---------- ≥900: the real table ---------- */
@media (min-width:900px){
  .pricemx{ table-layout:fixed; }
  .pricemx__ct{ width:var(--ct); }
  .pricemx thead th{
    padding:0 6px 18px; vertical-align:bottom; text-align:center;
    font-size:var(--fs-caps); font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.35;
    color:var(--fg-2); font-variant-numeric:tabular-nums;
    transition:color var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
  }
  .pricemx thead th.is-cup{ padding:18px 2px 18px; }
  .pricemx__cuplbl{ display:block; color:var(--accent-fg); white-space:nowrap; letter-spacing:.08em; font-size:.7rem; }
  .pricemx thead th.is-cup small{ display:block; margin-top:4px; font-size:var(--fs-xs); letter-spacing:.02em; text-transform:none; color:var(--fg-2); }
  .pricemx thead th.is-hot{ color:var(--fg); box-shadow:inset 0 -2px 0 var(--accent); }

  .pricemx tbody th,.pricemx tbody td{ border-top:1px solid var(--hair); vertical-align:middle; }
  .pricemx tbody th{ padding:24px 20px 24px 2px; }
  .pricemx tbody td{ padding:8px 3px; text-align:center; }
  .pricemx tbody th b{ transition:color var(--d2) var(--ease); }
  .pricemx tbody th.is-hot b{ color:var(--accent-2); }

  .pcell{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:76px; padding:12px 2px 22px; }
  .pcell__lbl{ display:none; }
  .pcell__go{ position:absolute; left:0; right:0; bottom:9px; opacity:0; translate:0 4px; transition:opacity var(--d2) var(--ease), translate var(--d2) var(--ease); }
  .pcell:focus-visible{ background:color-mix(in srgb,var(--fg) 6%,transparent); }
  .pcell:focus-visible .pcell__go{ opacity:1; translate:0 0; }
  @media (hover:hover) and (pointer:fine){
    .pcell:hover{ background:color-mix(in srgb,var(--fg) 6%,transparent); }
    .pcell:hover .pcell__go{ opacity:1; translate:0 0; }
  }
  /* "—" stays in the markup (no-CSS / copy); visually a short centred hairline */
  .pcell__none{ display:block; height:1px; width:18px; margin-inline:auto; overflow:hidden; color:transparent; background:var(--fg-3); opacity:.7; }

  .pricemx__col{
    display:block; position:absolute; z-index:0; top:0; bottom:0; right:0;
    width:calc((100% - var(--ct)) / 5);
    border-radius:var(--r-md); border:1px solid var(--line-gold);
    background:linear-gradient(180deg,rgba(210,162,116,.10),rgba(210,162,116,.03));
    overflow:clip; pointer-events:none;
  }
  /* one light sweep down the köpöly column (added once by 33-arak.js in the desktop motion context) */
  .pricemx__col::after{
    content:""; position:absolute; left:0; right:0; top:-45%; height:45%;
    background:linear-gradient(180deg,transparent,rgba(244,217,168,.17) 50%,transparent);
    opacity:0;
  }
  .pricemx__wrap.is-sweep .pricemx__col::after{ animation:arak-sweep 1.6s var(--ease-io) both; }
}
@keyframes arak-sweep{
  0%{ opacity:1; translate:0 0; }
  85%{ opacity:1; }
  100%{ opacity:0; translate:0 422%; }
}

/* ---------- below the table ---------- */
.arak__cup{
  display:flex; align-items:flex-start; gap:12px; max-width:62ch; margin-top:clamp(20px,2.4vw,28px);
  font-size:var(--fs-sm); line-height:1.6; color:var(--fg-2);
}
.arak__cup .ico{ width:20px; height:20px; margin-top:.1em; color:var(--accent-fg); }
.arak__cup strong{ color:var(--fg); }

/* ---------- facts box + CTA ---------- */
.arak__sidein{ display:grid; gap:12px; }
#arak .arak__facts{ background:var(--card); }
@media (min-width:600px) and (max-width:1279.98px){
  #arak .arak__facts ul{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(20px,3vw,36px); }
  #arak .arak__facts li:nth-child(2){ border-top:0; padding-top:6px; }
}
@media (min-width:600px) and (max-width:1279.98px){
  .arak__cta{ display:inline-flex; width:auto; }
}

/* ---------- forced colors: the frame is decor, the cells keep a visible edge ---------- */
@media (forced-colors:active){
  .pcell{ border:1px solid LinkText; }
  .is-cup .pcell{ border-width:2px; }
}

/* ===== 15-bent.css ===== */
/* =====================================================================
   15-bent.css – the paper chapter #bent ("inside the studio", SPEC §9.6). WP3.
   Wrapper markup (S0, page template): <div class="chapter theme-paper" id="bent" data-door>
   - paper + warm top light; 28px top radius over the dark page; hard cut back to dark at the end.
   - door: --door (0…1) drives an arch-topped clip. The clip exists ONLY while 34-bent.js runs the
     desktop motion context (it adds .is-door); default --door:1 = open (no JS, reduced motion, touch, <1100).
   ===================================================================== */

#bent{
  --door:1;
  --dw:22vw;                                   /* half the closed door width */
  border-radius:28px 28px 0 0;
}

/* warm top light (the room is lit) – a pseudo layer so the glow keeps its size however tall the chapter is */
#bent::before{
  content:""; position:absolute; inset:0 0 auto; height:min(100%,1200px);
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0,rgba(255,214,160,.55),transparent);
}

/* the door (desktop motion context only – .is-door is added and removed by 34-bent.js) */
@media (min-width:1100px){
  #bent.is-door{
    clip-path:inset(
      0 calc((1 - var(--door)) * (50% - var(--dw)))
      0 calc((1 - var(--door)) * (50% - var(--dw)))
      round calc((1 - var(--door)) * var(--dw)) calc((1 - var(--door)) * var(--dw)) 0 0
    );
  }
  #bent.is-door.is-opening{ will-change:clip-path; }
}

/* the three paper sections share one room: the 2nd/3rd start closer (half a section pad).
   scroll-margin is corrected so the H2 still lands 24px under the nav (D14). */
#bent > .section + .section{
  padding-top:calc(var(--section-pad) * .5);
  scroll-margin-top:calc(24px - var(--section-pad) * .5);
}

/* dictionary helper: keep hyphenated words (e-mailben) from breaking at the hyphen */
#bent .nobr{ white-space:nowrap; }

@media (forced-colors:active){
  #bent::before{ display:none; }
  #bent{ border-top:1px solid CanvasText; }
}

/* ===== 16-rolam.css ===== */
/* =====================================================================
   16-rolam.css – Rólam #rolam (SPEC §9.7). WP3. Paper (inside #bent).
   <900: head → portrait (full width, ≤70svh) with the face inset → copy.
   ≥900: portrait window cols 1–5 (rows 1–2), head + copy cols 7–12.
   No --accent text on paper: numbers/eyebrow use --accent-fg (= --accent-ink here).
   ===================================================================== */

#rolam .about__grid{
  display:grid; grid-template-columns:minmax(0,1fr);
  row-gap:clamp(28px,6vw,44px);
}
#rolam .about__grid > *{ min-width:0; }

/* ---------- head ---------- */
#rolam .about__head > * + *{ margin-top:clamp(14px,1.6vw,22px); }
#rolam .about__title{ overflow-wrap:normal; }
#rolam .about__role{
  margin-top:clamp(10px,1.2vw,16px);
  font-size:var(--fs-lead); font-weight:400; line-height:1.45; color:var(--fg-2);
}

/* ---------- portrait window + face inset ---------- */
#rolam .about__media{ position:relative; margin-bottom:clamp(20px,5vw,28px); }
#rolam .about__window{
  width:100%; aspect-ratio:4 / 5; max-height:70svh;
  border-radius:var(--r-xl); overflow:clip;
  background:var(--card); box-shadow:var(--sh-paper);
}
#rolam .about__img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; }

/* ---------- copy ---------- */
#rolam .about__body{ container-type:inline-size; }
/* the lead: --fs-lead on phones, the statement scale (300) from 900px, fitted to the 6-column measure */
#rolam .about__scrub{
  max-width:34em;
  font-size:var(--fs-lead); font-weight:400; line-height:1.6; letter-spacing:-.005em; color:var(--fg);
}
#rolam .about__text{ margin-top:clamp(18px,2vw,26px); max-width:52ch; color:var(--fg-2); }
#rolam .about__text [translate="no"]{ white-space:nowrap; }        /* keep the address on one line */

/* facts: rows (number | label) in a narrow copy column, three columns when the column is wide enough */
#rolam .about__facts{ margin-top:clamp(30px,4vw,48px); display:grid; }
#rolam .about__fact{
  display:grid; grid-template-columns:calc(var(--fs-h2) * 2.6) minmax(0,1fr); column-gap:16px; align-items:baseline;
  padding-block:14px; border-top:1px solid var(--hair);
}
#rolam .about__fact:last-child{ border-bottom:1px solid var(--hair); }
#rolam .about__num{
  font-size:var(--fs-h2); font-weight:300; line-height:1; letter-spacing:-.03em;
  color:var(--accent-fg); font-variant-numeric:tabular-nums; white-space:nowrap;
}
#rolam .about__lbl{ font-size:var(--fs-sm); line-height:1.45; color:var(--fg-2); }
@container (min-width:420px){
  #rolam .about__facts{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--col-gap); }
  #rolam .about__fact{ display:block; padding-block:18px 0; }
  #rolam .about__num{ font-size:min(var(--fs-h2),9.5cqi); }
  #rolam .about__fact:last-child{ border-bottom:0; }
  #rolam .about__lbl{ margin-top:12px; max-width:20ch; }
}

#rolam .about__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px;
  margin-top:clamp(30px,4vw,48px);
}

/* signature: decorative swash (data-draw) + caption */
#rolam .about__sign{
  display:flex; align-items:center; gap:14px; margin-top:clamp(26px,3vw,36px);
  font-size:var(--fs-sm); letter-spacing:.02em; color:var(--fg-2);
}
#rolam .about__swash{
  flex:none; width:clamp(72px,8vw,112px); height:auto; aspect-ratio:160 / 36; overflow:visible;
  fill:none; stroke:var(--accent-fg); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- 600–899: a calmer portrait (not a full-bleed wall) ---------- */
@media (min-width:600px) and (max-width:899.98px){
  #rolam .about__media{ width:min(100%,540px); }
}

/* ---------- ≥900: two columns ---------- */
@media (min-width:900px){
  #rolam .about__grid{
    grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); row-gap:0;
    grid-template-rows:auto 1fr; align-items:start;
  }
  #rolam .about__head{ grid-column:7 / span 6; grid-row:1; }
  #rolam .about__body{ grid-column:7 / span 6; grid-row:2; margin-top:clamp(28px,3vw,44px); }
  #rolam .about__media{ grid-column:1 / span 5; grid-row:1 / span 2; margin-bottom:0; }
  #rolam .about__window{ max-height:none; }
  #rolam .about__scrub{
    font-size:clamp(var(--fs-lead),.3rem + 2.3vw,2.6rem); font-weight:300; line-height:1.24; letter-spacing:-.022em;
  }
}

/* ≥900: the copy column is longer than the portrait – keep the portrait in view while reading.
   Verified: ScrollTrigger measures the window scrub / inset parallax at their natural positions even when
   refresh() runs while the box is stuck (wp3 debug run, 1180×900, HU + after a language switch). */
@media (min-width:900px) and (min-height:760px){
  #rolam .about__media{ position:sticky; top:calc(var(--nav-clear) + 24px); }
}

/* ===== 17-elonyok.css ===== */
/* =====================================================================
   17-elonyok.css – Előnyök #elonyok (SPEC §9.8). WP3. Paper (inside #bent).
   ≥900: three columns divided by vertical hairlines (numeral + icon, h3, text).
   <900: rows, icon left, numeral top-right.
   ===================================================================== */

#elonyok .ben__list{ display:grid; grid-template-columns:minmax(0,1fr); }
#elonyok .ben__item{
  position:relative; min-width:0;
  display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:20px; align-items:start; align-content:start;
  padding-block:26px 28px; border-top:1px solid var(--hair);
}
#elonyok .ben__item:last-child{ border-bottom:1px solid var(--hair); }
#elonyok .ben__ico{
  grid-column:1; grid-row:1 / span 2; width:44px; height:44px; overflow:visible;
  fill:none; stroke:var(--accent-fg); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
}
#elonyok .ben__t{ grid-column:2; grid-row:1; padding-right:3.2rem; font-size:var(--fs-h3); }
#elonyok .ben__d{ grid-column:2; grid-row:2; margin-top:8px; max-width:40ch; color:var(--fg-2); }
#elonyok .ben__idx{
  position:absolute; top:22px; right:0;
  font-size:clamp(1.75rem,1.4rem + 1.2vw,2.4rem); font-weight:300; line-height:1; letter-spacing:-.03em;
  color:var(--accent-fg); font-variant-numeric:tabular-nums;
}

@media (min-width:900px){
  #elonyok .ben__list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #elonyok .ben__item{
    grid-template-columns:minmax(0,1fr) auto; column-gap:16px;
    padding:0 clamp(22px,3vw,52px) 6px; border-top:0; border-left:1px solid var(--hair);
  }
  #elonyok .ben__item:first-child{ padding-left:0; border-left:0; }
  #elonyok .ben__item:last-child{ padding-right:0; border-bottom:0; }
  #elonyok .ben__idx{
    position:static; grid-column:1; grid-row:1;
    font-size:clamp(3rem,1.2rem + 3.4vw,5.5rem); letter-spacing:-.045em; line-height:.86;
  }
  #elonyok .ben__ico{ grid-column:2; grid-row:1; align-self:start; }
  #elonyok .ben__t{ grid-column:1 / -1; grid-row:2; padding-right:0; margin-top:clamp(32px,4.4vw,64px); }
  #elonyok .ben__d{ grid-column:1 / -1; grid-row:3; margin-top:12px; max-width:34ch; }
}

/* ===== 18-elso-alkalom.css ===== */
/* =====================================================================
   18-elso-alkalom.css – Első alkalom #elso-alkalom (SPEC §9.9). WP3. Paper (inside #bent).
   Steps: <600 vertical timeline (2px rail, numbered arch nodes) · 600–1099 2×2 ·
   ≥1100 a row of four joined by the SVG line (.visit__line; drawn + nodes lit by 34-bent.js in the
   desktop motion context; static = drawn line, outlined nodes).
   Contraindications: details#ellenjavallatok as a card (the single home of the list).
   ===================================================================== */

#elso-alkalom{ --node-w:44px; --node-h:52px; --vgap:clamp(30px,8vw,40px); }

/* ---------- steps ---------- */
#elso-alkalom .visit__track{ position:relative; }
#elso-alkalom .visit__line{ display:none; }
#elso-alkalom .visit__steps{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--vgap); }
#elso-alkalom .vstep{
  position:relative; min-width:0;
  display:grid; grid-template-columns:var(--node-w) minmax(0,1fr); column-gap:18px; align-items:start; align-content:start;
}
#elso-alkalom .vstep > :not(.vstep__node){ grid-column:2; }
/* the rail: from below one node to the top of the next */
#elso-alkalom .vstep:not(:last-child)::before{
  content:""; position:absolute;
  left:calc(var(--node-w) / 2 - 1px); top:calc(var(--node-h) + 8px); bottom:calc(-1 * var(--vgap) + 8px);
  width:2px; border-radius:2px; background:var(--hair-2);
}
#elso-alkalom .vstep__node{
  grid-column:1; grid-row:1 / span 3;
  display:grid; place-items:end center; width:var(--node-w); height:var(--node-h); padding-bottom:10px;
  border:1.5px solid var(--accent-fg); border-radius:999px 999px 6px 6px;
  background:var(--page); color:var(--accent-fg);
  font-size:.8125rem; font-weight:500; line-height:1; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
#elso-alkalom .vstep__node.is-lit{ background:var(--accent-fg); color:var(--page); }
#elso-alkalom .vstep__when{
  justify-self:start; display:inline-flex; align-items:center; min-height:28px; padding:3px 12px;
  border:1px solid var(--accent-fg); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:500; line-height:1.3; letter-spacing:.02em; color:var(--accent-fg);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
#elso-alkalom .vstep__t{ margin-top:12px; font-size:var(--fs-h3); }
#elso-alkalom .vstep__d{ margin-top:8px; max-width:38ch; color:var(--fg-2); }

@media (min-width:600px){
  #elso-alkalom .visit__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--col-gap); row-gap:clamp(40px,5vw,56px); }
  #elso-alkalom .vstep{ display:block; }
  #elso-alkalom .vstep:not(:last-child)::before{ content:none; }
  #elso-alkalom .vstep__when{ display:flex; width:fit-content; margin-top:24px; }
  #elso-alkalom .vstep__t{ margin-top:14px; }
}

@media (min-width:1100px){
  #elso-alkalom .visit__steps{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  #elso-alkalom .vstep{ padding-right:clamp(8px,1.4vw,24px); }
  #elso-alkalom .visit__line{
    display:block; position:absolute; z-index:0;
    left:calc(var(--node-w) / 2); top:calc(var(--node-h) / 2 - 1px); width:calc(100% - var(--node-w) / 2); height:2px;
    overflow:visible; pointer-events:none;
  }
  #elso-alkalom .visit__line path{ fill:none; stroke:var(--accent-fg); stroke-width:1.25; opacity:.55; }
  #elso-alkalom .vstep__node{ position:relative; z-index:1; }
}

/* ---------- CTA + contraindications ---------- */
#elso-alkalom .visit__foot{
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,4vw,32px);
  margin-top:var(--head-gap);
}
#elso-alkalom .visit__foot > *{ min-width:0; }

#elso-alkalom .contra{
  scroll-margin-top:16px;
  padding-inline:clamp(18px,3vw,32px);
  border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--card);
}
#elso-alkalom .contra__q{ min-height:64px; padding-block:14px; }
#elso-alkalom .contra__sum{ display:inline-flex; align-items:center; gap:12px; min-width:0; }
#elso-alkalom .contra__ico{ width:22px; height:22px; color:var(--accent-fg); }
@media (hover:hover) and (pointer:fine){
  #elso-alkalom .contra__q:hover .acc__icon{ background:var(--tint); }
}
#elso-alkalom .contra__a{ padding:0 0 26px 34px; max-width:68ch; }
#elso-alkalom .contra__list{ display:grid; gap:10px; margin-top:16px; color:var(--fg); }
#elso-alkalom .contra__list li{ position:relative; padding-left:24px; }
#elso-alkalom .contra__list li::before{
  content:""; position:absolute; left:0; top:calc(.82em - 1px); width:12px; height:2px; border-radius:2px; background:var(--accent-fg);
}
#elso-alkalom .contra__close{ margin-top:18px; }

@media (max-width:599.98px){
  #elso-alkalom .contra__a{ padding-left:0; }
  #elso-alkalom .visit__cta .btn{ width:100%; }
}

@media (min-width:1100px){
  #elso-alkalom .visit__foot{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:start; }
  #elso-alkalom .visit__cta{ grid-column:1 / span 4; padding-top:6px; }
  #elso-alkalom .contra{ grid-column:5 / span 8; }
}

@media (forced-colors:active){
  #elso-alkalom .vstep__node.is-lit{ forced-color-adjust:none; background:CanvasText; color:Canvas; }
}

/* ===== 19-velemenyek.css ===== */
/* =====================================================================
   19-velemenyek.css – Vélemények #velemenyek (SPEC §9.10). Owner: WP4.
   Dark --bg-2 band; a giant „ straddles the paper/dark seam above it.
   <900: scroll-snap rail (S0 .rail) · ≥900: featured grid (Brenner 1–7,
   Szakál + Jakab Csíki stacked 8–12). All selectors scoped to #velemenyek.
   ===================================================================== */

#velemenyek{
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 14%,var(--bg-2) 86%,var(--bg) 100%);
}

/* the seam: a decorative „ whose ink is centred on the section's top edge */
#velemenyek .rev__seam{
  position:absolute; z-index:2; top:0;
  left:max(var(--gut), calc((100% - var(--wrap)) / 2));
  font-size:clamp(10rem,22vw,20rem); font-weight:500; line-height:1; letter-spacing:0;
  color:var(--accent);
  translate:-.03em -.94em;
  pointer-events:none; user-select:none;
}

/* head */
#velemenyek .rev__sub{ max-width:40ch; }

/* ---------- list: rail (<900) ---------- */
#velemenyek .rev__list{
  position:relative;
  margin-inline:calc(-1 * var(--gut));          /* full-bleed rail, cards aligned with the wrap */
  padding:6px var(--gut) 8px;
  scroll-padding-inline:var(--gut);
  overflow-y:hidden;
}
#velemenyek .rev__list:focus-visible{ outline-offset:-3px; border-radius:var(--r-lg); }

/* ---------- card ---------- */
#velemenyek .rev__card{
  display:flex; flex-direction:column; gap:20px; min-width:0;
  padding:clamp(24px,3vw,44px);
  background:var(--card); color:var(--fg);
  border:1px solid var(--hair); border-radius:var(--r-lg);
}
#velemenyek .rev__stars{ display:inline-flex; align-self:flex-start; gap:4px; color:var(--accent); font-size:16px; line-height:1; }
#velemenyek .rev__stars .ico{ width:1em; height:1em; }
#velemenyek .rev__q{
  font-size:var(--fs-lead); font-weight:300; line-height:1.58; letter-spacing:-.005em;
  color:var(--fg); text-wrap:pretty; hanging-punctuation:first;
}
#velemenyek .rev__by{
  display:flex; align-items:center; gap:14px;
  margin-top:auto; padding-top:20px; border-top:1px solid var(--hair);
}
#velemenyek .rev__av{
  flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--surface-3); border:1px solid var(--line-gold);
  color:var(--accent-2); font-size:1rem; font-weight:500; line-height:1;
}
#velemenyek .rev__who{ display:flex; flex-direction:column; min-width:0; line-height:1.4; }
#velemenyek .rev__name{ font-weight:500; }
#velemenyek .rev__role{ font-size:var(--fs-xs); color:var(--fg-2); }

#velemenyek .rev__cta{ margin-top:clamp(40px,5vw,72px); }

/* ---------- ≥900: featured grid, everything visible ---------- */
@media (min-width:900px){
  #velemenyek .rev__list{
    grid-auto-flow:row; grid-auto-columns:auto;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:var(--col-gap);
    margin-inline:0; padding:0;
    overflow:visible; scroll-snap-type:none;
  }
  #velemenyek .rev__card{ grid-column:8 / span 5; }
  #velemenyek .rev__card--featured{
    grid-column:1 / span 7; grid-row:1 / span 2;
    gap:28px;
    padding:clamp(32px,4vw,60px);
    border-color:var(--line-gold);
    background:radial-gradient(110% 80% at 0% 0%,var(--glow),transparent 62%),var(--card);
  }
  #velemenyek .rev__card--featured .rev__stars{ font-size:20px; gap:5px; }
  #velemenyek .rev__card--featured .rev__q{
    margin-block:auto;                            /* free height (the stacked pair is taller) splits around the quote */
    font-size:clamp(1.5rem,1.1rem + 1.4vw,2.35rem); font-weight:300; line-height:1.3; letter-spacing:-.018em;
  }
  #velemenyek .rev__card--featured .rev__by{ margin-top:0; }
  #velemenyek .rev__ctrl{ display:none; }
}

/* ===== 20-foglalas.css ===== */
/* =====================================================================
   20-foglalas.css – booking #foglalas (SPEC §11). Owner: WP5.
   Everything is scoped under #foglalas. The shared .bstep / .tchips / .dchips / .bfields / .bbar / .done / .hp
   components come from Stage 0 (04-components.css) and are only extended here. No transform transitions
   (GSAP owns transform); no overflow on ancestors of the sticky ticket.
   ===================================================================== */

/* ---------- section: dark, one warm glow behind the ticket (background only – nothing that clips) ---------- */
#foglalas{
  background:
    radial-gradient(52% 34% at 92% 44%, var(--glow), transparent 72%),
    radial-gradient(46% 22% at 4% 72%, var(--glow-deep), transparent 72%),
    var(--bg);
}

/* ---------- head: eyebrow · mega title · lead + assurances ---------- */
#foglalas .book__head{ display:grid; row-gap:clamp(14px,1.6vw,22px); margin-bottom:var(--head-gap); }
#foglalas .book__title{
  font-size:var(--fs-mega); font-weight:500; letter-spacing:-.026em; line-height:.98;  /* -.04em-nél az „ő” ékezete a „d”-hez ért */
  text-wrap:balance; max-width:11em;
}
#foglalas .book__title:focus{ outline:none; }
#foglalas .book__title:focus-visible{ outline:2px solid var(--focus); outline-offset:6px; }
#foglalas .book__intro{ display:grid; row-gap:18px; min-width:0; }
#foglalas .book__lead{ font-size:var(--fs-lead); font-weight:300; line-height:1.6; color:var(--fg-2); max-width:40ch; }
#foglalas .book__assure{ display:flex; flex-wrap:wrap; gap:10px 22px; }
#foglalas .book__assure li{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:500; line-height:1.35; color:var(--fg); }
#foglalas .book__assure .ico{ width:16px; height:16px; stroke-width:1.9; color:var(--accent-fg); }
@media (min-width:1100px){
  #foglalas .book__head{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:end; }
  #foglalas .book__eyebrow{ grid-column:1 / -1; }
  #foglalas .book__title{ grid-column:1 / span 8; }
  #foglalas .book__intro{ grid-column:9 / span 4; padding-bottom:.4em; }
  #foglalas .book__assure{ flex-direction:column; gap:10px; }
}

/* ---------- promo strip (HU only, filled from api/promo.php) ---------- */
#foglalas .bpromo{
  margin-bottom:clamp(24px,3vw,40px); border:1px solid var(--line-gold); border-radius:20px;
  background:linear-gradient(120deg,rgba(210,162,116,.13),rgba(210,162,116,.03));
}
#foglalas .bpromo__sum{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; min-height:var(--tap);
  padding:14px 20px; border-radius:20px; cursor:pointer; list-style:none;
}
#foglalas .bpromo__sum::-webkit-details-marker{ display:none; }
#foglalas .bpromo__sum::marker{ content:""; }
#foglalas .bpromo__badge{ padding:5px 12px; border-radius:var(--r-pill); background:var(--accent); color:var(--ink); font-size:.88rem; font-weight:500; line-height:1.2; }
#foglalas .bpromo__title{ font-weight:500; }
#foglalas .bpromo__until{ font-size:var(--fs-sm); color:var(--fg-2); }
#foglalas .bpromo__more{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:var(--fs-sm); font-weight:500; color:var(--link); }
#foglalas .bpromo__more .ico{ width:16px; height:16px; transition:rotate var(--d2) var(--ease); }
#foglalas .bpromo[open] .bpromo__more .ico{ rotate:180deg; }
#foglalas .bpromo__text{ max-width:72ch; padding:0 20px 20px; color:var(--fg-2); white-space:pre-line; }

#foglalas .book__nojs{ max-width:640px; }

/* ---------- app grid: steps | ticket (≥900) ---------- */
#foglalas .book__app{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:14px; align-items:start; }
#foglalas .book__steps{ display:flex; flex-direction:column; gap:14px; min-width:0; }
#foglalas .bdone{ min-width:0; }
@media (min-width:900px){
  #foglalas .book__app{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(16px,2.2vw,28px); }
  #foglalas .book__steps,#foglalas .bdone{ grid-column:1; grid-row:1; }
  #foglalas .ticket{ grid-column:2; grid-row:1; }
}

/* ---------- step cards (Stage 0 .bstep, extended) ---------- */
/* the steps / success panel are <section id> – 02-base's section[id]{scroll-margin-top:calc(24px - var(--section-pad))}
   outranks .bstep{scroll-margin-top:16px}; restore the D14 value so FD_SCROLL lands the card 16px under the nav */
#foglalas .bstep,#foglalas .bdone,#foglalas .ticket{ scroll-margin-top:16px; }
@media (max-width:599.98px){ #foglalas .bstep{ padding:20px 14px 22px; } }
#foglalas .bstep__head h3{ min-width:0; }
#foglalas .bstep__sum{ font-variant-numeric:tabular-nums; }

/* step 1 */
#foglalas .tchip__in em{ font-size:.82rem; }
#foglalas .book__cup{ margin-top:10px; }
#foglalas .dfield{ margin-top:26px; }
#foglalas .dfield__l{
  display:block; margin-bottom:12px;
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--fg-2);
}
#foglalas .dchips{ min-height:56px; align-content:flex-start; }
#foglalas .dchips__empty{ display:flex; align-items:center; min-height:44px; padding:0 2px; font-size:var(--fs-sm); color:var(--fg-2); }
@media (max-width:599.98px){ #foglalas .dchips__empty{ grid-column:1 / -1; } }

/* step 2: next-free shortcut */
#foglalas .bnext{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px; margin-bottom:20px; padding:10px 16px;
  border-radius:16px; border:1px solid rgba(210,162,116,.6); background:rgba(210,162,116,.08);
  color:var(--fg); font-size:var(--fs-sm); line-height:1.4; text-align:left;
  transition:background-color var(--d2) var(--ease), border-color var(--d2) var(--ease);
}
#foglalas .bnext__ico{ width:20px; height:20px; color:var(--accent); }
#foglalas .bnext__txt{ flex:1; min-width:0; }
#foglalas .bnext b{ font-weight:500; color:var(--accent-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
#foglalas .bnext__go{ display:inline-flex; align-items:center; gap:6px; flex:none; font-weight:500; color:var(--link); }
#foglalas .bnext__go .ico{ width:16px; height:16px; }
#foglalas .bnext:active{ scale:.99; }
@media (hover:hover) and (pointer:fine){ #foglalas .bnext:hover{ background:rgba(210,162,116,.15); border-color:var(--accent); } }
@media (max-width:420px){ #foglalas .bnext__go > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } }
#foglalas .book__fail{ padding:12px 14px; border:1px dashed var(--hair-2); border-radius:14px; }

/* step 2: calendar + slots – side by side once the step is wide enough (≈ ≥1300px viewport on desktop, tablets in 1 column) */
#bstep-2{ container:bkstep / inline-size; }
#foglalas .bstep__cal{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:26px; }
@container bkstep (min-width:580px){
  #foglalas .bstep__cal{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:clamp(24px,3vw,40px); align-items:start; }
}
#foglalas .bcal{ position:relative; min-width:0; }
#foglalas .bcal__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
#foglalas .bcal__month{ font-size:1.15rem; font-weight:500; letter-spacing:-.01em; line-height:1.3; }
#foglalas .bcal__nav{ display:flex; gap:8px; }
#foglalas .bcal__grid{ width:100%; table-layout:fixed; border-collapse:collapse; }
#foglalas .bcal__grid th{ padding:0 0 8px; font-size:.72rem; font-weight:500; letter-spacing:.06em; text-align:center; color:var(--fg-2); }
#foglalas .bcal__grid td{ padding:1.5px; }
@media (min-width:600px){ #foglalas .bcal__grid td{ padding:3px; } }

#foglalas .bday{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:100%; min-height:46px; padding:5px 0 4px;
  border-radius:14px; border:1px solid var(--edge); background:var(--field); color:var(--fg);
  font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d2) var(--ease), border-color var(--d2) var(--ease), color var(--d2) var(--ease), opacity var(--d2) var(--ease);
}
@media (min-width:600px){ #foglalas .bday{ min-height:50px; } }
#foglalas .bday__n{ font-size:.98rem; line-height:1; }
#foglalas .bday__dots{ display:flex; align-items:center; justify-content:center; gap:3px; height:5px; transition:opacity var(--d2) var(--ease); }
#foglalas .bday__dots i{ width:4px; height:4px; border-radius:50%; background:rgba(242,233,221,.24); }
#foglalas .bday__dots i.on{ background:var(--accent); }
#foglalas .bday__dots b{ font-size:.6rem; font-weight:500; line-height:1; color:var(--fg-2); }
#foglalas .bcal.is-loading .bday__dots{ opacity:0; }
#foglalas .bday:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
#foglalas .bday[aria-disabled="true"]{ cursor:default; border-color:transparent; background:none; }
#foglalas .bday[data-state="full"]{ color:rgba(242,233,221,.55); }
#foglalas .bday[data-state="full"] .bday__n{ text-decoration:line-through; text-decoration-thickness:1px; }
#foglalas .bday[data-state="closed"],#foglalas .bday[data-state="past"]{ opacity:.38; }
#foglalas .bday[aria-current="date"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
#foglalas .bday[aria-current="date"][aria-disabled="true"]{ opacity:.6; }
#foglalas .bday[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); box-shadow:none; color:var(--ink); opacity:1; }
#foglalas .bday[aria-pressed="true"] .bday__dots i{ background:rgba(23,16,10,.28); }
#foglalas .bday[aria-pressed="true"] .bday__dots i.on{ background:var(--ink); }
#foglalas .bday[aria-pressed="true"] .bday__dots b{ color:var(--ink); }
#foglalas .bday:not([aria-disabled="true"]):active{ scale:.96; }
@media (hover:hover) and (pointer:fine){
  #foglalas .bday:not([aria-disabled="true"]):not([aria-pressed="true"]):hover{ background:var(--tint); border-color:var(--fg-2); }
}
#foglalas .bcal__load{ display:block; height:2px; margin:12px 1.5px 0; border-radius:2px; }
#foglalas .bcal:not(.is-loading) .bcal__load{ display:none; }

#foglalas .bcal__legend{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; font-size:var(--fs-xs); line-height:1.4; color:var(--fg-2); }
#foglalas .bcal__lg{ display:inline-flex; align-items:center; gap:8px; }
#foglalas .bcal__lg i{ display:inline-block; flex:none; }
#foglalas .bcal__lg--free i{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
#foglalas .bcal__lg--full i{ width:12px; height:1px; background:currentColor; }
#foglalas .bcal__lg--closed i{ width:6px; height:6px; border-radius:50%; background:var(--fg); opacity:.38; }
#foglalas .bcal__hours{ margin-top:12px; font-size:var(--fs-xs); line-height:1.55; color:var(--fg-2); }
#foglalas .bcal__hours-l{ font-weight:500; color:var(--fg); }
#foglalas .bcal__tz{ margin-top:6px; font-size:var(--fs-xs); line-height:1.5; color:var(--fg-2); }

/* slots */
#foglalas .bslots{ min-width:0; }
#foglalas .bslots__hint{
  display:flex; align-items:center; min-height:128px; padding:20px 22px;
  border:1px dashed var(--hair-2); border-radius:18px; font-size:var(--fs-sm); line-height:1.55; color:var(--fg-2);
}
#foglalas .bslots__label{
  display:block; width:100%; margin-bottom:12px; border-radius:6px;
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--fg-2);
}
#foglalas .bslots__label:focus{ outline:none; }
#foglalas .bslots__label:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
#foglalas .bslots__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; min-height:128px; align-content:start; }
#foglalas .bslot{ position:relative; display:block; min-width:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#foglalas .bslot > span{
  display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:56px; padding:8px 10px;
  border-radius:14px; border:1px solid var(--edge); background:var(--field); color:var(--fg); text-align:center;
  transition:background-color var(--d2) var(--ease), border-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
#foglalas .bslot b{ font-size:1.08rem; font-weight:500; line-height:1.15; font-variant-numeric:tabular-nums; }
#foglalas .bslot small{ font-size:.76rem; line-height:1.2; color:var(--fg-2); font-variant-numeric:tabular-nums; }
#foglalas .bslot input:checked + span{ background:var(--sel-bg); border-color:var(--sel-bg); color:var(--sel-fg); }
#foglalas .bslot input:checked + span small{ color:var(--sel-sub); }
#foglalas .bslot:has(input:focus-visible) > span{ outline:2px solid var(--focus); outline-offset:3px; }
#foglalas .bslot input:disabled + span{ cursor:not-allowed; border-style:dashed; border-color:var(--hair-2); background:none; color:rgba(242,233,221,.55); }
#foglalas .bslot input:disabled + span small{ color:rgba(242,233,221,.55); }
#foglalas .bslot[data-state="booked"] b{ text-decoration:line-through; text-decoration-thickness:1px; }
#foglalas .bslot:active > input:not(:disabled) + span{ scale:.97; }
@media (hover:hover) and (pointer:fine){ #foglalas .bslot:hover > input:not(:disabled):not(:checked) + span{ background:var(--tint); border-color:var(--fg-2); } }
#foglalas .bslots__none{ grid-column:1 / -1; align-self:center; font-size:var(--fs-sm); line-height:1.5; color:var(--fg-2); }
#foglalas .bslots__alt{ margin-top:16px; font-size:var(--fs-sm); line-height:1.55; color:var(--fg-2); }
#foglalas .bslots__tel{
  color:var(--link); font-weight:500; white-space:nowrap;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
}

/* step 3 */
#foglalas .book__terms{ margin-top:16px; }
#foglalas .booking__terms-req,#foglalas .book__hint span{ color:var(--accent-fg); }
#foglalas .book__hint{ margin-top:8px; font-size:var(--fs-xs); line-height:1.6; color:var(--fg-2); }
#foglalas .book__hint strong{ color:var(--fg); }
#foglalas #bk-terms-err{ margin-top:2px; }

/* ---------- ticket – the brand object (always dark; real perforation notches) ---------- */
#foglalas .ticket{ position:relative; min-width:0; filter:drop-shadow(0 30px 42px rgba(0,0,0,.5)); }
@media (max-width:899.98px){ #foglalas .ticket{ justify-self:center; width:100%; max-width:560px; margin-top:10px; } }
#foglalas .ticket__card{
  --tear-y:64%;
  position:relative; display:flex; flex-direction:column;
  padding:26px; border-radius:24px; border:1px solid rgba(210,162,116,.35);
  background:linear-gradient(180deg,var(--surface-3),var(--surface) 62%);
  color:var(--fg);
  -webkit-mask:radial-gradient(circle 12px at 0 var(--tear-y),#0000 98%,#000),radial-gradient(circle 12px at 100% var(--tear-y),#0000 98%,#000);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 12px at 0 var(--tear-y),#0000 98%,#000),radial-gradient(circle 12px at 100% var(--tear-y),#0000 98%,#000);
  mask-composite:intersect;
}
@media (max-width:420px){ #foglalas .ticket__card{ padding:22px 20px; } }
#foglalas .ticket__stub{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin:-26px -26px 20px; padding:18px 26px 16px;
  border-bottom:1px solid rgba(210,162,116,.22); border-radius:24px 24px 0 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 300'%3E%3Cpath d='M102 300V272.1A18 18 0 0 1 138 272.1V300M90 300V253.5A30 30 0 0 1 150 253.5V300M78 300V234.9A42 42 0 0 1 162 234.9V300M66 300V216.3A54 54 0 0 1 174 216.3V300M54 300V197.7A66 66 0 0 1 186 197.7V300M42 300V179.1A78 78 0 0 1 198 179.1V300M30 300V160.5A90 90 0 0 1 210 160.5V300M18 300V141.9A102 102 0 0 1 222 141.9V300M6 300V123.3A114 114 0 0 1 234 123.3V300' fill='none' stroke='%23D2A274' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E") right -4% top 0 / auto 220% no-repeat;
}
@media (max-width:420px){ #foglalas .ticket__stub{ margin:-22px -20px 18px; padding:16px 20px 14px; } }
#foglalas .ticket__mark{ flex:none; width:25px; height:30px; }
#foglalas .ticket__brand{ font-size:.98rem; font-weight:500; letter-spacing:-.01em; line-height:1.2; }
#foglalas .ticket__brand span{ color:var(--accent-2); }
#foglalas .ticket__kind{ margin-left:auto; font-size:.66rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; line-height:1.3; color:var(--accent); text-align:right; }
#foglalas .ticket__progress{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:18px; }
#foglalas .ticket__progress span{ position:relative; height:3px; border-radius:3px; background:rgba(242,233,221,.12); overflow:hidden; }
#foglalas .ticket__progress span::after{ content:""; position:absolute; inset:0; background:var(--accent); scale:0 1; transform-origin:0 50%; transition:scale var(--d3) var(--ease); }
#foglalas .ticket__progress span.is-done::after{ scale:1 1; }
#foglalas .ticket__eyebrow{ margin-bottom:4px; font-size:var(--fs-caps); font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1.4; color:var(--accent); }
#foglalas .ticket__eyebrow:focus{ outline:none; }
#foglalas .ticket__eyebrow:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:4px; }
#foglalas .ticket__rows{ flex:0 1 auto; min-height:0; }
#foglalas .ticket__row{
  display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:12px;
  margin-inline:-8px; padding:11px 8px; border-top:1px solid var(--hair); border-radius:8px;
}
#foglalas .ticket__row:first-child{ border-top-color:transparent; }
#foglalas .ticket__row dt{ padding-top:.28em; font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.5; color:var(--fg-2); }
#foglalas .ticket__row dd{ min-width:0; font-size:.95rem; line-height:1.45; overflow-wrap:break-word; font-variant-numeric:tabular-nums; }
#foglalas .ticket__row.is-flash,#foglalas .bbar__sum.is-flash{ animation:bk-flash .9s var(--ease); }
@keyframes bk-flash{ 0%,20%{ background-color:var(--glow); } 100%{ background-color:transparent; } }
#foglalas .ticket__tear{ height:0; margin:18px -26px; border-top:1.5px dashed rgba(210,162,116,.42); }
@media (max-width:420px){ #foglalas .ticket__tear{ margin-inline:-20px; } }
#foglalas .ticket__total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
#foglalas .ticket__total-l{ min-width:0; font-size:var(--fs-sm); line-height:1.35; color:var(--fg-2); }
#foglalas .ticket__sum{ flex:none; min-width:9ch; text-align:right; font-size:var(--fs-total); font-weight:500; letter-spacing:-.02em; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums; }
#foglalas .ticket__sum.is-empty{ font-weight:300; color:var(--fg-3); }
#foglalas .ticket__submit{ margin-top:18px; min-height:56px; }
#foglalas .ticket__micro{ margin-top:10px; font-size:var(--fs-xs); line-height:1.5; text-align:center; color:var(--fg-2); }
#foglalas .ticket__status{ margin-top:14px; }
#foglalas .ticket__human{
  display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--hair);
  font-size:var(--fs-xs); line-height:1.5; color:var(--fg-2);
}
#foglalas .ticket__face{ flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--line-gold); }
#foglalas .ticket__human-t{ min-width:0; }
#foglalas .ticket__tel{ color:var(--link); font-weight:500; white-space:nowrap; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
#foglalas .ticket__demo{ margin-top:14px; padding:10px 12px; border:1px dashed var(--hair-2); border-radius:12px; font-size:var(--fs-xs); line-height:1.5; color:var(--fg-2); }
#foglalas .ticket__stamp{ top:104px; right:18px; flex-direction:column; gap:3px; text-align:center; transition:opacity .15s linear, visibility .15s linear; }
#foglalas .ticket__stamp-d{ font-size:.6rem; letter-spacing:.12em; }
#foglalas .ticket.is-sent .ticket__submit{ opacity:.6; }
/* sticky only when it fits: ≥900 wide and ≥760 tall (SPEC §11.1) */
@media (min-width:900px) and (min-height:760px){
  #foglalas .ticket{ position:sticky; top:calc(var(--nav-clear) + 24px); }
}
/* short viewports (SPEC: ≤760 tall) – and the narrow 900–1279 ticket column up to 900 tall, where the wrapped rows
   would otherwise push the submit below the fold: items 9–10 hidden, padding tightened */
@media (min-width:900px) and (max-height:760px), (min-width:900px) and (max-width:1279.98px) and (max-height:900px){
  #foglalas .ticket__human,#foglalas .ticket__demo{ display:none; }
  #foglalas .ticket__card{ padding:20px 22px; }
  #foglalas .ticket__stub{ margin:-20px -22px 14px; padding:14px 22px 12px; }
  #foglalas .ticket__tear{ margin:14px -22px; }
  #foglalas .ticket__row{ grid-template-columns:78px minmax(0,1fr); padding-block:8px; }
  #foglalas .ticket__submit{ margin-top:14px; }
}

/* ---------- success panel (Stage 0 .done, extended) ---------- */
#foglalas .bdone__sum{ color:var(--fg); font-variant-numeric:tabular-nums; }
#foglalas .bdone .btn__ico .ico{ stroke-width:1.6; }

/* ---------- mobile step bar (Stage 0 .bbar): the form's last child, sticky, never submits ---------- */
#foglalas .bbar{ margin-top:0; background:var(--bg-2); transition:opacity var(--d2) var(--ease), visibility 0s; }
#foglalas .bbar.is-inert{ opacity:0; visibility:hidden; transition:opacity var(--d2) var(--ease), visibility 0s var(--d2); }   /* never floats over the ticket it summarises */
#foglalas .bbar__info{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"prog total" "sum sum"; align-items:center; column-gap:12px; }
#foglalas .bbar__progress{ grid-area:prog; margin-bottom:0; }
#foglalas .bbar__line{ display:contents; }
#foglalas .bbar__sum{ grid-area:sum; margin-top:6px; border-radius:6px; }
#foglalas .bbar__sum > span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#foglalas .bbar__l1{ color:var(--fg); }
#foglalas .bbar__total{ grid-area:total; min-width:0; font-size:.92rem; line-height:1.2; }
#foglalas .bbar__go{ min-width:9ch; }

/* ---------- forced colors ---------- */
@media (forced-colors:active){
  #foglalas .bday,#foglalas .bslot > span,#foglalas .bnext{ border:1px solid ButtonText; }
  #foglalas .bday[aria-disabled="true"],#foglalas .bslot input:disabled + span{ border-color:GrayText; color:GrayText; }
  #foglalas .bslot input:checked + span{ border:3px solid CanvasText; forced-color-adjust:none; background:Canvas; color:CanvasText; }
  #foglalas .ticket__card{ border:1px solid CanvasText; -webkit-mask:none; mask:none; }
  #foglalas .ticket__progress span{ border:1px solid CanvasText; }
  #foglalas .ticket__progress span.is-done::after{ background:CanvasText; }
  #foglalas .bday__dots i.on{ background:CanvasText; }
}

/* ===== 21-ajandek.css ===== */
/* =====================================================================
   21-ajandek.css – Ajándék teaser #ajandek (SPEC §9.12) · WP2.
   ≥900: copy (cols 1–5) + actions under it, voucher stage (cols 6–12, perspective 1200px).
   <900: copy → card (86% wide, static −4° tilt via the `rotate` property – GSAP owns `transform`) → full-width CTA (<600).
   The voucher itself is the Stage 0 .voucher component; only its placement and the idle sheen live here.
   ===================================================================== */

#ajandek .gift__grid{
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"copy" "stage" "actions";
  row-gap:clamp(36px,6vw,56px);
}
.gift__copy{ grid-area:copy; min-width:0; }
.gift__stage{ grid-area:stage; min-width:0; }
.gift__actions{ grid-area:actions; min-width:0; }

/* copy */
.gift__copy > * + *{ margin-top:clamp(16px,1.8vw,24px); }
.gift__eyebrow .ico{ color:var(--accent-fg); }
#ajandek .gift__title em{ font-style:normal; color:var(--accent-2); }
.gift__desc{ max-width:44ch; font-size:var(--fs-lead); font-weight:300; line-height:1.6; color:var(--fg-2); }
.gift__desc strong{ font-weight:400; color:var(--fg); }
#ajandek .gift__chips{ margin-top:clamp(22px,2.4vw,30px); }

/* actions */
.gift__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.gift__fine{ font-size:var(--fs-sm); color:var(--fg-2); }
@media (max-width:599.98px){
  .gift__actions{ align-items:stretch; }
  .gift__cta{ width:100%; }
  .gift__fine{ text-align:center; }
}

/* stage + card */
.gift__stage{
  position:relative; display:grid; place-items:center;
  padding-block:clamp(12px,3vw,40px);
  perspective:1200px;
}
/* warm light behind the card + a soft contact shadow under it (kept inside the stage box: no overflow) */
.gift__glow{
  position:absolute; z-index:0; inset:-6% 0; pointer-events:none;
  background:
    radial-gradient(50% 46% at 50% 50%,var(--glow),transparent 100%),
    radial-gradient(34% 9% at 50% 86%,rgba(0,0,0,.5),transparent 100%);
}
#ajandek .gift__card{ z-index:1; width:86%; max-width:520px; rotate:-4deg; }
/* narrow card (<600): the text block filled the whole 1.62 card (measured 3px top gap at 390) – tighter rhythm, and the
   validity line (also a chip right above) leaves the meta row so the value sits on one line */
@media (max-width:599.98px){
  #ajandek .gift__card .voucher__text{ gap:1px; }
  #ajandek .gift__card .voucher__text > *{ line-height:1.3; }
  #ajandek .gift__card .voucher__text small{ font-size:.66rem; }
  #ajandek .gift__card .voucher__line{ margin:7px 0 6px; }
  #ajandek .gift__card .voucher__meta{ margin-top:8px; }
  #ajandek .gift__card .voucher__meta span{ display:none; }
}
@media (min-width:600px){ #ajandek .gift__card{ width:min(78%,520px); } }
@media (min-width:900px){
  #ajandek .gift__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    grid-template-areas:"copy stage" "actions stage";
    column-gap:clamp(40px,6vw,96px); row-gap:clamp(28px,3vw,40px);
  }
  .gift__copy{ align-self:end; }
  .gift__actions{ align-self:start; }
  #ajandek .gift__card{ width:min(100%,520px); rotate:-2deg; }
}

/* idle sheen – desktop only, one pass every 7s; paused off-screen (.is-paused from data-loop) and on hidden tabs */
.gift__sheen{ display:none; }
@media (min-width:1100px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .gift__sheen{
    display:block; position:absolute; z-index:1; top:-10%; bottom:-10%; left:0; width:46%;
    pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(100deg,transparent 22%,rgba(244,217,168,.2) 50%,transparent 78%);
    translate:-120% 0;
    animation:gift-sheen 7s var(--ease-io) 2.2s infinite;
  }
}
@keyframes gift-sheen{
  0%{ translate:-120% 0; }
  22%,100%{ translate:240% 0; }
}
@media (forced-colors:active){ .gift__sheen,.gift__glow{ display:none !important; } }

/* ---------- „hamarosan” állapot (2026-10-05): leírás, ár és CTA nélkül – a cím a kártya mellett, függőlegesen középen ---------- */
@media (min-width:900px){
  #ajandek.gift--soon .gift__grid{ grid-template-areas:"copy stage"; }
  #ajandek.gift--soon .gift__copy{ align-self:center; }
}
#ajandek .voucher .gift__stamp{ left:auto; right:7%; bottom:13%; font-size:clamp(.62rem,3.2cqi,.9rem); }

/* ===== 22-rendezvenyek.css ===== */
/* =====================================================================
   22-rendezvenyek.css – Rendezvények #rendezvenyek + #ajanlatkeres (SPEC §9.13) · WP2.
   Occasions: a strip of 4 link cards separated by hairlines (4 cols ≥1100 / 2 cols ≥600 / list).
   Quote form: .eform.card, intro | fields at ≥900. Fields use the Stage 0 .rchip / .ffield / .bfields / .status / .hp.
   ===================================================================== */

/* ---------- occasion strip ---------- */
.events__list{
  display:grid; grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--hair);
}
.events__list > li{ min-width:0; border-bottom:1px solid var(--hair); }
@media (min-width:600px){
  .events__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .events__list > li:nth-child(even){ border-left:1px solid var(--hair); }
}
@media (min-width:1100px){
  .events__list{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .events__list > li + li{ border-left:1px solid var(--hair); }
}

/* <600: icon beside the text (compact list); ≥600: icon above the title */
.ecard{
  position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:18px; align-content:start; height:100%;
  padding:24px 44px 24px 2px; color:var(--fg);
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d2) var(--ease);
}
.ecard > *{ grid-column:2; }
.ecard > .ecard__ico{ grid-column:1; grid-row:1 / span 2; }
@media (max-width:599.98px){ .ecard .ecard__t{ margin-top:2px; } }
@media (min-width:600px){
  .ecard{ display:flex; flex-direction:column; padding:32px 56px 34px 24px; }
}
@media (min-width:1100px){ .ecard{ padding:36px 28px 40px; } }
.ecard__ico{
  display:grid; place-items:center; width:52px; height:52px; flex:none;
  border-radius:50%; border:1px solid var(--line-gold); color:var(--accent-fg);
  background:radial-gradient(circle at 50% 30%,rgba(210,162,116,.12),transparent 70%);
}
.ecard__ico .ico{ width:24px; height:24px; stroke-width:1.4; }
.ecard__t{ margin-top:22px; font-size:var(--fs-h4); font-weight:500; letter-spacing:-.01em; line-height:1.25; }
.ecard__d{ margin-top:8px; font-size:var(--fs-sm); line-height:1.6; color:var(--fg-2); max-width:34ch; }
.ecard__go{
  position:absolute; top:22px; right:0; display:grid; place-items:center; width:36px; height:36px;
  color:var(--fg-3); transition:color var(--d2) var(--ease), translate .45s var(--ease);
}
@media (min-width:600px){ .ecard__go{ top:34px; right:18px; } }
@media (min-width:1100px){ .ecard__go{ top:38px; right:22px; } }
.ecard__go .ico{ width:18px; height:18px; rotate:90deg; }
.ecard:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.ecard:active{ scale:.99; }
@media (hover:hover) and (pointer:fine){
  .ecard:hover{ background:var(--tint-2); }
  .ecard:hover .ecard__go{ color:var(--accent-fg); translate:0 3px; }
}

/* ---------- quote form ---------- */
.eform{
  position:relative; margin-top:var(--head-gap);
  display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,40px);
  padding:clamp(22px,4vw,56px);
  border-color:var(--line-gold);
  background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 46%);
  box-shadow:var(--sh-card);
}
@media (min-width:900px){
  .eform{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); column-gap:clamp(36px,5vw,80px); align-items:start; }
}
@media (min-width:1100px) and (min-height:760px){
  .eform__intro{ position:sticky; top:calc(var(--nav-clear) + 32px); }
}
.eform__intro,.eform__fields{ min-width:0; }
.eform__title{ font-size:var(--fs-h3); font-weight:500; letter-spacing:-.02em; line-height:1.12; }
.eform__lead{ margin-top:14px; max-width:40ch; color:var(--fg-2); }
.eform__call{ display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; margin-top:22px; color:var(--fg-2); }
.eform__tel{ font-size:var(--fs-h4); letter-spacing:-.005em; font-variant-numeric:tabular-nums; }
.eform__tel .ico{ width:18px; height:18px; }
.eform__privacy{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--hair);
  max-width:44ch; font-size:var(--fs-sm); line-height:1.55; color:var(--fg-2);
}

/* event type (radio chips) */
.eform__legend{ display:block; margin-bottom:12px; font-size:var(--fs-sm); color:var(--fg-2); }
.eform__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.eform__type .ffield__err{ margin-top:10px; }
.eform__type .rchip > input[aria-invalid="true"] + span{ border-color:var(--err-fg); }

.eform__grid{ margin-top:24px; }
.ffield--date input{ color-scheme:dark; }
.ffield--date input::-webkit-calendar-picker-indicator{ opacity:.8; cursor:pointer; }
.ffield--date input::-webkit-datetime-edit{ color:var(--fg); }

/* footer: submit + status */
.eform__foot{ display:grid; gap:14px; justify-items:start; margin-top:24px; }
.eform__status{ max-width:60ch; }
.eform__status:focus{ outline:none; }
.eform__status:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:4px; }
.eform__demo{ font-size:var(--fs-xs); color:var(--fg-2); }
@media (max-width:599.98px){
  .eform__foot{ justify-items:stretch; }
  .eform__submit{ width:100%; }
}

.eform > noscript{ display:block; grid-column:1 / -1; min-width:0; }
@media (min-width:900px){ .eform > noscript{ grid-column:2; } }

@media (forced-colors:active){
  .ecard{ border:1px solid LinkText; }
  .eform__type .rchip > input[aria-invalid="true"] + span{ border:2px solid Mark; }
}

/* ===== 23-gyik.css ===== */
/* =====================================================================
   23-gyik.css – GYIK #gyik, inset paper sheet (SPEC §9.14). Owner: WP4.
   DOM order = reading order at every width: head → list → askme.
   ≥1100: head cols 1–4 (sticky when the viewport is ≥760px tall), list cols 6–12,
   askme at the foot of the left column. <1100: head, list, askme stacked.
   The sticky head sits in .faq__side (rows 1–2): a sticky grid item would slide down to the bottom of the
   whole grid and over the askme card (Chrome uses the grid container, not the grid area – fixed 2026-10-05).
   ===================================================================== */

#gyik{
  background:radial-gradient(64% 42% at 50% 0%,var(--glow),transparent 72%),var(--page);
}

#gyik .faq__grid{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:clamp(36px,6vw,56px); }
#gyik .faq__head > * + *{ margin-top:clamp(14px,1.6vw,22px); }
#gyik .faq__head .section__sub{ max-width:34ch; }

/* accordion: numbered questions (S0 .acc, extended in this scope only) */
#gyik .faq__list{ --faq-n:2rem; --faq-gap:14px; }
#gyik .faq__list .acc__q{ justify-content:flex-start; gap:var(--faq-gap); }
#gyik .faq__n{
  flex:none; align-self:flex-start; width:var(--faq-n); padding-top:.5em;
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.12em; line-height:1.3;
  color:var(--accent-fg); font-variant-numeric:tabular-nums;
}
#gyik .faq__q{ flex:1; min-width:0; text-wrap:pretty; }
#gyik .faq__list .acc__icon{ margin-left:auto; }
#gyik .faq__list .acc__a{
  padding-left:calc(var(--faq-n) + var(--faq-gap));
  padding-right:clamp(0px,4vw,48px);
  line-height:1.65;
}
@media (hover:hover) and (pointer:fine){
  #gyik .faq__list .acc__q:hover .acc__icon{ background:var(--tint); }
  #gyik .faq__list .acc__q:hover .faq__q{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; text-decoration-color:var(--hair-2); }
}
@media (min-width:600px){ #gyik .faq__list{ --faq-n:2.4rem; --faq-gap:18px; } }

/* "ask me" card */
#gyik .askme{
  display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:16px;
  padding:clamp(20px,2.4vw,28px);
  background:var(--card); border:1px solid var(--hair); border-radius:var(--r-lg);
  box-shadow:var(--sh-paper);
}
#gyik .askme__face{ width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px var(--page),0 0 0 4px var(--hair-2); }
#gyik .askme__t{ font-size:var(--fs-body); line-height:1.5; color:var(--fg); }
#gyik .askme__actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
#gyik .askme__actions .ico{ width:17px; height:17px; }
@media (min-width:600px) and (max-width:1099.98px){ #gyik .askme{ max-width:560px; } }

@media (min-width:1100px){
  #gyik .faq__grid{
    grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto 1fr auto;
    column-gap:var(--col-gap); row-gap:0;
  }
  #gyik .faq__side{ grid-column:1 / span 4; grid-row:1 / span 2; align-self:stretch; min-width:0; }
  #gyik .faq__head{ padding-bottom:40px; }
  #gyik .faq__list{ grid-column:6 / span 7; grid-row:1 / span 3; align-self:start; }
  #gyik .askme{ grid-column:1 / span 4; grid-row:3; align-self:end; }
}
@media (min-width:1100px) and (min-height:760px){
  #gyik .faq__head{ position:sticky; top:calc(var(--nav-clear) + 24px); }
}

/* ===== 24-kapcsolat.css ===== */
/* =====================================================================
   24-kapcsolat.css – Kapcsolat #kapcsolat (SPEC §9.15). Owner: WP4.
   Mega H2 + CTA row, then 3 cards: .loc (own abstract SVG – never a map),
   .hours ([data-hours="list"] rendered by core), .channels.
   ≥1100: 3 cols · 600–1099: .loc full width (plate | text), .hours + .channels side by side · <600: stacked, .loc first.
   ===================================================================== */

/* ---------- head ---------- */
#kapcsolat .contact__head{ margin-bottom:var(--head-gap); }
#kapcsolat .contact__head > * + *{ margin-top:clamp(14px,1.6vw,24px); }
#kapcsolat .contact__title{ font-size:var(--fs-mega); letter-spacing:-.026em; line-height:.98; }  /* lásd 20-foglalas.css */
#kapcsolat .contact__lead{ display:flex; flex-direction:column; gap:28px; }
#kapcsolat .contact__lead .section__sub{ max-width:34ch; }
#kapcsolat .contact__cta{ display:flex; flex-wrap:wrap; gap:12px; }
#kapcsolat .contact__cta .btn--ghost .ico{ width:18px; height:18px; }
@media (max-width:599.98px){
  #kapcsolat .contact__cta .btn{ flex:1 1 100%; }
}
@media (min-width:1100px){
  #kapcsolat .contact__lead{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:var(--col-gap); }
  #kapcsolat .contact__cta{ flex:none; justify-content:flex-end; }
}

/* ---------- grid + cards ---------- */
#kapcsolat .contact__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--col-gap); }
@media (min-width:600px){
  #kapcsolat .contact__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #kapcsolat .loc{ grid-column:1 / -1; }
}
@media (min-width:1100px){
  #kapcsolat .contact__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #kapcsolat .loc{ grid-column:auto; }
}
#kapcsolat .ccard{
  --cp:clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column; gap:14px; min-width:0;
  padding:var(--cp);
  background:var(--card); color:var(--fg);
  border:1px solid var(--hair); border-radius:var(--r-lg);
}
#kapcsolat .ccard__h{ display:flex; align-items:center; gap:10px; font-size:var(--fs-h4); line-height:1.25; }
#kapcsolat .ccard__h .ico{ width:20px; height:20px; color:var(--accent-fg); }

/* ---------- .loc: abstract location plate (aria-hidden, translate=no, data-decor) ---------- */
#kapcsolat .loc__art{
  margin:calc(-1 * var(--cp)) calc(-1 * var(--cp)) 8px;
  aspect-ratio:16 / 10; overflow:clip;
  border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  border-bottom:1px solid var(--hair);
  background:var(--bg);
}
#kapcsolat .loc__map{ display:block; width:100%; height:100%; font-family:var(--font); }
#kapcsolat .loc__s1{ stop-color:var(--surface-3); }
#kapcsolat .loc__s2{ stop-color:var(--surface); }
#kapcsolat .loc__s3{ stop-color:var(--bg); }
#kapcsolat .loc__g1{ stop-color:var(--accent); stop-opacity:.24; }
#kapcsolat .loc__g2{ stop-color:var(--accent); stop-opacity:0; }
#kapcsolat .loc__au1{ stop-color:var(--accent-2); }
#kapcsolat .loc__au2{ stop-color:var(--accent); }
#kapcsolat .loc__au3{ stop-color:var(--accent-3); }
#kapcsolat .loc__band{ fill:none; stroke:var(--text); stroke-opacity:.045; stroke-width:18; stroke-linecap:round; }
#kapcsolat .loc__band--b{ stroke-width:12; stroke-opacity:.035; }
#kapcsolat .loc__lines path{ fill:none; stroke:var(--text); stroke-opacity:.11; stroke-width:1; stroke-linecap:round; }
#kapcsolat .loc__lines .loc__axis{ stroke:var(--accent); stroke-opacity:.42; }
#kapcsolat .loc__street{ font-size:10.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; fill:var(--text-2); }
#kapcsolat .loc__city{ font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; fill:var(--accent-2); }
#kapcsolat .loc__no{ font-size:13px; font-weight:500; letter-spacing:.04em; fill:var(--text); }
#kapcsolat .loc__shadow{ fill:var(--bg); opacity:.75; }
#kapcsolat .loc__door{ fill:var(--ink); }
#kapcsolat .loc__ring{
  fill:none; stroke:var(--accent); stroke-width:1.2;
  transform-box:fill-box; transform-origin:50% 50%;
  opacity:0; animation:loc-pulse 2.4s cubic-bezier(.22,1,.36,1) infinite;
}
#kapcsolat .loc__ring--2{ animation-delay:1.2s; }
@keyframes loc-pulse{
  0%{ scale:.45; opacity:.95; }
  100%{ scale:2.7; opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  #kapcsolat .loc__ring{ animation:none; opacity:.45; scale:1.5; }
  #kapcsolat .loc__ring--2{ display:none; }
}

#kapcsolat .loc__body{ flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
@media (min-width:600px) and (max-width:1099.98px){
  #kapcsolat .loc{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:var(--cp); align-items:center; }
  #kapcsolat .loc__art{
    align-self:stretch; aspect-ratio:auto; min-height:250px;
    margin:calc(-1 * var(--cp)) 0 calc(-1 * var(--cp)) calc(-1 * var(--cp));
    border-radius:calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px);
    border-bottom:0; border-right:1px solid var(--hair);
  }
  #kapcsolat .loc__actions{ margin-top:4px; }
}
#kapcsolat .loc__addr{ font-size:var(--fs-h4); font-weight:500; line-height:1.35; letter-spacing:-.01em; }
#kapcsolat .loc__district{ margin-top:-8px; color:var(--fg-2); }
#kapcsolat .loc__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:auto; padding-top:8px; }
#kapcsolat .loc__actions .btn .ico{ width:17px; height:17px; }

/* ---------- .hours ---------- */
#kapcsolat .hours__list{ display:flex; flex-direction:column; font-variant-numeric:tabular-nums; }
#kapcsolat .hours__list li{ padding:12px 0; border-bottom:1px solid var(--hair); line-height:1.5; }
#kapcsolat .hours__list li:first-child{ border-top:1px solid var(--hair); }
#kapcsolat .hours__hedge{ color:var(--fg-2); }
#kapcsolat .hours__note{ font-weight:500; }
#kapcsolat .hours__pay{ display:flex; align-items:center; gap:10px; margin-top:-6px; color:var(--fg-2); }
#kapcsolat .hours__pay .ico{ width:18px; height:18px; color:var(--accent-fg); }
#kapcsolat .hours__link{ align-self:flex-start; margin-top:auto; }

/* ---------- .channels ---------- */
#kapcsolat .channels__list{ display:flex; flex-direction:column; }
#kapcsolat .channels__row{ display:flex; flex-direction:column; gap:2px; padding:12px 0; border-bottom:1px solid var(--hair); }
#kapcsolat .channels__row:first-child{ padding-top:0; }
#kapcsolat .channels__row dt{ font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--fg-2); }
#kapcsolat .channels__row dd{ min-width:0; }
#kapcsolat .channels__big,
#kapcsolat .channels__link{
  display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); max-width:100%;
  color:var(--fg); text-decoration:underline; text-decoration-color:transparent;
  text-decoration-thickness:1px; text-underline-offset:.22em;
  transition:color var(--d2) var(--ease), text-decoration-color var(--d2) var(--ease);
}
#kapcsolat .channels__big{ font-size:var(--fs-h3); font-weight:500; letter-spacing:-.015em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; }
#kapcsolat .channels__link{ font-size:var(--fs-h4); line-height:1.3; overflow-wrap:anywhere; }
#kapcsolat .channels__link--ext::after{
  content:""; flex:none; width:1em; height:1em; background:currentColor; color:var(--accent-fg);
  -webkit-mask:var(--m-arrow-ur) center / contain no-repeat; mask:var(--m-arrow-ur) center / contain no-repeat;
  transition:translate .45s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  #kapcsolat .channels__big:hover,
  #kapcsolat .channels__link:hover{ color:var(--link); text-decoration-color:currentColor; }
  #kapcsolat .channels__link--ext:hover::after{ translate:2px -2px; }
}
#kapcsolat .channels__me{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:10px; color:var(--fg-2); }
#kapcsolat .channels__me img{ flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--line-gold); }

@media (forced-colors:active){
  #kapcsolat .loc__art{ display:none; }
  #kapcsolat .ccard{ border:1px solid CanvasText; }
}

/* kapucsengő a stúdió-kártyán (2026-10-06) */
#kapcsolat .loc__bell{ display:flex; align-items:center; gap:10px; margin-top:-4px; color:var(--fg); }
#kapcsolat .loc__bell .ico{ flex:none; width:18px; height:18px; color:var(--accent-fg); }
#kapcsolat .loc__bell strong{ font-weight:500; color:var(--accent-2); }

/* ===== 25-promo.css ===== */
/* =====================================================================
   25-promo.css – Promo popup #promo (SPEC §9.16, D6). Owner: WP4.
   Non-modal (role=dialog aria-modal=false): no backdrop, no focus steal, no scroll lock.
   ≥900: card fixed bottom-right · <900: bottom sheet (≤45svh, scrolls inside).
   Always dark (.promo re-declares the dark semantic set in 01-tokens.css).
   Entrance/exit: GSAP (y 40→0, scale .96→1, autoAlpha, .7s expo.out) when motion is on;
   otherwise the CSS fade below (.15s, also under reduced motion).
   ===================================================================== */

.promo{
  position:fixed; z-index:var(--z-promo);
  right:24px; bottom:24px; width:min(380px,calc(100vw - 48px));
  max-height:calc(100dvh - var(--nav-clear) - 48px); overflow:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; column-gap:18px;
  padding:26px;
  background:var(--surface); color:var(--fg);
  border:1px solid var(--line-gold); border-radius:26px;
  box-shadow:var(--sh-lift);
}
.promo__x{ position:absolute; top:12px; right:12px; }

.promo__kicker{
  grid-column:1 / -1; display:flex; align-items:center; gap:8px;
  min-height:24px; padding-right:44px; margin:-2px 0 18px;
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.35;
  color:var(--accent);
}
.promo__kicker .ico{ flex:none; width:15px; height:15px; }

/* arch medallion with the admin badge (sized to the medallion: container units, the medallion is .arch) */
.promo__medal{
  grid-column:1; display:grid; place-items:center; width:96px; height:116px;
  padding:30px 8px 10px;
  border:1.5px solid var(--accent); border-radius:999px 999px 10px 10px;
  background:radial-gradient(120% 80% at 50% 0%,var(--glow),transparent 72%);
}
.promo__badge{
  max-width:100%;
  font-size:1.75rem; font-size:30cqi; font-weight:500; letter-spacing:-.03em; line-height:1;
  text-align:center; overflow-wrap:anywhere;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.promo__badge[data-len="m"]{ font-size:1.2rem; font-size:20cqi; }
.promo__badge[data-len="l"]{ font-size:.85rem; font-size:14cqi; line-height:1.15; letter-spacing:-.01em; }

.promo__title{
  grid-column:2; align-self:center; min-width:0;
  font-size:clamp(1.2rem,1.02rem + .55vw,1.5rem); font-weight:500; letter-spacing:-.018em; line-height:1.2;
  text-wrap:balance;
}
.promo__medal[hidden] + .promo__title{ grid-column:1 / -1; }
.promo__text{
  grid-column:1 / -1; margin-top:18px;
  font-size:.95rem; line-height:1.55; color:var(--fg-2); white-space:pre-line; text-wrap:pretty;
}
.promo__actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.promo__actions .btn{ flex:1 1 auto; }

/* <900: bottom sheet */
@media (max-width:899.98px){
  .promo{
    left:0; right:0; bottom:0; width:auto;
    max-height:45svh;
    column-gap:16px;
    padding:20px var(--gut) calc(16px + env(safe-area-inset-bottom));
    border-width:1px 0 0; border-radius:26px 26px 0 0;
    box-shadow:0 -30px 60px -20px rgba(0,0,0,.7);
  }
  .promo__x{ top:10px; right:max(10px,calc(var(--gut) - 10px)); }
  .promo__kicker{ margin-bottom:14px; }
  .promo__medal{ width:68px; height:82px; padding:22px 5px 6px; border-radius:999px 999px 8px 8px; }
  .promo__text{ margin-top:14px; }
  .promo__actions{ margin-top:16px; }
}

/* CSS entrance/exit (no GSAP or reduced motion): opacity only */
.promo.is-css{ transition:opacity .15s linear; }
@starting-style{ .promo.is-css{ opacity:0; } }
.promo.is-css.is-leaving{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .promo.is-css{ transition:opacity .15s linear !important; }
}

@media (forced-colors:active){
  .promo{ border:2px solid CanvasText; }
  .promo__medal{ border-color:CanvasText; }
  .promo__badge{ background:none; color:CanvasText; }
}

/* ===== 40-utalvany.css ===== */
/* =====================================================================
   40-utalvany.css – utalvany.html sections (SPEC §12). Owner: WP6.
   Scope: .vhero (+ .vsteps2) · #rendeles (.vgrid .vform .vstep .vkinds .vcup .vamount .vmini .vmsg
          .vbar .vdone .vside .vsum .vinfo) · .vband
   Stage 0 components (.bstep .tchip .bswitch .qchip .ffield .bbar .done .voucher .stamp .facts)
   are only extended inside #rendeles. Tokens only; transform belongs to GSAP.
   ===================================================================== */

/* ---------------------------------------------------------------------
   12.1 hero  .vhero#vhero
   --------------------------------------------------------------------- */
.vhero{
  --vpad:clamp(36px,5.4vw,96px);
  padding-top:calc(var(--nav-clear) + var(--vpad));
  padding-bottom:clamp(56px,6vw,104px);
  scroll-margin-top:calc(24px - var(--nav-clear) - var(--vpad));
  isolation:isolate;
}
/* warm "lit window" glow behind the copy – decorative, no image */
.vhero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(48% 52% at 82% 22%, var(--glow), transparent 72%),
    radial-gradient(40% 44% at 8% 70%, var(--glow-deep), transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%); mask-image:linear-gradient(180deg,#000 55%,transparent 98%);
}
.vhero__grid{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:clamp(44px,6vw,64px); }
.vhero__copy{ min-width:0; }
.vhero__copy > * + *{ margin-top:clamp(18px,2vw,26px); }
.vhero__eyebrow .ico{ margin-right:-2px; }
.vhero__title{
  font-size:var(--fs-display); font-weight:500; letter-spacing:-.035em; line-height:1.02;
  max-width:13ch;
}
.vhero__title:focus{ outline:none; }
.vhero__em{ color:var(--accent-2); }
.vhero__lead{ max-width:38ch; font-size:var(--fs-lead); font-weight:300; line-height:1.6; color:var(--fg-2); }
.vhero__trust{ gap:8px; }
.vhero__trust .chip{ background:rgba(242,233,221,.03); }
.vhero__jump{ display:flex; }
.vhero__jump .tlink{ font-size:1.0625rem; }
/* the jump goes DOWN to the form: rotate the shared arrow mask */
.vhero__jump .tlink--arrow::after{ rotate:90deg; }
@media (hover:hover) and (pointer:fine){ .vhero__jump .tlink--arrow:hover::after{ translate:0 3px; } }

/* three steps – numerals in gold, --fs-h2 300 */
.vsteps2{ display:grid; border-top:1px solid var(--hair); min-width:0; }
.vsteps2__item{
  display:grid; grid-template-columns:minmax(2.2ch,auto) minmax(0,1fr); column-gap:clamp(16px,2.2vw,30px); align-items:start;
  padding-block:clamp(18px,2.2vw,28px); border-bottom:1px solid var(--hair);
}
.vsteps2__n{
  font-size:var(--fs-h2); font-weight:300; letter-spacing:-.04em; line-height:.86;
  font-variant-numeric:tabular-nums;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vsteps2__txt{ min-width:0; padding-top:2px; }
.vsteps2__t{ display:block; font-size:var(--fs-h4); font-weight:500; letter-spacing:-.01em; line-height:1.25; }
.vsteps2__d{ margin-top:6px; max-width:40ch; font-size:var(--fs-sm); line-height:1.55; color:var(--fg-2); }

@media (min-width:1100px){
  .vhero__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap); align-items:end; }
  .vhero__copy{ grid-column:1 / span 7; }
  .vsteps2{ grid-column:8 / span 5; margin-bottom:6px; }
  .vsteps2__d{ font-size:.9375rem; }
}

/* ---------------------------------------------------------------------
   12.2 order  #rendeles
   --------------------------------------------------------------------- */
#rendeles{
  --rpad:clamp(40px,5vw,88px);
  padding-top:var(--rpad);
  scroll-margin-top:calc(24px - var(--rpad));
}
#rendeles .rendeles__head{ margin-bottom:clamp(26px,3.2vw,44px); }
#rendeles .rendeles__nojs{ margin-bottom:24px; max-width:60ch; }

/* grid: form | aside (≥900); the info card sits under the form so the sticky aside never overlaps it */
.vgrid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(16px,2vw,24px); align-items:start; }
.vgrid > *{ min-width:0; }
@media (min-width:900px){
  .vgrid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(20px,2.8vw,44px); }
  .vgrid > .vform,.vgrid > .vdone,.vgrid > .vinfo{ grid-column:1; }
  .vgrid > .vside{ grid-column:2; grid-row:1 / span 2; }
}
@media (min-width:900px) and (min-height:820px){
  /* --vside-top is set by 50-voucher.js only when the aside is taller than the room (long input): it then sticks bottom-aligned, so the submit stays on screen */
  .vgrid > .vside{ position:sticky; top:var(--vside-top,calc(var(--nav-clear) + 16px)); }
}

/* steps: the shared .bstep component, extended in scope */
.vform__steps{ display:grid; gap:14px; }
#rendeles .bstep,#rendeles .vdone{ scroll-margin-top:16px; }   /* beats section[id] (02-base) – steps are sections with ids */
#rendeles .bstep__head h3:focus{ outline:none; }

/* step 1 – 4 card radios: 1 col <600, 2×2 from 600 (Stage 0's 3-col ≥1100 does not fit four cards) */
#rendeles .vkinds{ grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){
  #rendeles .vkinds{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #rendeles .vkinds .tchip__in{ display:flex; flex-direction:column; gap:5px; }
  #rendeles .vkinds .tchip__in em{ margin-top:auto; padding-top:10px; align-self:flex-start; font-size:.95rem; }
}
#rendeles .vkinds[aria-invalid] .tchip__in{ border-color:var(--err-fg); }
#rendeles .vcup{ margin-top:12px; }
#rendeles .bswitch__why{ padding-inline:4px; }

#rendeles .vamount{ margin-top:6px; }
#rendeles .vamount .bstep__sub{ margin-top:22px; }
#rendeles .vamount__quick{ margin-bottom:12px; }
#rendeles .vamount__field{ max-width:380px; }
#rendeles .vamount__field input{ font-variant-numeric:tabular-nums; }

/* 900–1099: the form column is too narrow for two fields side by side (labels would truncate) */
@media (min-width:900px) and (max-width:1099.98px){ #rendeles .bfields{ grid-template-columns:minmax(0,1fr); } }

/* step 2 – mobile mini preview (no ids), recipient, message + chips + counter */
#rendeles .vmini{ margin:0 0 16px; padding:16px 18px; gap:14px; align-items:center; box-shadow:var(--sh-card); }
#rendeles .vmini .voucher__arch{ width:44px; }
#rendeles .vmini .voucher__arch span{ font-size:1.3rem; }
#rendeles .vmini .voucher__text{ gap:2px; }
#rendeles .vmini .voucher__for{ font-size:.95rem; }
#rendeles .vmini .voucher__what{ font-size:.82rem; }
#rendeles .vmini__value{ flex:none; align-self:center; font-size:1.05rem; }
@media (min-width:900px){ #rendeles .vmini{ display:none; } }

#rendeles .vmsg__foot{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 16px; margin-top:12px; }
#rendeles .vmsg__l{ padding-left:4px; font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--fg-2); }
#rendeles .vmsg__count{ padding-right:4px; font-size:var(--fs-xs); line-height:1.4; color:var(--fg-2); font-variant-numeric:tabular-nums; text-align:right; }
#rendeles .vmsg__chips{ grid-column:1 / -1; gap:8px; }
#rendeles .vmsg__chips .qchip{ font-size:.84rem; font-weight:400; padding-inline:13px; }
#rendeles .vmsg__count.is-near{ color:var(--accent-fg); }
#rendeles .vmsg__count.is-max{ color:var(--err-fg); }

/* sticky step bar (<900): the form's last child */
#rendeles .vbar{ margin-top:14px; }
#rendeles .vbar.is-inert{ pointer-events:none; }

/* success panel (shared .done) */
#rendeles .vdone h3:focus,#rendeles .vdone:focus:not(:focus-visible){ outline:none; }
#rendeles .vdone__sum{ font-variant-numeric:tabular-nums; }

/* ---------- aside: live preview + summary card ---------- */
.vside{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:clamp(18px,4vw,28px); }
@media (min-width:900px){ .vside{ margin-top:0; } }
.vside__stage{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; perspective:1200px; padding-top:4px; }
#rendeles .vside #voucher{ width:min(100%,400px); padding-block:6%; }   /* the live card grows with long input – keep air above/below */
.vside__cap{ max-width:44ch; margin-inline:auto; text-align:center; font-size:var(--fs-xs); line-height:1.5; color:var(--fg-2); }

.vside__card{
  position:relative; margin-top:4px; padding:clamp(20px,1.8vw,26px);
  border-radius:24px; border:1px solid var(--line-gold);
  background:linear-gradient(180deg,var(--surface-3),var(--surface) 62%);
  box-shadow:var(--sh-card); color:var(--fg);
}
.vsum__h{
  margin-bottom:4px; font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4;
  color:var(--accent-fg);
}
.vsum__h:focus{ outline:none; }
.vsum__h:focus-visible{ outline:2px solid var(--focus); outline-offset:4px; border-radius:4px; }
.vsum{ display:grid; grid-template-columns:minmax(0,1fr); }
.vsum__row{
  display:grid; grid-template-columns:minmax(76px,auto) minmax(0,1fr); column-gap:16px; align-items:baseline;
  padding-block:10px; border-top:1px solid var(--hair);
}
.vsum__row:first-child{ border-top:0; }
.vsum dt{ font-size:var(--fs-caps); font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.5; color:var(--fg-2); }
.vsum dd{ min-width:0; font-size:var(--fs-sm); line-height:1.5; color:var(--fg); overflow-wrap:anywhere; }
.vsum dd.is-empty{ color:var(--fg-2); }
/* long user input stays readable but compact (the full text is in the DOM for screen readers) */
#v-sum-to{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
#v-sum-type{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vsum__row--total{
  grid-template-columns:minmax(0,1fr) auto; align-items:center;
  margin-top:6px; padding-top:16px; border-top:1px dashed var(--line-gold);
}
.vsum__row--total dt{ letter-spacing:.12em; }
.vsum__row--total dd{ text-align:right; }
.vsum__total{
  display:inline-block; min-width:6ch; text-align:right;
  font-size:var(--fs-total); font-weight:500; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;
}
.vsum__total.is-empty{ font-size:var(--fs-h4); font-weight:400; color:var(--fg-3); }
.vside__submit{ margin-top:18px; }
#rendeles #v-status{ margin-top:14px; }
.vside__note{ margin-top:12px; font-size:var(--fs-xs); line-height:1.5; color:var(--fg-2); }

/* info card (shared .facts) */
#rendeles .vinfo{ margin-top:clamp(6px,2vw,16px); }
@media (min-width:900px){ #rendeles .vinfo{ margin-top:0; } }
#rendeles .vinfo li > span{ color:var(--fg-2); }
#rendeles .vinfo li strong{ color:var(--fg); }
#rendeles .vinfo__contact{ margin-top:14px; padding-top:14px; border-top:1px solid var(--hair); font-size:var(--fs-sm); color:var(--fg-2); }

/* live preview: long user input never breaks the card (name ≤2 lines, message ≤3 lines – Stage 0 clamps the message) */
#rendeles .voucher__for{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#rendeles .vmini .voucher__for,#rendeles .vmini .voucher__what{ -webkit-line-clamp:1; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }

/* narrow live cards: the code chip goes (as Stage 0 does ≤420px viewport) so type / value keep their lines */
@container (max-width:300px){ #rendeles .voucher__meta em{ display:none; } }

/* the stamp: on narrow cards Stage 0 overlaps the start of the validity line – centre it on the medallion instead */
@container (max-width:330px){   /* content box ≈ card × .84–.87 → cards narrower than ~380px */
  #rendeles .voucher .stamp{ left:2.5%; bottom:auto; top:50%; translate:0 -50%; }
}

/* ---------------------------------------------------------------------
   12.4 closing band  .vband
   --------------------------------------------------------------------- */
.vband{ position:relative; background:var(--bg-2); text-align:center; }
.vband::before{
  content:""; position:absolute; top:0; left:50%; translate:-50% 0; width:min(640px,76%); height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.75;
}
.vband__in{ display:flex; flex-direction:column; align-items:center; gap:clamp(22px,2.6vw,34px); }
.vband__t{ font-size:clamp(2rem,1.3rem + 2.6vw,3.6rem); font-weight:500; letter-spacing:-.03em; line-height:1.06; max-width:16ch; }

/* ---------------------------------------------------------------------
   forced colors / contrast
   --------------------------------------------------------------------- */
@media (forced-colors:active){
  .vsteps2__n{ color:CanvasText; background:none; }
  .vhero::before,.vband::before{ display:none; }
  .vside__card{ border:1px solid CanvasText; }
}


/* ---------- „Hamarosan” oldal (2026-10-05): az utalvány egyelőre nem rendelhető ---------- */
.vsoon{ padding-top:calc(var(--nav-clear) + clamp(40px,7vw,100px)); padding-bottom:clamp(72px,10vw,140px); text-align:center; }
.vsoon__wrap{ display:grid; justify-items:center; gap:clamp(14px,1.6vw,20px); }
.vsoon__card{ width:min(100%,460px); margin-bottom:clamp(18px,3.5vw,36px); rotate:-2deg; }
.voucher .vsoon__stamp{ left:auto; right:7%; bottom:13%; font-size:clamp(.62rem,3.2cqi,.9rem); }
.vsoon__title{ font-size:var(--fs-display); font-weight:500; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; }
.vsoon__title em{ font-style:normal; color:var(--accent-2); }
.vsoon__text{ max-width:40ch; font-size:var(--fs-lead); font-weight:300; line-height:1.6; color:var(--fg-2); margin-bottom:10px; }

/* ===== 50-legal.css ===== */
/* =====================================================================
   50-legal.css – legal pages: feltetelek, adatkezeles, impresszum (SPEC §13). WP7.
   Whole page is paper (body.theme-paper); the nav pill and the footer stay dark (S0).
   No JS on these pages: the TOC is plain markup – a sticky side list ≥1100px and a
   <details> drop-down below. Scroll-spy is CSS only (scroll-target-group +
   :target-current where supported, :target fallback otherwise).
   Scope: .legal (document), .toc (table of contents) – unique WP7 block names.
   ===================================================================== */

/* ---------- document frame ---------- */
.legal{
  --measure:38rem;                 /* ≈ 75 characters of Outfit at 17px – the reading line */
  --indent:1.75rem;                /* list text and numbered heading titles share this left edge */
  padding-block:clamp(36px,5vw,72px) clamp(88px,10vw,152px);
  color:var(--fg);
}
.legal > *{ min-width:0; }

/* ---------- head: H1 + "Hatályos" chip ---------- */
.legal__head{
  max-width:var(--measure);
  padding-bottom:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--hair);
}
.legal__title{
  max-width:18ch;
  font-size:var(--fs-h2); font-weight:500; letter-spacing:-.03em; line-height:1.04;
}
.legal__title:focus{ outline:none; }
.legal__updated{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(18px,2vw,26px); padding:7px 14px 7px 12px;
  border:1px solid var(--hair-2); border-radius:var(--r-pill);
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.4;
  color:var(--fg-2); font-variant-numeric:tabular-nums;
}
.legal__updated::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent-fg);
}
/* impresszum: the live "updated" line is a full sentence – set it as a quiet lead, not a caps chip */
.legal__updated--intro{
  display:block; max-width:52ch; padding:0; border:0; border-radius:0;
  font-size:var(--fs-lead); font-weight:400; letter-spacing:0; text-transform:none; line-height:1.6;
}
.legal__updated--intro::before{ display:none; }

/* ---------- body: reading column ---------- */
.legal__body{
  max-width:var(--measure); padding-top:clamp(28px,3.4vw,44px);
  font-size:1.0625rem; font-weight:400; line-height:1.7;
}
.legal__body > * + *{ margin-top:1.05em; }
.legal__intro{ font-size:var(--fs-lead); line-height:1.65; }

/* section headings: number in accent, hairline above, hanging indent when it wraps */
.legal__body > h2{
  margin-top:clamp(44px,5vw,68px); padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--hair);
  font-size:1.5rem; font-weight:500; letter-spacing:-.015em; line-height:1.25;
  scroll-margin-top:24px;
}
/* a document that opens straight with a section (impresszum): the head's hairline is the only rule */
.legal__body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal__body > h3{
  margin-top:clamp(30px,3.2vw,40px);
  font-size:1.15rem; font-weight:500; letter-spacing:-.01em; line-height:1.3;
}
.legal__body > :is(h2,h3):has(> .legal__n){ display:flex; align-items:baseline; }
.legal__body > :is(h2,h3) + *{ margin-top:.8em; }
.legal__n{
  flex:none; min-width:var(--indent); padding-right:.4em;
  color:var(--accent-fg); font-variant-numeric:tabular-nums; letter-spacing:0;
}

/* prose lists (direct children only – the Röviden facts list keeps its own layout): accent dots */
.legal__body > ul:not([class]){ padding-left:var(--indent); }
.legal__body > ul:not([class]) > li + li{ margin-top:.6em; }
.legal__body > ul:not([class]) > li::marker{ color:var(--accent-fg); }

/* external prose links get a small ↗ (visual only – text stays verbatim) */
.legal__body a[target="_blank"]:not([class])::after{
  content:""; display:inline-block; width:.78em; height:.78em; margin-left:.18em; vertical-align:-.04em;
  background:currentColor;
  -webkit-mask:var(--m-arrow-ur) center / contain no-repeat; mask:var(--m-arrow-ur) center / contain no-repeat;
}
.legal__body a:not([class]){ overflow-wrap:anywhere; }
/* Hungarian compounds never break at their hyphen (e-|mailben, 100%-|a) – markup only, text unchanged */
.legal .legal__nb{ white-space:nowrap; }

/* notes */
.legal__note{
  position:relative; padding:16px 20px 16px 50px;
  border-radius:var(--r-md); background:var(--card);
  font-size:var(--fs-sm); line-height:1.6; color:var(--fg-2);
}
.legal__note::before{
  content:""; position:absolute; left:18px; top:17px; width:20px; height:20px; background:var(--accent-fg);
  -webkit-mask:var(--m-info) center / contain no-repeat; mask:var(--m-info) center / contain no-repeat;
}
.legal__muted{ display:inline-block; margin-top:4px; font-size:var(--fs-xs); font-weight:400; color:var(--fg-2); }

/* Röviden box (feltételek; partial legal-feltetelek-summary.html) */
.legal__body > .legal__summary{ margin-top:clamp(28px,3.4vw,40px); }
.legal__summary .facts__h{ margin-bottom:6px; }

/* ---------- processor table (adatkezelés §3) ---------- */
.legal__body > .legal__table{ margin-top:1.3em; }
.legal__table{
  width:100%; font-size:var(--fs-sm); line-height:1.55;
  border-top:1px solid var(--hair-2); border-bottom:1px solid var(--hair-2);
}
.legal__table th{
  padding:14px 16px 12px 0; text-align:left; vertical-align:bottom;
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.12em; text-transform:uppercase; line-height:1.4;
  color:var(--fg-2);
}
.legal__table td{ padding:16px 16px 16px 0; vertical-align:top; border-top:1px solid var(--hair); }
.legal__table :is(th,td):last-child{ padding-right:0; }
.legal__table td:first-child{ font-weight:500; }
/* <600: each row becomes a card with static HU labels from data-label */
@media (max-width:599.98px){
  .legal__table,.legal__table tbody,.legal__table tr,.legal__table td{ display:block; width:100%; }
  .legal__table{ border:0; }
  /* column headers stay in the accessibility tree (explicit roles) but take no space */
  .legal__table thead,.legal__table thead tr,.legal__table thead th{
    display:block; width:1px; height:1px; margin:0; padding:0; overflow:hidden; white-space:nowrap; border:0;
  }
  .legal__table thead{ position:absolute; clip-path:inset(50%); }
  .legal__table tr{ padding:4px 18px; border-radius:var(--r-md); background:var(--card); }
  .legal__table tr + tr{ margin-top:10px; }
  .legal__table td{ padding:12px 0; }
  .legal__table td:first-child{ border-top:0; }
  .legal__table td::before{
    content:attr(data-label); display:block; margin-bottom:2px;
    font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
    color:var(--fg-2);
  }
}

/* ---------- table of contents ---------- */
.toc__list{ scroll-target-group:auto; }   /* CSS scroll-spy (Chrome 140+): links become scroll markers */
.toc__link{
  position:relative; display:flex; align-items:baseline; gap:.6em;
  min-height:var(--tap); padding-block:12px;
  font-size:var(--fs-sm); line-height:1.4; color:var(--fg-2);
  transition:color var(--d2) var(--ease);
}
.toc__n{ flex:none; min-width:1.4em; font-weight:500; color:var(--accent-fg); font-variant-numeric:tabular-nums; }
.toc__t{ min-width:0; }
@media (hover:hover) and (pointer:fine){ .toc__link:hover{ color:var(--fg); } }
.toc__link:focus-visible{ outline-offset:2px; border-radius:6px; }
/* current section */
.toc__link:target-current{ color:var(--fg); }
@supports not selector(:target-current){
  .legal:has(#p1:target) .toc__link[href="#p1"],
  .legal:has(#p2:target) .toc__link[href="#p2"],
  .legal:has(#p3:target) .toc__link[href="#p3"],
  .legal:has(#p4:target) .toc__link[href="#p4"],
  .legal:has(#p5:target) .toc__link[href="#p5"],
  .legal:has(#p6:target) .toc__link[href="#p6"],
  .legal:has(#p7:target) .toc__link[href="#p7"],
  .legal:has(#p8:target) .toc__link[href="#p8"],
  .legal:has(#p9:target) .toc__link[href="#p9"]{ color:var(--fg); }
}

/* side TOC (≥1100): sticky column 1–3 */
.toc--side{ display:none; }
.toc--side .toc__h{ margin-bottom:12px; }
.toc--side .toc__list{ border-left:1px solid var(--hair); }
.toc--side .toc__link{ padding-left:18px; }
.toc--side .toc__link::before{
  content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:2px; border-radius:2px;
  background:var(--accent-fg); scale:1 0; transition:scale var(--d2) var(--ease);
}
.toc--side .toc__link:target-current::before{ scale:1 1; }
@supports not selector(:target-current){
  .legal:has(#p1:target) .toc--side .toc__link[href="#p1"]::before,
  .legal:has(#p2:target) .toc--side .toc__link[href="#p2"]::before,
  .legal:has(#p3:target) .toc--side .toc__link[href="#p3"]::before,
  .legal:has(#p4:target) .toc--side .toc__link[href="#p4"]::before,
  .legal:has(#p5:target) .toc--side .toc__link[href="#p5"]::before,
  .legal:has(#p6:target) .toc--side .toc__link[href="#p6"]::before,
  .legal:has(#p7:target) .toc--side .toc__link[href="#p7"]::before,
  .legal:has(#p8:target) .toc--side .toc__link[href="#p8"]::before,
  .legal:has(#p9:target) .toc--side .toc__link[href="#p9"]::before{ scale:1 1; }
}

/* drop-down TOC (<1100): native <details>, closed by default */
.toc--drop{
  margin-top:clamp(24px,3vw,32px);
  border:1px solid var(--edge); border-radius:var(--r-md); background:var(--card);
}
.toc__sum{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:56px; padding:8px 12px 8px 18px; cursor:pointer; list-style:none;
  border-radius:calc(var(--r-md) - 1px);
  font-size:var(--fs-caps); font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.4;
  color:var(--fg);
}
.toc__sum::-webkit-details-marker{ display:none; }
.toc__sum::marker{ content:""; }
.toc__sum:focus-visible{ outline-offset:3px; }
.toc__icon{
  display:inline-grid; place-items:center; flex:none; width:32px; height:32px;
  border-radius:50%; border:1px solid var(--edge); color:var(--fg);
}
.toc__icon .ico{ width:16px; height:16px; transition:rotate .45s var(--ease); }
.toc--drop[open] .toc__icon .ico{ rotate:180deg; }
@media (hover:hover) and (pointer:fine){ .toc__sum:hover .toc__icon{ background:var(--tint); } }
.toc--drop .toc__list{ margin-inline:18px; padding-bottom:6px; border-top:1px solid var(--hair); }
.toc--drop .toc__list > li + li{ border-top:1px solid var(--hair); }
.toc--drop::details-content{
  block-size:0; overflow:clip;
  transition:block-size .45s var(--ease),content-visibility .45s allow-discrete;
}
.toc--drop[open]::details-content{ block-size:auto; }
@media (prefers-reduced-motion:reduce){ .toc--drop::details-content{ transition:none; } }

/* ---------- ≥1100: TOC column 1–3, document column 4–10 ---------- */
@media (min-width:1100px){
  .legal{
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--col-gap);
    grid-template-rows:auto 1fr; align-items:start;
  }
  .legal__head{ grid-column:4 / span 7; grid-row:1; }
  .legal__body{ grid-column:4 / span 7; grid-row:2; }
  .toc--drop{ display:none; }
  .toc--side{
    display:block; grid-column:1 / span 3; grid-row:1 / span 2;
    position:sticky; top:calc(var(--nav-clear) + 24px);
    max-height:calc(100vh - var(--nav-clear) - 48px); overflow-y:auto; overscroll-behavior:contain;
    padding-right:clamp(8px,1.5vw,24px); scrollbar-width:thin;
  }
  /* align the TOC label with the H1's cap height */
  .toc--side .toc__h{ padding-top:.9em; }
}

/* ---------- forced colors ---------- */
@media (forced-colors:active){
  .toc--side .toc__link::before{ background:CanvasText; }
  .legal__updated::before{ background:CanvasText; }
}

/* ===== 51-404.css ===== */
/* =====================================================================
   51-404.css – 404 page (SPEC §14). WP7. Dark page, served at any depth
   (<base href="/">), i18n + app.js but no vendor.js (no GSAP – static).
   The brand arch as a closed door, warm light leaking from under it
   ("Este kint, bent meleg fény."). Scope: .e404.
   ===================================================================== */

.e404{
  display:grid; align-items:center;
  min-height:100svh;
  padding-block:calc(var(--nav-clear) + clamp(36px,6vw,72px)) clamp(64px,8vw,112px);
  isolation:isolate;
}
.e404__in{
  display:grid; justify-items:center; row-gap:clamp(40px,6vw,56px);
  text-align:center;
}

/* ---------- the door: arch outline 200×266 (mobile) / 240×320 ---------- */
.e404__door{
  position:relative; display:grid; place-items:center;
  width:200px; aspect-ratio:240 / 320;
  container-type:inline-size;
}
@media (min-width:600px){ .e404__door{ width:240px; } }
.e404__door::before{   /* warm room-light behind the door */
  content:""; position:absolute; z-index:-1; left:50%; top:58%; width:280%; aspect-ratio:1;
  translate:-50% -50%; border-radius:50%;
  background:radial-gradient(closest-side,var(--glow-deep),transparent 72%);
  pointer-events:none;
}
.e404__door::after{    /* floor line the door stands on */
  content:""; position:absolute; left:-34%; right:-34%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}
.e404__arch{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.e404__arch path{ fill:none; stroke:var(--accent); stroke-linecap:round; }
.e404__frame{ stroke-width:1.5; stroke-opacity:.6; }
.e404__inner{ stroke-width:1; stroke-opacity:.22; }

/* "404" – mega numerals in the gold gradient, sized to the door (container units) */
.e404__num{
  position:relative; margin-top:18%;
  font-size:5rem; font-size:35cqi; font-weight:300; letter-spacing:-.045em; line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none;
}

/* light leaking under the closed door (decorative loop; paused off-screen by core) */
.e404__light{
  position:absolute; left:9%; right:9%; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent-2) 24%,var(--accent-2) 76%,transparent);
  box-shadow:0 0 16px 3px rgba(210,162,116,.32);
  pointer-events:none;
}
.e404__light::after{   /* the pool of light on the floor in front of the door */
  content:""; position:absolute; left:-30%; right:-30%; top:1px; height:clamp(48px,7vw,72px);
  background:radial-gradient(50% 100% at 50% 0,rgba(210,162,116,.2),transparent 72%);
}
@media (prefers-reduced-motion:no-preference){
  .e404__light{ animation:e404-flicker 6s ease-in-out infinite; }
}
@keyframes e404-flicker{
  0%,100%{ opacity:.82; }
  38%{ opacity:1; }
  52%{ opacity:.7; }
  64%{ opacity:.95; }
  80%{ opacity:.86; }
}

/* ---------- copy ---------- */
.e404__copy{ min-width:0; }
.e404__title{
  max-width:12ch; margin-inline:auto;
  font-size:var(--fs-display); font-weight:500; letter-spacing:-.035em; line-height:1.02;
}
.e404__title:focus{ outline:none; }
.e404__lead{
  max-width:38ch; margin:clamp(18px,2vw,26px) auto 0;
  font-size:var(--fs-lead); font-weight:300; line-height:1.6; color:var(--fg-2);
}
.e404__cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px;
  margin-top:clamp(28px,3.4vw,40px);
}
.e404__cta .tlink{ flex-basis:100%; justify-content:center; }

/* ---------- ≥900: door left, copy right ---------- */
@media (min-width:900px){
  .e404__in{
    grid-template-columns:auto minmax(0,auto); justify-content:center; align-items:center; justify-items:start;
    column-gap:clamp(64px,9vw,144px);
    text-align:left;
  }
  .e404__title,.e404__lead{ margin-inline:0; }
  .e404__cta{ justify-content:flex-start; }
  .e404__cta .tlink{ flex-basis:auto; margin-left:10px; }
}

/* ---------- forced colors ---------- */
@media (forced-colors:active){
  .e404__num{ background:none; color:CanvasText; }
  .e404__arch path{ stroke:CanvasText; stroke-opacity:1; }
  .e404__light,.e404__door::before{ display:none; }
}

/* ===== 90-print.css ===== */
/* =====================================================================
   90-print.css – print styles (SPEC §13). WP7. Concatenated last, so it
   applies to every page; written for the legal documents first.
   Black on white, no chrome (nav, footer, grain, TOC, bars, popups),
   URLs printed after prose links, no page breaks inside list items.
   ===================================================================== */
@media print{
  @page{ margin:16mm 15mm 18mm; }

  html{ font-size:11pt; }
  html,body{ background:#fff !important; color:#000 !important; }
  *,*::before,*::after{
    background:transparent !important; color:#000 !important;
    box-shadow:none !important; text-shadow:none !important;
    -webkit-text-fill-color:currentColor !important;
  }
  /* GSAP pre-states (inline styles) must never print as invisible text */
  [style*="opacity"]{ opacity:1 !important; }
  [style*="visibility"]{ visibility:visible !important; }
  [style*="transform"],[style*="translate"]{ transform:none !important; translate:none !important; }

  /* chrome off */
  .grain,.skip,.nav,.drawer,.thumbbar,.foot,.lang-hint,.promo,.bbar,
  .toc,.legal__en,.e404__light,.e404__door::before,[data-decor]{ display:none !important; }

  .section,.section--tight{ padding-block:1.2em !important; }
  img,svg,figure,picture{ break-inside:avoid; }

  /* links: underlined; prose links print their target */
  a{ text-decoration:underline !important; }
  main :is(p,li,td,dd) a[href^="http"]:not([class])::after{
    content:" (" attr(href) ")"; font-size:.86em; overflow-wrap:anywhere;
  }
  main :is(p,li,td,dd) a[href$=".html"]:not([class])::after{
    content:" (https://domimassage.hu/" attr(href) ")"; font-size:.86em; overflow-wrap:anywhere;
  }
  .legal__body a[target="_blank"]:not([class])::after{   /* replaces the screen ↗ icon (higher specificity than the rule above) */
    content:" (" attr(href) ")"; font-size:.86em; overflow-wrap:anywhere;
    width:auto; height:auto; margin-left:0; vertical-align:baseline;
    -webkit-mask:none !important; mask:none !important; display:inline;
  }

  /* page breaks */
  h1,h2,h3,h4{ break-after:avoid; page-break-after:avoid; }
  li,tr,blockquote,.facts,.legal__note{ break-inside:avoid; page-break-inside:avoid; }
  p{ orphans:3; widows:3; }
  thead{ display:table-header-group; }

  /* legal documents: one plain column */
  .legal{ display:block !important; max-width:none !important; padding:0 !important; }
  .legal__head{ max-width:none; padding-bottom:10pt; border-bottom:1px solid #000; }
  li::marker{ color:#000; }
  .legal__title{ max-width:none; font-size:22pt; letter-spacing:-.01em; }
  .legal__updated{ margin-top:8pt; border:1px solid #000; }
  .legal__updated--intro{ border:0; }
  .legal__updated::before{ background:#000 !important; }
  .legal__body{ max-width:none; padding-top:12pt; font-size:10.5pt; line-height:1.55; }
  .legal__body > h2{ margin-top:18pt; padding-top:8pt; border-top:1px solid #999; font-size:13.5pt; }
  .legal__body > h3{ margin-top:12pt; font-size:11.5pt; }
  .legal__intro{ font-size:11.5pt; }
  .legal__note{ padding:6pt 0 6pt 10pt; border-left:2pt solid #000; border-radius:0; font-size:9.5pt; }
  .legal__note::before{ display:none; }
  .legal__summary{ border:1px solid #000 !important; }
  .facts li > .ico{ color:#000 !important; }
  .legal__table{ border-color:#000; }
  .legal__table td{ border-top-color:#999; }

  /* 404 (rarely printed): no viewport-height frame */
  .e404{ min-height:0; }
}