/* ==========================================================================
   HotelOS landing — home.css
   Everything that is only the homepage: the product theatre (film → the
   registered calendar screen → pull back into a centred iMac with the section
   copy above it) and the "who it is for" band. site.css keeps the tokens, the
   type scale, the nav, the feature stack, the numbers band, the process row,
   the CTA plate, the FAQ and the footer, because the 27 generated pages
   share them.

   The theatre is a pure function of one number: how far through the section
   you have scrolled. home.js writes that number and a handful of derived
   custom properties; every layer below reads them. Nothing here is a one-way
   class, so scrolling back up rebuilds every state exactly.

   No sixth font size: the page type still uses the five site.css tokens. The
   bridge calendar inside the screen is deliberately outside that rule — it is
   a screenshot of an application, sized in `em` off one root so the whole
   screen scales as the camera moves, the way a real screen does.
   ========================================================================== */

:root {
  --cool: #eef1f2;          /* the pale room the iMac ends up in */
  --cool-2: #e3e8ea;
  --film-green: #2f7268;    /* the green baked into the film's last frame */
}

/* ==========================================================================
   PRODUCT THEATRE
   ========================================================================== */
.ph {
  position: relative;
  /* 540vh of film, takeover and pull-back, then 260vh walking the screen
     through the three previews (see home.js) */
  height: calc(900 * var(--vh));
  /* the initial state; home.js writes the live values onto the layers that
     read them (never here: a custom property on .ph restyles all of it) */
  --hero: 1;      /* 1 = hero copy up, 0 = gone            */
  --take: 0;      /* 0 → 1: filmed screen becomes live DOM */
  --film: 1;      /* film layer opacity                     */
  --shell: 0;     /* the iMac body                          */
  --env: 0;       /* the pale room                          */
  --rail: 0;      /* the section copy above the iMac        */
  --dx: 0px; --dy: 0px; --ds: 1;      /* device transform   */
  --push: 1;      /* film scale during the hold             */
}
/* the hero button lands here: the middle of the full-screen calendar hold */
.ph__anchor { position: absolute; left: 0; top: var(--anchor-top, calc((100% - calc(100 * var(--vh))) * 0.5187 + var(--nav-h) + var(--nav-top) + 24px)); width: 1px; height: 1px; }


.ph__stage {
  position: sticky; top: 0;
  height: calc(100 * var(--vh)); height: calc(100 * var(--svh));
  overflow: hidden;
  background: #07090c;
  isolation: isolate;
}

/* the pale, quiet room the device is finally seen in — no scenery */
.ph__bg {
  position: absolute; inset: 0; z-index: 0; opacity: var(--env);
  background:
    radial-gradient(120% 90% at 62% 28%, #ffffff 0%, var(--cool) 46%, var(--cool-2) 100%);
}

/* ---------- the film ---------- */
.ph__film { position: absolute; inset: 0; z-index: 1; opacity: var(--film); transform: scale(var(--push)); will-change: transform, opacity; }
.ph__film > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph__poster { object-position: 50% 55%; }
/* hero-scrub.js paints the clip onto a canvas home.js inserts here */
.ph__film .hero__canvas { opacity: 0; transition: opacity 0.4s linear; }
.ph__film .hero__canvas.is-ready { opacity: 1; }
/* darkens behind the centred claim and along the top; the resort below stays bright */
.ph__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--hero);
  background:
    radial-gradient(56% 48% at 50% 30%, rgba(8, 11, 16, 0.46) 0%, rgba(8, 11, 16, 0.18) 60%, rgba(8, 11, 16, 0) 100%),
    linear-gradient(180deg, rgba(8, 11, 16, 0.5) 0%, rgba(8, 11, 16, 0) 46%, rgba(8, 11, 16, 0) 80%, rgba(8, 11, 16, 0.3) 100%);
}

/* ---------- the hero claim ---------- */
.ph__hero {
  position: absolute; inset: 0; z-index: 5;
  display: grid; align-content: start; justify-items: center;
  padding-top: calc(var(--nav-h) + var(--nav-top) + clamp(2rem, calc(9 * var(--vh)), 7rem));
  pointer-events: none;
  opacity: var(--hero);
  transform: translate3d(0, calc((1 - var(--hero)) * -44px), 0);
  visibility: visible;
  text-align: center;
}
.ph__hero.is-gone { visibility: hidden; }
.ph__hero-c { color: #fff; pointer-events: auto; }
.ph__hero-c h1 { max-width: 14em; margin-inline: auto; text-wrap: balance; }
.ph__hero-c > p { margin: 1.5rem auto 0; max-width: 36rem; color: rgba(255, 255, 255, 0.84); text-wrap: pretty; }
.ph__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-top: 2.25rem; }
/* primary: teal pill with the white arrow ring */
.ph__btn {
  position: relative; display: inline-flex; align-items: center;
  height: 3.25rem; padding: 0 3.6rem 0 1.5rem; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: var(--fs-body); line-height: 1; white-space: nowrap;
  transition: background-color 0.18s, transform 0.18s var(--ease-settle);
}
.ph__btn:hover { background: var(--accent-hover); }
.ph__btn:active { transform: scale(0.98); }
.ph__ring {
  position: absolute; right: 5px; top: 5px; width: 2.625rem; height: 2.625rem; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ink);
  transition: transform 0.3s var(--ease-settle);
}
.ph__ring svg { width: 11px; height: 11px; }
.ph__btn:hover .ph__ring { transform: rotate(-45deg); }
/* secondary: underlined text link */
.ph__link { display: inline-flex; align-items: center; gap: 0.6rem; height: 3.25rem; color: #fff; font-size: var(--fs-body); line-height: 1; white-space: nowrap; }
.ph__link span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.ph__link svg { width: 11px; height: 11px; transition: transform 0.25s var(--ease-settle); }
.ph__link:hover svg { transform: translateX(3px); }

/* the nav steps back with the hero copy (scroll-tied, --nav-o written by
   home.js) and eases back in once the iMac has settled */
.ns-header.is-theatre {
  opacity: var(--nav-o, 1);
  translate: 0 calc((1 - var(--nav-o, 1)) * -14px);
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out), visibility 0s 0s;
}
.ns-header.is-theatre.is-away { visibility: hidden; transition: opacity 0.5s var(--ease-settle), translate 0.5s var(--ease-settle), visibility 0s 0.5s; }
.ns-header.is-theatre.is-tied { transition: none; }
/* a width switch made while the nav is invisible lands without animating */
.ns-header.is-snap, .ns-header.is-snap * { transition: none !important; }

/* ---------- the device ----------
   Laid out at the size where its screen exactly covers the filmed screen;
   home.js then translates and scales it, so the interface is native-resolution
   at the close-up and only ever sampled down afterwards — it never blurs.

   The shell is a photograph (assets/img/imac-24-silver.png, 1614x1324, soft
   shadow baked in). Its screen glass sits at x 126, y 56, 1360x765 inside the
   file, so the image is sized off the live screen: --kx / --ky are "one image
   pixel" horizontally and vertically. The filmed screen is a touch wider than
   16:9 (1.83 vs 1.78), so the photo is stretched ~3% across to fit it —
   below what the eye reads on a bezel. */
.ph__device {
  --kx: calc(var(--scr-w, 1530px) / 1360);
  --ky: calc(var(--scr-h, 839px) / 765);
  position: absolute; left: 0; top: 0; z-index: 3;
  width: calc(var(--kx) * 1614);
  height: calc(var(--ky) * 1324);
  transform-origin: 0 0;
  transform: translate3d(var(--dx), var(--dy), 0) scale(var(--ds));
  will-change: transform;
}
.ph__shell {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: var(--shell);
  user-select: none; pointer-events: none;
}

/* ---------- the screen: one clipped box on the photo's glass ---------- */
.ph__screen {
  position: absolute;
  left: calc(var(--kx) * 126); top: calc(var(--ky) * 56);
  width: var(--scr-w, 1530px); height: var(--scr-h, 839px);
  overflow: hidden; contain: paint;
  background: #f4f5f3;
  /* until the takeover there is no live screen at all: the film owns those
     pixels. This single opacity IS the registered cross-fade — the layer
     underneath it is the filmed screen, at the same rectangle. */
  opacity: var(--take);
}

/* ==========================================================================
   BRIDGE — the calendar baked into the film's last frame, in DOM.

   Every number below is measured off that frame (frame 2276: screen rect
   x 34–1870, y 20–1027 of 1920x1080) and expressed as a fraction of the
   screen box, so it registers at any viewport:

     sidebar 17.48%W · top bar 8.44%H · content left 19.93%W
     day columns start 31.48%W · title cap-top 15.89%H, size 3.77%H
     row 1 centre 48.46%H · row pitch 5.363%H · bar height 3.774%H

   The body is positioned rather than flowed: the whole point of this layer
   is that it lands on the filmed pixels, and a flow layout drifts with every
   font metric. 1em = screen width / 131, which is what 14px of the filmed UI
   comes to once the frame is scaled to the stage.
   ========================================================================== */
.br {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 17.48% minmax(0, 1fr);
  background: #f5f5f0;
  color: #2c3330;
  /* one unit for the whole layer. `em` is NOT usable for the absolute offsets
     below — `top`/`left` in em resolve against the element's OWN font-size, so
     a 2.71em heading would place itself 2.71x too far down. */
  --bem: calc(var(--scr-w, 1530px) / 131);
  font-size: var(--bem);
  line-height: 1.3;
  /* the screen is a scaled-down 14px UI: medium, not regular, keeps it legible */
  font-weight: 500;
  opacity: var(--br-a, 1);
  will-change: opacity;
}
.br__side { background: #f8fafa; border-right: 1px solid rgba(16, 30, 28, 0.07); padding: 2.5em 1.07em 1.1em 1.28em; display: flex; flex-direction: column; }
.br__brand { display: flex; gap: 0.7em; align-items: center; margin-bottom: 4.75em; padding-left: 0.6em; }
.br__ava { flex: none; width: 2.55em; height: 2.55em; border-radius: 0.5em; background: #1d2a2d; color: #fff; display: grid; place-items: center; font-size: 0.95em; }
.br__ava--sm { background: #cfdcd9; color: #2c3330; }
.br__names { display: grid; min-width: 0; }
.br__names b { font-weight: 500; font-size: 1.12em; }
.br__names i { font-style: normal; font-size: 0.84em; color: #8d9794; }
.br__cap { font-size: 0.8em; letter-spacing: 0.09em; text-transform: uppercase; color: #a3adaa; margin: 2.2em 0 0.8em; padding-left: 0.9em; }
.br__cap:first-of-type { margin-top: 0; }
.br__item { height: 3.14em; display: flex; align-items: center; padding: 0 0.7em; border-radius: 0.5em; color: #4d5855; font-size: 1.05em; }
.br__item.is-on { background: #e7edec; color: #23302d; }
.br__user { margin-top: auto; display: flex; gap: 0.7em; align-items: center; padding: 1.2em 0 0 0.6em; }

.br__main { display: flex; flex-direction: column; min-width: 0; }
.br__top { height: 8.44%; flex: none; display: flex; align-items: center; gap: 2em; padding: 0 1.6em 0 3.22em; background: #fbfbf8; border-bottom: 1px solid rgba(16, 30, 28, 0.06); }
.br__mod { font-size: 1.15em; }
.br__search { flex: 1; max-width: 32em; margin-inline: auto; padding: 0.55em 1em; border-radius: 0.5em; background: #f3f4f0; color: #9aa4a1; border: 1px solid rgba(16, 30, 28, 0.06); }
.br__who { color: #5a6562; white-space: nowrap; }
.br__body { position: relative; flex: 1; min-height: 0; }
.br__h { position: absolute; left: calc(var(--bem) * 3.25); top: calc(var(--bem) * 4.77); font-size: 2.71em; font-weight: var(--fw-title); line-height: 1; letter-spacing: -0.02em; }
.br__sub { position: absolute; left: calc(var(--bem) * 3.25); top: calc(var(--bem) * 8.67); color: #8d9794; font-size: 1.07em; }
.br__ctrl { position: absolute; left: calc(var(--bem) * 3.25); right: calc(var(--bem) * 1.5); top: calc(var(--bem) * 12.83); translate: 0 -50%; display: flex; align-items: center; gap: 0.6em; }
.br__pill { min-width: 3em; text-align: center; padding: 0.5em 0.9em; border: 1px solid rgba(16, 30, 28, 0.10); border-radius: 0.5em; color: #4d5855; background: #fbfbf9; }
.br__range { margin-left: 1em; color: #4d5855; }
.br__seg { margin-left: auto; display: flex; gap: 0.3em; }
.br__seg i { font-style: normal; padding: 0.5em 0.9em; border-radius: 0.5em; color: #9aa4a1; }
.br__seg i.is-on { background: #e7edec; color: #23302d; }
.br__filters { position: absolute; left: calc(var(--bem) * 3.25); right: calc(var(--bem) * 1.5); top: calc(var(--bem) * 19.05); translate: 0 -50%; display: flex; align-items: center; gap: 1.4em; }
.br__field { min-width: 13em; padding: 0.6em 1em; border: 1px solid rgba(16, 30, 28, 0.10); border-radius: 0.5em; color: #4d5855; background: #fbfbf9; }
.br__key { margin-left: auto; color: #9aa4a1; font-size: 0.9em; }
.br__cal { position: absolute; left: calc(var(--bem) * 3.25); right: calc(var(--bem) * 3.35); top: calc(var(--bem) * 22.11); bottom: 0; }
.br__days { display: grid; grid-template-columns: 15.12em repeat(14, minmax(0, 1fr)); height: 4.71em; align-items: center; background: #f1f4f2; }
.br__days i { grid-column: span 1; font-style: normal; text-align: center; color: #8d9794; font-size: 0.9em; line-height: 1.35; }
.br__days i:first-child { grid-column: 2; }
.br__days em { display: block; font-style: normal; font-size: 1.1em; color: #5a6562; }
.br__row { display: grid; grid-template-columns: 15.12em minmax(0, 1fr); align-items: center; height: 3.85em; }
.br__rm { color: #4d5855; display: grid; line-height: 1.15; font-size: 1.05em; }
.br__rm i { font-style: normal; font-size: 0.76em; color: #a3adaa; }
.br__track { position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); height: 100%; align-items: center; border-top: 1px solid rgba(16, 30, 28, 0.05); }
.br__track b {
  grid-column: var(--a) / var(--b); align-self: center; height: 2.71em;
  display: flex; align-items: center; padding-inline: 0.7em;
  border-radius: 0.45em; background: var(--film-green);
  color: #eaf2f0; font-weight: 500; font-size: 0.95em;
  white-space: nowrap; overflow: hidden;
}

/* ==========================================================================
   THE THREE PREVIEWS — PMS (the calendar above), foglalómotor, marketing.
   Once the iMac has settled, scrolling on walks the same screen through
   them. --v2 and --v3 run 0 → 1 across each hand-over (home.js writes the
   resulting opacity and rise straight onto each page) and
   data-view (1/2/3, whichever is past half-way); nothing here is a one-way
   class. The sidebar and top bar never move — only the page inside changes,
   the way it would in the app.
   ========================================================================== */
.ph {
  --v2: 0; --v3: 0;
  /* sequential, never a cross-fade: the page going out is gone by the middle
     of the hand-over, the one coming in only starts there — two headlines or
     two screens are never on top of each other */
  --o1: clamp(0, 1 - 2 * var(--v2), 1);
  --o2: min(clamp(0, 2 * var(--v2) - 1, 1), clamp(0, 1 - 2 * var(--v3), 1));
  --o3: clamp(0, 2 * var(--v3) - 1, 1);
}
.br__body.br__v2, .br__body.br__v3 { position: absolute; inset: 0; }
.br__main { position: relative; }
.br__main > .br__body.br__v2, .br__main > .br__body.br__v3 { top: 8.44%; }
.br__body.br__v1 { opacity: var(--o1); }
.br__body.br__v2 { opacity: var(--o2); translate: 0 calc((1 - var(--v2)) * var(--bem) * 2.2); }
.br__body.br__v3 { opacity: var(--o3); translate: 0 calc((1 - var(--v3)) * var(--bem) * 2.2); }
.ph:not([data-view="2"]) .br__body.br__v2, .ph:not([data-view="2"]):not([data-view="3"]) .br__body.br__v3 { pointer-events: none; }

/* the top-bar module name: three labels in one cell */
.br__mod { display: grid; }
.br__mod i { grid-area: 1 / 1; font-style: normal; white-space: nowrap; }
.br__mod .br__v1 { opacity: var(--o1); }
.br__mod .br__v2 { opacity: var(--o2); }
.br__mod .br__v3 { opacity: var(--o3); }

/* the sidebar marker follows the page */
.br__item { transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.ph:not([data-view]) .br__item[data-nav="1"],
.ph[data-view="1"] .br__item[data-nav="1"],
.ph[data-view="2"] .br__item[data-nav="2"],
.ph[data-view="3"] .br__item[data-nav="3"] { background: #e7edec; color: #23302d; }

/* shared pieces of the two new pages, in the calendar's own vocabulary */
.br__seg--l { margin-left: 0; }
.br__live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em; color: #4d5855; }
.br__live::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--film-green); box-shadow: 0 0 0 0.28em rgba(47, 114, 104, 0.16); }
.br__grid { position: absolute; left: calc(var(--bem) * 3.25); right: calc(var(--bem) * 3.35); top: calc(var(--bem) * 16.6); bottom: calc(var(--bem) * 2.6); display: grid; gap: 1.4em; }
.br__grid--book { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); }
.br__grid--mkt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.br__col { display: flex; flex-direction: column; gap: 1.4em; min-height: 0; }
.br__card { background: #fbfbf9; border: 1px solid rgba(16, 30, 28, 0.08); border-radius: 0.7em; padding: 1.3em 1.4em; min-height: 0; overflow: hidden; }
.br__card--grow { flex: 1; display: flex; flex-direction: column; }
.br__ch { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8em; letter-spacing: 0.09em; text-transform: uppercase; color: #a3adaa; margin-bottom: 0.9em; }
.br__ch span { letter-spacing: 0; text-transform: none; font-size: 1.15em; color: #8d9794; }
.br__big { font-size: 2.3em; font-weight: var(--fw-title); line-height: 1.1; letter-spacing: -0.02em; color: #23302d; }
.br__fine { margin-top: 0.3em; color: #8d9794; }
.br__lead { font-size: 1.35em; font-weight: var(--fw-title); line-height: 1.3; letter-spacing: -0.01em; color: #23302d; margin-bottom: 0.8em; max-width: 24em; }
.br__li { display: flex; align-items: center; gap: 1em; padding: 0.75em 0.8em; border-radius: 0.5em; border-top: 1px solid rgba(16, 30, 28, 0.06); }
.br__li:first-of-type { border-top: 0; }
.br__li span { display: grid; flex: 1; min-width: 0; }
.br__li b { font-weight: 500; color: #2c3330; }
.br__li i { font-style: normal; font-size: 0.9em; color: #8d9794; white-space: nowrap; }
.br__li em { font-style: normal; color: #4d5855; white-space: nowrap; }
.br__li.is-new { background: #e7edec; box-shadow: inset 0.22em 0 0 var(--film-green); }
.br__kv { display: flex; justify-content: space-between; gap: 1.5em; padding: 0.6em 0; border-top: 1px solid rgba(16, 30, 28, 0.06); }
.br__kv span { color: #8d9794; }
.br__kv b { font-weight: 500; color: #2c3330; text-align: right; }
.br__note { margin-top: auto; padding-top: 0.9em; color: #8d9794; font-size: 0.92em; }
.br__acts { display: flex; gap: 0.6em; margin-top: 1em; }
.br__btn { display: inline-flex; align-items: center; padding: 0.6em 1.1em; border-radius: 0.5em; background: var(--film-green); color: #eaf2f0; white-space: nowrap; }

/* foglalómotor: the guest-facing engine, framed as the hotel's own page */
.bk { padding: 0; display: flex; flex-direction: column; background: #fff; }
.bk__bar { display: flex; align-items: center; gap: 0.4em; padding: 0.75em 1em; border-bottom: 1px solid rgba(16, 30, 28, 0.07); background: #f6f7f4; }
.bk__bar i { width: 0.65em; height: 0.65em; border-radius: 50%; background: #d9dedc; }
.bk__bar span { margin-left: 1em; padding: 0.25em 1.2em; border-radius: 0.5em; background: #fff; color: #9aa4a1; font-size: 0.9em; border: 1px solid rgba(16, 30, 28, 0.06); }
.bk__search { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.6em; padding: 1.2em 1.3em; border-bottom: 1px solid rgba(16, 30, 28, 0.06); }
.bk__f { display: grid; gap: 0.15em; padding: 0.55em 0.9em; border: 1px solid rgba(16, 30, 28, 0.10); border-radius: 0.5em; color: #8d9794; font-size: 0.88em; }
.bk__f b { font-weight: 500; color: #2c3330; font-size: 1.14em; }
.bk__go { display: inline-flex; align-items: center; padding: 0 1.3em; border-radius: 0.5em; background: var(--film-green); color: #eaf2f0; }
.bk__rooms { display: grid; gap: 0.2em; padding: 0.6em 1.3em 0; }
.bk__room { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) auto auto; align-items: center; gap: 1.4em; padding: 0.85em 0; border-top: 1px solid rgba(16, 30, 28, 0.06); }
.bk__room:first-child { border-top: 0; }
.bk__room img { width: 10.5em; height: 6.6em; object-fit: cover; border-radius: 0.45em; }
.bk__sum { margin-top: auto; display: flex; align-items: center; gap: 1.4em; padding: 1em 1.3em; border-top: 1px solid rgba(16, 30, 28, 0.08); background: #f6f7f4; }
.bk__sum > span:first-child { display: grid; color: #8d9794; flex: 1; }
.bk__sum b { font-weight: 500; color: #23302d; font-size: 1.25em; }
.bk__sum em { font-style: normal; color: #4d5855; }
.bk__sum .bk__go { padding-block: 0.75em; }
.bk__rn, .bk__rp { display: grid; gap: 0.15em; }
.bk__rn b, .bk__rp b { font-weight: 500; color: #23302d; font-size: 1.1em; }
.bk__rn i, .bk__rp i { font-style: normal; color: #8d9794; font-size: 0.9em; }
.bk__rp { text-align: right; }
.bk__pick { padding: 0.55em 1em; border-radius: 0.5em; border: 1px solid rgba(16, 30, 28, 0.12); color: #4d5855; white-space: nowrap; }
.bk__pick.is-on { background: var(--film-green); border-color: var(--film-green); color: #eaf2f0; }

/* hírlevél: the proposed e-mail, as the guest would receive it */
.ml { display: flex; flex-direction: column; padding: 0; background: #fff; }
.ml__meta { display: flex; gap: 1em; padding: 0.9em 1.3em; border-bottom: 1px solid rgba(16, 30, 28, 0.07); background: #f6f7f4; }
.ml__meta span { color: #9aa4a1; }
.ml__meta b { font-weight: 500; color: #2c3330; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml__mail { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 1.4em auto 0; width: 88%; border: 1px solid rgba(16, 30, 28, 0.07); border-bottom: 0; border-radius: 0.6em 0.6em 0 0; overflow: hidden; }
.ml__mail img { width: 100%; height: 19em; object-fit: cover; display: block; flex: none; }
.ml__c { padding: 1.8em 2em; display: grid; gap: 0.9em; justify-items: start; }
.ml__k { font-size: 0.8em; letter-spacing: 0.09em; text-transform: uppercase; color: #a3adaa; }
.ml__t { font-size: 1.9em; line-height: 1.2; letter-spacing: -0.015em; color: #23302d; }
.ml__p { color: #5a6562; line-height: 1.45; }


/* ---------- state B: the section copy above the centred iMac ----------
   The original "moment" section head, parked over the device. home.js
   measures this box's bottom to place the iMac under it. */
.ph__head {
  position: absolute; left: 0; right: 0; z-index: 4;
  top: calc(var(--nav-h) + var(--nav-top) + 2rem);
  opacity: var(--rail);
  pointer-events: none;
}
.ph__head .section-head { margin: 0 auto; text-align: center; max-width: 44rem; }
.ph__head .section-head p { margin-inline: auto; }
/* The head shares one screen with the iMac, and home.js gives the iMac
   whatever height the head leaves. So the headline follows the viewport's
   HEIGHT, capped at the display size: a 27" 1440p at 120% (about
   2133 × 1087) gets ~65px and a bigger iMac, and a 100% 1440p (1305 tall)
   keeps the full 76px. Still the display token, only capped. */
.ph__head .section-head h2 { font-size: min(var(--fs-display), calc(6 * var(--vh))); }
/* the three heads in one cell; each fades with its preview */
.ph__heads { display: grid; }
.ph__heads > .section-head { grid-area: 1 / 1; }
/* the two longer claims get a wider measure so they also break in two lines
   and the shared cell stays as tall as the first head; their leads run
   wider too, which saves a line of height over the iMac */
.ph__heads > .section-head.br__v2, .ph__heads > .section-head.br__v3 { max-width: 78rem; }
.ph__heads > .section-head.br__v2 p, .ph__heads > .section-head.br__v3 p { max-width: 54rem; }
.ph__heads > .section-head.br__v1 p { max-width: 44rem; }
.ph__heads > .br__v1 { opacity: var(--o1); }
.ph__heads > .br__v2 { opacity: var(--o2); translate: 0 calc((1 - var(--v2)) * 14px); }
.ph__heads > .br__v3 { opacity: var(--o3); translate: 0 calc((1 - var(--v3)) * 14px); }

/* Every layer home.js fades or moves gets its own compositor layer, so a
   frame of the theatre is a GPU property change rather than a repaint.
   Without the hint a scroll-driven opacity or translate repaints and
   re-rasterises what it sits in: the whole 1837×1006 screen, photos and all,
   on every frame of a preview hand-over (measured: 4.4 ms of GPU work a
   frame, the whole budget at 240 Hz). Firefox needs it just as much: only a
   hinted layer gets its opacity/transform as a live binding instead of a
   rebuilt, re-rasterised picture.
   Only inside the device (already its own layer, so its text is already
   greyscale-antialiased) and on the room gradient. home.js hides each of
   them (visibility) whenever it is fully transparent. The hero claim and the
   section copy stay unhinted: a layer of their own would switch their text
   from subpixel to greyscale antialiasing, a visible change; they are small
   text boxes and cheap to repaint. */
.ph__bg, .ph__shell, .ph__screen { will-change: opacity; }
.br__body.br__v1 { will-change: opacity; }
.br__body.br__v2, .br__body.br__v3 { will-change: opacity, translate; }
/* the feature stack's pills, as the step marker: the active step is the
   labelled one */
.ph__pills { justify-content: center; margin-bottom: 1rem; }
.ph__pills .pill i { font-style: normal; display: none; }
.ph__pills .pill.is-active i { display: inline; }

/* ==========================================================================
   SECTION 3 — WHO IT IS FOR
   ========================================================================== */
.who { background: var(--ground); text-align: center; }
.who h2 { max-width: 18ch; margin-inline: auto; text-wrap: balance; }
/* the rail: six tall photo panels side by side, a caption line under each
   (name left, index right). Flat, no curve. It runs wider than the container
   (the page's side margins only). On a pointer device the panel under the
   pointer (or with keyboard focus) grows wider and the rest give way: one
   flex-grow transition, so the row stays the same width and height and the
   photo is simply uncovered further by object-fit. Sizes: body + small only. */
.who__rail { --who-h: clamp(28rem, 18rem + calc(32 * var(--vw)), 46rem); list-style: none; margin: clamp(2.5rem, 2rem + calc(2 * var(--vw)), 4rem) 0 0; padding: 0; display: flex; text-align: left; width: calc(calc(100 * var(--vw)) - var(--container-margin) * 2 + 0.625rem); max-width: calc(1840px + 0.625rem); position: relative; left: 50%; translate: -50% 0; }
.who__panel { flex: 1 1 0; min-width: 0; padding-inline: 0.3125rem; /* the gap lives inside the panel, so the pointer never falls between two and the row never collapses back mid-move */ transition: flex-grow 0.9s var(--ease-out); }
.who__panel.reveal { --rv-d: calc(var(--i, 0) * 0.048s); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .who__panel.reveal { transition: flex-grow 0.9s var(--ease-out), opacity 0.8s var(--ease-reveal) var(--rv-d), filter 0.8s var(--ease-reveal) var(--rv-d); }
}
.who__link { display: block; color: inherit; text-decoration: none; }
.who__img { display: block; height: var(--who-h); border-radius: calc(var(--radius-card) - 6px); overflow: hidden; background: var(--band-2); }
.who__img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out), opacity 0.6s var(--ease-settle), filter 0.6s var(--ease-settle); }
.who__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.125rem 0; }
.who__name { font-size: var(--fs-body); line-height: var(--lh-small); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s var(--ease-settle); }
.who__n { color: var(--ink-3); flex: none; transition: color 0.3s var(--ease-settle); }
@media (hover: hover) and (min-width: 64.0625rem) {
  .who__panel:hover, .who__panel:focus-within { flex-grow: 2.4; }
  .who__rail:has(.who__panel:hover) .who__img img { opacity: 0.6; filter: saturate(0.65); }
  .who__rail .who__panel:hover .who__img img { opacity: 1; filter: none; transform: scale(1.04); }
  .who__panel:hover .who__name, .who__panel:hover .who__n { color: var(--accent); }
}
.who__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: calc(var(--radius-card) - 4px); }
.who__note { max-width: 48rem; margin: clamp(2rem, 1.5rem + calc(2 * var(--vw)), 3rem) auto 0; }
@media (max-width: 64rem) {
  .who__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 0.625rem; width: auto; max-width: none; left: auto; translate: none; }
  .who__panel { padding-inline: 0; }
  .who__img { height: auto; aspect-ratio: 3 / 4; }
  .who__name { white-space: normal; }
}
@media (max-width: 48rem) {
  /* a swipeable strip that bleeds to the screen edges */
  .who__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--container-margin) * -1); padding-inline: var(--container-margin); scroll-padding-inline: var(--container-margin); }
  .who__rail::-webkit-scrollbar { display: none; }
  .who__panel { flex: 0 0 calc(72 * var(--vw)); scroll-snap-align: start; }
  .who__img { aspect-ratio: 9 / 14; }
}

/* ==========================================================================
   HOGYAN INDULUNK — the launch stack.
   A dark band (the ink plate's colour, pulled a few percent toward the mark's
   deep water) with an editorial head and a one-open-at-a-time stack. Kept
   off site.css's .process/.steps: the generated pages still use those.
   No sixth size: display / lead / body only. The height animation is the
   FAQ's grid-template-rows 0fr → 1fr.
   ========================================================================== */
.launch {
  --launch-bg: color-mix(in oklab, var(--ink) 88%, var(--mark-3));
  --launch-pad-x: clamp(1.25rem, 0.75rem + calc(1.5 * var(--vw)), 2.25rem);
  --launch-pad-y: clamp(1.25rem, 1rem + calc(0.6 * var(--vw)), 1.625rem);
  --launch-num: clamp(3rem, 1.5rem + calc(4.5 * var(--vw)), 7rem);
  --launch-ring: 2.25rem;
  background:
    radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 48%),
    var(--launch-bg);
  color: var(--on-ink-1);
}
.launch :focus-visible { outline-color: var(--accent-on-ink); }

.launch__head {
  display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gap);
  align-items: end; margin-bottom: clamp(3rem, 2rem + calc(3 * var(--vw)), 5.5rem);
}
.launch__head h2 { grid-column: 1 / 8; }
.launch__head p { grid-column: 9 / -1; max-width: 25rem; color: var(--on-ink-2); padding-bottom: 0.35em; }

.launch__stack { display: grid; gap: 0.5rem; }
.launch__item {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.045);
  color: var(--on-ink-1);
  transition: background-color 0.4s var(--ease-settle), color 0.4s var(--ease-settle);
}
.launch__item:has(.launch__trigger:focus-visible) { outline: 2px solid var(--accent-on-ink); outline-offset: 3px; }
.launch__item h3 { font-size: inherit; }

.launch__trigger {
  display: grid; grid-template-columns: var(--launch-num) minmax(0, 1fr) auto auto; align-items: center;
  width: 100%; padding: var(--launch-pad-y) var(--launch-pad-x); text-align: left;
  font-size: var(--fs-lead); line-height: var(--lh-title); letter-spacing: var(--track-title);
  border-radius: inherit;
}
.launch__trigger:focus-visible { outline: none; }
.launch__n { font-variant-numeric: tabular-nums; color: var(--on-ink-3); transition: color 0.4s var(--ease-settle); }
/* the phase: when the step happens, read before the arrow */
.launch__when { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; color: var(--on-ink-3); margin-left: 1.5rem; transition: color 0.4s var(--ease-settle); }

.launch__ring {
  display: grid; place-items: center; width: var(--launch-ring); height: var(--launch-ring); margin-left: 1rem;
  border-radius: 50%; border: 1px solid var(--on-ink-line);
  transition: border-color 0.25s var(--ease-settle), color 0.25s var(--ease-settle), background-color 0.25s var(--ease-settle);
}
.launch__ring svg { width: 0.75rem; height: 0.75rem; stroke-width: 1.5; transition: transform 0.45s var(--ease-out); }

.launch__panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.launch__panel > div { overflow: hidden; }
/* the open step's body: the description hangs under the title, "in practice"
   takes the right half, split from the head by one hairline */
.launch__body {
  display: grid; grid-template-columns: var(--launch-num) minmax(0, 5fr) minmax(0, 6fr);
  margin-inline: var(--launch-pad-x);
  padding-block: clamp(1.25rem, 1rem + calc(1 * var(--vw)), 2rem) clamp(1.75rem, 1rem + calc(2.5 * var(--vw)), 3.25rem);
  border-top: 1px solid var(--on-ink-line);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s var(--ease-settle), transform 0.45s var(--ease-out);
}
.launch__desc { grid-column: 2; max-width: 40ch; color: var(--on-ink-2); }
/* the gap lives on this side only, so the description stays flush with the title */
.launch__practice { grid-column: 3; padding-left: clamp(1.5rem, 1rem + calc(2 * var(--vw)), 3.5rem); }
.launch__label { color: var(--on-ink-3); }
/* the feature stack’s check list, on ink: white text, the on-ink accent (as .plan .checks) */
.launch__practice .feat__points li { color: var(--on-ink-1); }
.launch__practice .feat__points li::before { background: var(--accent-on-ink); }
.launch__practice .feat__points { margin-top: 0.75rem; max-width: none; }

/* collapsed: a quiet tonal lift and the accent on the ring, nothing more */
@media (hover: hover) {
  .launch__item:not(.is-open):hover { background: rgba(255, 255, 255, 0.065); }
  .launch__item:not(.is-open):hover .launch__ring { border-color: var(--accent-on-ink); color: var(--accent-on-ink); }
}

/* open */
/* open: the same dark card, one tonal step up; the accent only on the number */
.launch__item.is-open { background: rgba(255, 255, 255, 0.075); }
.launch__item.is-open .launch__trigger { cursor: default; }
.launch__item.is-open .launch__n { color: var(--accent-on-ink); }
.launch__item.is-open .launch__ring svg { transform: rotate(90deg); }
.launch__item.is-open .launch__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.launch__item.is-open .launch__body { opacity: 1; transform: none; transition-delay: 0.12s; }

/* the dark band would sit straight on the CTA's dark plate, which relied on
   the old light process row for its top margin */
.launch + .cta { padding-top: var(--section-pad); }

@media (max-width: 64rem) {
  .launch__head h2 { grid-column: 1 / 7; }
  .launch__head p { grid-column: 7 / -1; }
  /* tablet: "in practice" drops under the description, same hanging indent */
  .launch__body { grid-template-columns: var(--launch-num) minmax(0, 1fr); }
  .launch__practice { grid-column: 2; margin-top: 1.5rem; padding-left: 0; }
}
@media (max-width: 48rem) {
  .launch { --launch-num: 2.75rem; --launch-ring: 2.5rem; }
  .launch__head { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .launch__head h2, .launch__head p { grid-column: 1; }
  .launch__head p { max-width: 30rem; padding-bottom: 0; }
  .launch__trigger { min-height: 4.5rem; }
  /* the phase becomes the title’s second line; the ring spans both */
  .launch__trigger { grid-template-columns: var(--launch-num) minmax(0, 1fr) auto; row-gap: 0.15rem; }
  .launch__n { grid-row: 1; }
  .launch__title { grid-row: 1; grid-column: 2; }
  .launch__when { grid-row: 2; grid-column: 2; margin-left: 0; }
  .launch__ring { grid-row: 1 / 3; grid-column: 3; }
  .launch__body { grid-template-columns: minmax(0, 1fr); }
  .launch__desc { grid-column: 1; max-width: none; }
  .launch__practice { grid-column: 1; }
}
/* site.css zeroes the durations; the delays have to go too or the panel
   still waits before it hides */
@media (prefers-reduced-motion: reduce) {
  .launch__panel, .launch__body { transition-delay: 0s !important; }
  .launch__body { transform: none; }
}

/* on the dark film the accent ring is not enough contrast */
.ph__hero-c :focus-visible { outline-color: #fff; }

/* ==========================================================================
   THE TWO WAYS OUT: no motion, or a phone.
   Both collapse the theatre to the hero; the feature stack below carries the
   product story there.
   ========================================================================== */
@media (prefers-reduced-motion: reduce), (max-width: 64rem) {
  .ph { height: auto; --anchor-top: 100%; --hero: 1; }
  .ph__stage { position: relative; height: calc(100 * var(--vh)); height: calc(100 * var(--svh)); background: var(--ink); }
  .ph__bg, .ph__device, .ph__head { display: none; }
  .ph__film { opacity: 1; transform: none; }
  .ph__scrim { opacity: 1; }
  .ph__hero { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ph__hero-c > * { animation: none; }
}
/* Below 64rem the clip is display:none (below) so the phone never fetches
   23 MB; the poster carries the hero. */
@media (max-width: 64rem) {
  .ph__video { display: none; }
  .ph__film .hero__canvas { display: none; }
  .ph__hero { padding-bottom: 1.5rem; }
  .ph__hero-c { padding-block: 1rem 0; }
}
@media (max-width: 30rem) {
  .ph__hero-c > p { margin-top: 1rem; }
  .ph__cta { gap: 0.625rem; margin-top: 1.5rem; }
}
@media (max-width: 24rem) { .ph__cta { gap: 0.25rem 1.5rem; } }

/* ==========================================================================
   MARKETING MODULE
   One section in the normal page flow, straight under the theatre: a centred
   head, then one bento of five tiles that tells a single situation at a
   glance. Liget Hotel's October 23 long weekend is at 32% (Jelzés). The
   module writes the campaign (Kampány) for every channel (Csatornák), the
   owner approves it (Jóváhagyás), and it shows what came back (Eredmény).

   The markup's own state is the END of the story. With motion allowed,
   marketing.js adds .is-armed to every tile, which parks its keyframe
   animations below at their start, paused. When a tile is well in view it
   adds .is-play and that tile runs its few seconds; a tile that drops back
   below the viewport is re-armed. JS only types the text and counts the
   numbers. Everything else is the keyframes here, timed in seconds from the
   tile's .is-play.

   Type: the five tokens only.
   ========================================================================== */
.mk__head { text-align: center; }
.mk__pills { justify-content: center; margin-bottom: 1.25rem; }
.mk__pills .pill { --c: var(--mark-2); } /* one pill, the mark's middle layer */
/* the section's accent is its pill's layer, mint (user, 2026-09-23). Type
   that sat white on the old teal sits in deep water on mint instead. */
.mk {
  --accent: var(--mark-2);
  --accent-tint: color-mix(in oklab, var(--mark-2) 18%, #fff);
  --accent-ink: #17674a;
  --accent-on-ink: var(--mark-2-on-ink);
}
.mk .mk-btn:not(.mk-gob), .mk .mk-range__a, .mk .mk-d.is-flag { color: var(--mark-3); }
.mk .mk-d.is-flag { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.mk__head h2 { max-width: 13ch; margin-inline: auto; text-wrap: balance; }
.mk__head h2 span { color: var(--accent); }
.mk__head p { max-width: 42rem; margin: 1.5rem auto 0; text-wrap: pretty; }
.mk__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1.5rem; margin-top: clamp(2.5rem, 2rem + calc(2 * var(--vw)), 3.5rem); }

/* ---------- the bento ---------- */
.mk__bento {
  display: grid; gap: 1.25rem; margin-top: clamp(3rem, 2rem + calc(3 * var(--vw)), 5rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.mk-t--sig  { grid-column: 1 / 6;  grid-row: 1; }
.mk-t--mail { grid-column: 6 / 10; grid-row: 1 / 3; }
.mk-t--res  { grid-column: 10 / 13; grid-row: 1; }
.mk-t--ch   { grid-column: 1 / 6;  grid-row: 2; }
.mk-t--ok   { grid-column: 10 / 13; grid-row: 2; }

.mk-t {
  position: relative; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.5rem; border-radius: var(--radius-card); background: var(--band-1);
}
/* the head on top, the product at the bottom of every tile */
.mk-t__c + * { margin-top: auto; }
.mk-t__k { color: var(--ink-3); }
.mk-t__h { margin-top: 0.75rem; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: var(--fw-title); text-wrap: balance; }
.mk-t__p { margin-top: 0.6rem; max-width: 38ch; color: var(--ink-2); text-wrap: pretty; }

/* the one dark tile: the result */
.mk-t--res { background: var(--ink); color: #fff; }
.mk-t--res .mk-t__k { color: var(--on-ink-3); }

/* ---------- the product, at 1:1 ---------- */
.mk-ui { position: relative; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); box-shadow: var(--shadow-sm); }
.mk-ui__ch { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 22px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.mk-ui__ch > span:last-child:not(.mk-chip) { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.mk-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-ink); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }
.mk-chip--warn { background: var(--warn-tint); color: var(--warn); }
.mk-pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-weight: 560; white-space: nowrap; }
.mk-kv { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 8px 0; border-top: 1px solid var(--line); }
.mk-kv:first-child { border-top: 0; padding-top: 0; }
.mk-kv:last-child { padding-bottom: 0; }
.mk-kv span { color: var(--ink-2); white-space: nowrap; }
.mk-kv b { font-weight: 560; text-align: right; }

/* Jelzés — the month */
.mk-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 12px; color: var(--ink-3); text-align: center; }
.mk-wk i { font-style: normal; }
.mk-days { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 2.75rem; gap: 5px; margin-top: 6px; }
.mk-d {
  --tint: color-mix(in srgb, var(--accent) calc(var(--a) * 60%), #f3f6f6);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 5px 7px; border-radius: 8px; font-style: normal; line-height: 1;
  background: var(--tint); color: var(--ink);
}
.mk-d b { font-weight: 560; }
.mk-d em { align-self: flex-end; font-style: normal; font-family: var(--font-mono); letter-spacing: -0.02em; color: rgba(16, 19, 23, 0.62); }
.mk-d.is-wkd b { font-weight: 700; }
.mk-d.is-pad { background: none; }
/* the three nights: finished, they are full */
.mk-d.is-flag { --tint-b: color-mix(in srgb, var(--accent) calc(var(--b) * 100%), #f3f6f6); background: var(--tint-b); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.mk-d.is-flag em { color: inherit; font-weight: 600; }
/* absolutely positioned, so it takes the grid area as its box without
   taking the three nights' slots */
.mk-range { position: absolute; inset: -4px; grid-area: 4 / 4 / 5 / 7; border: 2px solid var(--accent); border-radius: 11px; pointer-events: none; }
.mk-range em { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 4px 9px; border-radius: var(--radius-pill); color: #fff; font-style: normal; font-weight: 600; line-height: 1; white-space: nowrap; }
.mk-range__w { background: var(--warn); opacity: 0; }
.mk-range__a { background: var(--accent); }
.mk-sig { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); }

/* Kampány — the proposal and the draft */
.mk-t--mail { gap: 0.75rem; }
.mk-t--mail .mk-t__c { margin-bottom: 0.75rem; }
.mk-t--mail .mk-t__c + * { margin-top: 0; }
.mk-mail { flex: 1; display: flex; flex-direction: column; }
.mk-mail .mk-mimg { flex: 1; min-height: 9rem; aspect-ratio: auto; }
.mk-subj { display: grid; gap: 3px; margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-subj > span { color: var(--ink-3); }
.mk-subj b { display: block; font-size: var(--fs-body); line-height: 1.3; font-weight: var(--fw-title); }
.mk-mimg { margin-top: 12px; aspect-ratio: 16 / 8; border-radius: 8px; overflow: hidden; }
.mk-mimg img, .mk-aimg img { width: 100%; height: 100%; object-fit: cover; }
.mk-hi { margin-top: 14px; font-size: var(--fs-body); font-weight: 560; }
.mk-hi mark { background: var(--accent-tint); color: var(--accent-ink); padding: 1px 4px; border-radius: 4px; }
.mk-txt { margin: 6px 0 16px; font-size: var(--fs-body); line-height: 1.45; color: var(--ink-2); }
.mk-mail .mk-btn { align-self: flex-start; }
/* the typing: the full text holds the space, the typed copy sits on it */
[data-type] { position: relative; }
.mk-ghost { visibility: hidden; }
.mk-typed { position: absolute; inset: 0; }
.is-typing .mk-typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--accent); }

/* Eredmény — on ink */
.mk-res { display: grid; gap: 14px; }
.mk-big { display: grid; gap: 4px; }
.mk-big b { font-size: var(--fs-display); line-height: 0.9; letter-spacing: var(--track-display); font-weight: var(--fw-display); color: var(--accent-on-ink); }
.mk-big span, .mk-num span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--on-ink-2); }
.mk-num { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--on-ink-line); }
.mk-num b { font-size: var(--fs-title); line-height: 1.05; letter-spacing: var(--track-title); font-weight: var(--fw-title); white-space: nowrap; }
.mk-mix { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--on-ink-line); }
.mk-bar { display: flex; gap: 3px; height: 8px; }
.mk-bar i { width: var(--w); border-radius: 4px; background: var(--accent-on-ink); }
.mk-bar i:nth-child(2) { background: var(--mark-1-on-ink); }
.mk-bar i:nth-child(3) { background: var(--on-ink-3); }
.mk-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--on-ink-2); }
.mk-leg i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.mk-leg i::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-on-ink); }
.mk-leg i:nth-child(2)::before { background: var(--mark-1-on-ink); }
.mk-leg i:nth-child(3)::before { background: var(--on-ink-3); }

/* Csatornák — the three assets */
.mk-assets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-asset { padding: 12px; }
.mk-aimg { margin-top: 10px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.mk-when { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; color: var(--ink-2); white-space: nowrap; }
.mk-st { display: grid; font-style: normal; }
.mk-st em { grid-area: 1 / 1; justify-self: end; font-style: normal; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); }
.mk-st em:first-child { background: #eef1f2; color: var(--ink-2); opacity: 0; }
.mk-st em + em { background: var(--ok-tint); color: var(--ok); }

/* Jóváhagyás — the button, the pointer, the toast */
.mk-approve { display: grid; gap: 12px; }
.mk-go { position: relative; display: grid; }
.mk-gob { display: grid; width: 100%; height: 44px; background: var(--ok); }
.mk-gob em { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-style: normal; font-size: var(--fs-body); }
.mk-gob em:first-child { opacity: 0; }
.mk-gob svg { width: 13px; height: 13px; }
.mk-cursor { position: absolute; left: 62%; top: 55%; width: 20px; height: 24px; pointer-events: none; opacity: 0; filter: drop-shadow(0 2px 3px rgba(16, 19, 23, 0.25)); }
.mk-edit { justify-self: center; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.mk-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--ink); color: var(--on-ink-2); font-size: var(--fs-small); line-height: 1.3; box-shadow: 0 16px 36px -14px rgba(16, 19, 23, 0.5); }
.mk-toast b { display: block; color: #fff; font-weight: 600; }
.mk-tick { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mark-2); }
.mk-tick::after { content: ""; position: absolute; inset: 0; background: var(--ink); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 60% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 60% no-repeat; }

/* ---------- smaller screens: the same tiles, restacked ----------
   Not on a mouse desktop above 64rem: that one is zoomed (site.css) and
   lays out wider than 80rem, so it keeps the wide bento. */
@media (max-width: 80rem) and (hover: none), (max-width: 80rem) and (pointer: coarse), (max-width: 64rem) {
  .mk-t--sig  { grid-column: 1 / 8; grid-row: 1; }
  .mk-t--res  { grid-column: 8 / 13; grid-row: 1; }
  .mk-t--mail { grid-column: 1 / 7; grid-row: 2 / 4; }
  .mk-t--ch   { grid-column: 7 / 13; grid-row: 2; }
  .mk-t--ok   { grid-column: 7 / 13; grid-row: 3; }
}
@media (max-width: 48rem) {
  .mk__bento { grid-template-columns: minmax(0, 1fr); }
  .mk-mail .mk-mimg { flex: none; aspect-ratio: 16 / 8; min-height: 0; }
  .mk-t--sig, .mk-t--res, .mk-t--mail, .mk-t--ch, .mk-t--ok { grid-column: 1; grid-row: auto; }
  .mk-t { padding: 1.25rem; }
}
@media (max-width: 26rem) {
  .mk-days { grid-auto-rows: 2.4rem; gap: 4px; }
  .mk-d { padding: 4px 5px; }
  .mk-assets { gap: 6px; }
  .mk-asset { padding: 8px; }
  .mk-when span { display: none; }
}

/* ==========================================================================
   THE PLAY: armed = every animation parked at its start; play = run.
   Each tile has its own clock, started when that tile is in view, so no
   beat plays below the fold. Seconds from its .is-play:
     Jelzés      0–0.8 the month builds · 1.0 the weak nights are flagged ·
                 3.7 they fill (JS counts the percentages)
     Kampány     0.3 the proposal · 0.7 the subject types · 1.6 the body ·
                 3.1 the button
     Eredmény    0.5 the numbers count (JS) · 0.9 the channel bar grows
     Csatornák   0.1 the three assets · 1.3 every status turns
     Jóváhagyás  0.4 the pointer travels · 1.8 the click · 2.1 the toast
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .mk-t.is-armed .mk-a { animation: mk-in 0.7s var(--ease-out) var(--d, 0s) both paused; }
  .mk-t--sig.is-armed .mk-d:not(.is-pad) { animation: mk-cell 0.5s var(--ease-out) calc(var(--n) * 22ms) both paused; }
  .mk-t--sig.is-armed .mk-d.is-flag {
    animation: mk-cell 0.5s var(--ease-out) calc(var(--n) * 22ms) both paused,
               mk-flag 3.6s linear calc(1s + var(--j) * 80ms) both paused;
  }
  .mk-t.is-armed .mk-range { animation: mk-range 3.8s linear 1s both paused; }
  .mk-t.is-armed .mk-range__w { animation: mk-lab-w 3.8s linear 1s both paused; }
  .mk-t.is-armed .mk-range__a { animation: mk-lab-a 3.8s linear 1s both paused; }
  .mk-t.is-armed .mk-sig { animation: mk-in 0.6s var(--ease-out) 1.3s both paused; }
  .mk-t.is-armed .mk-pulse { animation: mk-pulse 0.9s var(--ease-settle) infinite alternate paused; }
  .mk-t.is-armed .mk-st em:first-child { animation: mk-out 0.3s var(--ease-settle) var(--d) both paused; }
  .mk-t.is-armed .mk-st em:last-child { animation: mk-pop 0.4s var(--ease-out) var(--d) both paused; }
  .mk-t.is-armed .mk-cursor { animation: mk-cursor 2.2s var(--ease-settle) 0.4s both paused; }
  .mk-t.is-armed .mk-gob { animation: mk-press 0.3s var(--ease-settle) 1.7s both paused, mk-okbg 0.35s var(--ease-settle) 1.85s both paused; }
  .mk-t.is-armed .mk-gob em:first-child { animation: mk-out 0.25s var(--ease-settle) 1.85s both paused; }
  .mk-t.is-armed .mk-gob em:last-child { animation: mk-pop 0.35s var(--ease-out) 1.85s both paused; }
  .mk-t.is-armed .mk-bar { animation: mk-bar 1s var(--ease-out) 0.9s both paused; }
  .mk-t.is-armed .mk-leg { animation: mk-in 0.6s var(--ease-out) 1.3s both paused; }
  .mk-t.is-play *, .mk-t.is-play { animation-play-state: running !important; }
}
@keyframes mk-in { from { opacity: 0; translate: 0 12px; } }
@keyframes mk-cell { from { opacity: 0; scale: 0.7; } }
@keyframes mk-flag {
  0% { background: var(--tint); color: var(--ink); box-shadow: inset 0 0 0 0 transparent; }
  7%, 76% { background: var(--warn-tint); color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); }
  88%, 100% { background: var(--tint-b); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
}
@keyframes mk-range {
  0% { opacity: 0; scale: 1.08; border-color: var(--warn); }
  7%, 76% { opacity: 1; scale: 1; border-color: var(--warn); }
  88%, 100% { opacity: 1; scale: 1; border-color: var(--accent); }
}
@keyframes mk-lab-w { 0% { opacity: 0; } 7%, 76% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes mk-lab-a { 0%, 80% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes mk-pulse { from { opacity: 1; } to { opacity: 0.2; } }
@keyframes mk-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mk-pop { from { opacity: 0; scale: 0.85; } }
@keyframes mk-cursor {
  0% { opacity: 0; translate: -170px -120px; scale: 1; }
  12% { opacity: 1; }
  58% { translate: 0 0; scale: 1; }
  64% { scale: 0.8; }
  72% { scale: 1; }
  86% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 6px 8px; }
}
@keyframes mk-press { 50% { scale: 0.95; } }
@keyframes mk-okbg { from { background: var(--accent); } }
@keyframes mk-bar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }