/* Hezi marketing site. Tokens mirror the app's constants/theme.ts. */

@font-face { font-family: 'League Spartan'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/leaguespartan-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }

:root {
  /* colors.* in constants/theme.ts */
  --bg: #0E0D0D;
  --card: #181616;
  --card2: #211E1E;
  --card-hover: #262222;
  --line: #302B2B;
  --text: #F4EFE7;
  --muted: #A8A09A;
  --muted2: #8F8780;
  --gold: #C9BFB0;
  /* radius.* */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --display: 'League Spartan', 'Arial Black', Arial, sans-serif;
  --body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--text); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: var(--r-sm); font-weight: 600; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.ic { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; }

/* ---------- Logo (the supplied PNG, untouched; the box only frames the wordmark) ---------- */
/* Mark sits at x 610-1500, y 759-1118 of the 2000px square; background is #0E0D0D like the page. */
.logo { --h: 30px; display: inline-block; position: relative; overflow: hidden; height: var(--h); width: calc(var(--h) * 890 / 359); }
.logo img { position: absolute; max-width: none; width: calc(var(--h) * 2000 / 359); height: auto; left: calc(var(--h) * -610 / 359); top: calc(var(--h) * -759 / 359); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(14, 13, 13, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.site-header nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.site-header nav a:hover { color: var(--text); }
@media (max-width: 760px) { .site-header nav { display: none; } }

/* ---------- Phone menu (built by menu.js) ---------- */
.lbl-short { display: none; }
.menu-toggle { display: none; }
.mobile-menu { display: none; }
@media (max-width: 760px) {
  .site-header .wrap { gap: 6px; }
  .site-header .wrap > .btn { margin-left: auto; min-height: 44px; }
  /* 44x44 tap target; two lines that cross into an X when open. */
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu-toggle span { position: relative; display: block; width: 22px; height: 12px; }
  .menu-toggle span::before, .menu-toggle span::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.45s var(--ease-soft), top 0.45s var(--ease-soft); }
  .menu-toggle span::before { top: 0; }
  .menu-toggle span::after { top: 10px; }
  .menu-open .menu-toggle span::before { top: 5px; transform: rotate(45deg); }
  .menu-open .menu-toggle span::after { top: 5px; transform: rotate(-45deg); }

  /* Sits just under the header so the logo and close button stay in place. */
  .mobile-menu { display: flex; flex-direction: column; position: fixed; top: 69px; right: 0; bottom: 0; left: 0; z-index: 19; padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
  .menu-open .mobile-menu { visibility: visible; opacity: 1; transition: opacity 0.4s ease, visibility 0s; }
  .menu-open .site-header { background: var(--bg); }
  html.menu-open { overflow: hidden; }
  .mobile-menu ul { list-style: none; margin: 0; padding: 0; }
  .mobile-menu li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity 0.3s ease, transform 0.3s ease; }
  .menu-open .mobile-menu li { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1), transform 0.8s var(--ease-soft); transition-delay: calc(0.08s + var(--i, 0) * 0.06s); }
  .mobile-menu li a { display: block; padding: 20px 0; font-family: var(--display); font-size: 30px; line-height: 1.1; text-transform: uppercase; text-decoration: none; color: var(--text); }
  .mobile-menu .btn { margin-top: auto; width: 100%; min-height: 56px; opacity: 0; transition: opacity 0.3s ease; }
  .menu-open .mobile-menu .btn { opacity: 1; transition: opacity 0.7s ease 0.4s; }
}
@media (max-width: 350px) { .site-header .lbl-long { display: none; } .site-header .lbl-short { display: inline; } }
@media (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-menu li, .mobile-menu .btn { transition: none !important; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-md); font-family: var(--display); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #DAD2C4; }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted2); background: var(--card); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 12px; }
.soon { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 600; }
.soon .ic { font-size: 18px; color: var(--gold); }

/* ---------- Type ---------- */
/* Doubled up so section-level "p { margin }" rules (.section-head p, .company p)
   can never zero out the gap between the label and its heading. */
.eyebrow, .section-head p.eyebrow, .company p.eyebrow { margin: 0 0 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 7.4vw, 88px); line-height: 0.98; text-transform: uppercase; letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.04; text-transform: uppercase; }
h3 { font-size: 20px; line-height: 1.2; }
/* The one line under the hero headline that says what Hezi is. */
.hero-sub { margin: 20px 0 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; color: var(--muted); max-width: 26em; }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 34em; margin: 22px 0 0; }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head p { color: var(--muted); margin: 16px 0 0; font-size: 17px; }

section { padding-block: clamp(72px, 10vw, 128px); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 112px); border-top: 0; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero .phone { margin-inline: auto; } }

/* ---------- Phone frame ---------- */
/* iPhone 15 Pro-style frame, all sizes in cqw (% of the phone's own width)
   so it scales cleanly. Proportions follow the real device: 393x852pt
   screen, 55pt screen corner radius, Dynamic Island 125x37pt. */
.phone { --pw: min(300px, 78vw); container-type: inline-size; position: relative; width: var(--pw); padding: calc(var(--pw) * 0.014); border-radius: calc(var(--pw) * 0.176); background: linear-gradient(135deg, #6b6863 0%, #2c2a28 18%, #1d1c1b 50%, #2c2a28 82%, #5e5b57 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4); }
.phone .bezel { padding: 3.6cqw; border-radius: 16.2cqw; background: #050505; box-shadow: inset 0 0 0 0.3cqw #151414; }
.phone .screen { position: relative; aspect-ratio: 393 / 852; border-radius: 12.6cqw; overflow: hidden; background: var(--bg); }
.phone .screen img { position: absolute; left: 0; top: 13cqw; width: 100%; height: auto; }
.phone .island { position: absolute; top: 2.5cqw; left: 50%; width: 28.6cqw; height: 8.5cqw; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 2; }
.phone .status { position: absolute; top: 0; left: 0; right: 0; height: 13cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 7.5cqw 0 9.5cqw; color: #fff; z-index: 1; }
.phone .status .time { font: 600 3.9cqw/1 -apple-system, 'SF Pro Text', var(--body); letter-spacing: -0.01em; }
.phone .status .icons { display: flex; align-items: center; gap: 1.3cqw; }
.phone .status svg { height: 2.7cqw; width: auto; fill: currentColor; }
.phone .status svg.batt { height: 3cqw; }
.phone .home-bar { position: absolute; bottom: 1.9cqw; left: 50%; width: 30.7cqw; height: 1.2cqw; transform: translateX(-50%); border-radius: 999px; background: rgba(255, 255, 255, 0.85); z-index: 2; }
.phone [class^="btn-"] { position: absolute; width: 0.9cqw; border-radius: 0.5cqw; background: linear-gradient(90deg, #2a2826, #57544f 50%, #2a2826); }
.phone .btn-action { left: -0.7cqw; top: 23cqw; height: 7cqw; }
.phone .btn-vol-up { left: -0.7cqw; top: 36cqw; height: 13cqw; }
.phone .btn-vol-down { left: -0.7cqw; top: 52cqw; height: 13cqw; }
.phone .btn-power { right: -0.7cqw; top: 40cqw; height: 20cqw; }

/* ---------- Steps ---------- */
/* Plain numbered steps, no card boxes: wider gaps do the separating instead. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 40px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--display); font-size: 15px; color: var(--gold); margin-bottom: 16px; }
.steps h3 { margin-bottom: 10px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Adaptive / feature rows ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.split .phone { margin-inline: auto; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split .phone { order: 2; } }
.feature-list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 28px; }
.feature-list li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; }
/* Just the gold icon, no box around it. */
.feature-list .badge { width: 28px; height: 24px; display: grid; place-items: center; color: var(--gold); font-size: 24px; }
.feature-list h3 { font-family: var(--body); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.feature-list p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- Training areas ---------- */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
.area { display: grid; gap: 14px; align-content: start; }
.area .top { display: flex; align-items: center; justify-content: space-between; }
.area .top .ic { font-size: 26px; color: var(--gold); }
.area p { margin: 0; color: var(--muted); font-size: 15px; }
.areas-note { margin: 28px 0 0; color: var(--muted2); font-size: 14px; }
@media (max-width: 900px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .areas { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; align-items: stretch; }
/* No card boxes. The top padding reserves a row for the "Save" tag so all
   three plan names start on the same line. */
.plan { padding: 36px 0 0; display: flex; flex-direction: column; position: relative; }
.plan .tag { position: absolute; top: 0; left: 0; background: var(--gold); color: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--r-pill); padding: 4px 12px; }
.plan .name { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.plan.best .name { color: var(--gold); }
.plan .price { margin: 14px 0 0; font-family: var(--display); font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .per { color: var(--muted2); font-size: 15px; margin: 6px 0 0; }
.plan ul { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--muted); font-size: 15px; }
.plan li .ic { margin-top: 4px; color: var(--gold); }
.pricing-note { margin: 64px 0 0; color: var(--muted2); font-size: 14px; max-width: 60ch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; } .plan { padding-top: 0; } .plan.best { padding-top: 36px; } }
/* Side by side, the three plans share one set of rows (name, price, period,
   trial label, features) so the feature lists start level even though the
   Free plan has no trial label. */
@media (min-width: 901px) { @supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .plan .name { grid-row: 1; } .plan .price { grid-row: 2; } .plan .per { grid-row: 3; }
  .plan .trial { grid-row: 4; justify-self: start; } .plan ul { grid-row: 5; align-content: start; }
} }

/* ---------- Company ---------- */
/* Wide screens: the story on the left, the two founders stacked on the right. */
.company { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .company { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; } }
.company p { color: var(--muted); font-size: 17px; margin: 20px 0 0; max-width: 34em; }

/* ---------- Contact band ---------- */
.contact { text-align: center; }
.contact h2 { max-width: 16ch; margin-inline: auto; }
.contact .wrap > p { color: var(--muted); margin: 18px auto 32px; max-width: 36em; font-size: 17px; }
/* The closing signup: same form as the hero, centred. */
.contact .waitlist { margin: 32px auto 0; text-align: center; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 48px 40px; color: var(--muted2); font-size: 14px; }
.site-footer .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: start; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer address strong { color: var(--text); font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; text-align: right; }
/* Every footer and header link gets a 44px-tall tap area (thumb-sized). */
.site-footer ul a, .site-footer address a, .site-footer .wrap > a, .site-header .wrap > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer ul { margin-top: -10px; }
/* Inline text links: taller hit area without moving any text. */
.areas-note a { padding-block: 14px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.copy { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } .site-footer ul { text-align: left; } }

/* ---------- Support page ---------- */
.page-hero { padding-block: clamp(56px, 8vw, 96px) 0; border-top: 0; }
.faq { max-width: 780px; margin: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 18px; font-size: 24px; color: var(--gold); font-weight: 400; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 22px; color: var(--muted); max-width: 62ch; }
.support-card { margin-top: 56px; max-width: 780px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.support-card p { margin: 0; color: var(--muted); }
.support-card strong { color: var(--text); display: block; font-size: 18px; margin-bottom: 4px; }

/* Waitlist */
.waitlist { margin-top: 36px; max-width: 520px; }
.waitlist label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.wl-row { display: flex; gap: 10px; }
.wl-row[hidden] { display: none; }
.wl-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); color: var(--text); font: 16px var(--body); }
.wl-row input::placeholder { color: var(--muted2); }
.wl-row input:focus { outline: none; border-color: var(--gold); }
.wl-row button { cursor: pointer; border: 0; flex-shrink: 0; }
.wl-row button[disabled] { opacity: 0.6; cursor: default; }
.wl-msg { margin: 8px 0 0; font-size: 14px; min-height: 1.2em; color: var(--gold); }
.wl-msg.err { color: #D98C7A; }
.wl-fine { margin: 10px 0 0; font-size: 12px; color: var(--muted2); }
.wl-fine a { color: var(--muted); }
@media (max-width: 520px) { .wl-row { flex-direction: column; } }

/* Trial label on plans */
.plan .trial { margin: 12px 0 0; align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 10px; }

/* Founders */
.founders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.founder .fname { margin: 0; font-family: var(--display); font-size: 20px; }
.founder ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.founder li { position: relative; padding-left: 18px; color: var(--muted); font-size: 15px; }
.founder li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
/* Tablets: single column page, so the two cards sit side by side again. */
@media (max-width: 900px) and (min-width: 721px) { .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 20px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 18px; color: var(--muted); }

/* ---------- Motion ---------- */
/* One family of curves for the whole site so everything moves alike:
   --ease-soft   gentle start, long soft landing (things arriving)
   --ease-inout  slow in, slow out (things travelling, e.g. the splash panel) */
:root { --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.76, 0, 0.24, 1); }
/* motion.js animates anchor scrolling itself; CSS smooth-scroll on top of it
   would re-smooth every frame and stutter. Without JS the CSS one stays. */
html.js { scroll-behavior: auto; }
/* No-JS anchor jumps still clear the sticky header. */
section[id] { scroll-margin-top: 84px; }

/* Header gains a soft shadow once the page scrolls under it. */
.site-header { transition: box-shadow 0.5s ease, border-color 0.5s ease; }
.site-header.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }

/* Nav: current section highlighted, underline grows in. */
.site-header nav a { position: relative; transition: color 0.35s ease; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform 0.5s var(--ease-soft); }
.site-header nav a:hover::after, .site-header nav a.active::after { transform: scaleX(1); }
.site-header nav a.active { color: var(--text); }

/* Hero eases in on load. */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.js .hero h1 { animation: rise 1.2s var(--ease-soft) both; }
.js .hero .hero-sub { animation: rise 1.2s 0.1s var(--ease-soft) both; }
.js .hero .waitlist { animation: rise 1.2s 0.2s var(--ease-soft) both; }
.js .hero .phone { animation: rise 1.4s 0.35s var(--ease-soft) both; }

/* Blocks ease in each time they come on screen (see motion.js). --reveal-y is
   +28px when arriving from below, -28px when arriving from above. */
.reveal { opacity: 0; transform: translate3d(0, var(--reveal-y, 28px), 0); transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1.2s var(--ease-soft); transition-delay: var(--reveal-delay, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* Cards respond to hover. */
.faq details { transition: border-color 0.45s ease, background-color 0.45s ease, transform 0.5s var(--ease-soft); }
@media (hover: hover) {
  .faq details:hover { border-color: var(--muted2); }
}
.btn { transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-soft); }
.btn:active { transform: scale(0.97); }
/* Arrived: transitions go back to the element's own hover timing, no stagger. */
.reveal.settled { transition: border-color 0.45s ease, background-color 0.45s ease, background 0.3s ease, transform 0.5s var(--ease-soft); transition-delay: 0s; }
/* Used when resetting a block off screen: change state with no animation. */
.reveal.snap { transition: none !important; }

/* FAQ answers slide open (browsers that support it; others just open). */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease-soft), content-visibility 0.5s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}
.faq summary::after { transition: transform 0.45s var(--ease-soft); }
.faq details[open] summary::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .js .hero h1, .js .hero .hero-sub, .js .hero .waitlist, .js .hero .phone { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Splash ---------- */
/* Shown on every page load when the head script adds .splash-on (so no JS = no
   splash). The plain logo PNG is used exactly as supplied; its background is
   the site background (#0E0D0D), so the square image blends in seamlessly. */
.splash { display: none; }
.splash-on .splash { display: block; position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow: hidden; animation: splash-out 0.95s var(--ease-inout) 1.5s forwards; }
.splash-done .splash { display: none !important; }
.splash-on.splash-skip .splash { animation: splash-out-fast 0.55s var(--ease-inout) forwards; }
/* Ink in hezi-logo.png spans x 615-1495, y 764-1113 of 2000; the image is
   sized so the wordmark is min(460px, 78vw) wide and the ink is centred. */
.splash-logo { --w: calc(min(460px, 78vw) / 0.44); position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--w); transform: translate(-52.75%, -46.93%); }
.splash-logo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.splash-mark { transform-origin: 52.75% 46.93%; animation: splash-mark 1.1s var(--ease-soft) 0.1s both; }
@keyframes splash-mark { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes splash-out { to { transform: translateY(-100%); } }
@keyframes splash-out-fast { to { transform: translateY(-100%); } }
/* The hero's own entrance plays as the splash lifts, not hidden behind it. */
.splash-on .hero h1 { animation-delay: 1.6s; }
.splash-on .hero .hero-sub { animation-delay: 1.7s; }
.splash-on .hero .waitlist { animation-delay: 1.8s; }
.splash-on .hero .phone { animation-delay: 1.95s; }
.splash-on.splash-skip .hero h1, .splash-on.splash-skip .hero .hero-sub, .splash-on.splash-skip .hero .waitlist, .splash-on.splash-skip .hero .phone { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .splash-on .splash { display: none; } }