/* ═══════════════════════════════════════════════════════════════════════════
   LIVE TABLE — MARKETING SITE
   White ground · rose light model · gradient-lit surfaces · micro-grain
   Fonts: Cormorant Garamond (display) + Inter (UI) · Icons: Tabler webfont
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #2d1f24;
  --ink-2:      #6f5560;
  --ink-3:      #a38b93;
  --bg:         #ffffff;
  --wash:       #fdf6f8;
  --wash-deep:  #f9e8ed;
  --line:       #f0dfe4;
  --line-2:     #e3ccd3;
  --brand:      #c25f77;
  --brand-deep: #9c4359;
  --g:          #4a8e5f;
  --r:          #c9544a;
  --a:          #d97706;
  --tile:       #cdb8be;
  --display:    'Cormorant Garamond', Georgia, serif;
  --ui:         'Inter', system-ui, sans-serif;

  /* light model */
  --edge: linear-gradient(160deg, rgba(194,95,119,.30), rgba(194,95,119,.07) 38%, rgba(194,95,119,.16));
  --face: linear-gradient(180deg, #ffffff 0%, #fffcfd 100%);
  --sh-1: 0 1px 2px rgba(45,31,36,.05), 0 6px 18px -6px rgba(141,58,78,.10);
  --sh-2: 0 1px 2px rgba(45,31,36,.06), 0 10px 28px -8px rgba(141,58,78,.16), 0 28px 64px -24px rgba(141,58,78,.18);
  --sh-app: 0 1px 2px rgba(45,31,36,.08), 0 24px 56px -16px rgba(141,58,78,.24), 0 64px 120px -48px rgba(141,58,78,.22);
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ui); background: var(--bg); color: var(--ink);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  font-size: 15px;
  /* No stray insertion carets on non-editable content (click/focus quirks,
     accidental F7 caret browsing). Real inputs restore theirs below. */
  caret-color: transparent;
}
input, textarea, [contenteditable] { caret-color: auto; }
/* micro-grain — kills matte flatness */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .022;
}
::selection { background: var(--wash-deep); color: var(--brand-deep); }
a { color: inherit; text-decoration: none; }
button { font-family: var(--ui); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 32px); }
h1, h2, h3 { text-wrap: balance; }
/* Anchor jumps: sections carry 92-106px top padding, so land nearly flush —
   the padding itself becomes the gap under the 68px sticky header. */
main section, main div[id] { scroll-margin-top: 4px; }

/* ── Buttons — physical light ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  padding: 12px 24px; border-radius: 11px; border: none; cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--brand {
  color: #fff;
  background: linear-gradient(180deg, #cf6d85 0%, #b5536b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(141,58,78,.35),
              0 1px 2px rgba(45,31,36,.14), 0 10px 24px -8px rgba(194,95,119,.55);
}
.btn--brand:hover {
  background: linear-gradient(180deg, #d67b92 0%, #bd5a73 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(141,58,78,.35),
              0 2px 4px rgba(45,31,36,.12), 0 14px 32px -8px rgba(194,95,119,.6);
}
.pcard--pro .btn--brand {
  background: linear-gradient(180deg, #dd94a6 0%, #c66d83 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(141,58,78,.28),
              0 1px 2px rgba(45,31,36,.1), 0 8px 20px -8px rgba(194,95,119,.4);
}
.pcard--pro .btn--brand:hover {
  background: linear-gradient(180deg, #e4a1b2 0%, #cd7788 100%);
}
.btn--quiet {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #fdf8f9);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 #fff, 0 1px 2px rgba(45,31,36,.06);
}
.btn--quiet:hover {
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 1px rgba(194,95,119,.55), inset 0 1px 0 #fff, 0 4px 14px -4px rgba(194,95,119,.3);
  transform: translateY(-1px);
}
.btn--text { background: none; color: var(--ink-2); padding: 12px 8px; font-weight: 500; }
.btn--text:hover { color: var(--brand-deep); }
.btn--lg { font-size: 15.5px; padding: 15px 32px; border-radius: 13px; }
.btn--full { width: 100%; }
.btn--light {
  color: var(--brand-deep);
  background: linear-gradient(180deg, #ffffff, #fdf1f4);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(45,31,36,.25), 0 12px 32px -10px rgba(30,10,16,.5);
}
.btn--light:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(45,31,36,.2), 0 16px 40px -10px rgba(30,10,16,.55); }

/* ── Eyebrow ────────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand)); }
.eyebrow--solo::after { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, var(--brand), transparent); }

/* ── Section heads ──────────────────────────────────────────────────────── */
.sec-head { max-width: 720px; margin-bottom: 54px; }
.sec-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4vw, 45px); line-height: 1.1; letter-spacing: .002em;
  margin: 16px 0 12px;
}
.sec-head p { font-size: 16px; color: var(--ink-2); max-width: 58ch; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center p { margin-left: auto; margin-right: auto; }

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > :nth-child(2) { transition-delay: .08s; }
[data-stagger].in > :nth-child(3) { transition-delay: .16s; }
[data-stagger].in > :nth-child(4) { transition-delay: .24s; }
[data-stagger].in > :nth-child(5) { transition-delay: .32s; }
[data-stagger].in > :nth-child(6) { transition-delay: .40s; }

/* ═══ HEADER ═══════════════════════════════════════════════════════════── */
.hd {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(227,204,211,.55);
  transition: box-shadow .25s ease;
}
.hd--scrolled { box-shadow: 0 6px 24px -8px rgba(141,58,78,.14); }
.hd__in { display: flex; align-items: center; height: 68px; gap: 44px; }
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; display: block; flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--line), 0 3px 10px -2px rgba(194,95,119,.35);
}
.ft .logo-mark { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 4px 12px -2px rgba(0,0,0,.45); }
.logo-word {
  font-family: var(--ui); font-size: 14px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--brand);
  margin-right: -.26em; /* reclaim trailing tracking so the lockup optically balances */
}
.ft .logo-word { color: #e5b4c0; }
.hd__nav { display: flex; align-items: center; gap: 36px; margin-right: auto; }
.hd__nav a + a::before {
  content: ''; position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 13px; background: var(--line-2);
}
.hd__nav a { position: relative; font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 4px 0; transition: color .15s; }
.hd__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.hd__nav a:hover { color: var(--brand-deep); }
.hd__nav a:hover::after { transform: scaleX(1); }
/* "Live" — brand accent word */
.nav-live { color: var(--brand-deep); font-weight: 600; }
.hd__cta { display: flex; gap: 10px; align-items: center; }
/* both header buttons share one box; softer brand shadow keeps them on the same plane */
.hd .btn { font-size: 13.5px; padding: 10px 20px; border-radius: 10px; line-height: 1; }
.hd .btn--brand {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(141,58,78,.32),
              0 1px 2px rgba(45,31,36,.12), 0 4px 12px -4px rgba(194,95,119,.45);
}
.hd .btn--brand:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(141,58,78,.32),
              0 2px 4px rgba(45,31,36,.1), 0 8px 18px -5px rgba(194,95,119,.5);
}
.burger { display: none; margin-left: auto; background: none; border: none; font-size: 24px; color: var(--ink); cursor: pointer; }
.m-nav { display: none; }

/* ═══ HERO — split, dashboard above the fold ═══════════════════════════── */
.hero { position: relative; padding: 76px 0 88px; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 78% -10%, rgba(194,95,119,.10), transparent 62%),
    radial-gradient(700px 420px at 8% 108%, rgba(194,95,119,.05), transparent 60%);
}
.hero .wrap { max-width: 1260px; } /* hero breathes wider than the 1140px body */
.hero__in {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  gap: clamp(32px, 4vw, 52px); align-items: center;
}
.hero h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(38px, 4.4vw, 53px); line-height: 1.03; letter-spacing: -.006em;
  margin: 0 0 22px;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(120deg, #c25f77 20%, #8e3a4e 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0 .06em 0 .24em; margin-left: -.24em; /* room for the italic 'g' swash under background-clip:text */
}
/* line-by-line entrance — fade + rise, no overflow clip (so italic swashes show) */
.ln { display: block; }
.ln span { display: inline-block; opacity: 0; transform: translateY(16px); animation: lnup .9s var(--ease) forwards; }
.ln:nth-child(2) span { animation-delay: .1s; }
.ln:nth-child(3) span { animation-delay: .2s; }
@keyframes lnup { to { opacity: 1; transform: none; } }
.hero__sub {
  font-size: 17px; color: var(--ink-2); max-width: 42ch; margin: 0 0 32px; line-height: 1.55;
  opacity: 0; animation: fadeup .8s .35s var(--ease) forwards;
}
.hero__benefits {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
  margin: 0 0 30px; max-width: 40ch;
  opacity: 0; animation: fadeup .8s .44s var(--ease) forwards;
}
.hero__benefits li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.hero__benefits i {
  font-size: 15px; color: var(--brand-deep); width: 27px; height: 27px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 8px;
  background: linear-gradient(180deg, #fbedf1, #f6dfe6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 2px rgba(141,58,78,.06);
}
.hero__cta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  opacity: 0; animation: fadeup .8s .56s var(--ease) forwards;
}
.hero__note {
  margin-top: 18px; font-size: 13px; color: var(--ink-3);
  opacity: 0; animation: fadeup .8s .62s var(--ease) forwards;
}
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero__stage { position: relative; opacity: 0; animation: stagein 1s .35s var(--ease) forwards; }
/* hero gallery — auto-advancing slides + dot nav */
.hero-gal__frame { position: relative; }
.hero-gal__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); pointer-events: none; }
.hero-gal__slide:first-child { position: relative; } /* in-flow slide defines the frame height */
.hero-gal__slide--on { opacity: 1; pointer-events: auto; }
.hero-gal__shot {
  position: relative; height: 442px; border-radius: 15px; overflow: hidden;
  border: 1px solid transparent;
  background: var(--face) padding-box, var(--edge) border-box;
  box-shadow: var(--sh-app);
}
.hero-gal__shot::after {
  content: "shots/" attr(data-shot) ".png"; position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--ink-3);
}
.hero-gal__shot img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-gal__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hero-gal__dot {
  width: 8px; height: 8px; border-radius: 999px; border: none; cursor: pointer; padding: 0;
  background: var(--line-2); transition: background .2s, width .2s var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none; caret-color: transparent;
}
.hero-gal__dot:hover { background: var(--brand); }
.hero-gal__dot:focus:not(:focus-visible) { outline: none; }
.hero-gal__dot--on { background: var(--brand); width: 22px; }
@keyframes stagein { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
.stage {
  position: relative; border-radius: 22px;
  padding: clamp(16px, 2.5vw, 26px);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(170deg, #fdf3f6 0%, #f9e9ee 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(194,95,119,.10);
}

/* ── the app — glass-finished product mock ──────────────────────────────── */
.app {
  position: relative; display: flex; height: 442px; font-size: 12px;
  border-radius: 15px; overflow: hidden;
  border: 1px solid transparent;
  background: var(--face) padding-box, var(--edge) border-box;
  box-shadow: var(--sh-app);
}
.app::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(112deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.08) 16%, rgba(255,255,255,0) 30%);
}
.app__rail {
  width: 52px; flex-shrink: 0; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #fdf4f6, #fbeff3);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px;
}
.app__logo {
  width: 28px; height: 28px; border-radius: 8px; display: block;
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px -1px rgba(194,95,119,.4);
  margin-bottom: 10px;
}
.app__ric { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); font-size: 16px; }
.app__ric--on {
  background: linear-gradient(180deg, #fbedf1, #f7e3e9); color: var(--brand-deep);
  box-shadow: inset 0 1px 2px rgba(141,58,78,.12), inset 0 -1px 0 rgba(255,255,255,.8);
}
.app__ava {
  margin-top: auto; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #fbedf1, #f3d8e0); color: var(--brand-deep);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  outline: 2px solid rgba(74,142,95,.55); outline-offset: 1.5px;
}
.app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app__top {
  height: 46px; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 0 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdfe, #fdf9fa);
}
.ftab { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 6px 13px; border-radius: 8px; }
.ftab--on {
  background: linear-gradient(180deg, #fbedf1, #f7e3e9); color: var(--brand-deep);
  box-shadow: inset 0 1px 2px rgba(141,58,78,.10), inset 0 -1px 0 rgba(255,255,255,.7);
}
.app__clock { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.app__live { display: flex; align-items: center; gap: 5px; margin-left: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--g); }
.app__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); box-shadow: 0 0 6px rgba(74,142,95,.7); animation: blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.app__floor {
  flex: 1; position: relative; min-height: 0;
  background:
    radial-gradient(circle, #f2e4e9 1px, transparent 1.1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #fffefe, #fdfafb);
}
.t {
  position: absolute; display: grid; place-items: center;
  border: 2px solid var(--tile); border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #fdf9fa);
  font-weight: 700; font-size: 12.5px; color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(45,31,36,.05), 0 3px 8px -2px rgba(45,31,36,.06);
  transition: border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.t--round { border-radius: 50%; }
.t__p {
  position: absolute; bottom: -7px; right: -7px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--tile);
  display: grid; place-items: center; font-size: 10px; color: var(--ink-2);
  box-shadow: 0 1px 3px rgba(45,31,36,.12);
}
.t--like { border-color: var(--g); color: var(--g); }
.t--like .t__p { border-color: var(--g); color: var(--g); }

/* the alert sequence — one 18s clock */
.t--seq { animation: tseq 18s var(--ease) infinite; }
@keyframes tseq {
  0%, 10%  { border-color: var(--tile); color: var(--ink-2); }
  13%, 46% { border-color: var(--r); color: var(--r); box-shadow: 0 0 0 4px rgba(201,84,74,.09), 0 6px 16px -4px rgba(201,84,74,.35); }
  50%, 68% { border-color: var(--a); color: var(--a); }
  74%, 100%{ border-color: var(--tile); color: var(--ink-2); }
}
.t--seq .t__p { animation: tseqp 18s var(--ease) infinite; }
@keyframes tseqp {
  0%, 10%  { border-color: var(--tile); color: var(--ink-2); }
  13%, 46% { border-color: var(--r); color: var(--r); }
  50%, 68% { border-color: var(--a); color: var(--a); }
  74%, 100%{ border-color: var(--tile); color: var(--ink-2); }
}
.ring {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  border: 1.5px solid var(--r); border-radius: 50%;
  transform: translate(-50%,-50%) scale(.5); opacity: 0;
  animation: ring 18s ease-out infinite; pointer-events: none;
}
@keyframes ring {
  0%, 10.5% { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  11.5% { opacity: .7; }
  17% { opacity: 0; transform: translate(-50%,-50%) scale(4.6); }
  18%, 100% { opacity: 0; }
}
.rtag {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffffff, #fef7f6);
  border: 1px solid rgba(201,84,74,.45); color: var(--r);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px -2px rgba(201,84,74,.35);
  opacity: 0; white-space: nowrap;
  animation: rtag 18s var(--ease) infinite;
}
@keyframes rtag {
  0%, 12% { opacity: 0; transform: translateX(-50%) translateY(5px); }
  15%, 44% { opacity: 1; transform: translateX(-50%) translateY(0); }
  48%, 100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}
.hpop {
  position: absolute; top: -10px; right: -10px; width: 20px; height: 20px;
  background: #fff; border: 1px solid rgba(74,142,95,.4); border-radius: 50%;
  display: grid; place-items: center; color: var(--g); font-size: 11px;
  box-shadow: 0 2px 8px -1px rgba(74,142,95,.4); opacity: 0;
  animation: hpop 18s var(--ease) infinite;
}
@keyframes hpop {
  0%, 80% { opacity: 0; transform: scale(.4); }
  83%, 93% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(.9); }
}
.acard {
  position: absolute; left: 14px; bottom: 14px; width: 262px; z-index: 4;
  border-radius: 13px; border: 1px solid transparent;
  background: linear-gradient(180deg, #ffffff, #fffbfb) padding-box,
              linear-gradient(160deg, rgba(201,84,74,.5), rgba(201,84,74,.15)) border-box;
  border-left: 3px solid var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--sh-2);
  padding: 11px 12px 11px 14px; display: flex; gap: 10px; align-items: flex-start;
  transform: translateY(calc(100% + 22px)); opacity: 0;
  animation: acard 18s var(--ease) infinite;
}
@keyframes acard {
  0%, 14% { transform: translateY(calc(100% + 22px)); opacity: 0; }
  17.5%, 44% { transform: translateY(0); opacity: 1; }
  48%, 100% { transform: translateY(calc(100% + 22px)); opacity: 0; }
}
.acard__ic { color: var(--r); font-size: 17px; margin-top: 1px; }
.acard__tt { font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.acard__tt small { font-weight: 500; color: var(--ink-3); font-size: 10px; margin-left: 5px; }
.acard__note { font-size: 10.5px; color: var(--ink-2); margin-top: 1px; }
.acard__btn {
  margin-left: auto; align-self: center; flex-shrink: 0;
  color: #fff; border: none; cursor: default;
  font-size: 10.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px;
  background: linear-gradient(180deg, #43323a, #2d1f24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px -1px rgba(45,31,36,.4);
  animation: apress 18s var(--ease) infinite;
}
@keyframes apress {
  0%, 40% { transform: scale(1); }
  42.5%, 44.5% { transform: scale(.94); background: linear-gradient(180deg, #57a06c, #4a8e5f); }
  47%, 100% { transform: scale(1); }
}
.app__side {
  width: 148px; flex-shrink: 0; border-left: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdfe, #fdf8fa);
  padding: 12px 10px; display: flex; flex-direction: column; gap: 7px;
}
.schip {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px;
  background: linear-gradient(180deg, #ffffff, #fefbfc);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(45,31,36,.04);
  font-size: 10.5px; font-weight: 600; color: var(--ink-2);
}
.schip__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.schip b { margin-left: auto; font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }
.schip--attn { animation: schipa 18s var(--ease) infinite; }
@keyframes schipa {
  0%, 12% { border-color: var(--line); }
  15%, 46% { border-color: rgba(201,84,74,.5); background: linear-gradient(180deg, #fef4f3, #fdefed); }
  52%, 100% { border-color: var(--line); }
}
.schip--attn .c0 { animation: cnt0 18s var(--ease) infinite; }
.schip--attn .c1 { animation: cnt1 18s var(--ease) infinite; position: absolute; color: var(--r); }
@keyframes cnt0 { 0%, 13% { opacity: 1; } 14%, 50% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes cnt1 { 0%, 13% { opacity: 0; } 14%, 50% { opacity: 1; } 52%, 100% { opacity: 0; } }
.schip--attn b { position: relative; width: 8px; }
.app__div { border-top: 1px solid var(--line); margin: 4px 0; }
.srow { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 500; color: var(--ink-2); padding: 4px 2px; }
.srow i { font-size: 14px; color: var(--ink-3); }
.toggle {
  margin-left: auto; width: 26px; height: 15px; border-radius: 999px;
  background: linear-gradient(180deg, #b5536b, #c25f77);
  box-shadow: inset 0 1px 2px rgba(141,58,78,.4); position: relative; flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: linear-gradient(180deg, #ffffff, #f4eef0);
  box-shadow: 0 1px 2px rgba(45,31,36,.25);
}
.sbtn {
  border: 1px solid var(--line-2); border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fdf8f9);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(45,31,36,.05);
  font-size: 10.5px; font-weight: 600; color: var(--ink-2); padding: 7px 0; text-align: center;
}
.srow--close { margin-top: auto; color: var(--ink-3); }

/* rail activity feed */
.feed__label { font-size: 8.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); padding: 3px 2px 0; }
.feed { display: grid; gap: 7px; padding: 2px; }
.frow { display: flex; gap: 6px; align-items: center; font-size: 9.8px; color: var(--ink-2); min-width: 0; }
.frow .schip__dot { width: 6px; height: 6px; }
.frow b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow time { margin-left: auto; font-size: 9px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ═══ SEE IT LIVE — product reel ═══════════════════════════════════════── */
.reel {
  position: relative; padding: 92px 0; border-top: 1px solid var(--line);
  background: radial-gradient(820px 380px at 50% 0%, rgba(194,95,119,.05), transparent 62%);
}
.reel__player { max-width: 900px; margin: 40px auto 0; }
.reel__stage {
  position: relative; height: 448px; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(120% 100% at 22% 0%, rgba(255,255,255,.78), transparent 55%),
    linear-gradient(170deg, #fdf3f6, #f7e5eb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(194,95,119,.10), var(--sh-2);
}
.reel__scene {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 40px 40px 74px;
  opacity: 0; transform: translateY(14px) scale(.99);
  transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none;
}
.reel__scene--on { opacity: 1; transform: none; }
.reel__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 24px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.55) 40%, rgba(255,251,252,.9));
  text-align: center;
}
.reel__cap b { font-family: var(--display); font-size: 21px; font-weight: 500; color: var(--ink); display: block; }
.reel__cap span { font-size: 13px; color: var(--ink-2); }

/* chapter nav — labels double as progress bars */
.reel__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.reel__chip {
  position: relative; overflow: hidden; border: 1px solid var(--line); background: #fff;
  border-radius: 10px; padding: 10px 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(45,31,36,.04);
  transition: color .2s, border-color .2s;
}
.reel__chip:hover { color: var(--ink-2); border-color: var(--line-2); }
.reel__chip--on { color: var(--brand-deep); border-color: rgba(194,95,119,.3); }
.reel__chip-fill {
  position: absolute; left: 0; bottom: 0; height: 2.5px; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  transform: scaleX(0); transform-origin: left;
}
.reel__chip--on .reel__chip-fill { animation: reelfill 4.6s linear forwards; }
@keyframes reelfill { to { transform: scaleX(1); } }

/* real-screenshot frames (drop-in for captured app screens) */
.shot { position: relative; }
.shot--browser {
  width: min(100%, 720px); border-radius: 14px; overflow: hidden;
  border: 1px solid transparent;
  background: var(--face) padding-box, var(--edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--sh-2);
}
.shot__bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fffdfe, #fdf9fa); }
.shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.shot__bar i:nth-child(1) { background: #f0a9a2; } .shot__bar i:nth-child(2) { background: #f2cf9a; } .shot__bar i:nth-child(3) { background: #a8d4b4; }
.shot__url { margin-left: 12px; font-size: 10.5px; color: var(--ink-3); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 12px; }
.shot--browser .shot__img { aspect-ratio: 16 / 10; }
.shot--phone { width: 210px; border-radius: 30px; padding: 8px; background: linear-gradient(160deg, #4a3841, #241a1e); box-shadow: inset 0 1px 1px rgba(255,255,255,.18), var(--sh-2); }
/* UI-fragment crops (modals, cards) — plain floating card, no browser chrome. */
.shot--card {
  width: min(100%, 330px); border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-2);
}
.shot--card .shot__img { aspect-ratio: 6 / 7; }
.shot--phone .shot__img { aspect-ratio: 9 / 19; border-radius: 22px; }
.shot__img { position: relative; overflow: hidden; background: linear-gradient(170deg, #fdf3f6, #f7e5eb); }
.shot__img::after {
  content: "shots/" attr(data-shot) ".png"; position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--ink-3);
}
.shot__img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__scene--on .shot__img img { animation: kenburns 5s ease-out both; }
@keyframes kenburns { from { transform: scale(1.001); } to { transform: scale(1.06); } }
.shot__ping { position: absolute; z-index: 2; left: 62%; top: 52%; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--r); transform: translate(-50%,-50%); opacity: 0; pointer-events: none; }
.reel__scene--on .shot__ping { animation: shotping 2.4s ease-out infinite; }
@keyframes shotping { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 12% { opacity: .9; } 60% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); } 100% { opacity: 0; } }

/* ── Hero shot + How it works (screenshot-driven layout) ─────────────────── */
.hero__shot { width: 100%; }
/* Desktop: let the dashboard bleed into the wrap padding so it reads bigger
   without crushing the text column (wrap side padding is 32px — 28px is safe). */
/* Bleed only when the 1260px hero wrap is centered with spare margin to bleed
   into. Between 1081-1359px (iPad landscape etc.) the wrap fills the viewport,
   so a bleed would push the shot to ~4px from the screen edge. */
@media (min-width: 1360px) {
  .hero__shot { width: calc(100% + 28px); max-width: none; }
}
.hiw { padding: 92px 0; }
.hiw__rows { display: grid; gap: 60px; max-width: 1000px; margin: 54px auto 0; }
.hiw__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.hiw__row:nth-child(even) .hiw__media { order: 2; }
.hiw__media { display: flex; justify-content: center; min-width: 0; }
.hiw__media .shot--browser { width: 100%; }
.hiw__step { display: inline-block; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.hiw__step--pro { color: var(--brand-deep); }
.hiw__text h3 { font-family: var(--display); font-weight: 500; font-size: clamp(23px, 2.6vw, 29px); line-height: 1.15; color: var(--ink); margin-bottom: 12px; }
.hiw__text p { font-size: 15px; line-height: 1.62; color: var(--ink-2); max-width: 42ch; }
@media (max-width: 900px) {
  .hiw__rows { gap: 48px; }
  .hiw__row { grid-template-columns: 1fr; gap: 20px; max-width: 560px; margin: 0 auto; }
  .hiw__row:nth-child(even) .hiw__media { order: 0; }
  .hiw__text p { max-width: none; }
}
/* Once a real screenshot loads (onload adds --ok), the frame hugs the image's
   natural ratio — no crop, no letterbox. The fixed aspect + filename label
   apply only to the empty placeholder state. */
.shot__img.shot__img--ok { aspect-ratio: auto; }
.shot__img.shot__img--ok::after { content: none; }
.shot__img.shot__img--ok img { height: auto; }

/* ── Mini gallery: auto-cycling slides + dots inside a shot frame ────────── */
.mini-gal { display: grid; gap: 12px; justify-items: center; width: 100%; }
.mini-gal .shot { width: 100%; }
.mini-gal .shot--phone { width: 210px; }
.mini-gal__frame { position: relative; }
.mini-gal__frame .mini-gal__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
/* first slide stays in flow — its natural ratio defines the frame height */
.mini-gal__frame .mini-gal__slide:first-child { position: relative; }
.mini-gal__frame .mini-gal__slide--on { opacity: 1; pointer-events: auto; }
/* stacked (absolute) slides letterbox on white so mixed ratios sit cleanly */
.mini-gal__frame .mini-gal__slide + .mini-gal__slide { background: #fff; }
.mini-gal__frame .mini-gal__slide + .mini-gal__slide img { height: 100%; object-fit: contain; }
.mini-gal__dots { display: flex; gap: 8px; }
.mini-gal__dot {
  width: 8px; height: 8px; border-radius: 99px; border: none; padding: 0; cursor: pointer;
  background: var(--line-2); transition: background .2s, width .25s var(--ease);
  caret-color: transparent;
}
.mini-gal__dot:hover { background: var(--brand); }
.mini-gal__dot:focus:not(:focus-visible) { outline: none; }
.mini-gal__dot--on { background: var(--brand); width: 22px; }

/* ── Legal pages (terms.html / privacy.html) ─────────────────────────────── */
.legal { padding: 60px 0 96px; }
.legal__wrap { max-width: 780px; }
.legal h1 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4vw, 48px); line-height: 1.05; margin: 14px 0 8px; }
.legal__meta { font-size: 13px; color: var(--ink-3); margin-bottom: 36px; }
.legal h2 {
  font-family: var(--display); font-weight: 500; font-size: 25px; color: var(--brand-deep); margin: 40px 0 12px;
  /* Cormorant defaults to old-style (x-height) figures — lining figures keep
     the section numbers cap-height, consistent with the heading text. */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}
.legal p { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin-bottom: 14px; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; display: grid; gap: 8px; }
.legal li { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.legal li::marker { color: var(--brand); }
.legal li b, .legal p b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal .eyebrow + h1 { margin-top: 16px; }
.hd__nav--legal a + a::before { display: none; }
.ft--legal { padding: 26px 0; }

/* shared reel table tiles */
.rl-t {
  position: absolute; display: grid; place-items: center;
  border: 2px solid var(--tile); border-radius: 9px;
  background: linear-gradient(180deg, #fff, #fdf9fa);
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(45,31,36,.05);
}
.rl-t--rd { border-radius: 50%; }
.rl-t--lk { border-color: var(--g); color: var(--g); }

/* Scene 1 — floor editor */
.rl-ed {
  width: min(100%, 440px); border-radius: 14px; overflow: hidden;
  border: 1px solid transparent;
  background: var(--face) padding-box, var(--edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--sh-2);
}
.rl-ed__bar { display: flex; align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fffdfe, #fdf9fa); }
.rl-ed__bar span { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.rl-ed__done { margin-left: auto; font-size: 10px; font-weight: 700; color: #fff; padding: 5px 13px; border-radius: 7px; background: linear-gradient(180deg, #cf6d85, #b5536b); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px -1px rgba(194,95,119,.5); }
.rl-ed__cv { position: relative; height: 224px; background: radial-gradient(circle, #f2e4e9 1px, transparent 1.1px) 0 0 / 20px 20px, linear-gradient(180deg, #fffefe, #fdfafb); }
.rl-t--drag {
  border-color: var(--brand); color: var(--brand-deep); border-style: dashed;
  box-shadow: 0 10px 24px -6px rgba(194,95,119,.45);
  animation: rl-drag 4.6s var(--ease) infinite;
}
@keyframes rl-drag {
  0%, 10% { transform: translate(0,0); border-style: dashed; border-color: var(--brand); color: var(--brand-deep); }
  40% { transform: translate(-118px, -52px); border-style: dashed; }
  48% { transform: translate(-128px, -54px); border-style: dashed; }
  55%, 60% { transform: translate(-128px, -54px); border-style: solid; border-color: var(--g); color: var(--g); box-shadow: 0 0 0 4px rgba(74,142,95,.14); }
  70%, 100% { transform: translate(-128px, -54px); border-style: solid; border-color: var(--tile); color: var(--ink-2); box-shadow: 0 1px 2px rgba(45,31,36,.05); }
}

/* Scene 2 — QR card */
.rl-qr { position: relative; width: 226px; }
.rl-qr__card {
  position: relative; z-index: 2; border-radius: 15px; padding: 24px 22px 18px; text-align: center;
  border: 1px solid transparent;
  background: var(--face) padding-box, var(--edge) border-box;
  box-shadow: inset 0 1px 0 #fff, var(--sh-2); overflow: hidden;
}
.rl-qr__v { font-family: var(--display); font-size: 16px; letter-spacing: .05em; }
.rl-qr__h { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 3px 0 14px; }
.rl-qr__card svg { width: 112px; height: 112px; display: block; margin: 0 auto; }
.rl-qr__scan {
  position: absolute; left: 22px; right: 22px; height: 2px; border-radius: 2px; top: 96px;
  background: linear-gradient(90deg, transparent, rgba(194,95,119,.8), transparent);
  opacity: 0; animation: rl-scan 4.6s ease-in-out infinite;
}
@keyframes rl-scan {
  0%, 14% { opacity: 0; top: 96px; }
  22% { opacity: 1; }
  50% { top: 188px; opacity: 1; }
  60%, 100% { opacity: 0; top: 96px; }
}
.rl-qr__m { font-family: var(--display); font-style: italic; font-size: 13px; color: var(--brand-deep); margin-top: 12px; }
.rl-qr__t { font-size: 9px; font-weight: 700; letter-spacing: .15em; color: var(--ink-3); margin-top: 8px; }
.rl-qr__sh { position: absolute; inset: 0; background: linear-gradient(180deg, #fff, #fefafb); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--sh-1); }
.rl-qr__sh--1 { transform: rotate(3deg) translate(10px, 6px); z-index: 1; }
.rl-qr__sh--2 { transform: rotate(-2.4deg) translate(-9px, 9px); z-index: 0; }

/* Scene 3 — guest phone */
.rl-ph { width: 168px; height: 300px; border-radius: 30px; padding: 7px; background: linear-gradient(160deg, #4a3841, #241a1e); box-shadow: inset 0 1px 1px rgba(255,255,255,.18), var(--sh-2); }
.rl-ph__scr { width: 100%; height: 100%; border-radius: 24px; background: linear-gradient(180deg, #fffbf8, #fef6f1); padding: 22px 14px 15px; display: flex; flex-direction: column; overflow: hidden; }
.rl-ph__v { font-family: var(--display); font-size: 14px; text-align: center; letter-spacing: .04em; }
.rl-ph__q { font-size: 11px; font-weight: 600; color: var(--ink-2); text-align: center; margin: 11px 0 12px; }
.rl-ph__b { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 11px 0; border-radius: 12px; border: 1px solid var(--line-2); color: var(--ink-2); margin-bottom: 8px; background: linear-gradient(180deg, #fff, #fdfafb); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(45,31,36,.05); }
.rl-ph__b--dn { color: var(--r); border-color: rgba(201,84,74,.4); animation: rl-tap 4.6s var(--ease) infinite; }
@keyframes rl-tap {
  0%, 22% { transform: scale(1); background: linear-gradient(180deg, #fff, #fdfafb); }
  28%, 34% { transform: scale(.96); background: linear-gradient(180deg, #fdf1f0, #fceceb); box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(201,84,74,.1); }
  42%, 100% { transform: scale(1); }
}
.rl-ph__tags { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 6px; opacity: 0; animation: rl-tags 4.6s var(--ease) infinite; }
@keyframes rl-tags { 0%, 40% { opacity: 0; transform: translateY(6px); } 50%, 100% { opacity: 1; transform: none; } }
.rl-ph__tag { font-size: 9px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); background: #fff; }
.rl-ph__tag--on { background: linear-gradient(180deg, #d3665c, #c9544a); border-color: var(--r); color: #fff; box-shadow: 0 2px 6px -1px rgba(201,84,74,.5); }
.rl-ph__send { margin-top: auto; font-size: 10.5px; font-weight: 700; text-align: center; color: #fff; padding: 9px 0; border-radius: 10px; background: linear-gradient(180deg, #cf6d85, #b5536b); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 8px -2px rgba(194,95,119,.6); }

/* Scene 4 — dashboard alert */
.rl-app {
  width: min(100%, 460px); border-radius: 14px; overflow: hidden;
  border: 1px solid transparent;
  background: var(--face) padding-box, var(--edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--sh-2);
}
.rl-app__top { display: flex; align-items: center; gap: 6px; padding: 9px 13px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fffdfe, #fdf9fa); }
.rl-tab { font-size: 10.5px; font-weight: 600; color: var(--ink-3); padding: 5px 11px; border-radius: 7px; }
.rl-tab--on { background: linear-gradient(180deg, #fbedf1, #f7e3e9); color: var(--brand-deep); }
.rl-app__clock { margin-left: auto; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rl-app__live { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--g); }
.rl-app__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); box-shadow: 0 0 6px rgba(74,142,95,.7); animation: blink 2s ease-in-out infinite; }
.rl-app__floor { position: relative; height: 234px; background: radial-gradient(circle, #f2e4e9 1px, transparent 1.1px) 0 0 / 20px 20px, linear-gradient(180deg, #fffefe, #fdfafb); }
.rl-app__seq { animation: rl-seq 4.6s var(--ease) infinite; }
@keyframes rl-seq {
  0%, 14% { border-color: var(--tile); color: var(--ink-2); }
  20%, 64% { border-color: var(--r); color: var(--r); box-shadow: 0 0 0 4px rgba(201,84,74,.1), 0 6px 16px -4px rgba(201,84,74,.32); }
  74%, 100% { border-color: var(--tile); color: var(--ink-2); }
}
.rl-ring {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border: 1.5px solid var(--r);
  border-radius: 50%; transform: translate(-50%,-50%) scale(.5); opacity: 0;
  animation: rl-ringpulse 4.6s ease-out infinite; pointer-events: none;
}
@keyframes rl-ringpulse {
  0%, 15% { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  17% { opacity: .8; }
  26% { opacity: 0; transform: translate(-50%,-50%) scale(4.6); }
  27%, 100% { opacity: 0; }
}
.rl-rtag {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #fff, #fef7f6); border: 1px solid rgba(201,84,74,.45); color: var(--r);
  font-size: 9px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px -2px rgba(201,84,74,.35); opacity: 0;
  animation: rl-rtag 4.6s var(--ease) infinite;
}
@keyframes rl-rtag {
  0%, 18% { opacity: 0; transform: translateX(-50%) translateY(4px); }
  24%, 62% { opacity: 1; transform: translateX(-50%) translateY(0); }
  68%, 100% { opacity: 0; }
}
.rl-alert {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px; border: 1px solid rgba(201,84,74,.3); border-left: 3px solid var(--r);
  background: linear-gradient(180deg, #fff, #fffbfb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--sh-2); padding: 10px 12px;
  transform: translateY(calc(100% + 18px)); opacity: 0;
  animation: rl-alert 4.6s var(--ease) infinite;
}
@keyframes rl-alert {
  0%, 22% { transform: translateY(calc(100% + 18px)); opacity: 0; }
  30%, 62% { transform: translateY(0); opacity: 1; }
  70%, 100% { transform: translateY(calc(100% + 18px)); opacity: 0; }
}
.rl-alert i { color: var(--r); font-size: 17px; }
.rl-alert b { font-size: 11.5px; color: var(--ink); display: block; }
.rl-alert small { font-size: 10.5px; color: var(--ink-2); }
.rl-alert__btn {
  margin-left: auto; color: #fff; font-size: 10.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px;
  background: linear-gradient(180deg, #43323a, #2d1f24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px -1px rgba(45,31,36,.4);
  animation: rl-attend 4.6s var(--ease) infinite;
}
@keyframes rl-attend {
  0%, 55% { transform: scale(1); background: linear-gradient(180deg, #43323a, #2d1f24); }
  58%, 61% { transform: scale(.93); background: linear-gradient(180deg, #57a06c, #4a8e5f); }
  65%, 100% { transform: scale(1); }
}

/* ═══ WHAT YOU GET — capabilities + analytics merged ═══════════════════── */
.cap { position: relative; padding: 96px 0; border-top: 1px solid var(--line); }
.cap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 300px at 50% 0%, rgba(194,95,119,.05), transparent 65%);
}
.cap .wrap { position: relative; }
.cap__merge {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
.cap__list { display: grid; grid-template-columns: 1fr; }
.citem { display: flex; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.citem:last-child { border-bottom: none; }
.citem__ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 18px; color: var(--brand-deep);
  background: linear-gradient(180deg, #fbedf1, #f6dfe6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 2px rgba(141,58,78,.08), 0 1px 2px rgba(45,31,36,.05);
}
.citem h3 { font-size: 15px; font-weight: 600; color: #82334a; }
.citem__pro {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: linear-gradient(160deg, #cf6d85, #9c4359);
  padding: 2px 7px; border-radius: 999px; margin-left: 7px; vertical-align: middle; position: relative; top: -1px;
}
.citem p { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }

/* analytics column inside the merged section */
.cap__an-lead { font-size: 14px; color: var(--ink-2); max-width: 52ch; margin: 12px 0 16px; }
.probadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #fff;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(160deg, #cf6d85, #9c4359);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px -3px rgba(194,95,119,.6);
}
.an__note { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.an__note b { color: var(--ink); }
.ancard {
  border-radius: 18px; padding: 26px 28px 24px;
  border: 1px solid transparent;
  background: var(--face) padding-box, var(--edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-2), 0 34px 66px -34px rgba(194,95,119,.3);
}
.ancard h4 { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
/* guest-activity heatmap — animates in when the column scrolls into view (.cap__an.in) */
.anheat { display: grid; grid-template-columns: 26px 1fr; gap: 6px; }
.anheat__days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; }
.anheat__days span { font-size: 8.5px; color: var(--ink-3); display: flex; align-items: center; }
.anheat__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: 4px; }
.hc { border-radius: 3px; aspect-ratio: 1.5; box-shadow: inset 0 0 0 .5px rgba(141,58,78,.05); }
/* top-to-bottom cascade when the card is well into view */
.anheat__grid .hc { opacity: 0; transform: scale(.72); }
.ancard.an-play .anheat__grid .hc { animation: cell-in .65s var(--ease) forwards; }
.ancard.an-play .anheat__grid .hc:nth-child(-n+12) { animation-delay: 0s; }
.ancard.an-play .anheat__grid .hc:nth-child(n+13):nth-child(-n+24) { animation-delay: .14s; }
.ancard.an-play .anheat__grid .hc:nth-child(n+25):nth-child(-n+36) { animation-delay: .28s; }
.ancard.an-play .anheat__grid .hc:nth-child(n+37):nth-child(-n+48) { animation-delay: .42s; }
.ancard.an-play .anheat__grid .hc:nth-child(n+49):nth-child(-n+60) { animation-delay: .56s; }
.ancard.an-play .anheat__grid .hc:nth-child(n+61):nth-child(-n+72) { animation-delay: .7s; }
.ancard.an-play .anheat__grid .hc:nth-child(n+73) { animation-delay: .84s; }
@keyframes cell-in { to { opacity: 1; transform: scale(1); } }
.h0 { background: #f7edf0; } .h1 { background: #f0cdd7; } .h2 { background: #e0a2b3; } .h3 { background: #cb6f88; } .h4 { background: #a44a60; }
.anheat__hours { display: flex; justify-content: space-between; font-size: 8px; color: var(--ink-3); margin-top: 5px; }
.anheat__legend { display: flex; align-items: center; gap: 4px; font-size: 8.5px; color: var(--ink-3); margin-top: 10px; }
.anheat__legend .hc { width: 10px; aspect-ratio: 1; }

/* two mini graphs below the heatmap */
.an-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 20px; }
.anmini h5 { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 13px; }

/* top issues — ranked horizontal bars */
.ibar { display: grid; grid-template-columns: 56px 1fr 28px; align-items: center; gap: 8px; margin-bottom: 10px; }
.ibar > span { font-size: 11px; color: var(--ink-2); }
.ibar > b { font-size: 11px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.ibar > i { position: relative; height: 7px; border-radius: 4px; background: #f4e4ea; }
.ibar > i::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px;
  background: linear-gradient(90deg, #cb6f88, #9c4359); transform: scaleX(0); transform-origin: left;
}
.ancard.an-play .ibar > i::after { animation: an-grow-x .9s var(--ease) .35s forwards; }
@keyframes an-grow-x { to { transform: scaleX(1); } }

/* busiest hours — vertical histogram */
.anbars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.anbars > i {
  flex: 1; height: var(--h); min-height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #d98aa0, #b5536b);
  transform: scaleY(0); transform-origin: bottom;
}
.ancard.an-play .anbars > i { animation: an-grow-y .7s var(--ease) .4s forwards; }
@keyframes an-grow-y { to { transform: scaleY(1); } }
.anbars-x { display: flex; justify-content: space-between; font-size: 8.5px; color: var(--ink-3); margin-top: 6px; }

/* ═══ PRICING ══════════════════════════════════════════════════════════── */
.pr { position: relative; padding: 106px 0; }
.pr::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px 340px at 50% 8%, rgba(194,95,119,.05), transparent 62%); }
.pr__cards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 410px)); gap: 24px; justify-content: center; }
.pcard {
  border-radius: 20px; padding: 34px 32px; display: flex; flex-direction: column; position: relative;
  border: 1px solid transparent;
  background: var(--face) padding-box, linear-gradient(160deg, rgba(194,95,119,.18), rgba(194,95,119,.05) 45%, rgba(194,95,119,.10)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-2); }
.pcard--pro {
  background: linear-gradient(180deg, #ffffff 0%, #fdf4f7 100%) padding-box,
              linear-gradient(160deg, rgba(194,95,119,.65), rgba(194,95,119,.2) 45%, rgba(194,95,119,.5)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(45,31,36,.05), 0 20px 48px -16px rgba(194,95,119,.35);
}
.pcard__badge {
  position: absolute; top: -12px; left: 32px; color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px;
  background: linear-gradient(160deg, #cf6d85, #9c4359);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px -3px rgba(194,95,119,.6);
}
.pcard__name { font-family: var(--display); font-size: 25px; font-weight: 500; }
.pcard__for { font-size: 13px; color: var(--ink-2); margin: 3px 0 22px; }
.pcard__price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.pcard__price .n { font-family: var(--display); font-size: 52px; font-weight: 500; line-height: 1; }
.pcard__price .p { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.pcard ul { list-style: none; display: grid; gap: 10px; margin-bottom: 28px; }
.pcard li { display: flex; gap: 10px; font-size: 13.5px; align-items: baseline; color: var(--ink); }
.pcard li i { color: var(--brand); font-size: 14px; position: relative; top: 1px; }
.pcard li.mut { color: var(--ink-2); }
.pcard .btn { margin-top: auto; }
.pr__note { position: relative; text-align: center; margin-top: 28px; font-size: 13.5px; color: var(--ink-2); }

/* ═══ FAQ ══════════════════════════════════════════════════════════════── */
.fq { padding: 106px 0; border-top: 1px solid var(--line); }
.fq__head { text-align: center; max-width: 560px; margin: 0 auto 46px; }
.fq__head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4vw, 44px); margin: 16px 0 10px; }
.fq__head p { font-size: 15px; color: var(--ink-2); }
.fq__head p a { color: var(--brand-deep); font-weight: 600; }
.fq__head .eyebrow { justify-content: center; }
.fq__list { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--line); }
.fq__item { border-bottom: 1px solid var(--line); }
.fq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 600; color: var(--ink); padding: 19px 2px; transition: color .15s;
}
.fq__q:hover { color: var(--brand-deep); }
.fq__q i { font-size: 17px; color: var(--brand); transition: transform .25s var(--ease); flex-shrink: 0; }
.fq__item--open .fq__q i { transform: rotate(90deg); }
.fq__a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.fq__a p { padding: 0 30px 20px 2px; font-size: 14px; color: var(--ink-2); max-width: 62ch; }

/* ═══ CONTACT / BOOK A DEMO ════════════════════════════════════════════── */
.contact {
  position: relative; padding: 96px 0; border-top: 1px solid var(--line);
  background: radial-gradient(820px 380px at 14% 0%, rgba(194,95,119,.06), transparent 60%);
}
.contact__in { position: relative; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: clamp(40px, 6vw, 72px); align-items: center; }
.contact__pitch h2 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; margin: 16px 0 14px; }
.contact__pitch h2 em { font-style: italic; color: var(--brand-deep); }
.contact__pitch > p { font-size: 15.5px; color: var(--ink-2); max-width: 46ch; }
.contact__pts { list-style: none; margin: 24px 0; display: grid; gap: 13px; }
.contact__pts li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--ink); }
.contact__pts i {
  color: var(--brand-deep); font-size: 18px; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(180deg, #fbedf1, #f6dfe6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 2px rgba(141,58,78,.08);
}
.contact__alt { font-size: 13.5px; color: var(--ink-2); }
.contact__alt a { color: var(--brand-deep); font-weight: 600; }

.contact__card {
  position: relative;
  border-radius: 20px; padding: 24px 26px 22px; display: grid; gap: 14px;
  border: 1px solid transparent;
  background: var(--face) padding-box, var(--edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh-2);
}
.contact__card-eyebrow { margin-bottom: 2px; }
.contact__card-eyebrow::before { display: none; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.field label span { color: var(--ink-3); font-weight: 500; }
.field input, .field textarea {
  font-family: var(--ui); font-size: 14px; color: var(--ink);
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff;
  box-shadow: inset 0 1px 2px rgba(141,58,78,.04); transition: border-color .15s, box-shadow .15s; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(194,95,119,.12); }
.contact__card .btn { margin-top: 4px; }
.contact__card .btn:disabled { opacity: .6; cursor: default; pointer-events: none; }
.contact__fine { font-size: 11.5px; color: var(--ink-3); text-align: center; transition: color .18s; }
.cf-status--ok { color: var(--brand-deep); font-weight: 600; }
.cf-status--err { color: #b23c3c; font-weight: 600; }
/* Honeypot — off-screen, never focusable, invisible to humans. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Contact: confirmation state (replaces the fields once sent) ──────────── */
/* Keep the fields' footprint (visibility, not display) so the card height stays
   fixed — no reflow of the footer below. The panel overlays absolutely-centered. */
.contact__card--sent > .field,
.contact__card--sent > .btn,
.contact__card--sent > .contact__card-eyebrow,
.contact__card--sent > .contact__fine { visibility: hidden; }
.contact__done { display: none; text-align: center; justify-items: center; gap: 10px; }
.contact__card--sent > .contact__done {
  display: grid; align-content: center;
  position: absolute; inset: 0; padding: 24px 26px;
}
.contact__done-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-size: 27px; color: var(--brand-deep);
  background: var(--wash-deep); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.contact__done h3 { font-family: var(--display); font-weight: 500; font-size: 26px; color: var(--brand-deep); line-height: 1.1; }
.contact__done p { font-size: 14px; color: var(--ink-2); max-width: 34ch; }
.contact__again {
  margin-top: 4px; background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--brand);
  padding: 6px 4px; border-bottom: 1px solid transparent; transition: border-color .15s;
}
.contact__again:hover { border-bottom-color: var(--brand); }

/* ═══ FINAL CTA — the jewel ════════════════════════════════════════════── */
.cta { padding: 30px 0 96px; }
.cta__panel {
  position: relative; border-radius: 26px; overflow: hidden;
  padding: 96px 40px; text-align: center; color: #fff;
  background:
    radial-gradient(760px 340px at 16% -14%, rgba(255,255,255,.30), transparent 55%),
    radial-gradient(900px 480px at 90% 120%, rgba(40,12,22,.48), transparent 62%),
    linear-gradient(150deg, #c4607b 0%, #a1465b 55%, #82334a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.09),
              0 32px 80px -28px rgba(141,58,78,.55);
}
.cta__panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
}
.cta__panel h2 { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.4vw, 50px); line-height: 1.1; max-width: 22ch; margin: 0 auto 14px; }
.cta__panel h2 em { font-style: italic; color: #ffd9e2; }
.cta__panel p { font-size: 16px; opacity: .9; margin-bottom: 32px; }
.cta__note { margin-top: 16px; font-size: 12.5px; opacity: .75; }

/* ═══ FOOTER ═══════════════════════════════════════════════════════════── */
.ft { position: relative; color: rgba(255,255,255,.72); padding: 62px 0 0; background: linear-gradient(180deg, #342329 0%, #2d1f24 100%); }
.ft::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(194,95,119,.55), transparent); }
.ft__in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.ft .logo-word { color: #fff; }
.ft__tag { font-size: 13px; margin-top: 12px; max-width: 30ch; }
.ft__mail { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; color: #e5b4c0; }
.ft__mail i { font-size: 15px; }
.ft__mail:hover { text-decoration: underline; }
.ft h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.ft__col a { display: block; font-size: 13.5px; margin-bottom: 10px; transition: color .15s; }
.ft__col a:hover { color: #fff; }
.ft__bot { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; }
.ft__bot-in { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,.4); flex-wrap: wrap; gap: 10px; }
.ft__legal { display: flex; gap: 16px; }
.ft__legal a:hover { color: #fff; }

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════── */
/* ── ≤1080 — hero stacks: text above, dashboard below ─────────────────────── */
@media (max-width: 1080px) {
  .hero { padding: 60px 0 72px; }
  .hero__in { grid-template-columns: 1fr; gap: 40px; }
  .hero__sub { max-width: 52ch; }
  .hero__stage { display: flex; justify-content: center; }
  .hero__shot { width: min(100%, 720px); }
}

/* ── ≤1020 — mid sections go single-column ────────────────────────────────── */
@media (max-width: 1020px) {
  .cap__merge { grid-template-columns: 1fr; gap: 40px; }
  .contact__in { grid-template-columns: 1fr; gap: 40px; }
  .pr__cards { grid-template-columns: minmax(0, 440px); }
}

/* ── ≤990 — header collapses to the burger BEFORE the nav can overflow ────── */
@media (max-width: 990px) {
  .hd__nav, .hd__cta { display: none; }
  .burger { display: block; }
  .m-nav { display: none; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 24px 20px; }
  .m-nav--open { display: flex; }
  .m-nav a { padding: 13px 2px; font-size: 15.5px; font-weight: 500; border-bottom: 1px solid var(--line); }
  .m-nav .btn { margin-top: 14px; border-bottom: none; }
}

/* ── ≤760 — phone scale ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* phone sections have slimmer padding (60-68px), so anchors need their own
     offset to keep headings clear of the 68px sticky header */
  main section, main div[id] { scroll-margin-top: 28px; }
  .hero { padding: 40px 0 56px; }
  .hero h1 { font-size: clamp(31px, 9vw, 38px); }
  .hero__sub { font-size: 15.5px; margin-bottom: 26px; }
  .hero__benefits { gap: 10px 18px; }
  .sec-head { margin-bottom: 38px; }
  .sec-head h2 { font-size: clamp(28px, 7.4vw, 45px); }
  .hiw { padding: 60px 0; }
  .hiw__rows { margin-top: 36px; }
  .cap { padding: 64px 0; }
  .pr { padding: 68px 0; }
  .fq { padding: 68px 0; }
  .contact { padding: 64px 0; }
  .contact__pitch h2 { font-size: clamp(27px, 7vw, 42px); }
  .contact__card { padding: 20px 18px 18px; }
  .legal { padding: 36px 0 68px; }
  .ft__in { grid-template-columns: 1fr; gap: 30px; }
}

/* ── ≤400 — micro phones ──────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .hero__benefits { grid-template-columns: 1fr; gap: 9px; }
  .mini-gal .shot--phone { width: 180px; }
  .pcard { padding-left: 20px; padding-right: 20px; }
}

/* ═══ REDUCED MOTION — freeze on the most informative frame ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, [data-stagger] > * { opacity: 1; transform: none; }
  .ln span { opacity: 1; transform: none; }
  .anheat__grid .hc { opacity: 1; transform: none; }
  .ibar > i::after { transform: scaleX(1); }
  .anbars > i { transform: scaleY(1); }
  .hero__sub, .hero__cta, .hero__note, .hero__stage { opacity: 1; }
  .t--seq, .t--seq .t__p { border-color: var(--r); color: var(--r); }
  .rtag { opacity: 1; transform: translateX(-50%); }
  .acard { transform: none; opacity: 1; }
  .schip--attn .c0 { opacity: 0; } .schip--attn .c1 { opacity: 1; }
  /* reel: freeze each scene on its telling frame, show all captions stacked is avoided —
     JS still switches scenes on click; internal loops just hold */
  .reel__chip--on .reel__chip-fill { animation: none; transform: scaleX(1); }
  .rl-t--drag { transform: translate(-128px, -54px); border-color: var(--tile); color: var(--ink-2); border-style: solid; }
  .rl-qr__scan { opacity: 0; }
  .rl-ph__b--dn { background: linear-gradient(180deg, #fdf1f0, #fceceb); }
  .rl-ph__tags { opacity: 1; }
  .rl-app__seq { border-color: var(--r); color: var(--r); }
  .rl-rtag { opacity: 1; transform: translateX(-50%); }
  .rl-alert { transform: none; opacity: 1; }
}