/* ============================================================
   Curious: the site stylesheet.
   Emberlight, at monumental scale. One file, no build.
   Order: tokens, fonts, base, type, components, sections, pages, motion.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;

  /* inks */
  --void: #0B0E17;        /* page ground */
  --ink-deep: #10131F;    /* stages */
  --ink: #181C31;         /* raised panels */
  --panel: #121623;       /* cards */
  --glass-black: #050608; /* device glass and bezels */
  --paper: #FFFFFF;       /* QR plates */
  --metal-1: #E4E8F0;     /* laptop base */
  --metal-2: #C4CBD9;
  --metal-3: #9BA3B5;
  --frame: linear-gradient(140deg, #a3aab8 0%, #555b69 16%, #2a2d36 42%, #383c47 68%, #9aa1b0 100%);

  /* ember: the one accent, flat, never a gradient. 6.7:1 on void, and 6.7:1
     for void text on an ember button (white on ember would fail). The
     wordmark dot is ember too. */
  --ember: #F7701E;
  --ember-a12: rgba(247, 112, 30, 0.12);
  --ember-a40: rgba(247, 112, 30, 0.4);
  --ember-text: #F7701E;  /* small orange text; darker in light mode, where ember fails */
  --on-ember: #0B0E17;    /* text on an ember fill, in both themes */
  --gold: #F5C518;        /* collected badges, as the guide shows them */
  --live: #5BD69A;        /* "live" status dots and success states only */
  --alert: #FF8A7A;       /* form errors only */

  /* text */
  --tx: #EDF0F8;
  --tx-body: #C6CCDD;
  --tx-mute: #9AA3BA;
  --tx-dim: #7A84A0;     /* 5.2:1 on void: the faintest text that still reads */

  /* glass + lines */
  --glass-rgb: 255 255 255; /* rgb(var(--glass-rgb) / a) tints toward the text colour */
  --glass: rgb(var(--glass-rgb) / 0.05);
  --glass-hi: rgb(var(--glass-rgb) / 0.09);
  --line: rgb(var(--glass-rgb) / 0.08);
  --line-hi: rgb(var(--glass-rgb) / 0.16);

  /* panels, floating chips and shadows: the parts that change with the theme */
  --panel-hi: #1c2138;    /* the lit corner of a card's glow */
  --panel-lo: #0d1019;    /* its dark edge */
  --float-bg: rgba(20, 24, 40, 0.74);
  --sh-rgb: 0 0 0;        /* shadows: rgb(var(--sh-rgb) / calc(a * var(--sh-k))) */
  --sh-k: 1;

  /* type: one family, Inter, in two roles: labels and text */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fs-mega: clamp(3rem, 6.3vw, 6.6rem);    /* the home hero */
  --fs-title: clamp(2.7rem, 6.6vw, 6.4rem); /* section titles: "The features." */
  --fs-title-long: clamp(2.4rem, 5vw, 4.9rem); /* titles that are whole sentences */
  --fs-h2: clamp(2rem, 3.8vw, 3.3rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.8rem);
  --fs-lede: clamp(1.1rem, 1.5vw, 1.36rem);
  --fs-body: 1.02rem;
  --fs-small: 0.88rem;
  --fs-label: 0.74rem;   /* small-capital labels: pills, tags, figure labels */
  --fs-fine: 0.82rem;    /* fine print, captions, the legal line */

  /* space */
  --wrap: 84rem;
  --wrap-wide: 100rem;
  --gutter: clamp(1.1rem, 4.6vw, 4.5rem);
  --sp-sec: clamp(5rem, 9vw, 8.5rem);

  /* shape */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* motion: one curve */
  --ease: cubic-bezier(0.22, 0.9, 0.24, 1);
  --t-hover: 350ms;
  --t-reveal: 900ms;
}


/* Light mode, set by js/theme.js as data-theme="light" on <html>. The values
   are the portal's own light theme (../curious css/base.css), so the site and
   the dashboard switch together. Ember fills keep the brand value; small orange
   text uses --ember-text, which reads on paper. */
:root[data-theme="light"] {
  color-scheme: light;
  --void: #F4F5F9;
  --ink-deep: #ECEEF4;
  --ink: #E6E9F1;
  --panel: #FFFFFF;
  --panel-hi: #FFFFFF;
  --panel-lo: #F0F2F7;
  --float-bg: rgba(255, 255, 255, 0.86);
  --glass-rgb: 16 19 31;
  --line: rgb(var(--glass-rgb) / 0.09);
  --line-hi: rgb(var(--glass-rgb) / 0.17);
  --sh-rgb: 16 19 31;
  --sh-k: 0.28;

  --tx: #10131F;
  --tx-body: #3A4157;
  --tx-mute: #596177;
  --tx-dim: #677087;

  --ember-text: #B04A08;  /* 5:1 on paper */
  --ember-a12: rgba(247, 112, 30, 0.13);
  --gold: #B98A00;
  --live: #1E8A57;
  --alert: #C2412F;
}

/* ---------- fonts ---------- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--tx);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--ember-a40); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--wrap-wide); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 999; background: var(--tx); color: var(--void); padding: 0.6rem 1rem; border-radius: var(--r-sm); }
.skip:focus { top: 1rem; }
section { position: relative; overflow-x: clip; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; color: var(--tx); }
.mega { font-size: var(--fs-mega); line-height: 0.96; letter-spacing: -0.052em; font-weight: 720; }
.title { font-size: var(--fs-title); line-height: 0.95; letter-spacing: -0.052em; font-weight: 720; }
.title--long { font-size: var(--fs-title-long); line-height: 0.98; letter-spacing: -0.048em; }
/* the ember full stop: section titles end on the brand's dot */
.stop { color: var(--ember); }
.h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; }
.h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.03em; font-weight: 650; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--tx-body); letter-spacing: -0.01em; margin: 0; max-width: 46ch; }
p { margin: 0; color: var(--tx-body); }
.em { font-style: normal; color: var(--ember); }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ember-text);
  background: var(--ember-a12);   /* a soft orange highlight, not an outlined pill */
  border: 0;
  border-radius: 4px;
  padding: 0.42rem 0.7rem;
}
.tag { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); }
.fine { font-size: var(--fs-fine); line-height: 1.5; color: var(--tx-dim); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- wordmark ---------- */
.wordmark { font-weight: 750; font-size: 1.42rem; letter-spacing: -0.045em; text-decoration: none; color: var(--tx); }
.wordmark i { font-style: normal; color: var(--ember); }
.wordmark.blink i { animation: dotblink 0.9s var(--ease) 1; }
/* the first-visit splash (js/splash.js): the page waits under a cover until the logo zooms home */
html.splash { overflow: hidden; }
html.splash::after { content: ""; position: fixed; inset: 0; z-index: 1000; background: var(--void); }
html.splash-play::after { display: none; }
html.splash [data-wordmark] { opacity: 0; }
html.splash-out [data-wordmark] { opacity: 1; transition: opacity 0.12s 0.66s;  /* the last 12% of js/splash.js ZOOM_MS */ }
.splash-cover { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--void); }
.splash-cover__mark { width: min(64vw, 60rem); transform-origin: 0 0; will-change: transform; }
@keyframes dotblink { 0%, 100% { opacity: 1; } 30% { opacity: 0.1; } 60% { opacity: 1; } 80% { opacity: 0.4; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-pill);
  padding: 0.95rem 1.7rem;
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease);
}
.btn--ember { background: var(--ember); color: var(--on-ember); box-shadow: 0 10px 30px rgba(247, 112, 30, 0.3); }
.btn--ghost { background: var(--glass); border: 1px solid var(--line-hi); color: var(--tx); }
.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.88rem; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: 0.45rem; align-items: center; color: var(--tx); }
.link-arrow span { transition: transform var(--t-hover) var(--ease); }
@media (hover: hover) {
  .btn--ember:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 16px 44px rgba(247, 112, 30, 0.42); }
  .btn--ghost:hover { border-color: rgb(var(--glass-rgb) / 0.32); transform: translateY(-2px); }
  .link-arrow:hover span { transform: translateX(4px); }
}
.btn:active { transform: scale(0.98); }
.ctas { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; }
.ctas--c { justify-content: center; margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- nav: sits at the top of the page and scrolls away with it ---------- */
.nav { position: absolute; inset: 0 0 auto; z-index: 100; }
/* three columns, the outer two equal, so the links sit on the page's true centre */
.nav__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 4.5rem; gap: 2rem; }
.nav__row > :first-child { justify-self: start; }
.nav__end { justify-self: end; }
.nav__links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.nav__links a { text-decoration: none; color: var(--tx-mute); transition: color var(--t-hover) var(--ease); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--tx); }
.nav__end { display: flex; align-items: center; gap: 1.4rem; font-size: 0.92rem; }
.nav__end > a:not(.btn) { text-decoration: none; color: var(--tx-mute); }
.nav__end > a:not(.btn):hover { color: var(--tx); }
.nav__burger { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--tx); border-radius: 2px; margin: 5px 0; transition: transform var(--t-hover) var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav__sheet { display: none; }
@media (max-width: 960px) {
  .nav__links, .nav__end > a:not(.btn) { display: none; }
  .nav__burger { display: block; }
  .nav__sheet.is-open {
    display: flex; flex-direction: column; gap: 0.2rem;
    position: absolute; inset: 4.5rem 0 auto; min-height: calc(100dvh - 4.5rem); padding: 1rem var(--gutter) 2rem;
    background: var(--void); border-top: 1px solid var(--line);
  }
  .nav__sheet a { text-decoration: none; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.03em; padding: 0.55rem 0; }
  .nav__sheet a[aria-current] { color: var(--ember-text); }
  .nav:has(.nav__sheet.is-open) { background: var(--void); }
}
@media (max-width: 520px) { .nav__end .btn { padding: 0.5rem 0.95rem; font-size: 0.84rem; } }

/* the dark / light switch: a sun in dark mode, a moon in light mode. It needs
   js/theme.js, so without JavaScript it stays hidden and the site stays dark. */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 2.4rem; padding: 0; flex: none;
  border-radius: 50%; border: 1px solid var(--line-hi); background: var(--glass);
  color: var(--tx-mute); cursor: pointer;
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.theme-toggle:hover { color: var(--tx); border-color: rgb(var(--glass-rgb) / 0.32); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon, :root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
:root:not([data-theme]) .theme-toggle { display: none; }

/* screenshots of the portal come in both themes; each shows in its own */
:root[data-theme="light"] .th-dark, :root:not([data-theme="light"]) .th-light { display: none; }

/* ---------- the device: a real phone, drawn by the site ----------
   The image is the whole screen, status bar and island included (baked by
   tools/import-raw.mjs, 390x871pt). Margin percentages resolve against the
   device's own width, so the black bezel is equal on every side and the same
   thickness on every phone, however the phone is positioned. The titanium
   band is a border painted with a metallic gradient. */
.device {
  position: relative;
  border: clamp(2px, 0.2vw, 3.5px) solid transparent;
  border-radius: 13.6% / 6.1%;
  background: linear-gradient(var(--glass-black), var(--glass-black)) padding-box, var(--frame) border-box;
  box-shadow: 0 44px 80px -16px rgb(var(--sh-rgb) / calc(0.7 * var(--sh-k))), 0 14px 28px rgb(var(--sh-rgb) / calc(0.35 * var(--sh-k)));
}
.device__screen {
  margin: 2.6%;
  overflow: hidden;
  border-radius: 11% / 4.93%;
  background: var(--glass-black);
  position: relative;
}
.device__screen img { width: 100%; height: auto; }

/* ---------- the laptop ---------- */
.laptop { position: relative; }
.laptop__screen {
  border: clamp(2px, 0.18vw, 3px) solid transparent;
  border-bottom: 0;
  background: linear-gradient(var(--glass-black), var(--glass-black)) padding-box, var(--frame) border-box;
  border-radius: 18px 18px 0 0;
  padding: 1.15% 1.15% 1.5%;
}
.laptop__screen img { width: 100%; border-radius: 4px 4px 0 0; }
.laptop__base {
  height: clamp(8px, 1.1vw, 15px);
  width: 112%;
  margin-left: -6%;
  background: linear-gradient(180deg, var(--metal-1) 0%, var(--metal-2) 78%, var(--metal-3) 100%);
  border-radius: 2px 2px 12px 12px;
  position: relative;
  box-shadow: 0 30px 60px rgb(var(--sh-rgb) / calc(0.45 * var(--sh-k)));
}
.laptop__base::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 13%; height: 40%;
  background: var(--metal-3);
  border-radius: 0 0 8px 8px;
}

/* ---------- the wall display (Live Labels) ---------- */

/* ---------- glass chip (product callouts on the feature cards) ---------- */
.chip {
  position: relative;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.8rem;
  align-items: center;
  padding: 0.85rem 1.1rem 0.9rem 0.9rem;
  border-radius: var(--r-md);
  background: var(--float-bg);
  border: 1px solid var(--line-hi);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 24px 50px rgb(var(--sh-rgb) / calc(0.45 * var(--sh-k)));
  min-width: 13.5rem;
}
.chip__icon {
  grid-row: span 2;
  width: 2.4rem; height: 2.4rem;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--glass-hi);
  color: var(--ember-text);
}
.chip__icon svg { width: 1.25rem; height: 1.25rem; }
.chip__k { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-mute); }
.chip__v { font-weight: 650; font-size: 0.98rem; letter-spacing: -0.015em; color: var(--tx); line-height: 1.25; }
.chip__v b { color: var(--ember-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.chip__bar { grid-column: 2; height: 3px; border-radius: 3px; background: rgb(var(--glass-rgb) / 0.14); margin-top: 0.45rem; overflow: hidden; }
.chip__bar i { display: block; height: 100%; width: 100%; background: var(--ember); border-radius: inherit; transform-origin: left; transform: scaleX(0.37); }
.chip__bar--appeal i { transform: scaleX(0.648); } /* the Appeals card: £3,240 of £5,000 */
.chip__t { float: right; margin-left: 0.8rem; font-size: 0.8em; font-weight: 500; color: var(--tx-mute); font-variant-numeric: tabular-nums; }

/* ---------- ticks ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ticks li { position: relative; padding-left: 1.7rem; color: var(--tx-body); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 0.95rem; height: 0.55rem;
  border-left: 2px solid var(--ember); border-bottom: 2px solid var(--ember);
  transform: rotate(-45deg) translateY(-25%);
}

/* ---------- icon grid ---------- */
.icons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6rem 2rem; list-style: none; margin: 0; padding: 0; }
.icons li { display: grid; gap: 0.35rem; justify-items: center; text-align: center; }
.icons svg { width: 1.7rem; height: 1.7rem; color: var(--tx); margin-bottom: 0.6rem; }
.icons h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -0.015em; }
.icons p { font-size: var(--fs-small); color: var(--tx-mute); line-height: 1.45; max-width: 26ch; }
@media (max-width: 760px) { .icons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }

/* ============================================================
   sections
   ============================================================ */
.sec { padding-block: var(--sp-sec); }
.sec--tight-top { padding-top: clamp(2rem, 4vw, 3rem); }
.sec--ink { background: linear-gradient(180deg, var(--void), var(--ink-deep) 14%, var(--ink-deep) 86%, var(--void)); }
.head { display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: clamp(2.8rem, 5vw, 4.5rem); justify-items: start; }
.head--c { text-align: center; justify-items: center; }
.head .lede { max-width: 50ch; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(7rem, 11vw, 9rem); text-align: center; isolation: isolate; }
.livepill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.05rem 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--line-hi);
  font-size: 0.86rem;
  color: var(--tx-body);
  text-decoration: none;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.livepill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(91, 214, 154, 0.16); }
.livepill strong { color: var(--tx); font-weight: 650; font-variant-numeric: tabular-nums; }
.livepill .sep { width: 1px; height: 0.9rem; background: var(--line-hi); }
.livepill__new { padding: 0.12rem 0.55rem; border-radius: var(--r-pill); background: var(--ember); color: var(--on-ember); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.livepill__arr { color: var(--tx-mute); }
a.livepill:hover { border-color: rgb(var(--glass-rgb) / 0.3); }
.hero h1 { margin-inline: auto; }
.hero h1 .line { display: block; }
.hero .lede { margin: clamp(1.3rem, 2.2vw, 1.8rem) auto 0; max-width: 74ch; text-wrap: balance; }
.hero .ctas { justify-content: center; margin-top: clamp(1.8rem, 3vw, 2.5rem); }
.hero__terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0;
  margin-top: 1.4rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tx-mute);
}
.hero__terms span { white-space: nowrap; }
.hero__terms span + span::before { content: "·"; margin: 0 0.7em; color: var(--tx-dim); }
@media (max-width: 560px) {
  .hero__terms { gap: 0.35rem 1.2rem; }
  .hero__terms span + span::before { display: none; }
}

/* the stage: the product family, at full height */
.stage {
  --cw: clamp(15rem, 21.5vw, 20.5rem);  /* centre phone */
  --iw: clamp(12rem, 17vw, 16.2rem);    /* inner pair */
  --ow: clamp(10rem, 14vw, 13.4rem);    /* outer pair */
  position: relative;
  max-width: 92rem;
  margin: clamp(3rem, 4.6vw, 4.4rem) auto 0;
  height: calc(var(--cw) * 2.2);
  padding-inline: var(--gutter);
  clip-path: inset(-60rem -100vw 0 -100vw); /* clip the bottom only, so the glow can rise above the phones */
}
.stage::before { /* the quiet glow: rises behind the phones and spills into the gaps between them */
  content: "";
  position: absolute;
  left: 50%; top: -38%;
  width: min(84rem, 160%); height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(247, 112, 30, 0.34), rgba(247, 112, 30, 0.12) 42%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.stage__phone { position: absolute; left: 50%; top: 0; width: var(--w); transform: translateX(calc(-50% + var(--x))) translateY(var(--y)); z-index: var(--z); }
.stage__phone--c  { --w: var(--cw); --x: 0px; --y: 0px; --z: 9; }
.stage__phone--l1 { --w: var(--iw); --x: calc(var(--iw) * -1.12); --y: 9%; --z: 5; }
.stage__phone--r1 { --w: var(--iw); --x: calc(var(--iw) * 1.12); --y: 9%; --z: 5; }
.stage__phone--l2 { --w: var(--ow); --x: calc(var(--ow) * -2.42); --y: 19%; --z: 4; }
.stage__phone--r2 { --w: var(--ow); --x: calc(var(--ow) * 2.42); --y: 19%; --z: 4; }
.stage__fade { /* the side phones dissolve into the page; the centre phone stays whole */
  position: absolute; inset: auto 0 0; height: 34%;
  background: linear-gradient(180deg, transparent, var(--void) 85%);
  z-index: 7; pointer-events: none;
}
@media (max-width: 900px) {
  .stage { --cw: min(62vw, 18rem); --iw: min(48vw, 14rem); height: calc(var(--cw) * 2.2); }
  .stage__phone--l1 { --x: calc(var(--iw) * -0.98); }
  .stage__phone--r1 { --x: calc(var(--iw) * 0.98); }
  .stage__phone--l2, .stage__phone--r2 { display: none; }
}

/* feature strip under the hero */
.strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem 1.5rem;
  margin: clamp(1rem, 2vw, 2rem) 0 0;
  padding: 0 0 clamp(4.5rem, 8vw, 7rem);
  list-style: none;
  text-align: center;
}
.strip li svg { width: 1.7rem; height: 1.7rem; margin: 0 auto 0.95rem; color: var(--tx); }
.strip h2 { font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; }
.strip p { font-size: var(--fs-small); color: var(--tx-mute); margin-top: 0.3rem; line-height: 1.45; }
@media (max-width: 1080px) { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .strip { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }

/* ---------- Sealife Adventure ---------- */
.proof__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.proof__copy { display: grid; gap: clamp(1.2rem, 2vw, 1.7rem); justify-items: start; }
.proof__who { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.proof__who img { width: 3.6rem; height: 3.6rem; border-radius: 50%; }
.proof__id { display: grid; gap: 0.2rem; }
.proof__name { font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
/* the customer's own words */
.quote { margin: clamp(3.5rem, 7vw, 6rem) 0 0; max-width: 78rem; }
.quote blockquote { margin: 0; position: relative; padding-left: clamp(2.6rem, 4.4vw, 4rem); }
.quote blockquote::before { /* a drawn quote mark: Inter's own reads as two slashes at this weight */
  content: ""; position: absolute; left: 0; top: 0.35em;
  width: clamp(1.7rem, 2.8vw, 2.5rem); aspect-ratio: 48 / 36;
  background: var(--ember);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath d='M0 36V22C0 10 7 2 19 0l2 5C14 8 11 13 11 19h9v17H0zm27 0V22C27 10 34 2 46 0l2 5c-7 3-10 8-10 14h9v17H27z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cpath d='M0 36V22C0 10 7 2 19 0l2 5C14 8 11 13 11 19h9v17H0zm27 0V22C27 10 34 2 46 0l2 5c-7 3-10 8-10 14h9v17H27z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quote p { font-size: clamp(1.45rem, 2.7vw, 2.4rem); line-height: 1.25; letter-spacing: -0.03em; font-weight: 600; color: var(--tx); max-width: 50ch; text-wrap: pretty; }
.quote figcaption { margin-top: 1.6rem; padding-left: clamp(2.6rem, 4.4vw, 4rem); display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; color: var(--tx-mute); }
.quote__photo { width: 3.6rem; height: 3.6rem; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--ink); border: 1px solid var(--line-hi); color: var(--tx-dim); font-weight: 600; }
.quote__who { display: grid; gap: 0.1rem; }
.quote figcaption b { color: var(--tx); font-weight: 600; }
.proof__h { max-width: 13ch; }
.proof__phones { position: relative; height: clamp(26rem, 40vw, 37rem); }
.proof__phones .device { position: absolute; width: clamp(9.5rem, 14vw, 13rem); }
.proof__phones .device:nth-child(1) { left: 0; top: 14%; }
.proof__phones .device:nth-child(2) { left: 50%; transform: translateX(-50%); top: 0; width: clamp(11rem, 16vw, 15rem); z-index: 2; }
.proof__phones .device:nth-child(3) { right: 0; top: 14%; }
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.figures div { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.figures dd { order: -1; margin: 0; font-size: clamp(2.6rem, 5.4vw, 5.2rem); font-weight: 720; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.figures dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); }
.figures + .fine { margin-top: 1.6rem; text-align: center; }
@media (max-width: 860px) {
  .proof__grid { grid-template-columns: 1fr; }
  .proof__phones { height: min(78vw, 27rem); }
  .proof__phones .device { width: min(30vw, 10rem); }
  .proof__phones .device:nth-child(2) { width: min(38vw, 12.5rem); }
  .figures { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- the features reel ---------- */
.reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78rem, 86vw);
  gap: clamp(1rem, 1.6vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.reel::-webkit-scrollbar { display: none; }
.card {
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 80% 10%, var(--panel-hi) 0%, var(--panel) 52%, var(--panel-lo) 100%);
  border: 1px solid var(--line);
  min-height: clamp(30rem, 42vw, 38rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: end;
}
.card__chip { position: absolute; z-index: 3; top: clamp(1.6rem, 3.2vw, 3.2rem); left: clamp(1.6rem, 3.2vw, 3.2rem); }
.card__copy { padding: clamp(1.6rem, 3.2vw, 3.2rem); display: grid; gap: 0.9rem; position: relative; z-index: 2; }
.card__copy .h2 { max-width: 13ch; }
.card__copy p { max-width: 36ch; font-size: 1.06rem; }
.card__media { position: relative; height: 100%; min-height: inherit; }
.card__media .device { position: absolute; width: clamp(13rem, 19vw, 18.5rem); }
.card__media .device:nth-child(1) { right: clamp(11.5rem, 19.5vw, 19.5rem); top: 16%; }
.card__media .device:nth-child(2) { right: clamp(1.4rem, 3vw, 3rem); top: 8%; }
.card__media--wide { display: grid; align-items: center; padding: clamp(1.2rem, 3vw, 3rem) clamp(1.2rem, 3vw, 3rem) clamp(1.2rem, 3vw, 3rem) 0; }
.card__media--laptop { padding-top: 3rem; }
.card__media--laptop .laptop { width: 118%; }
@media (max-width: 860px) {
  .card { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; min-height: 38rem; align-items: start; }
  .card__chip { position: relative; top: auto; left: auto; justify-self: start; margin: 1.6rem 1.6rem 0; min-width: 0; padding: 0.6rem 0.85rem; gap: 0.1rem 0.7rem; }
  .card__chip .chip__icon { width: 2.1rem; height: 2.1rem; border-radius: 10px; }
  .card__chip .chip__v { font-size: 0.9rem; }
  .card__copy { padding-top: 1.4rem; }
  .card__copy { padding-bottom: 0; }
  .card__media { min-height: 22rem; }
  .card__media .device { width: min(44vw, 12.5rem); }
  .card__media .device:nth-child(1) { right: auto; left: 7%; top: 10%; }
  .card__media .device:nth-child(2) { right: 7%; top: 4%; }
  .card__media--wide { padding: 1.2rem; }
  .card__media--laptop .laptop { width: 140%; margin-left: 1.2rem; }
}
.reel__bar { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-top: 1.2rem; }
.reel__dots { display: flex; }
/* each dot is a 24px target; the visible pill is its inner span */
.reel__dots button { padding: 8px; border: 0; background: none; cursor: pointer; }
.reel__dots span {
  display: block; width: 8px; height: 8px; border-radius: 99px;
  background: rgb(var(--glass-rgb) / 0.24);
  transition: width var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
  position: relative; overflow: hidden;
}
.reel__dots button[aria-current="true"] span { width: 2.6rem; background: rgb(var(--glass-rgb) / 0.18); }
.reel__dots button[aria-current="true"] span::after {
  content: ""; position: absolute; inset: 0; transform-origin: left; background: var(--tx);
  animation: reelfill var(--reel-ms, 6500ms) linear forwards;
}
.reel.is-paused + .reel__bar .reel__dots button[aria-current="true"] span::after { animation: none; transform: scaleX(1); }
@keyframes reelfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.reel__pause {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line-hi);
  background: var(--glass); display: grid; place-items: center; cursor: pointer; color: var(--tx);
}
.reel__pause svg { width: 0.85rem; height: 0.85rem; }
.reel__bar:not(.is-ready) { display: none; }

/* ---------- one scan, their whole day: a numbered rail and a live phone ----------
   Without JS, or on a narrow screen, every step is open with its own phone.
   With JS on a wide screen the section pins: the scroll moves through the
   steps, the open step's bar fills, and the phone taps through to the next
   screen as the real guide does. */
.visit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.visit__copy .head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.visit__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.vstep { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 1.1rem; padding-block: 0.9rem; }
.vstep::before { content: ""; position: absolute; left: 1.2rem; top: 3.5rem; bottom: -0.4rem; width: 1px; background: var(--line-hi); }
.vstep:last-child::before { display: none; }
.vstep__n {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--ember); background: var(--ember); color: var(--on-ember);
  font-size: 0.86rem; font-weight: 650; font-variant-numeric: tabular-nums;
  transition: background-color 350ms var(--ease), border-color 350ms var(--ease), color 350ms var(--ease);
}
.vstep__body { display: grid; gap: 0.35rem; padding-top: 0.15rem; min-width: 0; }
.vstep__when { color: var(--tx-dim); font-weight: 500; }
.vstep__h { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; color: var(--tx); transition: color 350ms var(--ease); }
.vstep__more { display: grid; grid-template-rows: 1fr; }
.vstep__more > div { overflow: hidden; }
.vstep__more p { max-width: 40ch; margin-top: 0.35rem; }
.vstep__bar { display: none; }
.vstep .device { width: min(68vw, 17rem); margin-top: 1.4rem; }
.visit__stage { display: none; }
@media (min-width: 901px) {
  .js .visit__track { height: 310svh; } /* one screen, then 70svh of scroll per step */
  .js .visit__sticky { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
  .js .vstep { cursor: pointer; }
  .js .vstep .device { display: none; }
  .js .vstep__more { grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease); }
  .js .vstep.is-on .vstep__more { grid-template-rows: 1fr; }
  .js .vstep__bar { display: block; height: 2px; margin-top: 1rem; max-width: 40ch; border-radius: 2px; background: var(--line); overflow: hidden; }
  .js .vstep__bar i { display: block; height: 100%; background: var(--ember); transform-origin: left; transform: scaleX(0); }
  .js .vstep:not(.is-on) .vstep__n { background: var(--void); border-color: var(--line-hi); color: var(--tx-dim); }
  .js .vstep:not(.is-on) .vstep__h, .js .vstep:not(.is-on) .tag { color: var(--tx-dim); }
  .js .vstep:not(.is-on):hover .vstep__h { color: var(--tx-mute); }
  .js .visit__stage { display: block; }
  .visit__pin { --pw: min(19.5rem, calc((100svh - 5rem) / 2.2)); width: var(--pw); margin-inline: auto; }
  .visit__pin .device__screen { overflow: hidden; }
  .visit__pin .device__screen img { transition: transform 560ms cubic-bezier(0.3, 0.7, 0.2, 1), opacity 560ms var(--ease); }
  .visit__pin .device__screen img + img { position: absolute; inset: 0; }
  .visit__pin .device__screen img.is-after { transform: translateX(100%); }
  .visit__pin .device__screen img.is-before { transform: translateX(-28%); opacity: 0.35; }
}
.visit__tap {
  position: absolute; z-index: 3;
  width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  opacity: 0; pointer-events: none;
}
.visit__tap.is-go { animation: visit-tap 650ms ease-out; }
@keyframes visit-tap {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
@media (max-width: 900px) { .visit__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .visit__pin .device__screen img { transition: none; }
  .js .vstep__more { transition: none; }
}

/* ---------- every visit becomes a treasure hunt: a bento of features and payoffs ----------
   Each tile pairs something visitors enjoy with what it does for the venue,
   tagged with the Insights figure that measures it. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.1rem); }
.tile {
  position: relative; overflow: hidden; min-width: 0;
  grid-column: span 4;
  display: grid; align-content: start; justify-items: start; gap: 0.55rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.3rem, 2.2vw, 1.9rem) 0;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 50% 0%, var(--panel-hi) 0%, var(--panel) 50%, var(--panel-lo) 100%);
}
.tile p { font-size: 0.98rem; max-width: 40ch; }
.tile__h { font-size: 1.14rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; color: var(--tx); text-wrap: balance; }
.metric { margin-top: 0.25rem; padding: 0.28rem 0.75rem; border-radius: var(--r-pill); border: 1px solid var(--line-hi); color: var(--tx-body); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.metric::before { content: "Insights \00B7  "; color: var(--tx-dim); font-weight: 500; }
/* screenshots are cropped to the part that matters and fade off the tile's foot */
.tile__crop {
  justify-self: stretch; display: grid; justify-items: center;
  height: 17rem; margin-top: 1.2rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 68%, transparent);
  mask-image: linear-gradient(#000 68%, transparent);
}
/* a crop that starts mid-screen fades in at the top too, so it never reads as cut off */
.tile__crop--mid, .tile__crop--low, .tile__crop--quiz {
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 68%, transparent);
}
.tile__crop .device { width: min(15rem, 84%); }
.tile__crop--mid .device { margin-top: -62%; }
.tile__crop--low .device { margin-top: -74%; }
.tile__crop--quiz .device { margin-top: -30%; }
.tile--hub { grid-row: span 2; }
.tile--hub .tile__crop { height: auto; flex: 1; min-height: 24rem; }
.tile--wall, .tile--back { grid-column: span 8; padding-bottom: clamp(1.4rem, 2.4vw, 2rem); }
.tile--wall { align-content: center; justify-items: stretch; }
.tile--back { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.6rem; align-items: center; }
.tile__txt { display: grid; gap: 0.55rem; justify-items: start; }
.tile__duo { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.7rem; }
.tile__duo .badge { width: 8rem; }
.tile--close { grid-column: span 12; padding-bottom: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 2.4rem; }
.tile--close .h2 { font-size: var(--fs-h3); }
.tile--wall .h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }

/* the badge wall: all fourteen real badges, the ones collected lit in gold */
.wall__top { display: flex; justify-content: space-between; align-items: end; gap: 0.8rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.wall__count { color: var(--tx-mute); font-variant-numeric: tabular-nums; }
.wall__count b { color: var(--gold); font-weight: 650; }
.wall { list-style: none; margin: 0; padding: 0.7rem 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.7rem; }
.badge {
  position: relative;
  display: grid; justify-items: center; align-content: start; gap: 0.25rem;
  padding: 1.1rem 0.5rem 1rem;
  text-align: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgb(var(--glass-rgb) / 0.025);
}
.badge__e { font-size: 1.7rem; line-height: 1; margin-bottom: 0.45rem; filter: grayscale(1); opacity: 0.4; }
.badge b { color: var(--tx-mute); font-size: 0.86rem; font-weight: 650; line-height: 1.2; }
.badge > span:last-of-type { color: var(--tx-dim); font-size: 0.74rem; line-height: 1.35; }
.badge.is-got { border-color: rgba(245, 197, 24, 0.35); background: rgba(245, 197, 24, 0.06); }
.badge.is-got .badge__e { filter: none; opacity: 1; }
.badge.is-got b { color: var(--tx); }
.badge em {
  position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
  padding: 0.12rem 0.55rem; border-radius: var(--r-pill);
  background: var(--ember); color: var(--on-ember);
  font-style: normal; font-size: 0.66rem; font-weight: 700; white-space: nowrap;
}
@media (max-width: 1000px) {
  .wall { grid-template-columns: repeat(7, minmax(7.5rem, 1fr)); overflow-x: auto; scrollbar-width: none; padding-bottom: 0.4rem; margin-inline: calc(-1 * clamp(1.3rem, 2.2vw, 1.9rem)); padding-inline: clamp(1.3rem, 2.2vw, 1.9rem); }
  .wall::-webkit-scrollbar { display: none; }
  .bento { grid-auto-flow: dense; } /* the quiz tile fills the space beside the progress ring */
  .tile, .tile--wall, .tile--back { grid-column: span 6; }
  .tile--hub { grid-row: auto; }
  .tile--hub .tile__crop { min-height: 0; height: 19rem; }
  .tile--wall, .tile--back, .tile--close { grid-column: span 12; }
}
@media (max-width: 640px) {
  .tile { grid-column: span 12; }
  .tile--back { grid-template-columns: 1fr; row-gap: 1.2rem; }
  .tile__duo .badge { width: auto; flex: 1; }
  /* phones: every badge on screen, no sideways scroll; names only */
  .wall { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; gap: 0.9rem 0.5rem; }
  .badge { padding: 0.9rem 0.3rem 0.75rem; }
  .badge > span:last-of-type { display: none; }
  .badge b { font-size: 0.78rem; }
  .badge em { font-size: 0.6rem; padding: 0.1rem 0.4rem; }
}

/* ---------- Live Labels ---------- */
.steps { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 0.6rem; align-content: start; padding-top: 1.4rem; border-top: 1px solid var(--line-hi); }
.steps li::before {
  content: counter(step);
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-hi);
  font-size: 0.82rem; font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}
.steps h3 { font-size: 1.2rem; letter-spacing: -0.02em; font-weight: 650; }
.steps p { font-size: 0.98rem; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps, .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps, .steps--4 { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.facts b { display: block; font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 720; letter-spacing: -0.05em; line-height: 1; color: var(--tx); font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: 0.6rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- back of house ---------- */
.house__main { max-width: 76rem; margin-inline: auto; }
.house__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(4rem, 8vw, 7rem); }
.house__item { display: grid; gap: 1rem; align-content: start; }
.house__item .laptop { margin-bottom: 1.4rem; }
.house__item .laptop__base { width: 106%; margin-left: -3%; }
.house__item .h3 { max-width: 22ch; }
.house__item p { max-width: 42ch; }
@media (max-width: 860px) { .house__pair { grid-template-columns: 1fr; } }

/* ---------- insights: tabbed laptop ---------- */
.tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--line);
  margin: 0 auto clamp(2rem, 4vw, 3.2rem);
}
.tabs button {
  border: 0;
  background: transparent;
  color: var(--tx-mute);
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: 0.92rem;
  font-weight: 550;
  cursor: pointer;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.tabs button[aria-selected="true"] { background: var(--tx); color: var(--void); }
.tabs button:hover:not([aria-selected="true"]) { color: var(--tx); }
.viewer { max-width: 70rem; margin-inline: auto; }
.viewer__panes { position: relative; }
.viewer__pane { transition: opacity 420ms var(--ease); }
.js .viewer__pane:not(.is-on) { position: absolute; inset: 0 0 auto; opacity: 0; pointer-events: none; visibility: hidden; }
.viewer__pane + .viewer__pane { margin-top: 4rem; } /* without JS the views simply stack */
.js .viewer__pane + .viewer__pane { margin-top: 0; }
.tabs:not(.is-ready) { display: none; }
.viewer__cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 3rem; margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.viewer__cap .h3 { max-width: 20ch; }
@media (max-width: 760px) { .viewer__cap { grid-template-columns: 1fr; } .tabs { border-radius: var(--r-md); } }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.plan {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 1rem;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--panel);
}
.plan--best { border-color: var(--ember-a40); background: radial-gradient(120% 70% at 50% 0%, var(--ember-a12), var(--panel) 60%); }
.plan__name { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.plan__name .kicker { font-size: 0.6rem; padding: 0.3rem 0.7rem; border-color: var(--ember-a40); color: var(--ember-text); }
.plan__blurb { font-size: 0.95rem; color: var(--tx-mute); min-height: 2.9em; }
.plan__price { display: flex; align-items: baseline; gap: 0.4rem; }
.plan__price b { font-size: clamp(2.8rem, 4.4vw, 3.8rem); font-weight: 720; letter-spacing: -0.05em; line-height: 1; color: var(--tx); }
.plan__price small { color: var(--tx-mute); font-size: 0.95rem; }
.plan .ticks { align-content: start; font-size: 0.97rem; }
.plan .btn { width: 100%; }
.plan .fine { text-align: center; }
.plans__note { margin-top: 1.8rem; text-align: center; font-size: 0.95rem; color: var(--tx-mute); }
.plans__note a { color: var(--tx); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }

/* ---------- the calculator ---------- */
.calc {
  margin-top: clamp(4rem, 8vw, 7rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: radial-gradient(100% 120% at 100% 0%, var(--panel-hi) 0%, var(--panel) 55%, var(--panel-lo) 100%);
  padding: clamp(1.6rem, 4vw, 3.6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.calc__copy { display: grid; gap: 1.2rem; }
.calc__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.calc__form--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc__out { display: grid; gap: 0.4rem; }
.calc__big { font-size: clamp(4rem, 9vw, 8.5rem); font-weight: 720; letter-spacing: -0.06em; line-height: 0.9; color: var(--tx); font-variant-numeric: tabular-nums; }
.calc__big small { display: block; margin-top: 0.8rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); }
/* Guide Pass: "You keep" above the figure, "per month" beside it, as a plan's "a month" */
.calc__big--keep .calc__lbl { margin: 0 0 1rem; }
.calc__big--keep .calc__per { display: inline; margin: 0 0 0 0.6rem; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--tx-mute); }
.calc__line { margin-top: 1rem; color: var(--tx-mute); }
.calc__vs { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.calc__vs li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--tx-mute); }
.calc__vs b { color: var(--tx); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc__form--3 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .calc__form { grid-template-columns: 1fr; } }

/* ---------- form fields ---------- */
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field label { font-size: 0.86rem; color: var(--tx-mute); }
.field input, .field select, .field textarea {
  width: 100%;
  background: rgb(var(--glass-rgb) / 0.04);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  color: var(--tx);
  font-size: 1rem;
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tx-mute) 50%), linear-gradient(135deg, var(--tx-mute) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.4rem; }
.field select option { background: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ember); background: rgb(var(--glass-rgb) / 0.06); }
.field textarea { resize: vertical; min-height: 8rem; }
.field--wide { grid-column: 1 / -1; }

@media (max-width: 860px) { .qrs { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; } }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact__copy { display: grid; gap: 1.3rem; }
.contact__copy a { color: var(--tx); }
.contact__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.4rem; }
.contact__status { font-size: 0.93rem; color: var(--tx-mute); }
.contact__status.is-ok { color: var(--live); }
.contact__status.is-error { color: var(--alert); }
.contact__status a { color: inherit; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .contact__form { grid-template-columns: 1fr; } }

/* ---------- closing band (inner pages) ---------- */
.close { text-align: center; }
.close .head { margin-bottom: 0; }
.close .ctas { justify-content: center; margin-top: 2rem; }

/* ---------- footer: logo, sign in, the legal line ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 2.2rem 2.6rem; }
.foot__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.foot__signin { font-size: 0.92rem; color: var(--tx-mute); text-decoration: none; }
.foot__signin:hover { color: var(--tx); }
.foot__links { width: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.9rem; }
.foot__links a { color: var(--tx-mute); text-decoration: none; }
.foot__links a:hover { color: var(--tx); }
.foot__links a[href^="mailto:"] { margin-left: auto; }
.foot__legal { width: 100%; font-size: var(--fs-fine); color: var(--tx-dim); }
.foot__legal a { color: var(--tx-mute); }

/* ============================================================
   pages
   ============================================================ */
.pagehero { padding-top: clamp(8rem, 13vw, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); text-align: center; }
.pagehero .head { margin-bottom: 0; }
.pagehero .ctas { justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.pagehero .hero__terms { margin-top: 1.3rem; }
.pagehero--prose { text-align: left; padding-bottom: var(--sp-sec); }
.pagehero--prose .prose { margin-inline: auto; }
.pagehero--prose .kicker { margin-bottom: 1.4rem; }
.pagehero--prose h1 { margin-bottom: 1rem; }
.pagehero--prose .lede { margin-top: 1.6rem; }

/* comparison table */
.compare { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.compare table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.95rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 1.05rem; letter-spacing: -0.02em; color: var(--tx); padding-top: 1.4rem; }
.compare tbody th { color: var(--tx-mute); font-weight: 500; width: 17%; }
.compare td { color: var(--tx-body); }
.compare td small { display: block; margin-top: 0.3rem; color: var(--tx-dim); font-size: 0.82rem; }
.compare .is-us { background: rgba(247, 112, 30, 0.06); color: var(--tx); }
.compare thead .is-us { color: var(--ember-text); }
.compare + .fine { margin-top: 1.2rem; }
.compare + .fine a, .fine a { color: var(--tx-mute); }

/* FAQ */
.faq { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; }
.faq li { display: grid; gap: 0.6rem; padding-block: 1.8rem; border-top: 1px solid var(--line); }
.faq li:last-child { border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 1.25rem; letter-spacing: -0.02em; font-weight: 650; }
.faq a { color: var(--tx); }

/* prose: about, privacy, terms */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; margin: 3rem 0 1rem; }
.prose h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.02em; margin: 2rem 0 0.6rem; }
.prose > h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 1rem; }
.prose ul, .prose ol { margin: 1rem 0; padding-left: 1.2rem; display: grid; gap: 0.75rem; color: var(--tx-body); }
.prose li b, .prose p b { color: var(--tx); font-weight: 600; }
.prose a { color: var(--tx); }
.prose code { font-family: inherit; font-size: 0.94em; font-weight: 500; color: var(--tx); background: var(--glass-hi); padding: 0.1em 0.4em; border-radius: 5px; }
.prose .fine { display: block; margin-top: 1rem; }
.prose--wide { max-width: none; }

/* ---------- Insights page: question chapters, panels, the trail map ----------
   Each question is a chapter: copy beside a real portal capture, the side
   alternating. Panels hold the views without a capture (Feedback, exports)
   and the privacy lists. The trail map ties each homepage trail tile to the
   Insights figure it names. */
.ask { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ask + .ask { margin-top: clamp(4.5rem, 9vw, 8rem); }
.ask__copy { display: grid; gap: 1rem; justify-items: start; }
.ask__copy .h2 { max-width: 14ch; }
.ask__copy p { max-width: 40ch; }
.ask__copy .ticks { margin-top: 0.4rem; }
.ask--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.ask--flip .ask__copy { order: 2; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.ask + .duo { margin-top: clamp(4.5rem, 9vw, 8rem); }
.panel {
  display: grid; gap: 0.9rem; align-content: start; justify-items: start;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel);
}
.panel .ticks { margin-top: 0.4rem; }
/* three across, then two: wide enough that each figure's pill stays on one line */
.trailmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.1rem); }
.trailmap li {
  grid-column: span 2;
  display: grid; gap: 0.6rem; align-content: start; justify-items: start; min-width: 0;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 50% 0%, var(--panel-hi) 0%, var(--panel) 50%, var(--panel-lo) 100%);
}
.trailmap li:nth-child(n+4) { grid-column: span 3; }
.trailmap .metric { margin: 0 0 0.3rem; white-space: normal; }
.trailmap p { font-size: 0.95rem; }
.plans--one { grid-template-columns: minmax(0, 30rem); justify-content: center; }
@media (max-width: 1000px) { .trailmap li, .trailmap li:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 900px) {
  .ask { grid-template-columns: 1fr; }
  .ask--flip { grid-template-columns: 1fr; }
  .ask--flip .ask__copy { order: 0; }
}
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .trailmap li, .trailmap li:nth-child(n+4) { grid-column: 1 / -1; } }

/* 404 */
.lost { min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.4rem; padding: 6rem var(--gutter); position: relative; isolation: isolate; }
.lost__more { margin: 0; color: var(--tx-dim); font-size: 0.92rem; }
.lost__more a { color: var(--tx-mute); }
.lost canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.5; }

/* ---------- motion: titles rise word by word; screenshots never animate ---------- */
.rise .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.rise .w > span { display: inline-block; transform: translateY(0); transition: transform var(--t-reveal) var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.ready .rise:not(.is-in) .w > span { transform: translateY(105%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .ready .rise:not(.is-in) .w > span { transform: none; }
}

/* ---------- try it yourself: inside the Sealife story ----------
   A real exhibit sign with the guide's QR code. On a laptop "Open it here"
   brings the live guide up in a phone; on a phone the button opens it. */
.try {
  position: relative; overflow: hidden;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 4.5vw, 4rem);
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: radial-gradient(70% 90% at 85% 50%, rgba(247, 112, 30, 0.16), rgba(247, 112, 30, 0) 70%), var(--panel);
}
.try__copy { display: grid; gap: 1rem; justify-items: start; }
.try__copy .h2 { max-width: 14ch; }
.try__copy p { max-width: 42ch; font-size: 1.06rem; }
.try__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: 0.6rem; }
.try__note { color: var(--tx-mute); font-size: 0.92rem; }
.try__open { display: none; }
/* the sign: a coloured exhibit plate screwed to the tank, in Sealife Adventure's navy */
.sign { justify-self: center; display: grid; justify-items: center; }
.sign__plate {
  margin: 0;
  width: clamp(12rem, 18vw, 15.5rem);
  display: grid; justify-items: center; gap: 0.7rem;
  position: relative;
  padding: 1.5rem 1.5rem 1.4rem;
  border-radius: 10px; color: #fff;
  /* four screw heads, one in each corner */
  background:
    radial-gradient(circle at 0.85rem 0.85rem, #e9edf3 0 0.22rem, #8b93a3 0.24rem 0.32rem, transparent 0.34rem),
    radial-gradient(circle at calc(100% - 0.85rem) 0.85rem, #e9edf3 0 0.22rem, #8b93a3 0.24rem 0.32rem, transparent 0.34rem),
    radial-gradient(circle at 0.85rem calc(100% - 0.85rem), #e9edf3 0 0.22rem, #8b93a3 0.24rem 0.32rem, transparent 0.34rem),
    radial-gradient(circle at calc(100% - 0.85rem) calc(100% - 0.85rem), #e9edf3 0 0.22rem, #8b93a3 0.24rem 0.32rem, transparent 0.34rem),
    #1B2270;
  box-shadow: 0 30px 60px -20px rgb(var(--sh-rgb) / calc(0.7 * var(--sh-k))), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.sign__logo { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.sign__qr { width: 100%; image-rendering: pixelated; background: #fff; padding: 0.55rem; border-radius: 8px; }
.sign figcaption { display: grid; justify-items: center; gap: 0.1rem; text-align: center; }
.sign figcaption b { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.02em; }
.sign figcaption span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.78); }
@media (min-width: 861px) {
  .js .try__open { display: inline-flex; }
  .js .try__go { display: none; }
}
@media (max-width: 860px) {
  .try { grid-template-columns: 1fr; }
  .sign, .try__desk { display: none; } /* you can't scan the screen you're holding */
}

/* the guide in a phone, over the page */
.tryphone { padding: 0; border: 0; background: none; max-width: none; max-height: none; width: 100%; height: 100%; overflow: hidden; color: var(--tx); }
.tryphone::backdrop { background: rgba(5, 7, 12, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tryphone[open] { display: grid; place-items: center; }
.tryphone__stage { display: grid; justify-items: center; gap: 1rem; transform-origin: center; animation: tryphone-in 380ms var(--ease) both; }
.tryphone .device { width: 390px; }
.tryphone__screen { position: relative; aspect-ratio: 390 / 845; overflow: hidden; background: #0E3A4D; }
.tryphone__bar { position: absolute; inset: 0 0 auto; height: 47px; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 1.6rem 0 1.9rem; color: #fff; pointer-events: none; text-shadow: 0 1px 2px rgb(var(--sh-rgb) / calc(0.35 * var(--sh-k))); font-size: 0.9rem; font-weight: 600; }
.tryphone__bar i { position: absolute; left: 50%; top: 11px; width: 6.6rem; height: 1.85rem; transform: translateX(-50%); border-radius: 999px; background: #000; }
.tryphone__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; } /* the guide runs up behind the status bar, as on a phone */
.tryphone__cap { color: var(--tx-mute); font-size: 0.9rem; }
.tryphone__cap a { color: var(--tx); }
.tryphone__x { position: fixed; top: 1.2rem; right: 1.2rem; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-hi); background: var(--glass-hi); color: var(--tx); cursor: pointer; }
.tryphone__x svg { width: 1.3rem; height: 1.3rem; }
.tryphone__x:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
html.is-modal { overflow: hidden; }
@keyframes tryphone-in { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tryphone__stage { animation: none; } }

/* ---------- device frames for Live Label stills ----------
   Real proportions: an iPad Air held landscape (2360 x 1640), a 16:9 TV on
   a stand, and a 16:10 monitor on a foot. */
.fr { position: relative; width: 100%; margin-inline: auto; }
.fr__scr { overflow: hidden; background: #000; }
.fr__scr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fr--ipad { padding: 2.1%; border-radius: 3.4% / 4.9%; background: #0d0e11; box-shadow: 0 0 0 1.5px #3b3f48, 0 0 0 4px #1c1e23, 0 40px 80px -30px rgba(0, 0, 0, 0.85); }
.fr--ipad .fr__scr { aspect-ratio: 2360 / 1640; border-radius: 1.6% / 2.3%; }
.fr--tv { padding: 0.9%; border-radius: 0.6%; background: #08090b; box-shadow: 0 0 0 1px #2a2d34, 0 40px 80px -30px rgba(0, 0, 0, 0.85); margin-bottom: 1.4rem; }
.fr--tv .fr__scr { aspect-ratio: 16 / 9; }
.fr--tv::after { content: ""; position: absolute; left: 50%; top: 100%; width: 22%; height: 1.2rem; transform: translateX(-50%); background: linear-gradient(180deg, #2a2d34, #15171c); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }
.fr--mon { padding: 1.4% 1.4% 2.6%; border-radius: 1.6% / 2.4%; background: linear-gradient(180deg, #1a1c22, #0d0e11); box-shadow: 0 0 0 1px #33363e, 0 40px 80px -30px rgba(0, 0, 0, 0.85); margin-bottom: 2.6rem; }
.fr--mon .fr__scr { aspect-ratio: 16 / 10; border-radius: 0.4%; }
.fr--mon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 16%; height: 2.2rem; transform: translateX(-50%); background: linear-gradient(90deg, #2a2d34, #4a4e58 50%, #2a2d34); clip-path: polygon(40% 0, 60% 0, 62% 78%, 100% 82%, 100% 100%, 0 100%, 0 82%, 38% 78%); }
.card__media--wide .fr--ipad { width: 100%; }
.devrow { display: grid; grid-template-columns: 1.25fr 0.95fr 1.1fr; align-items: end; gap: clamp(1.2rem, 3vw, 2.6rem); margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 72rem; }
.devrow figure { margin: 0; display: grid; gap: 1rem; }
.devrow figcaption { text-align: center; color: var(--tx-mute); font-size: var(--fs-small); }
@media (max-width: 860px) { .devrow { grid-template-columns: 1fr; max-width: 30rem; } }
.devrow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; max-width: 84rem; }
@media (max-width: 860px) { .devrow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
.steps--plain li::before { display: none; }

/* ---------- the Live Label demo ----------
   A working label: tap an animal, scroll its page, go back, swap the venue's
   colours. Everything inside the screen is sized in container units, so one
   layout fills an iPad or a TV. Fernhollow and Harbourside are made-up venues. */
@font-face { font-family: "Fredoka"; src: url("../assets/fonts/Fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/Nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/Fraunces-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
.labels__demo { margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 62rem; display: grid; gap: 1.2rem; }
.labels__demo--page { margin-top: 0; max-width: 68rem; }
.labels__demo figcaption { text-align: center; }
.ll { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); }
.ll__ctrl { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: center; align-items: center; }
.ll__seg { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; }
.ll__k { color: var(--tx-dim); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.3rem; }
.ll__seg button { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.45rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line-hi); background: var(--glass); color: var(--tx-body); font: 600 0.9rem var(--font); cursor: pointer; transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.ll__seg button:hover { background: var(--glass-hi); }
.ll__seg button[aria-pressed="true"] { background: var(--tx); border-color: var(--tx); color: var(--void); }
.ll__seg button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.ll__short { display: none; }
.ll__sw { width: 0.95rem; height: 0.95rem; border-radius: 50%; box-shadow: 0 0 0 2px rgb(var(--glass-rgb) / 0.18); }
.ll__sw--fernhollow { background: #22402D; }
.ll__sw--sealife { background: #1B2270; }
.ll__sw--harbourside { background: #0E3A4D; }
/* site picker as round logos: the site's own mark, its name underneath, a ring on the one showing */
.ll__seg.ll__seg--logos { gap: 0.4rem 1.2rem; }
.ll__seg.ll__seg--logos [data-ll-brand] { flex-direction: column; gap: 0.45rem; min-height: 0; padding: 0.3rem 0.25rem; border: 0; border-radius: 0.7rem; background: none; color: var(--tx-mute); font: 500 0.82rem var(--font); }
.ll__seg.ll__seg--logos [data-ll-brand]:hover { background: none; color: var(--tx); }
.ll__seg.ll__seg--logos [data-ll-brand][aria-pressed="true"] { background: none; color: var(--tx); }
.ll__lg { width: 3rem; height: 3rem; border-radius: 50%; display: grid; overflow: hidden; box-shadow: 0 0 0 2px transparent; transition: box-shadow var(--t-hover) var(--ease); }
.ll__lg svg, .ll__lg img { width: 100%; height: 100%; display: block; object-fit: cover; }
[data-ll-brand][aria-pressed="true"] .ll__lg { box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--tx); }
.ll__dev { position: relative; width: 100%; margin-inline: auto; transition: max-width 500ms var(--ease); }
.ll__dev--ipad { max-width: 58rem; padding: 2.1%; border-radius: 3.4% / 4.9%; background: #0d0e11; box-shadow: 0 0 0 1.5px #3b3f48, 0 0 0 4px #1c1e23, 0 50px 90px -30px rgba(0, 0, 0, 0.85); }
.ll__dev--ipad::before { content: ""; position: absolute; top: 0.9%; left: 50%; width: 0.6%; aspect-ratio: 1; border-radius: 50%; background: #23262e; transform: translateX(-50%); }
.ll__dev--ipad .ll__scr { aspect-ratio: 2360 / 1640; border-radius: 1.6% / 2.3%; }
.ll__dev--tv { max-width: 68rem; padding: 0.9%; border-radius: 0.6%; background: #08090b; box-shadow: 0 0 0 1px #2a2d34, 0 50px 90px -30px rgba(0, 0, 0, 0.85); margin-bottom: 1.4rem; }
.ll__dev--tv::after { content: ""; position: absolute; left: 50%; top: 100%; width: 18%; height: 1.4rem; transform: translateX(-50%); background: linear-gradient(180deg, #2a2d34, #15171c); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }
.ll__dev--tv .ll__scr { aspect-ratio: 16 / 9; }
.ll__scr { position: relative; overflow: hidden; container-type: inline-size; background: #000; }

.lbl {
  --k: 1cqw; /* one unit of the screen's width; phones get a bigger one */
  --bar: #22402D; --bar-tx: #F6F0E2; --bg: #F1EBDD; --card: #FFFDF7; --ink: #1F2A21; --mute: #5E6A5C; --acc: #D9822B; --acc-tx: #fff; --chip: #EAE3D1;
  --head: "Fraunces", Georgia, serif; --body: "Inter", system-ui, sans-serif;
  position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  font: 600 calc(1.5 * var(--k))/1.4 var(--body); color: var(--ink); background: var(--bg); text-align: left;
  transition: background-color 400ms ease;
}
.lbl[data-brand="sealife"] { --bar: #1B2270; --bar-tx: #fff; --bg: #A8E2F6; --card: #fff; --ink: #14204F; --mute: #4D5B85; --acc: #F59E0B; --acc-tx: #14204F; --chip: #E6F6FC; --head: "Fredoka", "Nunito", system-ui, sans-serif; --body: "Nunito", system-ui, sans-serif; }
.lbl[data-brand="harbourside"] { --bar: #0E3A4D; --bar-tx: #fff; --bg: #E9F0F3; --card: #fff; --ink: #0E2A38; --mute: #4F6A77; --acc: #F5C518; --acc-tx: #0E2A38; --chip: #E4EEF2; --head: "Nunito", system-ui, sans-serif; --body: "Nunito", system-ui, sans-serif; }
.lbl [data-b] { display: none; }
.lbl[data-brand="fernhollow"] [data-b="fernhollow"], .lbl[data-brand="sealife"] [data-b="sealife"], .lbl[data-brand="harbourside"] [data-b="harbourside"] { display: revert; }
.lbl__bar { display: flex; align-items: center; gap: calc(1.6 * var(--k)); padding: calc(1.3 * var(--k)) calc(2.4 * var(--k)); background: var(--bar); color: var(--bar-tx); transition: background-color 400ms ease; }
.lbl__logo { width: calc(5.2 * var(--k)); height: calc(5.2 * var(--k)); flex: none; }
.lbl[data-brand] .lbl__logo[data-b] { display: none; }
.lbl[data-brand="fernhollow"] .lbl__logo[data-b="fernhollow"], .lbl[data-brand="sealife"] .lbl__logo[data-b="sealife"], .lbl[data-brand="harbourside"] .lbl__logo[data-b="harbourside"] { display: grid; }
.lbl__logo img, .lbl__logo svg { width: 100%; height: 100%; object-fit: contain; }
.lbl__title { display: grid; gap: calc(0.1 * var(--k)); min-width: 0; }
.lbl__title b { font: 700 calc(2.9 * var(--k))/1 var(--head); letter-spacing: -0.01em; }
.lbl__title span { font-size: calc(1.25 * var(--k)); opacity: 0.75; }
.lbl__talk { margin-left: auto; display: flex; align-items: center; gap: calc(0.9 * var(--k)); padding: calc(0.8 * var(--k)) calc(1.4 * var(--k)); border-radius: calc(99 * var(--k)); background: rgba(255, 255, 255, 0.12); font-size: calc(1.3 * var(--k)); white-space: nowrap; }
.lbl__talk i { width: calc(0.9 * var(--k)); height: calc(0.9 * var(--k)); border-radius: 50%; background: var(--acc); }
.lbl__talk b { color: var(--acc); }
.lbl__clock { font: 700 calc(2 * var(--k))/1 var(--body); font-variant-numeric: tabular-nums; opacity: 0.9; }
.lbl__views { position: relative; overflow: hidden; }
.lbl__view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; transition: transform 480ms var(--ease), opacity 480ms ease; }
.lbl__view[hidden] { display: block !important; visibility: hidden; transform: translateX(100%); }
.lbl__home[data-off] { transform: translateX(-22%); opacity: 0; visibility: hidden; }
.lbl__home { padding: calc(2.2 * var(--k)) calc(2.4 * var(--k)) calc(2.4 * var(--k)); display: grid; gap: calc(1.8 * var(--k)); align-content: space-between; }
.lbl__hh { display: flex; align-items: baseline; justify-content: space-between; gap: calc(2 * var(--k)); }
.lbl h4 { margin: 0; color: var(--ink); }
.lbl__hh h4 { font: 700 calc(2.2 * var(--k))/1.1 var(--head); letter-spacing: -0.01em; }
.lbl__hh span { font-size: calc(1.3 * var(--k)); color: var(--mute); }
.lbl__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(1.6 * var(--k)); }
.lbl__card { display: grid; padding: 0; border: 0; border-radius: calc(1.6 * var(--k)); overflow: hidden; background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 calc(0.4 * var(--k)) calc(1.6 * var(--k)) rgba(0, 0, 0, 0.08); transition: transform 200ms ease, box-shadow 200ms ease; }
.lbl__card:hover { transform: translateY(calc(-0.3 * var(--k))); box-shadow: 0 calc(0.8 * var(--k)) calc(2.4 * var(--k)) rgba(0, 0, 0, 0.14); }
.lbl__card:focus-visible, .lbl__back:focus-visible { outline: calc(0.35 * var(--k)) solid var(--acc); outline-offset: calc(0.35 * var(--k)); }
.lbl__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ll__dev--ipad .lbl__home .lbl__img { aspect-ratio: 4 / 5; }
.lbl__ct { display: grid; gap: calc(0.35 * var(--k)); padding: calc(1.2 * var(--k)) calc(1.3 * var(--k)) calc(1.4 * var(--k)); }
.lbl__ct b { font: 700 calc(1.75 * var(--k))/1.15 var(--head); color: var(--ink); }
.lbl__ct em { font-size: calc(1.15 * var(--k)); color: var(--mute); }
.lbl__st { justify-self: start; display: inline-flex; align-items: center; gap: calc(0.5 * var(--k)); margin-top: calc(0.4 * var(--k)); padding: calc(0.3 * var(--k)) calc(0.8 * var(--k)); border-radius: calc(99 * var(--k)); background: var(--chip); color: var(--ink); font-size: calc(1.05 * var(--k)); font-weight: 700; }
.lbl__st i { width: calc(0.8 * var(--k)); height: calc(0.8 * var(--k)); border-radius: 50%; background: #9AA3AF; }
.lbl__st[data-s="LC"] i { background: #2E9E5B; }
.lbl__tap { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--k)); padding: calc(1.3 * var(--k)) calc(1.8 * var(--k)); border-radius: calc(1.4 * var(--k)); background: var(--card); font-size: calc(1.3 * var(--k)); color: var(--mute); }
.lbl__tap b { color: var(--ink); }
.lbl__tap span:last-child { display: flex; align-items: center; gap: calc(0.8 * var(--k)); }
.lbl__tap svg { width: calc(2.2 * var(--k)); height: calc(2.2 * var(--k)); color: var(--ink); }
.lbl__det { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: calc(2.6 * var(--k)); padding: calc(2.2 * var(--k)) calc(2.4 * var(--k)) calc(3 * var(--k)); align-content: start; align-items: start; }
.lbl__back { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: calc(0.7 * var(--k)); padding: calc(0.9 * var(--k)) calc(1.6 * var(--k)); border: 0; border-radius: calc(99 * var(--k)); background: var(--card); color: var(--ink); font: 700 calc(1.4 * var(--k)) var(--body); cursor: pointer; box-shadow: 0 calc(0.3 * var(--k)) calc(1 * var(--k)) rgba(0, 0, 0, 0.08); }
.lbl__hero { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(2 * var(--k)); box-shadow: 0 calc(1 * var(--k)) calc(3 * var(--k)) rgba(0, 0, 0, 0.18); }
.lbl__dt { display: grid; gap: calc(1.4 * var(--k)); }
.lbl__dt h4 { font: 700 calc(4 * var(--k))/1 var(--head); letter-spacing: -0.02em; }
.lbl__lat { font-style: italic; color: var(--mute); font-size: calc(1.6 * var(--k)); margin-top: calc(-0.6 * var(--k)); }
.lbl__dt p { margin: 0; font-size: calc(1.6 * var(--k)); line-height: 1.5; font-weight: 600; color: var(--ink); }
.lbl__facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1 * var(--k)); }
.lbl__facts div { padding: calc(1.1 * var(--k)) calc(1.2 * var(--k)); border-radius: calc(1.2 * var(--k)); background: var(--card); }
.lbl__facts dt { font-size: calc(1.05 * var(--k)); color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.lbl__facts dd { margin: calc(0.3 * var(--k)) 0 0; font-size: calc(1.4 * var(--k)); font-weight: 700; }
.lbl__dyk { padding: calc(1.5 * var(--k)) calc(1.7 * var(--k)); border-radius: calc(1.4 * var(--k)); background: var(--acc); color: var(--acc-tx); }
.lbl__dyk b { display: block; font-size: calc(1.2 * var(--k)); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; margin-bottom: calc(0.4 * var(--k)); }
.lbl__dyk span { font-size: calc(1.55 * var(--k)); }
.lbl__more { grid-column: 1 / -1; display: grid; gap: calc(1.2 * var(--k)); margin-top: calc(0.6 * var(--k)); }
.lbl__more h5 { margin: 0; font: 700 calc(1.9 * var(--k)) var(--head); color: var(--ink); }
.lbl__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lbl__card--mini { grid-template-columns: 34% minmax(0, 1fr); align-items: center; }
.lbl__card--mini .lbl__ct b { font-size: calc(1.5 * var(--k)); }
.lbl__pow { grid-column: 1 / -1; margin: 0; text-align: center; font-size: calc(1.05 * var(--k)); color: var(--mute); padding-top: calc(1 * var(--k)); }
.ll__dev--tv .lbl { font-size: calc(1.3 * var(--k)); }
/* on a phone the label is the desktop one, shrunk to fit: the same landscape
   screen and layout a visitor sees at the exhibit (Joe, 4 October 2026) */
@media (max-width: 640px) {
  .ll__seg:has([data-ll-dev]) { display: none; }
  /* venues on one row of short pills */
  .ll__seg:has([data-ll-brand]) { gap: 0.5rem 0.4rem; }
  .ll__seg:has([data-ll-brand]) .ll__k { flex-basis: 100%; text-align: center; margin: 0; }
  .ll__seg [data-ll-brand] { padding: 0.4rem 0.7rem; gap: 0.4rem; font-size: 0.82rem; min-height: 2.5rem; }
  .ll__full { display: none; }
  .ll__short { display: inline; }
  .ll__dev { width: calc(100% - 0.5rem); }
}
@media (prefers-reduced-motion: reduce) { .lbl__view, .ll__dev, .lbl, .lbl__bar { transition: none; } }

/* ---------- Live Labels page: comparison and the pilot card ---------- */
.cmp { overflow-x: auto; margin-top: clamp(2rem, 4vw, 3rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.cmp table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.98rem; }
.cmp th, .cmp td { padding: 1.1rem 1.4rem; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.cmp thead th { border-top: 0; color: var(--tx); font-weight: 650; }
.cmp thead th:nth-child(2), .cmp td:nth-child(2) { background: var(--ember-a12); color: var(--tx); }
.cmp tbody th { color: var(--tx-mute); font-weight: 500; width: 24%; }
.cmp td { color: var(--tx-body); }
.cmp:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.sec--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.pilot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 2.4rem; max-width: 62rem; margin-inline: auto; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.pilot .h3 { margin-bottom: 0.3rem; }
.pilot p { max-width: 54ch; }
@media (max-width: 760px) { .pilot { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- About (option E): the founder, why he built it, how it's run ---------- */
.pagehero--about { text-align: left; }
.ab-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ab-hero__copy { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); justify-items: start; }
.ab-hero__copy .lede { margin: 0; max-width: 46ch; }
.ab-hero__copy .ctas { justify-content: flex-start; margin: 0.4rem 0 0; }
.ab-hero__also { max-width: 52ch; font-size: var(--fs-small); color: var(--tx-mute); line-height: 1.6; }
.ab-cv { max-width: 52ch; gap: 0.45rem; font-size: 1rem; }
.ab-photo { position: relative; margin: 0; }
.ab-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 50px 90px -30px rgb(var(--sh-rgb) / calc(0.8 * var(--sh-k))); }
.ab-photo figcaption { position: absolute; left: 1.1rem; top: 1.1rem; padding: 0.45rem 0.9rem; border-radius: var(--r-pill); background: var(--float-bg); border: 1px solid var(--line-hi); font-size: var(--fs-small); color: var(--tx-mute); }
.ab-photo figcaption b { color: var(--tx); font-weight: 600; }

.ab-saw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.1rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.ab-t, .ab-d { position: relative; overflow: hidden; min-width: 0; display: grid; align-content: start; gap: 0.6rem; padding: clamp(1.3rem, 2.2vw, 1.8rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 120% at 50% 0%, var(--panel-hi) 0%, var(--panel) 50%, var(--panel-lo) 100%); }
.ab-t__h { font-size: 1.14rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; color: var(--tx); text-wrap: balance; }
.ab-t p, .ab-d p { font-size: 0.96rem; }
.ab-t__media { margin-top: auto; padding-top: 1rem; }
.ab-t { grid-template-rows: auto auto auto 1fr; }
.ab-t__media--phone { height: 15rem; overflow: hidden; display: grid; justify-items: center; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); margin-bottom: calc(-1 * clamp(1.3rem, 2.2vw, 1.8rem)); }
.ab-t__media--phone .device { width: min(11.5rem, 80%); }

.ab-sub { display: grid; gap: 0.6rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.ab-dec { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.1rem); margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.ab-d { grid-column: span 2; }
.ab-d .h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.ab-d--app { grid-column: span 3; grid-row: span 2; padding-bottom: 0; }
.ab-d--hw, .ab-d--price { grid-column: span 3; }
.ab-why { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); color: var(--tx-body); }
.ab-why b { margin-right: 0.45rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); }
.ab-d--app .ab-why { margin-top: 0.4rem; }
.ab-d__phone { display: grid; justify-items: center; height: 19rem; overflow: hidden; margin-top: 1.4rem; }
.ab-d__phone .device { width: min(15rem, 70%); }

.ab-venue { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; overflow: hidden; padding: clamp(1.8rem, 4.5vw, 4.2rem) clamp(1.8rem, 4.5vw, 4.2rem) 0; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.ab-venue__copy { display: grid; gap: 1.1rem; justify-items: start; padding-bottom: clamp(1.8rem, 4.5vw, 4.2rem); }
.ab-venue__who { display: flex; align-items: center; gap: 0.9rem; }
.ab-venue__who img { width: 3.6rem; height: 3.6rem; border-radius: 50%; object-fit: cover; }
.ab-venue__who span { display: grid; color: var(--tx-mute); font-size: var(--fs-small); line-height: 1.35; }
.ab-venue__who b { color: var(--tx); font-weight: 600; }
.ab-venue__facts { margin: 0.4rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; width: 100%; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ab-venue__facts div { display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.ab-venue__facts dd { margin: 0; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 720; letter-spacing: -0.045em; line-height: 1; color: var(--tx); }
.ab-venue__facts dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); }
.ab-venue__phone { align-self: end; display: grid; justify-items: center; height: clamp(22rem, 34vw, 30rem); overflow: hidden; }
.ab-venue__phone .device { width: min(16rem, 70%); }

.ab-co { margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 64rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; text-align: left; }
.ab-co div { padding-top: 1rem; border-top: 1px solid var(--line-hi); }
.ab-co dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); margin-bottom: 0.4rem; }
.ab-co dd { margin: 0; font-size: var(--fs-small); color: var(--tx-body); }

@media (max-width: 1000px) {
  .ab-saw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-dec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-d, .ab-d--hw, .ab-d--price { grid-column: span 1; }
  .ab-d--app { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 860px) {
  .ab-hero, .ab-venue { grid-template-columns: 1fr; }
  .ab-photo { max-width: 30rem; }
  .ab-venue__phone { height: 20rem; }
}
@media (max-width: 640px) {
  .ab-saw, .ab-dec, .ab-co { grid-template-columns: 1fr; }
  .ab-d, .ab-d--app, .ab-d--hw, .ab-d--price { grid-column: auto; }
  .ab-venue__facts { gap: 0.8rem; }
}

/* ---------- Sealife Adventure customer story (sealife-adventure.html) ----------
   A centred hero with their logo and the guide's counts, feature rows with a
   real phone each, a grid of smaller panels, the Rockpools Live Label shown
   unframed, then the quote, figures and Try it yourself moved from the home. */
.cs-who { justify-content: center; text-align: left; }
.cs-facts { margin: clamp(2.6rem, 5vw, 4rem) 0 0; text-align: center; }
.cs-facts div { display: flex; flex-direction: column; align-items: center; }
.cs-facts dd { order: -1; margin: 0; font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 720; letter-spacing: -0.05em; line-height: 1; color: var(--tx); font-variant-numeric: tabular-nums; }
.cs-facts dt { margin-top: 0.6rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); }
.cs-facts__note { margin-top: 1.4rem; }
.cs-joe { margin-top: 0; }

.cs-rows { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.cs-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.cs-row--flip .cs-row__copy { order: 2; }
.cs-row__copy { display: grid; gap: 1.1rem; justify-items: start; }
.cs-row__copy .h2 { max-width: 16ch; }
.cs-row__copy p, .cs-row__copy .ticks { max-width: 50ch; font-size: 1.06rem; }
.cs-row__media { display: grid; justify-items: center; }
.cs-row__media .device { width: min(19rem, 70%); }

.cs-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.1rem); margin-top: clamp(4.5rem, 9vw, 8rem); }
.cs-panel { min-width: 0; display: grid; align-content: start; gap: 0.75rem; padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(120% 120% at 50% 0%, var(--panel-hi) 0%, var(--panel) 50%, var(--panel-lo) 100%); }
.cs-panel__h { font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.15; color: var(--tx); text-wrap: balance; }
.cs-panel p, .cs-panel .ticks { font-size: 0.96rem; }
.cs-panel .ticks { gap: 0.4rem; }
.cs-talks { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; }
.cs-talks li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: baseline; padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 0.94rem; }
.cs-talks time { color: var(--tx); font-weight: 650; font-variant-numeric: tabular-nums; }
.cs-talks span { color: var(--tx-body); }
.cs-talks small { color: var(--tx-dim); font-size: 0.8rem; }

.cs-wall { margin: clamp(4.5rem, 9vw, 8rem) 0 0; display: grid; gap: 1rem; }
.cs-wall > img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 40px 80px -30px rgb(var(--sh-rgb) / calc(0.8 * var(--sh-k))); }
.cs-wall .fr { width: 100%; max-width: 60rem; justify-self: center; }
.cs-wall figcaption { text-align: center; }
.cs-wall figcaption a { color: var(--tx); }
.cs-end .quote { margin-top: 0; }

@media (max-width: 1000px) { .cs-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .cs-row { grid-template-columns: 1fr; }
  .cs-row--flip .cs-row__copy { order: 0; }
  .cs-row__media .device { width: min(16rem, 62vw); }
}
@media (max-width: 640px) { .cs-panels { grid-template-columns: 1fr; } }

/* Insights: the Monday e-mail on a phone beside its four parts */
.mon { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; max-width: 60rem; margin: clamp(3rem, 6vw, 5rem) auto 0; }
.mon .mon__steps { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (max-width: 760px) {
  .mon { grid-template-columns: minmax(0, 1fr); }
  .mon__phone { width: min(16rem, 70vw); margin-inline: auto; }
}

/* review round 3 */
/* About: Sealife's Rockpools Live Label beside the first-venue story */
.ab-venue__wall { align-self: center; margin: 0; display: grid; gap: 0.8rem; padding-bottom: clamp(1.8rem, 4.5vw, 4.2rem); }
.ab-venue__wall > img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line-hi); box-shadow: 0 30px 60px -20px rgb(var(--sh-rgb) / calc(0.6 * var(--sh-k))); }
.ab-venue__wall figcaption { color: var(--tx-dim); font-size: var(--fs-small); }
/* privacy and terms: the company block at the end, set like About's */
.prose dl { margin: 3rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.prose dl dt { grid-row: 1; padding-top: 1rem; border-top: 1px solid var(--line-hi); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-text); }
.prose dl dd { grid-row: 2; margin: -0.9rem 0 0; font-size: var(--fs-small); color: var(--tx-body); }
@media (max-width: 640px) { .prose dl { grid-template-columns: 1fr; } .prose dl dt, .prose dl dd { grid-row: auto; } }
/* pricing comparison on phones: row labels stay put, and a hint that it scrolls */
.compare__hint { display: none; }
@media (max-width: 760px) {
  .compare__hint { display: block; margin: 0 0 0.6rem; text-align: right; color: var(--tx-dim); font-size: var(--fs-small); }
  .compare tbody th, .compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
  .compare tbody th { width: 7.5rem; min-width: 7.5rem; }
}
/* Live Labels: three figures; the label's countdown to the next talk */
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lbl__in { font-style: normal; opacity: 0.75; white-space: nowrap; }
/* homepage setup section: the two small portal laptops can't be read on a phone */
@media (max-width: 600px) { .house__item .laptop { display: none; } }

/* a card with one phone: centre it in the picture area */
.card__media .device:only-child { left: 0; right: 0; margin-inline: auto; top: 12%; }

/* Inner pages (Insights, Live Labels, Pricing): one heading measure, so every
   H1 breaks into two balanced lines of the same width and every section H2
   shares one size and width. The homepage keeps its big chapter headings. */
:is(.pg-insights, .pg-labels, .pg-pricing) .pagehero .head--c > h1 { max-width: 13em; text-wrap: balance; }
:is(.pg-insights, .pg-labels, .pg-pricing) .sec .head--c > h2.title { font-size: var(--fs-title-long); line-height: 0.98; letter-spacing: -0.048em; }
:is(.pg-insights, .pg-labels, .pg-pricing) .sec .head--c > h2 { max-width: 11em; text-wrap: balance; }

/* ============================================================
   Guide Pass: the home section, the Pricing card, /guide-pass
   ============================================================ */
:is(.pg-guidepass) .pagehero .head--c > h1 { max-width: 13em; text-wrap: balance; }
:is(.pg-guidepass) .sec .head--c > h2.title { font-size: var(--fs-title-long); line-height: 0.98; letter-spacing: -0.048em; }
:is(.pg-guidepass) .sec .head--c > h2 { max-width: 11em; text-wrap: balance; }

/* ---------- the visitor's side, drawn: scan, pay, keep it for a year ----------
   Until the product exists these screens are drawn by the site in the guide's
   own colours (the same in both themes, like a screenshot), around a real
   crop of Bramble's page. Everything inside is sized in container units, so a
   screen reads the same at any width. Replaced by real captures before
   launch (README, gate 14). */
.gp-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 62rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 3rem); }
.gp-step { display: grid; justify-items: center; gap: 1.1rem; text-align: center; align-content: start; min-width: 0; }
.gp-step .device { width: min(100%, 17rem); }
.gp-step__n { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ember-a40); color: var(--ember-text); font-weight: 650; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.gp-step h3 { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; }
.gp-step p { font-size: 0.97rem; color: var(--tx-mute); max-width: 24ch; margin-top: -0.6rem; }
.gp-steps + .fine { margin-top: 1.6rem; text-align: center; }
@media (max-width: 760px) {
  .gp-steps { grid-template-columns: 1fr; max-width: 19rem; gap: 3rem; }
}

.gpscr { position: relative; aspect-ratio: 390 / 871; overflow: hidden; container-type: inline-size; background: #EEF3F5; color: #0d3b4c; text-align: left; line-height: 1.3; }
.gpscr > img { width: 100%; height: 100%; object-fit: cover; }
.gpscr p { margin: 0; max-width: none; }
.gpscr__island { position: absolute; z-index: 3; top: 3cqw; left: 50%; transform: translateX(-50%); width: 29cqw; height: 8.4cqw; border-radius: 5cqw; background: #000; }
.gpscr__top { background: #0d3b4c; color: #fff; padding: 16cqw 5cqw 4cqw; display: grid; gap: 0.6cqw; }
.gpscr__top span { font-size: 2.9cqw; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.75; }
.gpscr__top b { font-size: 6.2cqw; font-weight: 800; letter-spacing: -0.01em; }
.gpscr__photo { position: relative; margin: 5cqw 5cqw 0; aspect-ratio: 294 / 220; border-radius: 3.6cqw; overflow: hidden; background: #123; }
.gpscr__photo img { position: absolute; width: 132.65%; max-width: none; height: auto; left: -16.33%; top: -138.6%; }
.gpscr__name { display: grid; justify-items: center; gap: 0.8cqw; padding: 4.6cqw 5cqw 2cqw; text-align: center; }
.gpscr__name b { font-size: 6.4cqw; font-weight: 800; letter-spacing: -0.01em; }
.gpscr__name i { font-size: 4.4cqw; }
.gpscr__iucn { margin-top: 1.6cqw; display: inline-flex; align-items: center; gap: 1.8cqw; padding: 1cqw 3.2cqw 1cqw 1.2cqw; border-radius: 99cqw; background: #D9581E; color: #fff; font-size: 3.6cqw; font-weight: 800; }
.gpscr__iucn b { font-size: 3.6cqw; padding: 0.2cqw 2cqw; border-radius: 99cqw; background: rgba(0, 0, 0, 0.22); }
.gpscr__bars { display: grid; justify-items: center; gap: 2.8cqw; padding: 2cqw 9cqw; }
.gpscr__bars i { display: block; height: 3cqw; width: 100%; border-radius: 2cqw; background: #d3dce2; }
.gpscr__bars i:last-child { width: 60%; }
.gpscr__dim { position: absolute; inset: 0; background: rgba(5, 8, 14, 0.55); }
.gpscr__sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 3cqw; padding: 4cqw 6cqw 7cqw; border-radius: 7cqw 7cqw 0 0; background: #fff; box-shadow: 0 -4cqw 10cqw rgba(13, 59, 76, 0.18); }
.gpscr__grab { justify-self: center; width: 13cqw; height: 1.4cqw; border-radius: 2cqw; background: #d5dbe3; }
.gpscr__sheet b { font-size: 5.6cqw; line-height: 1.2; letter-spacing: -0.01em; }
.gpscr__sheet p { font-size: 4cqw; line-height: 1.4; color: #4a5b6b; }
.gpscr__btn { display: block; text-align: center; padding: 3.6cqw; border-radius: 4cqw; background: #F5C518; color: #0d3b4c; font-weight: 800; font-size: 4.6cqw; }
.gpscr__btn--pay { background: #000; color: #fff; }
.gpscr__link { text-align: center; font-weight: 700; font-size: 3.8cqw; }
.gpscr__small { text-align: center; font-size: 3.5cqw; color: #6b7c8c; }
.gpscr__line { display: flex; justify-content: space-between; padding-bottom: 2.4cqw; border-bottom: 1px solid #e6eaef; font-size: 4.2cqw; color: #4a5b6b; }
.gpscr__line strong { color: #0d3b4c; }
.gpscr__toast { position: absolute; z-index: 2; left: 4cqw; right: 4cqw; top: 19cqw; display: flex; gap: 3cqw; align-items: center; padding: 3.2cqw 4cqw; border-radius: 4.6cqw; border: 1px solid rgba(245, 197, 24, 0.6); background: #0d3b4c; color: #fff; font-size: 3.9cqw; line-height: 1.3; box-shadow: 0 4cqw 10cqw rgba(0, 0, 0, 0.35); }
.gpscr__toast i { flex: none; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #5BD69A; }

/* ---------- the four terms ---------- */
.deal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.deal > div { display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--panel); min-width: 0; }
.deal b { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 720; letter-spacing: -0.05em; line-height: 1; color: var(--tx); font-variant-numeric: tabular-nums; }
.deal p { font-size: 0.98rem; line-height: 1.45; }
.deal b small { font-size: 0.5em; letter-spacing: -0.03em; }
@media (max-width: 860px) { .deal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .deal { grid-template-columns: 1fr; } }

/* hero price line: "or free with Guide Pass" carries a dashed ember underline (W1 mock-up) */
.hero__gp, .ulink { color: var(--tx); text-decoration: none; border-bottom: 1px dashed var(--ember); padding-bottom: 1px; transition: border-color var(--t-hover) var(--ease); }
.hero__gp:hover, .ulink:hover { border-bottom-style: solid; }

/* ---------- Pricing: "or", then the Guide Pass card ---------- */
.or { display: flex; align-items: center; gap: 1.2rem; margin: clamp(2.2rem, 4vw, 3rem) auto; max-width: 30rem; color: var(--tx-dim); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-hi); }
.gpcard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(1.4rem, 3vw, 2.8rem); align-items: center;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--r-lg); border: 1px solid var(--ember-a40);
  background: radial-gradient(90% 120% at 0% 0%, var(--ember-a12), var(--panel) 60%);
}
.gpcard__head { display: grid; gap: 0.9rem; justify-items: start; }
.gpcard .plan__name { width: 100%; justify-content: flex-start; gap: 0.7rem; }
.gpcard__new { padding: 0.15rem 0.55rem; border-radius: var(--r-pill); background: var(--ember); color: var(--on-ember); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gpcard .plan__price { margin: 0; }
.gpcard .plan__blurb { min-height: 0; margin: 0; font-size: 1.05rem; color: var(--tx); max-width: 30ch; }
.gpcard__ticks { margin: 0; }
.gpcard__go { display: grid; gap: 0.7rem; }
.gpcard__go .btn { width: 100%; }
.gpcard__go .fine { margin: 0.2rem 0 0; text-align: center; }
@media (max-width: 960px) {
  .gpcard { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}
/* on the homepage the card sits between the plans and the plans note */
.plans + .or + .gpcard { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.gp-pp { margin-top: var(--sp-sec); }

/* ---------- two-column tables: plan or pass, printed or Guide Pass ---------- */
.compare--2 table { min-width: 36rem; }
.compare--2 tbody th { width: 22%; }
.compare--2 td { width: 39%; }
.compare tr.is-new th, .compare tr.is-new td { box-shadow: inset 0 1px 0 var(--ember-a40), inset 0 -1px 0 var(--ember-a40); }
.compare + .fine, .compare--2 + .fine { text-align: center; }

/* ---------- what the pass opens: free, then with a pass ---------- */
.opens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.opens .panel { height: 100%; }
.opens .panel--pass { border-color: var(--ember-a40); background: radial-gradient(100% 80% at 100% 0%, var(--ember-a12), var(--panel) 60%); }
.opens .fine { margin-top: auto; padding-top: 0.6rem; }
@media (max-width: 760px) { .opens { grid-template-columns: 1fr; } }

/* ---------- how the money moves ---------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(0.6rem, 1.6vw, 1.2rem); align-items: stretch; }
.flow__box { display: grid; gap: 0.5rem; align-content: start; padding: clamp(1.3rem, 2.6vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.flow__box--site { border-color: var(--ember-a40); }
.flow__box b { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 720; letter-spacing: -0.05em; line-height: 1; color: var(--tx); font-variant-numeric: tabular-nums; }
.flow__box p { font-size: 0.95rem; line-height: 1.45; }
.flow__arr { display: grid; place-items: center; color: var(--ember-text); font-size: 1.6rem; }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .flow__arr { transform: rotate(90deg); }
}

/* ---------- what it could earn ---------- */
.pcalc__form { display: grid; gap: 1.3rem; margin-top: 0.6rem; }
.pcalc__form .field label { display: flex; justify-content: space-between; gap: 1rem; }
.pcalc__form output { color: var(--tx); font-weight: 600; font-variant-numeric: tabular-nums; }
.pcalc__form input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--ember); height: 1.6rem; }
.pcalc__form .fine { margin-top: -0.2rem; }
.pcalc__rows { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; }
.pcalc__rows li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--tx-mute); }
.pcalc__rows b { color: var(--tx); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcalc__rows li.is-total { color: var(--tx); font-weight: 600; }
.pcalc__rows li.is-total b { color: var(--live); }

/* ---------- three ways in ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.ways .panel { height: 100%; }
.ways .h3 { font-size: 1.3rem; }
.soon { padding: 0.18rem 0.6rem; border-radius: var(--r-pill); border: 1px solid var(--line-hi); color: var(--tx-mute); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }