/* ============================================================================
   irua.app HOME page — v3, 2026-09-24.

   The owner explored a redesign on the layout language of the ThemeForest
   "Fexo" IT template (dark hero, pill buttons, line-and-dot eyebrows, a tabbed
   capability panel, overlapping photo cards, a frosted "how it works" band, a
   dark card leading a row of message cards, a split FAQ, a dark footer), drawn
   in HIS palette, approved it as a Claude Design canvas, and asked for it live.

   Loaded ONLY by landing/index.html and landing/index.en.html, AFTER
   landing-v2.css — which still owns the shared nav / drawer / footer partials,
   the calculator's base styles, the reveal system and the reduced-motion
   block. Every rule below is scoped to body.home or to an .h-* class that only
   the two home pages use, so the 32 solution pages sharing landing-v2.css
   cannot be touched by this file.

   ⚠️ THE COLOURS ARE THE OWNER'S — same rule as landing-v2.css's header. The
   white labels on #E1586F pills are 3.6:1 and the white copy on the closing
   coral→amber band is below AA; both are his decision, not an oversight.

   ⚠️ Served immutable like every /assets file: any edit needs a NEW ?v= on the
   <link> in BOTH home pages, and the CSS must reach the origin BEFORE the HTML.
   ========================================================================== */

.home {
  --hwrap: 1200px;
  --hpad: 40px;
  --r-sheet: 40px;
  --r-media: 28px;
  --sh-soft: 0 30px 60px -34px rgba(20, 22, 27, .38);
  --wa-btn: #1ea7c5;   /* WhatsApp's button blue, as the app's own .wam-btn */
}

.h-wrap { max-width: calc(var(--hwrap) + 2 * var(--hpad)); margin: 0 auto; padding-inline: var(--hpad); }
.h-wrap.wide { max-width: calc(1240px + 2 * var(--hpad)); }

/* ── type ────────────────────────────────────────────────────────────────── */
.h-h2 {
  font-family: var(--font-h); font-weight: 500; font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.18; letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.h-h2 > span { display: block; }
.h-lead { font-size: 18px; line-height: 1.7; color: var(--body); max-width: 60ch; text-wrap: pretty; }
.h-head { margin-bottom: 60px; }
.h-head .h-lead { margin-top: 18px; }
.h-head.center { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* The line-and-dot eyebrow. The dot sits at the END of the line, against the
   label, so it is drawn per direction. */
.h-ey {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-family: var(--font-h); font-weight: 600; font-size: 16px; color: var(--coral);
}
.h-ey::before {
  content: ""; flex: none; width: 64px; height: 8px;
  background:
    radial-gradient(circle at calc(100% - 4px) 50%, var(--coral) 3.4px, transparent 4px),
    linear-gradient(var(--coral), var(--coral)) left center / calc(100% - 8px) 2px no-repeat;
}
[dir="rtl"] .h-ey::before {
  background:
    radial-gradient(circle at 4px 50%, var(--coral) 3.4px, transparent 4px),
    linear-gradient(var(--coral), var(--coral)) right center / calc(100% - 8px) 2px no-repeat;
}
.h-head.center .h-ey { justify-content: center; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 30px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--font-h); font-weight: 500; font-size: 17px; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.h-btn svg { width: 18px; height: 18px; flex: none; }
.h-btn-coral { background: var(--coral); color: #fff; box-shadow: 0 14px 34px -16px rgba(225, 88, 111, .75); }
.h-btn-coral:hover { color: #fff; box-shadow: 0 20px 44px -14px rgba(225, 88, 111, .9); transform: translateY(-1px); }
.h-btn-ghost { border-color: rgba(255, 255, 255, .38); color: #fff; background: transparent; }
.h-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); color: #fff; }
.h-btn-ink { background: var(--ink); color: #fff; }
.h-btn-ink:hover { color: #fff; transform: translateY(-2px); }
.h-btn-ongrad { border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent; }
.h-btn-ongrad:hover { background: rgba(255, 255, 255, .15); color: #fff; }

/* One "read more" style on the whole page: coral, forward arrow. */
.h-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-weight: 500; font-size: 16px; color: var(--coral);
  transition: gap .2s;
}
.h-more svg { width: 16px; height: 16px; flex: none; }
.h-more:hover { gap: 12px; color: var(--coral); }

/* Coral tick bullets. The tick is a data-URI so a list stays a plain <ul>. */
.h-checks { display: flex; flex-direction: column; gap: 14px; }
.h-checks.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.h-checks li { display: flex; align-items: center; gap: 12px; font-family: var(--font-h); font-weight: 500; font-size: 16px; color: var(--ink); }
.h-checks li::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.h-checks.on-dark li { color: #fff; }

.h-photo { border-radius: var(--r-media); overflow: hidden; background: var(--surface); }
.h-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The owner's photos (2026-09-24) are 4:3 originals that every slot crops, and
   the crop changes with the breakpoint, so each photo says which part of the
   frame to keep. Physical percentages on purpose: a photo never mirrors in RTL. */
.h-about-photo img { object-position: 60% 50%; }
.h-aud-card img[src*="/aud-conf."] { object-position: 85% 50%; }
.h-aud-card img[src*="/aud-corp."] { object-position: 80% 50%; }

/* Every dark surface this page adds flips the focus ring, or it lands at
   1.1:1 on ink (landing-v2.css has the same list for its own dark blocks). */
.h-hero :focus-visible, .h-band :focus-visible, .h-ent :focus-visible,
.h-msg-lead :focus-visible, .h-faq-note :focus-visible, .h-cap-tab:focus-visible,
.home > footer :focus-visible, .home .nav:not(.past-hero) :focus-visible { outline-color: #fff; }

/* ── NAV over the hero ───────────────────────────────────────────────────────
   The shared partial is untouched. On this page the bar floats over the ink
   hero (the hero starts under it), and turns back into the site's white bar
   once the hero has scrolled away — .past-hero is set by the page script. */
.home .nav { margin-bottom: -68px; transition: background-color .25s, border-color .25s; }
.home .nav:not(.past-hero) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.home .nav:not(.past-hero) .nav-links a,
.home .nav:not(.past-hero) .lang-dd > summary { color: rgba(255, 255, 255, .88); }
.home .nav:not(.past-hero) .nav-links a:hover,
.home .nav:not(.past-hero) .lang-dd > summary:hover { color: #fff; }
.home .nav:not(.past-hero) .lang-dd > summary:hover { border-color: rgba(255, 255, 255, .25); }
.home .nav:not(.past-hero) .nav-burger { color: #fff; border-color: rgba(255, 255, 255, .28); }
.home .nav .btn-brand { background: var(--coral); border-radius: 999px; padding: 11px 22px; font-weight: 500; font-size: 15px; }
.home .nav .btn-brand:hover { background: var(--ink); }
.home .nav:not(.past-hero) .btn-brand:hover { background: #fff; color: var(--ink); }
.home .nav .btn-ghost-dark { border-radius: 999px; padding: 10px 18px; font-weight: 500; font-size: 15px; }
.home .nav:not(.past-hero) .btn-ghost-dark { background: transparent; border-color: transparent; color: #fff; }
.home .nav:not(.past-hero) .btn-ghost-dark:hover { border-color: rgba(255, 255, 255, .35); color: #fff; }
.home .nav.past-hero { background: rgba(255, 255, 255, .9); }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.h-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: #fff;
  padding: calc(68px + 76px) 0 116px;
}
.h-hero-tex { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.h-hero-title { font-family: var(--font-h); margin: 0; }
.h-kicker { display: flex; align-items: center; gap: 24px; font-weight: 300; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.1; }
.h-kicker::before { content: ""; flex: none; width: clamp(44px, 8vw, 120px); height: 2px; background: #fff; }
.h-main { display: block; margin-top: 14px; font-weight: 700; font-size: clamp(48px, 8.6vw, 124px); line-height: 1.02; letter-spacing: -.025em; }
.h-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 32px; align-items: start; }
.h-hero-sub { font-size: 20px; line-height: 1.65; color: rgba(255, 255, 255, .76); max-width: 30em; text-wrap: pretty; }
.h-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.h-hero-micro { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, .66); }
.h-meta {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; margin-top: 30px; padding: 0 18px;
  border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-h); font-weight: 500; font-size: 13px; letter-spacing: .08em;
}
.h-meta svg { width: 16px; height: 16px; color: var(--coral); flex: none; }

/* The visual carries its own ink: a hero-wide white would wash out the card. */
.h-hero-visual { position: relative; margin-top: 40px; color: var(--ink); }
.h-hero-photo { aspect-ratio: 1.5; }

/* The hero slideshow (owner, 2026-09-24). Only rendered with two or more
   pictures; one picture stays the plain photo above.
   The incoming slide fades in ON TOP of the outgoing one, which stays opaque
   underneath (.is-prev) until the fade ends: fading both at once dips the
   picture to the ink behind it halfway through. The shown slide also settles
   from a slight zoom over its time on screen.
   ⚠️ --h-dwell must equal DWELL in the home script (inline in landing/index*.html
   and wp-theme/irua/assets/landing-home.js): the progress bar is CSS, the
   timer is JS. */
/* isolation: the slides' z-index must stay INSIDE the photo. Without it they
   paint over the hero's check-in card and badge, which sit above the photo
   with z-index auto (measured 2026-09-24). */
.h-slides { position: relative; isolation: isolate; --h-dwell: 6s; }
.h-slides .h-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: none; }
.h-slides .h-slide.is-prev { z-index: 1; opacity: 1; transform: scale(1); }
.h-slides .h-slide.is-on {
  z-index: 2; opacity: 1; transform: scale(1);
  transition: opacity 1.1s ease, transform calc(var(--h-dwell) + 1.5s) cubic-bezier(.25, .6, .3, 1);
}
.h-slide-ctl {
  position: absolute; z-index: 3; top: 14px; inset-inline-start: 14px;
  display: flex; align-items: center; gap: 2px; padding: 4px; padding-inline-end: 8px;
  border-radius: 999px; background: rgba(20, 22, 27, .5); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.h-slide-play {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
}
.h-slide-play:hover { background: rgba(255, 255, 255, .28); }
.h-slide-play svg { width: 14px; height: 14px; }
.h-slide-play .i-play, .h-slides.is-stopped .h-slide-play .i-pause { display: none; }
.h-slides.is-stopped .h-slide-play .i-play { display: block; }
/* A 32px-tall hit area around a 3px bar. */
.h-slide-dot { position: relative; flex: none; width: 26px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.h-slide-dot[aria-current="true"] { width: 40px; }
.h-slide-dot i {
  position: absolute; inset-inline: 5px; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: 3px; background: rgba(255, 255, 255, .42); overflow: hidden;
}
.h-slide-dot:hover i { background: rgba(255, 255, 255, .7); }
.h-slide-dot[aria-current="true"] i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff;
  transform-origin: left center; animation: h-fill var(--h-dwell) linear forwards;
}
[dir="rtl"] .h-slide-dot[aria-current="true"] i::after { transform-origin: right center; }
.h-slides.is-paused .h-slide-dot[aria-current="true"] i::after { animation-play-state: paused; }
.h-slides.is-stopped .h-slide-dot[aria-current="true"] i::after { animation: none; }
@keyframes h-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.h-badge {
  position: absolute; top: 30%; inset-inline-start: -80px; width: 148px; height: 148px;
  border-radius: 50%; background: var(--ink); border: 6px solid var(--ink);
  display: grid; place-items: center; box-sizing: content-box;
}
.h-badge .spin { position: absolute; inset: 6px; width: 136px; height: 136px; animation: h-spin 26s linear infinite; }
.h-badge-core { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; color: #fff; }
.h-badge-core svg { width: 26px; height: 26px; }
@keyframes h-spin { to { transform: rotate(360deg); } }
.h-live {
  position: absolute; inset-inline-end: -44px; bottom: -40px; width: 250px;
  padding: 18px 22px 20px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -30px rgba(20, 22, 27, .45);
}
.h-live-top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.h-live-top b { font-weight: 600; }
.h-live-top span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); }
.h-live-top span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.h-live-num { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.h-live-num b { font-family: var(--font-h); font-weight: 600; font-size: 34px; line-height: 1; }
.h-live-num span { font-size: 15px; color: var(--body); }
.h-live-bar { height: 6px; margin-top: 14px; border-radius: 999px; background: #F1EEE9; overflow: hidden; }
.h-live-bar i { display: block; width: 76%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber), var(--coral)); }
[dir="rtl"] .h-live-bar i { background: linear-gradient(270deg, var(--amber), var(--coral)); }

/* ── SECTION SHELLS ──────────────────────────────────────────────────────── */
.h-sec { padding: 136px 0 130px; }
.h-sheet { margin: 0 24px; padding: 112px 0 100px; border-radius: var(--r-sheet); background: var(--surface); }

/* ── PLATFORM (about) ────────────────────────────────────────────────────── */
.h-about-grid { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 96px; align-items: center; }
.h-about-media { position: relative; }
.h-about-photo { height: 600px; }
.h-stat {
  position: absolute; inset-inline-start: -64px; bottom: 64px; width: 236px;
  padding: 18px 20px 20px; border-radius: 20px; background: #fff; box-shadow: var(--sh-soft);
}
.h-stat b.t { display: block; font-weight: 600; font-size: 14px; }
.h-stat-num { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.h-stat-num b { font-family: var(--font-h); font-weight: 600; font-size: 30px; line-height: 1; }
.h-stat-num span { font-size: 14px; color: var(--body); }
.h-bars { display: flex; align-items: flex-end; gap: 7px; height: 58px; margin-top: 16px; }
.h-bars i { flex: 1; border-radius: 4px; background: var(--coral-tint); }
.h-bars i:nth-child(4), .h-bars i:nth-child(5) { background: #F6C9D0; }
.h-bars i:nth-child(6) { background: #EFA0AD; }
.h-bars i:last-child { background: var(--coral); }

.h-seg { display: inline-flex; gap: 6px; margin-top: 34px; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.h-seg button {
  height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink);
  font-family: var(--font-h); font-weight: 500; font-size: 16px; cursor: pointer; transition: background-color .2s, color .2s;
  touch-action: manipulation;
}
.h-seg button:hover { color: var(--coral); }
.h-seg button[aria-selected="true"] { background: var(--coral); color: #fff; }
.h-phase > p { margin-top: 28px; max-width: 560px; font-size: 18px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.h-phase .h-checks { margin-top: 26px; max-width: 560px; }
.h-about-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px; margin-top: 44px; }
.h-help { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.h-help svg { width: 40px; height: 40px; flex: none; }
.h-help small { display: block; font-size: 15px; color: var(--body); }
.h-help b { display: block; font-family: var(--font-h); font-weight: 600; font-size: 17px; }
.h-help:hover b { color: var(--coral); }

/* ── CAPABILITIES: dark list | white detail | visual ─────────────────────────
   One grid, tabs and panels interleaved in the DOM (tab, its panel, next tab…)
   so the SAME markup reads as an accordion on a phone. On a wide screen every
   tab is placed in column 1 and every panel in column 2 across all rows; only
   the open panel is rendered. The last row is 1fr so a tall panel's extra
   height lands there instead of spreading the tabs apart. */
.h-caps-box {
  position: relative; display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  grid-template-rows: 30px repeat(7, auto) 1fr 30px;
}
.h-caps-bg { grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 2; border-radius: var(--r-media); background: var(--ink); }
.h-cap-tab {
  grid-column: 1; grid-row: var(--r); position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px; margin: 3px 30px; padding: 0 22px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255, 255, 255, .86); cursor: pointer; text-align: start;
  font-family: var(--font-h); font-weight: 500; font-size: 20px; line-height: 1.25;
  transition: background-color .2s, color .2s; touch-action: manipulation;
}
.h-cap-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.h-cap-tab[aria-expanded="true"] { background: var(--coral); color: #fff; padding-inline-end: 5px; }
.h-cap-arrow { display: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); place-items: center; flex: none; transition: transform .2s; }
.h-cap-arrow svg { width: 20px; height: 20px; }
.h-cap-arrow .ic-chev { display: none; }
.h-cap-tab[aria-expanded="true"] .h-cap-arrow { display: grid; }
.h-cap-panel { grid-column: 2; grid-row: 1 / -1; position: relative; z-index: 1; display: flex; min-height: 540px; margin-inline-start: -40px; }
.h-cap-text { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; padding-block: 48px 44px; padding-inline: 84px 80px; }
.h-cap-text h3 { font-family: var(--font-h); font-weight: 600; font-size: 22px; line-height: 1.45; }
.h-cap-text > p { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.h-cap-text hr { border: 0; height: 1px; background: var(--line); margin: 28px 0; }
.h-cap-text .h-checks li { font-family: var(--font-b); font-weight: 400; font-size: 16.5px; }
.h-cap-text .h-more { margin-top: 32px; align-self: flex-start; }
.h-cap-visual { position: relative; z-index: 2; flex: 0 0 440px; margin-inline-start: -40px; border-radius: var(--r-media); overflow: hidden; background: var(--grad-135); }
.h-cap-visual img {
  position: absolute; top: 56px; inset-inline-start: 40px; width: 620px; max-width: none; height: auto;
  border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(20, 22, 27, .5);
}
.h-cap-visual.photo img { position: static; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }

.h-types { display: flex; flex-direction: column; align-items: center; margin-top: 88px; text-align: center; }
.h-types h3 { font-family: var(--font-h); font-weight: 500; font-size: 24px; }
.h-dotline { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.h-dotline::before, .h-dotline::after { content: ""; width: 110px; height: 1px; background: var(--line-strong); }
.h-dotline i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.h-types ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 42px; margin-top: 30px; font-family: var(--font-h); font-weight: 500; font-size: 22px; color: var(--nav-ink); }
.h-types a, .h-types span { display: inline-block; padding-block: 4px; color: var(--nav-ink); }
.h-types a:hover { color: var(--coral); }

/* ── DETAILS (three cards) ───────────────────────────────────────────────── */
.h-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.h-dcard { display: flex; flex-direction: column; }
.h-dvis { position: relative; height: 230px; border-radius: var(--r-media); overflow: hidden; display: grid; place-items: center; }
.h-dcard h3 { margin-top: 26px; font-family: var(--font-h); font-weight: 600; font-size: 22px; line-height: 1.35; text-wrap: balance; }
.h-dcard > p { margin-top: 10px; font-size: 16.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.h-dcard .h-more { margin-top: 16px; align-self: flex-start; }

.h-dvis-sess { background: var(--coral-tint); }
.h-sess { display: flex; flex-direction: column; gap: 8px; width: min(300px, 82%); }
.h-sess-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px -14px rgba(20, 22, 27, .3); font-family: var(--font-h); font-weight: 500; font-size: 15px; }
.h-sess-row span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--green-tint); color: var(--green); font-size: 13px; }
.h-sess-qr { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-family: var(--font-h); font-weight: 500; font-size: 14px; color: var(--coral); }
.h-sess-qr svg { width: 18px; height: 18px; }

.h-dvis-lang { background: var(--ink); }
.h-lang { height: 132px; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); }
.h-lang ul { display: flex; flex-direction: column; animation: langroll 12s linear infinite; }
.h-lang li { height: 44px; display: grid; place-items: center; font-family: var(--font-h); font-weight: 500; font-size: 22px; color: #fff; }

.h-dvis-wallet { background: var(--surface); border: 1px solid var(--line); gap: 12px; align-content: center; }
.h-dvis-wallet img { display: block; height: 46px; width: auto; }

/* ── CHECK-IN ────────────────────────────────────────────────────────────── */
.h-split { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 100px; align-items: center; }
.h-ck-media { position: relative; height: 640px; }
.h-ck-photo { position: absolute; top: 0; inset-inline-start: 0; width: 360px; height: 460px; }
.h-ck-shot {
  position: absolute; top: 116px; inset-inline-end: 0; width: 290px; height: 340px;
  border-radius: var(--r-media); overflow: hidden; border: 8px solid #fff; background: var(--surface);
  box-shadow: var(--sh-soft);
}
.h-ck-shot img { display: block; width: 100%; height: auto; }
.h-ck-stat { position: absolute; top: 500px; inset-inline-start: 0; display: flex; align-items: center; gap: 14px; }
.h-ck-stat b { font-family: var(--font-h); font-weight: 600; font-size: 80px; line-height: 1; }
.h-ck-stat span { font-size: 18px; line-height: 1.35; color: var(--nav-ink); }
.h-ck-stat span > span { display: block; }
.h-ck-copy .h-lead { margin-top: 22px; }
.h-feats { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }
.h-feats li { display: grid; grid-template-columns: 56px 170px 1px minmax(0, 1fr); gap: 22px; align-items: center; }
.h-feats .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--coral-tint); color: var(--coral); display: grid; place-items: center; }
.h-feats .ic svg { width: 24px; height: 24px; }
.h-feats h3 { font-family: var(--font-h); font-weight: 500; font-size: 19px; }
.h-feats .bar { height: 52px; background: var(--line); }
.h-feats p { font-size: 16px; line-height: 1.6; color: var(--body); }
.h-ck-copy hr { border: 0; height: 1px; background: var(--line); margin: 40px 0 26px; }

/* ── HOW IT WORKS (photo band, frosted cards) ────────────────────────────── */
.h-band { position: relative; isolation: isolate; overflow: hidden; margin: 0 24px; padding: 112px 0 120px; border-radius: var(--r-sheet); background: var(--ink); color: #fff; }
.h-band-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.h-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 22, 27, .88), rgba(20, 22, 27, .8)); }
.h-band .h-h2 { color: #fff; }
.h-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 60px 0 0; padding: 0; list-style: none; }
.h-step {
  position: relative; padding: 32px 28px 34px; border-radius: 24px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
@media (prefers-reduced-transparency: reduce) { .h-step { background: #2A2D35; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.h-step-n { position: absolute; top: 30px; inset-inline-end: 28px; font-family: var(--font-h); font-weight: 600; font-size: 15px; letter-spacing: .06em; color: var(--amber); }
.h-step > svg { width: 40px; height: 40px; color: #fff; display: block; }
.h-step h3 { margin-top: 44px; font-family: var(--font-h); font-weight: 500; font-size: 22px; color: #fff; }
.h-step p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .8); }

/* ── AUDIENCE (+ the enterprise card, #enterprise) ───────────────────────── */
.h-aud-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.h-aud-card { position: relative; display: block; padding-bottom: 80px; color: var(--ink); }
.h-aud-card .h-photo { height: 390px; }
.h-aud-card .h-photo img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.h-aud-card:hover .h-photo img { transform: scale(1.04); }
.h-aud-cap {
  position: absolute; inset-inline: 20px; bottom: 0; padding: 22px 20px 16px; border-radius: 22px;
  background: #fff; box-shadow: 0 24px 50px -30px rgba(20, 22, 27, .35); text-align: center;
}
.h-aud-cap small { display: block; font-size: 15px; color: var(--body); }
.h-aud-cap h3 { margin-top: 6px; font-family: var(--font-h); font-weight: 600; font-size: 19px; }
.h-aud-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line); font-family: var(--font-h); font-weight: 500; font-size: 15px; color: var(--coral);
}
.h-aud-more svg { width: 15px; height: 15px; }
.h-ent { display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: var(--r-media); background: var(--ink); color: #fff; scroll-margin-top: 100px; }
.h-ent h3 { font-family: var(--font-h); font-weight: 600; font-size: 22px; }
.h-ent > p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.h-ent ul { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.h-ent li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; }
.h-ent li::before {
  content: ""; grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.h-ent li b { font-family: var(--font-h); font-weight: 500; font-size: 16px; }
.h-ent li span { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .66); }
.h-ent .h-more { margin-top: auto; padding-top: 20px; align-self: flex-start; }

/* ── PRICING ─────────────────────────────────────────────────────────────── */
.h-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 80px; align-items: start; }
.h-price-copy .h-lead { margin-top: 20px; }
.h-free-label { margin-top: 36px; font-family: var(--font-h); font-weight: 600; font-size: 16px; }
.h-free { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 18px; }
.h-free li { display: flex; align-items: center; gap: 14px; font-family: var(--font-h); font-weight: 500; font-size: 17px; }
.h-free .ic { width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px -14px rgba(20, 22, 27, .3); color: var(--coral); display: grid; place-items: center; }
.h-free .ic svg { width: 20px; height: 20px; }
.h-price-card { margin-top: 40px; padding: 28px 32px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.h-prices { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 32px; align-items: center; }
.h-prices.one { grid-template-columns: minmax(0, 1fr); }
.h-prices .bar { align-self: stretch; background: var(--line); }
.h-price .num-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.h-price .num { font-family: var(--font-h); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.h-price .per { font-size: 16px; color: var(--body); }
.h-price .what { display: block; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--nav-ink); }
.h-price-fine { margin-top: 20px; font-size: 13.5px; line-height: 1.6; color: var(--body); }

/* The calculator keeps its markup, ids and script verbatim (the self-test
   evaluates that block out of both files); only its skin changes here. */
.home .calc { border: 0; border-radius: var(--r-media); padding: 36px; box-shadow: 0 30px 70px -40px rgba(20, 22, 27, .32); }
.home .calc-head { margin-bottom: 18px; }
.home .calc-head .ic { display: none; }
.home .calc-head h3 { font-weight: 600; font-size: 24px; letter-spacing: 0; }
.home .calc-preset { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); font-family: var(--font-h); font-weight: 500; font-size: 14px; }
.home .calc-nums { gap: 14px; }
.home .calc-field > label { font-family: var(--font-h); font-weight: 500; font-size: 15px; }
.home .calc-field input {
  max-width: none; height: 54px; padding: 0 22px; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong);
  font-family: var(--font-h); font-weight: 500; font-size: 18px; text-align: start;
}
.home .calc-field input:focus { outline: 2px solid var(--coral); outline-offset: 2px; border-color: var(--coral); }
.home .calc-hint { font-size: 13px; line-height: 1.45; }
.home .calc-checks { gap: 2px; margin-bottom: 20px; }
.home .calc-check { background: transparent; border: 0; border-radius: 0; padding: 9px 0; font-size: 16px; }
.home .calc-check .sw { width: 44px; height: 26px; }
.home .calc-check .sw::after { width: 20px; height: 20px; }
.home .calc-check input:checked ~ .sw { background: var(--coral); }
.home .calc-check input:checked ~ .sw::after { inset-inline-start: 21px; }
.home #calcHeadsWrap { padding-inline-start: 0; margin-top: 6px; }
.home #calcHeadsWrap input { max-width: 200px; font-size: 17px; }
.home .calc-lines { font-size: 14px; }
.home .calc-lines .li-tx i, .home .calc-lines b { font-family: var(--font-h); }
.home .calc-total { margin-top: 18px; padding: 18px 22px; border: 0; border-radius: 20px; background: var(--surface); align-items: center; }
.home .calc-total > span { font-family: var(--font-h); font-weight: 500; font-size: 16px; }
.home .calc-total b { color: var(--ink); font-size: 36px; font-weight: 700; }
.home .calc-note { font-family: var(--font-b); font-size: 13px; }
.home .calc-cta { display: inline-flex; align-items: center; height: 56px; margin-top: 22px; padding: 0 30px; border-radius: 999px; background: var(--coral); font-weight: 500; font-size: 17px; box-shadow: 0 14px 34px -16px rgba(225, 88, 111, .75); }
.home .calc-cta:hover { background: var(--ink); }
/* landing-v2 whitens this ring for its ink button; on the white card it would vanish. */
.home .calc-cta:focus-visible { outline-color: var(--ink); }
.home .calc-cta-note { text-align: start; font-family: var(--font-b); font-size: 13.5px; }

/* ── MESSAGES (WhatsApp previews in a carousel) ──────────────────────────── */
/* ⚠️ `contain: paint` on the row is LOAD-BEARING (measured 2026-09-24).
   In a dir=rtl page the cards overflow a scroll container to the LEFT, and
   phone Chrome counted that overflow into the layout viewport: 1291px of
   layout at a 390px screen, scrolled sideways, nav off to the right. Neither
   overflow-x:clip on the root nor on this section nor overflow:hidden on the
   row changed it; paint containment on the row (or dir=ltr) did. */
.h-msgs { overflow-x: clip; }
.h-msgs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.h-msgs-head .h-lead { margin-top: 18px; }
.h-car-nav { display: flex; gap: 10px; flex: none; }
.h-car-nav button {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; touch-action: manipulation;
}
.h-car-nav button svg { width: 20px; height: 20px; }
.h-car-nav button:hover { border-color: var(--coral); color: var(--coral); }
.h-car-nav button:disabled { opacity: .35; cursor: default; border-color: var(--line-strong); color: var(--ink); }
/* The arrow glyph points left: forward in RTL, back in LTR. */
[dir="rtl"] .h-car-nav .prev svg, [dir="ltr"] .h-car-nav .next svg { transform: scaleX(-1); }
.h-msg-row {
  display: flex; gap: 20px; margin-top: 56px; padding-block: 4px 44px; margin-block-end: -44px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  contain: paint;
  scrollbar-width: none;
  /* Bleeds to the viewport edge at the END side (Fexo's carousel peek), with
     matching padding so the last card can still scroll fully into view. */
  margin-inline-end: calc(50% - 50vw); padding-inline-end: calc(50vw - 50%);
}
.h-msg-row::-webkit-scrollbar { display: none; }
.h-msg-lead, .h-msg { scroll-snap-align: start; }
.h-msg-lead { flex: 0 0 262px; display: flex; flex-direction: column; padding: 32px 26px 28px; border-radius: var(--r-media); background: var(--ink); color: #fff; }
.h-msg-lead h3 { font-family: var(--font-h); font-weight: 600; font-size: 22px; }
.h-msg-count { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.h-msg-count b { font-family: var(--font-h); font-weight: 600; font-size: 60px; line-height: 1; }
.h-msg-count span { font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .72); text-wrap: balance; }
.h-msg-lead hr { border: 0; height: 1px; background: rgba(255, 255, 255, .14); margin: 24px 0; }
.h-msg-lead .h-checks { gap: 14px; }
.h-msg-lead .h-checks li { font-family: var(--font-b); font-weight: 400; font-size: 15.5px; align-items: flex-start; }
.h-msg { flex: 0 0 300px; display: flex; flex-direction: column; padding: 18px 16px 0; border-radius: var(--r-media); background: #fff; border: 1px solid #F1EEE9; box-shadow: 0 30px 60px -40px rgba(20, 22, 27, .35); }
.h-msg-status { display: inline-flex; align-items: center; gap: 6px; padding-inline: 6px; font-size: 14px; color: var(--green); }
.h-msg-status svg { width: 18px; height: 18px; }
.h-wa { margin: 12px 0 0; padding: 14px 12px 16px; border-radius: 18px; background: #e4ddd4 radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px) 0 0 / 18px 18px; }
.h-wa-bubble { background: #fff; border-radius: 10px; border-start-start-radius: 2px; padding: 5px 5px 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.h-wa-img { aspect-ratio: 1.91; border-radius: 7px; overflow: hidden; }
.h-wa-body { padding: 8px 6px 0; font-size: 14.5px; line-height: 1.5; color: #111b21; }
.h-wa-time { display: block; padding: 2px 6px 0; font-size: 11px; color: #667781; text-align: end; }
.h-wa-btns { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.h-wa-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 10px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); color: var(--wa-btn); font-size: 14px; font-weight: 600; }
.h-wa-btn svg { width: 15px; height: 15px; flex: none; }
/* The event's own artwork, as organisers attach it to every message. */
.h-wa-banner {
  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  padding: 12px 14px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, #2B2F3A 0%, #14161B 60%);
}
.h-wa-banner::before { content: ""; position: absolute; top: 14px; inset-inline-start: 14px; width: 30px; height: 3px; border-radius: 3px; background: var(--grad); }
.h-wa-banner::after { content: ""; position: absolute; inset-inline-end: -26px; top: -26px; width: 110px; height: 110px; border-radius: 50%; border: 1.5px solid rgba(237, 181, 123, .35); box-shadow: 0 0 0 16px rgba(237, 181, 123, .08); }
.h-wa-banner b { font-family: var(--font-h); font-weight: 700; font-size: 17px; line-height: 1.2; }
.h-wa-banner span { font-size: 12px; color: rgba(255, 255, 255, .72); }
.h-wa-qr { height: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; background: #fff; border: 1px solid #EFEAE2; border-radius: 7px; }
.h-wa-qr svg { width: 92px; height: 92px; flex: none; }
.h-wa-qr b { display: block; font-family: var(--font-h); font-weight: 600; font-size: 15px; color: #111b21; }
.h-wa-qr span { font-size: 12px; color: #667781; }
.h-msg-foot { display: flex; align-items: center; gap: 14px; height: 88px; margin-top: auto; border-top: 1px solid var(--line); }
.h-msg { gap: 0; }
.h-msg .h-wa { margin-bottom: 18px; }
.h-msg-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--ink); color: var(--coral); display: grid; place-items: center; }
.h-msg-ic svg { width: 20px; height: 20px; }
[dir="rtl"] .h-msg-ic .ic-send { transform: scaleX(-1); }
.h-msg-foot h3 { font-family: var(--font-h); font-weight: 600; font-size: 18px; }
.h-msg-foot p { font-size: 14.5px; line-height: 1.4; color: var(--body); }

/* ── FAQ (split, image full-bleed on the start side) ─────────────────────── */
.h-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 780px; }
.h-faq-media { position: relative; border-start-end-radius: 48px; overflow: hidden; background: var(--surface); }
.h-faq-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 25%; }
.h-faq-note { position: absolute; inset-inline-end: 48px; bottom: 48px; width: 310px; padding: 22px 24px; border-radius: 20px; background: var(--ink); color: #fff; font-size: 16px; line-height: 1.6; }
.h-faq-note .h-more { margin-top: 10px; font-size: 15px; }
.h-faq-body { background: var(--surface); padding-block: 112px; padding-inline: 96px max(var(--hpad), calc(50vw - var(--hwrap) / 2)); }
.h-faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; max-width: 560px; }
.h-qa { border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.h-qa summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; cursor: pointer; border-radius: 20px;
  font-family: var(--font-h); font-weight: 500; font-size: 17px; line-height: 1.4;
}
.h-qa summary::-webkit-details-marker { display: none; }
.h-qa summary:hover { color: var(--coral); }
.h-qa-ic { position: relative; width: 18px; height: 18px; flex: none; }
.h-qa-ic::before, .h-qa-ic::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, background-color .2s; }
.h-qa-ic::after { transform: rotate(90deg); }
.h-qa[open] .h-qa-ic::before { background: var(--coral); }
.h-qa[open] .h-qa-ic::after { transform: rotate(0deg); background: var(--coral); }
.h-qa p { padding: 0 26px 24px; margin-top: -6px; font-size: 16px; line-height: 1.7; color: var(--body); }

/* ── CLOSING BAND + FOOTER ───────────────────────────────────────────────────
   The band is the owner's, colours untouched: brand gradient, white type, ink
   primary. It now overlaps the top of the (ink) footer. */
.home .sec-cta { position: relative; z-index: 2; margin: 120px 24px -130px; padding: 92px 40px; border-radius: var(--r-sheet); }
.home .sec-cta h2 { font-weight: 600; font-size: clamp(32px, 4vw, 56px); line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.home .sec-cta .cta-inner p { font-size: 20px; margin: 16px 0 36px; }
.home .sec-cta .cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

.home > footer { background: var(--ink); color: #fff; border-top: 0; padding-top: 214px; }
.home .foot-brand > p { color: rgba(255, 255, 255, .72); }
.home .foot-meta { background: #fff; border-color: #fff; color: var(--ink); border-radius: 999px; padding: 8px 14px; font-family: var(--font-h); font-size: 12.5px; letter-spacing: 0; white-space: nowrap; }
.home .foot-col { gap: 2px; }
.home .foot-col h2 { position: relative; margin: 0 0 14px; padding-bottom: 12px; font-size: 18px; font-weight: 500; color: #fff; }
.home .foot-col h2::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 42px; height: 2px;
  background: linear-gradient(90deg, var(--coral) 0 26px, transparent 26px 30px, var(--coral) 30px 36px, transparent 36px 39px, var(--coral) 39px 42px);
}
[dir="rtl"] .home .foot-col h2::after { background: linear-gradient(270deg, var(--coral) 0 26px, transparent 26px 30px, var(--coral) 30px 36px, transparent 36px 39px, var(--coral) 39px 42px); }
.home .foot-col a { padding: 4px 0; font-size: 16px; color: rgba(255, 255, 255, .72); }
.home .foot-col a:hover, .home .foot-legal a:hover { color: #fff; }
.home .foot-legal { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .72); }
.home .foot-legal a { color: rgba(255, 255, 255, .72); display: inline-block; padding: 3px 0; }
.home .foot-legal .sep { color: rgba(255, 255, 255, .3); }

/* ============================ RESPONSIVE ================================= */
@media (max-width: 1180px) {
  .h-badge { inset-inline-start: -64px; }
  .h-stat { inset-inline-start: -20px; }
  .h-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .h-caps-box { grid-template-columns: 300px minmax(0, 1fr); }
  .h-cap-tab { margin-inline: 20px; font-size: 18px; }
  .h-cap-visual { flex-basis: 340px; }
  .h-cap-text { padding-inline: 72px 64px; }
  .h-split { grid-template-columns: 480px minmax(0, 1fr); gap: 64px; }
  .h-ck-photo { width: 310px; height: 420px; }
  .h-ck-shot { width: 250px; height: 300px; top: 110px; }
  .h-ck-stat { top: 450px; }
  .h-ck-media { height: 580px; }
  .h-feats li { grid-template-columns: 56px 140px 1px minmax(0, 1fr); gap: 18px; }
  .h-price-grid { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; }
}

@media (max-width: 1024px) {
  .home { --hpad: 32px; }
  .h-stat { inset-inline-start: 16px; }
  .h-sec { padding: 104px 0 100px; }
  .h-sheet, .h-band { margin-inline: 12px; }
  .h-live { inset-inline-end: -16px; }
  .h-split { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .h-ck-media { width: 100%; max-width: 560px; margin: 0 auto; order: 2; }
  .h-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-price-grid { grid-template-columns: minmax(0, 1fr); }
  .home .calc { max-width: 640px; }
  .h-faq { grid-template-columns: minmax(0, 1fr); }
  .h-faq-media { order: 2; height: 440px; border-radius: 0; border-start-end-radius: 0; }
  .h-faq-body { padding-inline: var(--hpad); padding-block: 96px; }
  .h-faq-list { max-width: none; }
}

/* The capability panel becomes an accordion: each tab's own panel opens right
   under it, which is exactly the DOM order. Every tab shows a chevron so the
   rows read as openable. */
@media (max-width: 960px) {
  .h-caps-box { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 24px; background: var(--ink); }
  .h-caps-bg { display: none; }
  .h-cap-tab { margin: 0; min-height: 56px; font-size: 18px; padding-inline-end: 5px; }
  .h-cap-arrow { display: grid; width: 44px; height: 44px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
  .h-cap-tab[aria-expanded="true"] .h-cap-arrow { background: #fff; color: var(--ink); border-color: #fff; transform: rotate(180deg); }
  .h-cap-arrow .ic-fwd { display: none; }
  .h-cap-arrow .ic-chev { display: block; }
  .h-cap-panel { margin: 4px 0 10px; min-height: 0; flex-direction: column; border-radius: 18px; overflow: hidden; }
  .h-cap-text { padding: 26px 22px 24px; }
  .h-cap-visual { flex: none; height: 250px; margin: 0; border-radius: 0; }
  .h-cap-visual img { width: 500px; top: 28px; inset-inline-start: 22px; }
  .h-cards3 { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .h-hero { padding: calc(68px + 40px) 0 88px; }
  .h-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 22px; }
  .h-hero-sub { font-size: 17px; }
  .h-hero-cta { margin-top: 28px; }
  .h-hero-cta .h-btn { flex: 1 1 100%; }
  .h-hero-visual { margin-top: 64px; }
  .h-badge { top: -48px; inset-inline-start: auto; inset-inline-end: 18px; width: 100px; height: 100px; border-width: 5px; }
  .h-badge .spin { inset: 4px; width: 92px; height: 92px; }
  .h-badge-core { width: 40px; height: 40px; }
  .h-badge-core svg { width: 20px; height: 20px; }
  .h-live { inset-inline-end: auto; inset-inline-start: 14px; bottom: -34px; width: 220px; padding: 14px 18px 16px; }
  .h-live-num b { font-size: 28px; }
  .h-hero-copy { order: 1; }
  .h-hero-visual { order: 2; }
  .h-about-grid { grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .h-about-media { order: 2; }
  .h-about-photo { height: 440px; }
  .h-stat { inset-inline-start: 14px; bottom: -34px; }
  .h-seg { display: flex; width: 100%; }
  .h-seg button { flex: 1; padding: 0 10px; font-size: 15px; }
  .h-feats li { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; }
  .h-feats .ic { width: 48px; height: 48px; grid-row: 1 / span 2; }
  .h-feats .bar { display: none; }
  .h-msgs-head { flex-direction: column; align-items: flex-start; }
  .h-msg { flex-basis: min(300px, 80vw); }
  .h-msg-lead { flex-basis: min(262px, 76vw); }
}

@media (max-width: 720px) {
  .home { --hpad: 20px; }
  .h-sec { padding: 72px 0; }
  .h-sheet { margin-inline: 8px; padding: 72px 0 60px; border-radius: 28px; }
  .h-band { margin-inline: 8px; padding: 72px 0; border-radius: 28px; }
  .h-h2 { font-size: 32px; }
  .h-head { margin-bottom: 36px; }
  .h-lead, .h-phase > p { font-size: 16.5px; }
  .h-kicker { gap: 14px; }
  .h-checks.two { gap: 12px 16px; }
  .h-checks li { font-size: 15px; }
  .h-about-photo { height: 380px; }
  .h-types { margin-top: 56px; }
  .h-dvis { height: 190px; }
  .h-dcard h3 { margin-top: 20px; font-size: 20px; }
  .h-cards3 { gap: 36px; }
  .h-types ul { gap: 10px 22px; font-size: 18px; }
  .h-dotline::before, .h-dotline::after { width: 64px; }
  .h-ck-media { height: 520px; }
  .h-ck-photo { width: 64%; height: 370px; }
  .h-ck-shot { width: 50%; height: 260px; top: 150px; border-width: 6px; }
  .h-ck-stat { top: 420px; }
  .h-ck-stat b { font-size: 60px; }
  .h-ck-stat span { font-size: 16px; }
  .h-steps { gap: 12px; margin-top: 40px; }
  .h-step { padding: 22px 16px 22px; border-radius: 20px; }
  .h-step-n { top: 22px; inset-inline-end: 16px; }
  .h-step > svg { width: 32px; height: 32px; }
  .h-step h3 { margin-top: 26px; font-size: 18px; }
  .h-step p { font-size: 14.5px; }
  .h-aud-grid { gap: 12px; }
  .h-aud-card { padding-bottom: 70px; }
  .h-aud-card .h-photo { height: 230px; border-radius: 22px; }
  .h-aud-cap { inset-inline: 8px; padding: 14px 10px 10px; border-radius: 16px; }
  .h-aud-cap small { font-size: 13px; line-height: 1.35; }
  .h-aud-cap h3 { font-size: 15.5px; }
  .h-aud-more { margin-top: 10px; padding-top: 10px; font-size: 13.5px; }
  /* Half a phone wide, the card would run twice the height of the photo
     cards beside it; the one-line summaries give way to the four headings. */
  .h-ent { padding: 22px 16px; }
  .h-ent h3 { font-size: 18px; }
  .h-ent > p, .h-ent li span { display: none; }
  .h-ent ul { margin-top: 16px; gap: 12px; }
  .h-ent li { align-items: start; }
  .h-ent li::before { grid-row: auto; width: 20px; height: 20px; background-size: 11px; }
  .h-ent li b { font-size: 14.5px; line-height: 1.35; }
  .h-free { gap: 14px 12px; }
  .h-free li { font-size: 15px; gap: 10px; }
  .h-free .ic { width: 40px; height: 40px; }
  .h-price-card { padding: 22px 18px; }
  .h-prices { gap: 16px; }
  .h-price .num { font-size: 34px; }
  .home .calc { padding: 26px 18px; text-align: start; }
  .home .calc-field { align-items: stretch; }
  .home .calc-field input { max-width: none; }
  .home .calc-cta { display: flex; justify-content: center; }
  .home .calc-cta-note { text-align: center; }
  .h-car-nav { display: none; }
  .h-faq-body { padding-block: 72px; }
  .h-faq-media { height: 360px; }
  .h-faq-note { inset-inline: 16px; bottom: 16px; width: auto; }
  .home .sec-cta { margin: 72px 8px -90px; padding: 56px 22px; border-radius: 28px; }
  .home .sec-cta .cta-inner p { font-size: 17px; }
  /* landing-v2 turns .cta-btns into a COLUMN at this width, so a 100% flex-basis
     would resolve against the (auto) height and crush the buttons to 20px. */
  .home .sec-cta .cta-btns { flex-direction: column; align-items: stretch; }
  .home .sec-cta .cta-btns .h-btn { flex: none; width: 100%; }
  .home > footer { padding-top: 150px; }
  .home .foot-col h2::after { inset-inline-start: 50%; transform: translateX(-50%); }
}

@media (max-width: 380px) {
  .h-checks.two { grid-template-columns: minmax(0, 1fr); }
  .h-aud-cap small { display: none; }
}

/* Motion off: the badge stops (landing-v2.css already clamps every
   animation and transition; this makes the rotation's intent explicit). */
@media (prefers-reduced-motion: reduce) {
  .h-badge .spin, .h-lang ul { animation: none; }
  .h-msg-row { scroll-behavior: auto; }
}

/* ── HERO FILM (owner, 2026-10-12) ──────────────────────────────────────────
   A 19s looping motion piece ABOVE the hero; the hero becomes the second
   section. Desktop is a 1920x950 render (owner: it must fit a 100vh screen);
   the nav floats over its top 68px, which the film's composition keeps empty.
   The frame is as wide as the viewport allows while the WHOLE frame still fits
   on screen. Phones get a 4:5 render (picked by <source media>, poster swapped
   by the script) that starts BELOW the nav — its headline sits at the top.
   Source and render pipeline: bin/hero-film/. No glow anywhere — the film
   sits on the hero's own ink + QR-pixel texture (owner). */
.h-film { position: relative; background: var(--ink); }
.h-film-frame { position: relative; margin: 0 auto; width: min(100%, calc(100svh * 1920 / 950)); aspect-ratio: 1920 / 950; }
.h-film-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.h-film + .h-hero { padding-top: 96px; }
/* The pause control (WCAG 2.2.2: anything moving for more than 5s). It sits in
   the corner the film keeps empty: under the headline column. */
.h-film-toggle {
  position: absolute; inset-inline-start: 20px; bottom: 20px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  transition: background-color .2s, border-color .2s;
}
.h-film-toggle:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.h-film-toggle:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.h-film-toggle svg { width: 18px; height: 18px; }
.h-film-toggle .ic-play, .h-film.is-paused .h-film-toggle .ic-pause { display: none; }
.h-film.is-paused .h-film-toggle .ic-play { display: block; }

@media (max-width: 720px) {
  .h-film { padding-top: 68px; }
  .h-film-frame { width: 100%; aspect-ratio: 4 / 5; }
  /* On the 4:5 cut the visuals fill the lower half; the empty corner is up top. */
  .h-film-toggle { bottom: auto; top: 12px; inset-inline-start: auto; inset-inline-end: 12px; }
  .h-film + .h-hero { padding-top: 64px; }
}