/* ============================================================
   SUPERWORKER — Web 4.0
   White-first, Apple-register. Governed by:
   spr-web-design-architecture · spr-product-placement-architecture
   · spr-brand-communications-architecture
   ============================================================ */

:root {
  /* Colour — 60-30-10, white-first. Orange is action/emphasis ONLY. */
  --paper: #F7F9FB;
  --paper-2: #EDF1F5;
  --white: #FFFFFF;
  --ink: #343539;
  --ink-2: #48494D;
  --ink-dim: #55575C;
  --silver: #90A0AD;
  --silver-2: #C7D2DA;
  --silver-line: rgba(52,53,57,0.10);
  --orange: #F5601C;
  --orange-hover: #E0510F;
  --on-dark: #E9EAEC;
  --on-dark-dim: #B4B7BC;

  /* Type — modular scale 1.25 */
  --font-display: "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body: "Roboto", "Helvetica Neue", sans-serif;
  --fs-hero: clamp(2.6rem, 6.2vw, 4.9rem);
  --fs-h2: clamp(2rem, 3.8vw, 3.1rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.6rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-stat: clamp(2.6rem, 5vw, 4.2rem);

  /* Rhythm — 8pt grid */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --content-w: 1200px;
  --r-card: 18px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 2px 6px rgba(52,53,57,0.06), 0 16px 40px rgba(52,53,57,0.10);
  --shadow-screen: 0 8px 20px rgba(52,53,57,0.10), 0 40px 90px rgba(52,53,57,0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  position: relative;
  z-index: 1;
}

/* ---------- Acts (sections) ---------- */
.act { padding: var(--s8) 0; }
.act--tight { padding: var(--s7) 0; }
.act--white { background: var(--white); }
.act--paper { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.act--dark {
  background: var(--ink);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.act--dark::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(120% 60% at 80% 10%, rgba(255,255,255,0.05) 0%, transparent 55%),
    radial-gradient(90% 50% at 15% 85%, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.act--dark p { color: var(--on-dark-dim); }

/* ---------- Display type ---------- */
.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.8rem;
  color: var(--silver);
  margin-bottom: var(--s2);
}
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: 0.005em;
  max-width: 22ch;
}
.h-display em { font-style: normal; color: var(--orange); }
.act--dark .h-display { color: var(--white); }
.lede {
  margin-top: var(--s3);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 300;
  color: var(--ink-dim);
  max-width: 54ch;
}
.act--dark .lede { color: var(--on-dark-dim); }
.money {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(247,249,251,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--silver-line);
}
.nav-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: flex; align-items: center; gap: var(--s4);
  height: 64px;
}
.logo img { height: 24px; width: auto; display: block; }
.nav-links {
  display: flex; gap: var(--s3); list-style: none;
  margin-left: auto; align-items: center;
}
.nav-links a {
  font-size: 0.92rem; font-weight: 500; color: var(--ink-dim);
  transition: color 160ms; white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-dropdown { position: relative; }
.nav-dropdown > a::after { content: " ▾"; font-size: 0.7em; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: 12px;
  padding: var(--s1);
  min-width: 170px;
  opacity: 0; visibility: hidden;
  transition: all 180ms var(--ease-out);
  box-shadow: var(--shadow-card);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a { display: block; padding: 10px 14px; border-radius: 8px; }
.nav-dropdown-menu a:hover { background: var(--paper); }

.btn {
  display: inline-block;
  font-weight: 700; font-size: 0.95rem;
  padding: 12px 26px; border-radius: var(--r-pill);
  border: none; cursor: pointer;
  transition: all 180ms var(--ease-out);
  white-space: nowrap;
}
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-hover); transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid rgba(52,53,57,0.30);
}
.btn--ghost:hover { border-color: var(--ink); }
.act--dark .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,0.4); }
.act--dark .btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--small { font-size: 0.85rem; padding: 8px 18px; }
.nav-toggle { display: none; }

/* Anxiety line — sits beside CTAs (MECLABS 2a) */
.assure {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  color: var(--silver);
}

/* ---------- BEAT 1 — the experience ---------- */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 64px;
  background:
    radial-gradient(110% 70% at 85% 12%, var(--white) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  overflow: hidden;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--s5), 6vw, var(--s8));
  align-items: center;
  padding-top: var(--s6);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: 0.005em;
  max-width: 13ch;
}
.hero-sub {
  margin-top: var(--s3);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 300;
  color: var(--ink-dim);
  max-width: 42ch;
}
.hero-sub b { font-weight: 500; color: var(--ink); }
.hero-ctas { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }

.tuesday { position: relative; padding: var(--s4) 0 var(--s5); }
.tuesday-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--silver);
  margin-bottom: var(--s2);
  text-align: center;
}
.screen {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(52,53,57,0.08);
  box-shadow: var(--shadow-screen);
  transform: translateY(28px) scale(0.97);
  opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out);
}
.in .screen { transform: none; opacity: 1; }
.screen video { width: 100%; height: auto; }
.screen-caption {
  margin-top: var(--s2);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--silver);
  max-width: 40ch;
  margin-left: auto; margin-right: auto;
}
.screen-caption b { color: var(--ink-dim); font-weight: 500; }

.tmoment {
  position: absolute;
  z-index: 2;
  width: clamp(190px, 19vw, 232px);
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: 14px;
  padding: 14px var(--s2);
  box-shadow: var(--shadow-card);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-dim);
  opacity: 0;
  transform: translateY(18px);
  transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-out);
}
.tmoment .t {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 4px;
}
.tmoment .t small { color: var(--silver); font-size: 0.82em; letter-spacing: 0.1em; }
.in .tmoment { opacity: 1; transform: none; }
.in .tmoment-1 { transition-delay: 500ms; }
.in .tmoment-2 { transition-delay: 720ms; }
.in .tmoment-3 { transition-delay: 940ms; }
.tmoment-1 { top: 12%;  left: -6%; }
.tmoment-2 { top: 46%; right: -7%; }
.tmoment-3 { bottom: 2%; left: -1%; }

.sam {
  position: absolute;
  z-index: 3;
  top: 2%; right: 2%;
  width: clamp(88px, 8vw, 116px);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: scale(0);
  aspect-ratio: 1 / 1;
}
.sam video { width: 100%; height: 100%; object-fit: cover; }
.in .sam { animation: samPop 650ms var(--ease-out) 1200ms both; }
@keyframes samPop {
  0% { transform: scale(0); opacity: 0; }
  75% { transform: scale(1.07); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.cue { text-align: center; padding: var(--s4) 0 var(--s4); }
.cue p { font-size: 0.95rem; color: var(--silver); max-width: 46ch; margin: 0 auto; }
.cue .arrow { display: inline-block; margin-top: var(--s1); color: var(--silver); animation: drift 2.4s var(--ease-out) infinite; }
@keyframes drift {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------- BEAT 2 — the reveal (dark cinema) ---------- */
.reveal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: center;
  margin-top: var(--s5);
}
.owned {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 480px;
}
.owned span {
  font-size: 0.85rem;
  color: var(--on-dark-dim);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.in .owned span { opacity: 1; transform: none; }
.in .owned span:nth-child(1) { transition-delay: 100ms; }
.in .owned span:nth-child(2) { transition-delay: 180ms; }
.in .owned span:nth-child(3) { transition-delay: 260ms; }
.in .owned span:nth-child(4) { transition-delay: 340ms; }
.in .owned span:nth-child(5) { transition-delay: 420ms; }
.in .owned span:nth-child(6) { transition-delay: 500ms; }
.in .owned span:nth-child(7) { transition-delay: 580ms; }
.in .owned span:nth-child(8) { transition-delay: 660ms; }
.owned-note { margin-top: var(--s3); font-size: var(--fs-small); color: var(--silver); }
.reveal-couplet {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  color: var(--white);
  margin-top: var(--s4);
  max-width: 24ch;
}
.reveal-couplet em { font-style: normal; color: var(--orange); }
.name-line {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,0.14);
  max-width: 52ch;
}
.name-line b { color: var(--white); font-weight: 500; }

/* ---------- BEAT 3 — the scale (duo) ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin-top: var(--s5);
}
.duo-card {
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.duo-card .kicker { margin-bottom: var(--s1); }
.duo-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
}
.duo-card h3 em { font-style: normal; color: var(--orange); }
.duo-card p { margin-top: var(--s2); color: var(--ink-dim); }
.duo-card .link {
  margin-top: auto; padding-top: var(--s3);
  font-weight: 700; font-size: 0.95rem; color: var(--ink);
}
.duo-card .link::after { content: " →"; color: var(--orange); }
.duo-card .link:hover { color: var(--orange); }
.duo-media {
  margin: var(--s3) 0 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--silver-line);
}
.zpd-line {
  text-align: center;
  margin-top: var(--s5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--ink);
}
.zpd-line small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--silver);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* ---------- BEAT 4 — proof ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--s4);
  margin-top: var(--s5);
}
.proof-card {
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
}
.proof-card .luca-logo { height: 40px; width: auto; margin-bottom: var(--s3); }
.proof-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--ink);
}
.proof-stat em { font-style: normal; color: var(--orange); }
.proof-card p { margin-top: var(--s2); color: var(--ink-dim); max-width: 46ch; }
.proof-quote {
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.proof-quote blockquote {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}
.proof-quote blockquote::before { content: "\201C"; color: var(--orange); font-family: var(--font-display); font-weight: 700; }
.proof-quote cite {
  display: block; margin-top: var(--s3);
  font-style: normal; font-size: var(--fs-small); color: var(--silver);
}
.badge-strip {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s4);
}
.badge-strip span {
  font-size: 0.8rem; letter-spacing: 0.06em;
  color: var(--ink-dim);
  border: 1px solid var(--silver-line);
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 7px 16px;
}

/* ---------- BEAT 5 — the price ---------- */
.price-act { text-align: center; }
.price-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.05;
}
.price-line em { font-style: normal; color: var(--orange); }
.price-note { margin-top: var(--s2); color: var(--silver); font-size: var(--fs-small); }
.mini-calc {
  margin: var(--s5) auto 0;
  max-width: 860px;
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s4);
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr auto;
  gap: var(--s2);
  align-items: end;
  text-align: left;
}
.mini-field label {
  display: block;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 6px;
}
.mini-field select, .mini-field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--silver-line);
  border-radius: 10px;
  padding: 12px;
}
.mini-out {
  text-align: center;
  padding: 0 var(--s2);
}
.mini-out .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--orange);
  line-height: 1;
  white-space: nowrap;
}
.mini-out small { display: block; color: var(--silver); font-size: 0.75rem; margin-top: 4px; }

/* ---------- BEAT 6 — the door ---------- */
.door { text-align: center; }
.door .h-display { margin: 0 auto; }
.door-steps {
  display: flex; justify-content: center; gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--white);
}
.door-steps span { opacity: 0.9; }
.door-steps .sep { color: var(--orange); }
.door .btn { margin-top: var(--s4); }

/* ---------- Footer ---------- */
.footer {
  background: var(--white);
  border-top: 1px solid var(--silver-line);
  padding: var(--s6) 0 var(--s4);
  font-size: var(--fs-small);
  color: var(--ink-dim);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s4);
}
.footer img { height: 20px; }
.footer h5 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--silver);
  margin-bottom: var(--s2);
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 8px; }
.footer a:hover { color: var(--ink); }
.cred-strip {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--silver-line);
}
.cred-strip span {
  font-size: 0.78rem;
  color: var(--silver);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.footer-legal {
  display: flex; justify-content: space-between; gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s3);
  color: var(--silver);
}

/* ---------- Inner-page hero ---------- */
.page-hero {
  padding: calc(64px + var(--s7)) 0 var(--s6);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.05;
  max-width: 18ch;
}
.page-hero h1 em { font-style: normal; color: var(--orange); }

/* ---------- Capabilities: Builder cinema ---------- */
.dock-kicker { text-align: center; color: var(--on-dark-dim); font-size: var(--fs-small); margin-top: var(--s5); }
.dock {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(var(--s2), 3vw, var(--s4));
  margin-top: var(--s3);
}
.dock-item {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--on-dark-dim);
  transition: transform 300ms var(--ease-out), color 300ms;
}
.dock-badge {
  width: clamp(56px, 6vw, 76px);
  height: clamp(56px, 6vw, 76px);
  border-radius: 22%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transition: transform 300ms var(--ease-out);
}
.dock-svg { width: 74%; height: 74%; color: #fff; }
.dock-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.dock-item:hover .dock-badge, .dock-item.cycle .dock-badge { transform: translateY(-8px) scale(1.08); }
.dock-item[aria-selected="true"] { color: #fff; }
.dock-item[aria-selected="true"] .dock-badge { transform: translateY(-6px) scale(1.12); }
.stage { max-width: 900px; margin: var(--s5) auto 0; }
.vtab-panel { display: none; }
.vtab-panel.active { display: block; }
.vtab-panel video {
  width: 100%;
  border-radius: var(--r-card);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.vtab-caption { max-width: 62ch; margin: var(--s4) auto 0; text-align: center; }
.cap-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--white);
  margin-bottom: var(--s1);
}
.cap-title em { font-style: normal; color: var(--orange); }
.chip-note {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-pill);
  padding: 2px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--on-dark-dim);
}

/* ---------- Capabilities: Companion ---------- */
.companion-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s4), 4vw, var(--s7));
  align-items: center;
}
.comp-feature {
  border-left: 3px solid var(--orange);
  padding-left: var(--s3);
  margin-top: var(--s4);
}
.comp-feature h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.05;
}
.comp-feature h3 em { font-style: normal; color: var(--orange); }
.comp-feature p { margin-top: 6px; max-width: 44ch; color: var(--ink-dim); }
.phone-video { position: relative; }
.phone-video > video {
  width: min(100%, 420px);
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid var(--silver-line);
  box-shadow: var(--shadow-screen);
}
.ugc-chip {
  position: absolute;
  width: 30%;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(245,96,28,0.85);
  box-shadow: var(--shadow-card);
  transform: rotate(4deg) scale(0);
  z-index: 2;
}
.ugc-chip video { width: 100%; height: auto; }
.in .ugc-chip { animation: ugcPop 700ms var(--ease-out) 600ms both; }
.in .ugc-left { animation-delay: 850ms; }
@keyframes ugcPop {
  0% { transform: rotate(-6deg) scale(0); opacity: 0; }
  70% { transform: rotate(5deg) scale(1.06); opacity: 1; }
  100% { transform: rotate(4deg) scale(1); opacity: 1; }
}
.ugc-right { right: -4%; top: 8%; }
.ugc-left { left: -2%; bottom: 10%; }

/* ---------- Tiles (values / pillars) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}
.tile {
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  padding: var(--s4);
  box-shadow: var(--shadow-card);
}
.tile .n {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--orange);
  line-height: 1;
  margin-bottom: var(--s2);
}
.tile h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.tile p { font-size: 0.92rem; color: var(--ink-dim); }

/* ---------- Quotes ---------- */
.qgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}
.qcard {
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  padding: var(--s4);
  box-shadow: var(--shadow-card);
  font-size: 0.95rem;
  color: var(--ink-dim);
}
.qcard p::before { content: "\201C"; color: var(--orange); font-family: var(--font-display); font-weight: 700; }
.qcard cite { display: block; margin-top: var(--s2); font-style: normal; font-size: var(--fs-small); color: var(--silver); }

/* ---------- Why: stats + rollout blocks ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  padding: var(--s4);
  box-shadow: var(--shadow-card);
}
.stat-card .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--ink);
}
.stat-card .l {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.78rem; color: var(--orange);
  margin: var(--s2) 0 6px;
}
.stat-card p { font-size: 0.92rem; color: var(--ink-dim); }
.stat-card cite { display: block; margin-top: var(--s2); font-style: normal; font-size: 0.75rem; color: var(--silver); }
.tq {
  position: relative;
  max-width: 62ch;
  margin: var(--s5) 0 0;
  padding-left: var(--s5);
}
.tq::before {
  content: "\201C";
  position: absolute; left: 0; top: -12px;
  font-family: var(--font-display);
  font-size: 4rem; font-weight: 700;
  color: var(--orange);
  line-height: 1;
}
.tq p { font-size: 1.15rem; font-weight: 300; }
.tq cite { display: block; margin-top: var(--s2); font-style: normal; font-size: var(--fs-small); color: var(--silver); }

/* ---------- PKF spotlight ---------- */
.team-grid {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s4);
}
.team-card { text-align: center; width: 132px; }
.team-card img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--s1);
  border: 3px solid var(--white);
  box-shadow: var(--shadow-card);
}
.team-card b { display: block; font-size: 0.85rem; color: var(--ink); }
.team-card small { font-size: 0.72rem; color: var(--silver); line-height: 1.3; display: block; }

/* ---------- Pricing ---------- */
.calc-app {
  margin-top: var(--s5);
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
}
.calc-in { padding: var(--s5); border-right: 1px solid var(--silver-line); }
.calc-in .mini-field { margin-bottom: var(--s3); }
.lvl-head, .lvl-row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 0.8fr 1fr;
  gap: var(--s1);
  font-size: 0.85rem;
  padding: 8px 0;
}
.lvl-head {
  color: var(--silver);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--silver-line);
}
.lvl-row { border-bottom: 1px solid rgba(52,53,57,0.05); color: var(--ink-dim); }
.lvl-row .num, .lvl-row .journeys { text-align: right; font-variant-numeric: tabular-nums; }
.lvl-head .num, .lvl-head .journeys { text-align: right; }
.calc-out { padding: var(--s5); background: var(--paper); }
.calc-res { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); }
.calc-res div b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ink);
  line-height: 1.1;
}
.calc-res div:first-child b { color: var(--orange); font-size: 2.2rem; }
.calc-res div small { font-size: 0.75rem; color: var(--silver); text-transform: uppercase; letter-spacing: 0.08em; }
.calc-tier { font-size: var(--fs-small); color: var(--silver); margin-bottom: var(--s3); }

.setup-card {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s5);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
}
.setup-card .money em { font-style: normal; color: var(--orange); }
.setup-card ul { list-style: none; margin-top: var(--s2); color: var(--ink-dim); font-size: 0.92rem; }
.setup-card li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.setup-card li::before { content: "·"; color: var(--orange); position: absolute; left: 4px; font-weight: 700; }

/* ---------- Industries ---------- */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-top: var(--s5);
}
.ind-tile {
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: 14px;
  padding: var(--s3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  transition: transform 250ms var(--ease-out), box-shadow 250ms, border-color 250ms;
}
.ind-tile small {
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.75rem; color: var(--silver); white-space: nowrap;
}
.ind-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: rgba(245,96,28,0.5);
}
.ind-tile:hover small { color: var(--orange); }

/* ---------- FAQ / details ---------- */
.faq { margin-top: var(--s5); max-width: 820px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: 14px;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--orange); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: var(--s2); color: var(--ink-dim); font-size: 0.95rem; }

/* ---------- Docs list (diligence) ---------- */
.doc-list { margin-top: var(--s4); max-width: 760px; }
.doc-list a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  background: var(--white);
  border: 1px solid var(--silver-line);
  border-radius: 14px;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  font-weight: 500;
  transition: border-color 200ms, transform 200ms var(--ease-out);
}
.doc-list a:hover { border-color: rgba(245,96,28,0.5); transform: translateY(-2px); }
.doc-list a span { color: var(--silver); font-size: 0.8rem; white-space: nowrap; }

/* ---------- Partner paths ---------- */
.path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
}

/* ---------- Scroll-reveal plumbing ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 120ms; }
.rv-d2 { transition-delay: 240ms; }
.rv-d3 { transition-delay: 360ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .tmoment-1 { left: 0; }
  .tmoment-2 { right: 0; }
}
@media (max-width: 940px) {
  .hero { min-height: auto; padding-bottom: var(--s5); }
  .hero-grid { grid-template-columns: 1fr; padding-top: var(--s7); }
  .hero h1 { max-width: none; }
  .tuesday { margin-top: var(--s4); }
  .reveal-grid, .duo, .proof-grid, .companion-split, .path-grid { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .qgrid, .stat-grid, .ind-grid { grid-template-columns: 1fr 1fr; }
  .mini-calc { grid-template-columns: 1fr 1fr; }
  .calc-app { grid-template-columns: 1fr; }
  .calc-in { border-right: none; border-bottom: 1px solid var(--silver-line); }
  .setup-card { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-toggle {
    display: block; margin-left: auto;
    background: none; border: none; font-size: 1.4rem; color: var(--ink); cursor: pointer;
  }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--paper); padding: var(--s3);
    border-bottom: 1px solid var(--silver-line);
    box-shadow: var(--shadow-card);
  }
  .nav-dropdown-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: none; padding-left: var(--s2);
  }
}
@media (max-width: 560px) {
  .qgrid, .stat-grid, .ind-grid, .tile-grid, .mini-calc { grid-template-columns: 1fr; }
  .act { padding: var(--s7) 0; }
  .tmoment { position: static; width: 100%; margin-top: var(--s2); }
  .sam { top: -4%; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .screen, .tmoment, .owned span { opacity: 1; transform: none; transition: none; }
  .in .sam, .sam, .in .ugc-chip, .ugc-chip { animation: none; transform: scale(1) rotate(0); opacity: 1; }
  .cue .arrow { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   V2 VISUAL PASS — sleek register, glass overlays, device hero,
   ambient dark acts. Additive overrides; content untouched.
   ============================================================ */
:root {
  --fs-hero: clamp(2.5rem, 5.4vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 3.5vw, 2.9rem);
  --track-display: -0.018em;
  --glass-light: rgba(255,255,255,0.44);
  --glass-light-edge: rgba(255,255,255,0.85);
  --glass-dark: rgba(60,62,68,0.32);
  --glass-dark-edge: rgba(255,255,255,0.22);
  --shadow-glass: 0 1px 2px rgba(52,53,57,0.06), 0 18px 48px rgba(52,53,57,0.14);
  --shadow-device: 0 2px 4px rgba(20,22,26,0.18), 0 30px 60px -10px rgba(20,22,26,0.35), 0 80px 140px -20px rgba(20,22,26,0.30);
}

/* --- Type: tighter, larger, balanced --- */
.hero h1, .h-display, .price-line, .reveal-couplet, .duo-card h3, .proof-stat, .page-hero h1 {
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.hero h1 { line-height: 0.98; max-width: 14ch; }
.h-display { line-height: 1.0; }
.kicker { letter-spacing: 0.2em; font-size: 0.76rem; }
.lede, .hero-sub { text-wrap: pretty; }

/* --- Buttons: Apple pill weight --- */
.btn { padding: 14px 28px; font-weight: 600; letter-spacing: 0.005em; }
.btn--primary { box-shadow: 0 6px 18px -6px rgba(245,96,28,0.55); }
.btn--primary:hover { box-shadow: 0 10px 24px -6px rgba(245,96,28,0.6); }
.btn--ghost {
  background: var(--glass-light);
  border: 1px solid rgba(52,53,57,0.16);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-light-edge);
}
.act--dark .btn--ghost {
  background: var(--glass-dark);
  border-color: var(--glass-dark-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn--small { padding: 9px 18px; }

/* --- Nav: cleaner glass --- */
.nav {
  background: rgba(247,249,251,0.72);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom-color: rgba(52,53,57,0.07);
}

/* --- Glass surface (frosted, legible first) --- */
.glass, .tmoment, .badge-strip span, .cred-strip span {
  background: var(--glass-light);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(15px) saturate(160%);
  -webkit-backdrop-filter: blur(15px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-light-edge), inset 0 -1px 0 rgba(52,53,57,0.04), var(--shadow-glass);
}
.act--dark .glass, .owned span, .act--dark .chip-note {
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-edge);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 14px 36px rgba(0,0,0,0.28);
  color: var(--on-dark);
}

/* --- BEAT 1: hero field with soft light orbs (gives the glass something to refract) --- */
.hero {
  background: linear-gradient(180deg, #FBFCFD 0%, var(--paper) 60%, var(--paper-2) 100%);
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
}
.hero::before {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  right: -18vw; top: -14vw;
  background: radial-gradient(circle at 40% 40%, rgba(199,210,218,0.9) 0%, rgba(199,210,218,0.35) 40%, transparent 70%);
}
.hero::after {
  width: 40vw; height: 40vw; max-width: 620px; max-height: 620px;
  left: -14vw; bottom: -10vw;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(237,241,245,0.6) 45%, transparent 70%);
}
.hero-grid { grid-template-columns: 1fr 1.05fr; }

/* The Tuesday screen: the supplied phone mockup (assets/phone-frame.png) holds the video */
.tuesday { padding: var(--s3) 0 var(--s6); perspective: 1400px; }
.tuesday-eyebrow { letter-spacing: 0.2em; }
.screen {
  --rx: 3deg; --ry: -8deg;
  width: min(74%, 300px);
  aspect-ratio: 886 / 1831;
  border-radius: 14% / 7%;
  padding: 0;
  background: none;
  border: none;
  overflow: visible;
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(20,22,26,0.10)) drop-shadow(0 18px 28px rgba(20,22,26,0.14)) drop-shadow(0 48px 70px rgba(20,22,26,0.10));
  transform: translateY(40px) rotateY(-14deg) rotateX(6deg) scale(0.96);
  transform-origin: 50% 55%;
  transition: transform 1100ms var(--ease-out), opacity 700ms var(--ease-out);
  will-change: transform;
}
.in .screen { transform: rotateY(var(--ry)) rotateX(var(--rx)); }
.tuesday.tilting .screen { transition: transform 260ms var(--ease-out), opacity 700ms var(--ease-out); }
.screen video {
  position: absolute;
  left: 2.82%; top: 1.15%;
  width: 93.8%; height: 97.76%;
  object-fit: cover; object-position: 50% 0;
  border-radius: 12.2% / 5.9%;
  background: var(--white);
  display: block;
  z-index: 1;
}
.screen::before {           /* the frame itself, over the video */
  content: "";
  position: absolute; inset: 0;
  background: url("../assets/phone-frame.png") center / 100% 100% no-repeat;
  z-index: 2;
  pointer-events: none;
}
.screen::after {            /* glass reflection across the screen */
  content: "";
  position: absolute;
  left: 2.82%; top: 1.15%; width: 93.8%; height: 97.76%;
  border-radius: 12.2% / 5.9%;
  background: linear-gradient(118deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 22%, transparent 40%, transparent 78%, rgba(255,255,255,0.06) 100%);
  pointer-events: none;
  z-index: 3;
}
.screen-caption { margin-top: var(--s3); }

.tmoment {
  width: clamp(200px, 20vw, 248px);
  border-radius: 16px;
  padding: 14px 16px 15px;
  color: var(--ink-2);
  font-weight: 400;
}
.tmoment .t { color: var(--ink); letter-spacing: 0.08em; }
.tmoment .t small { color: var(--orange); font-weight: 700; }
.tmoment-1 { top: 14%; left: 2%; }
.tmoment-2 { top: 44%; right: 0; }
.tmoment-3 { bottom: calc(var(--s6) + 64px); left: 4%; }

.sam {
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(52,53,57,0.08), var(--shadow-glass);
  top: 4%; right: 8%;
  width: clamp(88px, 7.5vw, 110px);
}

.cue p { font-size: 1rem; color: var(--ink-dim); font-weight: 300; }

/* --- Dark acts: cinematic lighting, one ambient loop --- */
.act--dark { background: #2A2B2F; }
.act--dark::before {
  inset: -30%;
  background:
    radial-gradient(60% 50% at 78% 8%, rgba(255,255,255,0.10) 0%, transparent 55%),
    radial-gradient(70% 55% at 10% 95%, rgba(144,160,173,0.14) 0%, transparent 60%),
    radial-gradient(40% 30% at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
}
.act--dark::after {        /* fine grain so the dark reads as material, not flat fill */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.amb {
  position: absolute; inset: -6%;
  width: 112%; height: 112%;
  object-fit: cover;
  opacity: 0;
  filter: blur(10px) brightness(0.32) saturate(0.55) contrast(1.05);
  transform: scale(1.04);
  pointer-events: none;
  z-index: 0;
  transition: opacity 1600ms ease-out;
}
.act--dark.in-view .amb, .amb.ready { opacity: 1; }
.act--dark .wrap { z-index: 2; }
#reveal .h-display { max-width: 16ch; }
.owned span {
  padding: 9px 18px;
  font-weight: 500;
  color: var(--on-dark);
}
.owned-note { color: var(--on-dark-dim); }
.name-line { border-top-color: rgba(255,255,255,0.10); }

/* --- BEAT 3: product cards read as surfaces, media as renders --- */
.duo-card {
  border-color: rgba(52,53,57,0.06);
  box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -20px rgba(52,53,57,0.18);
  padding: var(--s5) var(--s5) var(--s4);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.duo-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 36px 80px -20px rgba(52,53,57,0.24); }
.duo-media {
  border-radius: 18px;
  border: none;
  box-shadow: 0 2px 4px rgba(20,22,26,0.12), 0 24px 48px -16px rgba(20,22,26,0.35);
  background: #232427;
  padding: 6px;
}
.duo-media img { border-radius: 13px; }
.zpd-line { font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: var(--track-display); }

/* --- BEAT 4: proof --- */
.proof-card, .proof-quote {
  border-color: rgba(52,53,57,0.06);
  box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -20px rgba(52,53,57,0.16);
}
.proof-stat { font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -0.03em; }
.proof-quote blockquote { font-size: 1.3rem; line-height: 1.45; font-weight: 300; }
.badge-strip span { color: var(--ink-2); font-weight: 500; letter-spacing: 0.03em; padding: 9px 18px; }
.act--paper { background: linear-gradient(180deg, var(--white) 0%, var(--paper) 40%, var(--paper-2) 100%); }

/* --- BEAT 5: price --- */
.price-line { font-size: clamp(2.4rem, 5.6vw, 4.6rem); letter-spacing: -0.025em; }
.mini-calc {
  border-color: rgba(52,53,57,0.06);
  box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 30px 70px -24px rgba(52,53,57,0.22);
  border-radius: 22px;
  padding: var(--s4) var(--s4);
}
.mini-field select, .mini-field input { border-radius: 12px; border-color: rgba(52,53,57,0.08); background: var(--paper); }
.mini-out .n { font-size: 2.2rem; letter-spacing: -0.02em; }

/* --- BEAT 6: door --- */
.door .lede { max-width: 40ch; }

/* --- Footer: quieter --- */
.footer { background: var(--paper); }
.cred-strip span { color: var(--ink-dim); }

/* --- Motion: reveals feel lighter, closer to the reference --- */
.rv { transform: translateY(16px); transition-duration: 700ms, 900ms; }

/* --- Responsive adjustments for the pass --- */
@media (max-width: 1020px) {
  .tmoment-1 { left: 0; }
  .tmoment-2 { right: 0; }
  .tmoment-3 { left: 0; }
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .screen { width: min(66%, 280px); }
  .in .screen { transform: none; }
}
@media (max-width: 560px) {
  .screen { width: 76%; }
  .tmoment { width: 100%; margin-top: var(--s2); }
  .sam { top: -6%; right: 0; }
  .hero::before, .hero::after { filter: blur(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .screen, .in .screen { transform: none; transition: none; }
  .amb { transition: none; }
}

/* ============================================================
   OPENING SEQUENCE — "the phone tumbles in and brings the light"
   html.intro      : pre-roll (veil up, hero content held)
   html.intro-play : the 4.4s choreography runs
   Starts tight on the wake screen, pulls back through a two-axis
   tumble (back of the phone shows), faces, wakes, lights the page,
   settles to its resting lean. Then the copy arrives.
   ============================================================ */
.intro-veil {
  position: fixed; inset: 0; z-index: 50;
  background:
    radial-gradient(70% 60% at 62% 55%, rgba(64,66,72,0.6) 0%, transparent 70%),
    #121316;
  opacity: 0; pointer-events: none;
}
.intro-light {
  position: fixed; z-index: 55;
  left: var(--vx, 50vw); top: var(--vy, 50vh);
  width: 320vmax; height: 320vmax;
  margin: -160vmax 0 0 -160vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #FBFCFD 0%, #F8FAFC 34%, rgba(247,249,251,0.98) 46%, rgba(247,249,251,0.6) 54%, rgba(247,249,251,0) 64%);
  transform: scale(0);
  opacity: 0; pointer-events: none;
}
html.intro .intro-veil { opacity: 1; pointer-events: auto; }
html.intro .intro-light { opacity: 1; }
html.intro body { overflow: hidden; }

/* the phone's 3D parts: only exist for the opening */
.wake, .wake-mark, .phone-back, .phone-edge { display: none; }
html.intro .wake, html.intro .wake-mark, html.intro .phone-back, html.intro .phone-edge { display: block; }
.wake {
  position: absolute; left: 2.82%; top: 1.15%; width: 93.8%; height: 97.76%;
  object-fit: cover; border-radius: 12.2% / 5.9%;
  transform: translateZ(0.6px); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.wake-mark {
  position: absolute; left: 50%; top: 50%; width: 24%; height: auto;
  transform: translate(-50%, -50%) translateZ(0.8px);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.18));
}
.phone-back {
  position: absolute; inset: 0;
  background: url("../assets/phone-back.png") center / 100% 100% no-repeat;
  transform: rotateY(180deg) translateZ(7px);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.phone-edge i {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(180deg, #4A4B50, #2A2B30 40%, #3A3B40);
  -webkit-mask: url("../assets/phone-back.png") center / 100% 100% no-repeat;
  mask: url("../assets/phone-back.png") center / 100% 100% no-repeat;
}
.phone-edge i:nth-child(1) { transform: translateZ(-1px); }
.phone-edge i:nth-child(2) { transform: translateZ(-2.2px); }
.phone-edge i:nth-child(3) { transform: translateZ(-3.4px); }
.phone-edge i:nth-child(4) { transform: translateZ(-4.6px); }
.phone-edge i:nth-child(5) { transform: translateZ(-5.8px); }
.phone-edge i:nth-child(6) { transform: translateZ(-7px); }

/* nav: dark glass while the room is dark */
html.intro .nav { background: rgba(18,19,22,0.55); border-bottom-color: rgba(255,255,255,0.08); transition: background 700ms var(--ease-out), border-color 700ms; }
html.intro.lit .nav { background: rgba(247,249,251,0.72); border-bottom-color: rgba(52,53,57,0.07); }
html.intro .nav-links a { color: var(--on-dark-dim); transition: color 700ms; }
html.intro .nav-links a:hover, html.intro .nav-links a[aria-current="page"] { color: #fff; }
html.intro.lit .nav-links a { color: var(--ink-dim); }
html.intro.lit .nav-links a:hover, html.intro.lit .nav-links a[aria-current="page"] { color: var(--ink); }

/* hold hero copy and overlays until the phone has landed */
html.intro .hero .rv:not(.tuesday) { opacity: 0 !important; transform: translateY(18px) !important; transition: none !important; }
html.intro .cue { opacity: 0 !important; transition: none !important; }
html.intro .hero-grid { z-index: 60; }
html.intro .tuesday { opacity: 1; transform: none; perspective: 1800px; }
html.intro .tuesday-eyebrow, html.intro .screen-caption { opacity: 0 !important; transition: none !important; }
html.intro .tmoment { opacity: 0 !important; transform: translateY(18px) !important; transition: none !important; }
html.intro .sam { animation: none !important; opacity: 0 !important; transform: scale(0) !important; }
html.intro .screen { opacity: 0; transition: none; filter: none; transform-style: preserve-3d; }
html.intro .screen::before, html.intro .screen::after, html.intro .screen video {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
html.intro .screen::before { transform: translateZ(1px); }
html.intro .screen::after { transform: translateZ(1.2px); }
html.intro .screen video { transform: translateZ(0.4px); opacity: 0; }
html.intro .hero::before, html.intro .hero::after { opacity: 0; }

/* the choreography */
html.intro-play .screen {
  opacity: 1;
  animation: introPhone 4.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  transition: none;
}
html.intro-play .screen::before { animation: introFrame 4.4s linear both; }
html.intro-play .screen::after {
  background:
    linear-gradient(118deg, transparent 0%, transparent 40%, rgba(255,255,255,0) 44%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 56%, transparent 60%, transparent 100%),
    linear-gradient(118deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 22%, transparent 40%, transparent 78%, rgba(255,255,255,0.06) 100%);
  background-size: 320% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: introSweep 4.4s linear both;
}
html.intro-play .screen video { animation: introWakeVideo 4.4s ease-out both; }
html.intro-play .wake { animation: introWakeScreen 4.4s ease-out both; }
html.intro-play .wake-mark { animation: introMark 4.4s ease-out both; }
html.intro-play .intro-light { animation: introLight 4.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
html.intro-play .intro-veil { animation: introVeil 4.4s linear both; }
html.intro-play .hero::before, html.intro-play .hero::after { transition: opacity 1200ms ease-out 3s; opacity: 1; }

@keyframes introPhone {
  0%   { transform: translate(calc(var(--dx, 0px) * 0.55), calc(var(--dy, 0px) + 560px)) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(3.1);
         animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
  12%  { transform: translate(calc(var(--dx, 0px) * 0.55), calc(var(--dy, 0px) + 440px)) rotateX(8deg) rotateY(-50deg) rotateZ(-5deg) scale(2.6);
         animation-timing-function: cubic-bezier(0.4, 0, 0.5, 1); }
  32%  { transform: translate(calc(var(--dx, 0px) * 0.55), calc(var(--dy, 0px) + 130px)) rotateX(36deg) rotateY(-320deg) rotateZ(-22deg) scale(1.7);
         animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }
  52%  { transform: translate(calc(var(--dx, 0px) * 0.55), var(--dy, 0px)) rotateX(10deg) rotateY(-650deg) rotateZ(-7deg) scale(1.2);
         animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1); }
  62%  { transform: translate(calc(var(--dx, 0px) * 0.55), var(--dy, 0px)) rotateX(0deg) rotateY(-720deg) rotateZ(0deg) scale(1.16);
         animation-timing-function: linear; }
  72%  { transform: translate(calc(var(--dx, 0px) * 0.55), var(--dy, 0px)) rotateX(0deg) rotateY(-720deg) rotateZ(0deg) scale(1.16);
         animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1); }
  100% { transform: translate(0px, 0px) rotateY(-728deg) rotateX(3deg) scale(1); }
}
@keyframes introFrame {
  0%   { filter: brightness(0.7) contrast(1.1); }
  40%  { filter: brightness(0.78) contrast(1.1); }
  62%  { filter: brightness(1) contrast(1); }
  100% { filter: brightness(1) contrast(1); }
}
@keyframes introSweep {
  0%   { background-position: -170% 0, 0 0; }
  30%  { background-position: -170% 0, 0 0; }
  64%  { background-position: 270% 0, 0 0; }
  100% { background-position: 270% 0, 0 0; }
}
@keyframes introWakeScreen {
  0%   { opacity: 1; }
  62%  { opacity: 1; }
  74%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes introMark {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateZ(0.8px) scale(0.9); }
  10%  { opacity: 1; transform: translate(-50%, -50%) translateZ(0.8px) scale(1); }
  60%  { opacity: 1; transform: translate(-50%, -50%) translateZ(0.8px) scale(1); }
  70%  { opacity: 0; transform: translate(-50%, -50%) translateZ(0.8px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateZ(0.8px) scale(1.15); }
}
@keyframes introWakeVideo {
  0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  62%  { opacity: 0; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  70%  { opacity: 1; box-shadow: 0 0 110px 30px rgba(255,255,255,0.55); }
  86%  { opacity: 1; box-shadow: 0 0 40px 8px rgba(255,255,255,0); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@keyframes introLight {
  0%   { transform: scale(0); opacity: 1; }
  64%  { transform: scale(0); opacity: 1; }
  88%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes introVeil {
  0%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- 3D phone (WebGL) ---------- */
.phone3d { display: block; }
.phone3d.at-rest { filter: drop-shadow(0 1px 2px rgba(20,22,26,0.10)) drop-shadow(0 18px 28px rgba(20,22,26,0.14)) drop-shadow(0 48px 70px rgba(20,22,26,0.10)); }
html.phone3d-on .screen { visibility: hidden; filter: none; animation: none !important; }
html.phone3d-on .screen::before, html.phone3d-on .screen::after, html.phone3d-on .screen video,
html.phone3d-on .wake, html.phone3d-on .wake-mark, html.phone3d-on .phone-back, html.phone3d-on .phone-edge { animation: none !important; }

/* white opening (3D phone): no veil, nav stays light, field orbs stay */
html.intro.white .intro-veil, html.intro.white .intro-light { display: none; }
html.intro.white .nav { background: rgba(247,249,251,0.72); border-bottom-color: rgba(52,53,57,0.07); }
html.intro.white .nav-links a { color: var(--ink-dim); }
html.intro.white .nav-links a:hover, html.intro.white .nav-links a[aria-current="page"] { color: var(--ink); }
html.intro.white .nav-dropdown-menu { background: var(--white); border-color: var(--silver-line); }
html.intro.white .hero::before, html.intro.white .hero::after { opacity: 1; }

/* ---------- UGC chip: rounded-square glass card over the phone ---------- */
.sam {
  border-radius: 20% / 15%;
  width: clamp(108px, 9vw, 136px);
  aspect-ratio: 3 / 4;
  top: -18px; right: calc(50% - 222px);   /* anchored to the phone's right edge (slot is 300px wide, centred) */
  border: 0.5px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.42);
  padding: 2px;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.9),
    0 0 0 0.5px rgba(52,53,57,0.06),
    0 1px 2px rgba(20,22,26,0.06),
    0 18px 40px -10px rgba(20,22,26,0.26),
    0 40px 70px -20px rgba(20,22,26,0.16);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}
.sam video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;     /* fills the card; symmetric crop keeps the closing logo centred */
  border-radius: calc(20% - 2px) / calc(15% - 2px);
  background: transparent;
}
.sam::after {
  content: ""; position: absolute; inset: 2px; border-radius: calc(20% - 2px) / calc(15% - 2px);
  background: linear-gradient(170deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.03) 30%, transparent 55%);
  pointer-events: none;
}

/* ---------- moment chips: narrower, pushed outward so the screen stays visible ---------- */
.tmoment { width: clamp(180px, 16vw, 208px); padding: 12px 14px 13px; font-size: 0.8rem; }
.tmoment-1 { top: 26%; left: calc(50% - 150px - 160px); }
.tmoment-2 { top: 54%; right: calc(50% - 150px - 160px); }
.tuesday { padding-top: calc(var(--s3) + 84px); padding-bottom: calc(var(--s6) + 56px); }
.tmoment-3 { bottom: calc(var(--s6) - 4px); left: calc(50% - 150px - 168px); }
@media (max-width: 1020px) {
  .tmoment-1 { left: 0; } .tmoment-2 { right: 0; } .tmoment-3 { left: 0; }
}

/* eyebrow: right-aligned on two lines, centred on the UGC card */
.tuesday-eyebrow {
  position: absolute; top: -18px; right: calc(50% - 66px);
  width: 196px; height: calc(clamp(108px, 9vw, 136px) * 4 / 3);
  margin: 0; display: flex; align-items: center; justify-content: flex-end;
  text-align: right; line-height: 1.55; text-wrap: balance;
}

/* hero copy column sits a little higher against the taller phone column */
.hero-grid > div:first-child { position: relative; top: -36px; }
@media (max-width: 940px) { .hero-grid > div:first-child { top: 0; } }

/* ---------- hero field: supplied slate gradient, drifting very slowly ---------- */
.hero {
  background: #6b737c url("../assets/hero-bg.jpg") center / cover no-repeat;
  isolation: isolate;
}
.hero::before, .hero::after { display: none; }      /* the light orbs give way to the image */
.hero-field {
  position: absolute; inset: -6%;
  background: url("../assets/hero-bg.jpg") center / cover no-repeat;
  z-index: 0; pointer-events: none;
  animation: heroDrift 46s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-field::after {                                 /* a soft band of light that travels across, barely there */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%);
  background-size: 260% 100%;
  animation: heroSheen 38s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  0%   { transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); }
  100% { transform: translate3d(1.2%, 0.8%, 0) scale(1.06); }
}
@keyframes heroSheen {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
.hero > .wrap, .hero .cue { position: relative; z-index: 1; }
/* copy on the slate field: ink stays, secondary text deepens so it holds contrast */
.hero .hero-sub, .hero .assure, .hero .cue p, .hero .tuesday-eyebrow { color: var(--ink-2); }
.hero .hero-sub b { color: var(--ink); }
.hero .btn--ghost { background: rgba(255,255,255,0.32); border-color: rgba(255,255,255,0.55); color: var(--ink); }
html.intro .hero::before, html.intro .hero::after, html.intro-play .hero::before, html.intro-play .hero::after { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-field, .hero-field::after { animation: none; } }

/* ---------- hero field, second pass: more movement, a light-blue cast, lighter top ---------- */
.hero { background-color: #8a94a0; }
.hero-field {
  inset: -10%;
  animation: heroDrift 26s ease-in-out infinite alternate;
  filter: saturate(1.05);
}
@keyframes heroDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.0) rotate(-0.6deg); }
  50%  { transform: translate3d(1%, 1.5%, 0) scale(1.08) rotate(0.2deg); }
  100% { transform: translate3d(3%, -1%, 0) scale(1.14) rotate(0.8deg); }
}
/* lift the dark top and add the blue: two soft light-blue bodies that drift, over a lightening veil */
.hero-field::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(214,228,242,0.55) 0%, rgba(214,228,242,0.22) 32%, rgba(214,228,242,0) 60%),
    radial-gradient(42% 38% at 18% 22%, rgba(160,200,245,0.55) 0%, rgba(160,200,245,0) 70%),
    radial-gradient(50% 44% at 82% 78%, rgba(140,185,235,0.42) 0%, rgba(140,185,235,0) 72%);
  background-size: 100% 100%, 220% 220%, 220% 220%;
  background-repeat: no-repeat;
  animation: heroBlue 22s ease-in-out infinite alternate;
}
@keyframes heroBlue {
  0%   { background-position: 0 0, 0% 0%, 100% 100%; }
  50%  { background-position: 0 0, 60% 30%, 40% 70%; }
  100% { background-position: 0 0, 100% 10%, 0% 90%; }
}
.hero-field::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  background-size: 260% 100%;
  animation: heroSheen 18s ease-in-out infinite alternate;
}

/* ---------- nav: liquid glass bar, every page ---------- */
.nav {
  background: rgba(255,255,255,0.34);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 0 rgba(52,53,57,0.05), 0 12px 32px -18px rgba(20,22,26,0.25);
}
.nav::after {                               /* soft highlight across the top edge of the glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 40%, transparent 100%);
}
.nav-inner { position: relative; z-index: 1; }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-dropdown-menu {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), var(--shadow-glass);
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.45); }
.nav-links.open {
  background: rgba(247,249,251,0.78);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
html.intro.white .nav { background: rgba(255,255,255,0.34); border-bottom-color: rgba(255,255,255,0.55); }

/* ---------- hero field, third pass: the brand film's soft blue gradient, built live ---------- */
.hero { background: #FAFBFC; }
.hero-field {
  background: #FAFBFC; filter: none;
  animation: none;
}
/* white across roughly three quarters of the field; the blue sits in the bottom-right corner */
.hero-field::before {
  background:
    radial-gradient(55% 60% at 100% 100%, rgba(104,134,172,0.85) 0%, rgba(132,160,196,0.62) 28%, rgba(176,198,222,0.32) 56%, rgba(250,251,252,0) 78%),
    radial-gradient(78% 46% at 66% 84%, rgba(118,148,186,0.50) 0%, rgba(150,176,206,0.32) 38%, rgba(250,251,252,0) 74%),
    radial-gradient(30% 24% at 34% 64%, rgba(130,158,194,0.46) 0%, rgba(160,184,212,0.22) 45%, rgba(250,251,252,0) 72%),
    linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 50%, #F0F4F8 76%, #E4EAF1 100%);
  background-size: 170% 170%, 150% 150%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: heroBlue2 26s ease-in-out infinite alternate;
}
@keyframes heroBlue2 {
  0%   { background-position: 100% 100%, 100% 100%, 0 0, 0 0; background-size: 170% 170%, 150% 150%, 100% 100%, 100% 100%; }
  50%  { background-position: 88% 84%, 72% 100%, 0 0, 0 0; background-size: 184% 184%, 160% 160%, 112% 112%, 100% 100%; }
  100% { background-position: 100% 88%, 100% 82%, 0 0, 0 0; background-size: 176% 176%, 150% 150%, 104% 104%, 100% 100%; }
}
.hero-field::after {
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
  background-size: 260% 100%;
  animation: heroSheen 20s ease-in-out infinite alternate;
}
.hero .hero-sub, .hero .assure, .hero .cue p, .hero .tuesday-eyebrow { color: var(--ink-dim); }
.hero .btn--ghost { background: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.7); }

/* ---------- hero CTA glass: the corner gradient reaches up under the buttons, no separate wash ---------- */
.hero .btn--ghost {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.75);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.25), 0 8px 24px -12px rgba(60,80,110,0.35);
}
.hero .btn--ghost:hover { background: rgba(255,255,255,0.34); border-color: #fff; }

/* ---------- hero heading: Roboto Condensed Thin, all caps ---------- */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.0;
  font-size: calc(var(--fs-hero) * 1.08);
  max-width: 18ch;
  -webkit-font-smoothing: antialiased;
}

/* ---------- hero field, fourth pass: same gradient, but moved on the compositor (transform only), never repainted ---------- */
.hero-field { will-change: auto; animation: none; transform: none; filter: none; }
.hero-field::before {
  /* the ::before paints once at this size; the drift below is a GPU transform of that one layer */
  background:
    radial-gradient(93% 102% at 100% 100%, rgba(104,134,172,0.85) 0%, rgba(132,160,196,0.62) 28%, rgba(176,198,222,0.32) 56%, rgba(250,251,252,0) 78%),
    radial-gradient(117% 69% at 49% 76%, rgba(118,148,186,0.50) 0%, rgba(150,176,206,0.32) 38%, rgba(250,251,252,0) 74%),
    radial-gradient(30% 24% at 34% 64%, rgba(130,158,194,0.46) 0%, rgba(160,184,212,0.22) 45%, rgba(250,251,252,0) 72%),
    linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 50%, #F0F4F8 76%, #E4EAF1 100%);
  transform-origin: 100% 100%;
  will-change: transform;
  animation: heroBreathe 26s ease-in-out infinite alternate;
}
@keyframes heroBreathe {
  0%   { transform: translate3d(0, 0, 0) scale(1.0); }
  50%  { transform: translate3d(-2.5%, -1.5%, 0) scale(1.05); }
  100% { transform: translate3d(0.5%, -3%, 0) scale(1.03); }
}
.hero-field::after {
  inset: 0 auto 0 0; width: 70%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
  background-size: 100% 100%;
  will-change: transform;
  animation: heroGlide 20s ease-in-out infinite alternate;
}
@keyframes heroGlide {
  0%   { transform: translate3d(-20%, 0, 0); }
  100% { transform: translate3d(70%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-field::before, .hero-field::after { animation: none; } }


/* ---------- hero field, fifth pass: the brand film as the moving background, graded for white type ---------- */
.hero { background: #0F1216; }
.hero-field { inset: 0; background: #0F1216; overflow: hidden; }
.hero-field .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%; z-index: 0;
  transform: scale(1.06); transform-origin: 50% 50%;
  will-change: transform;
  animation: heroVideoDrift 36s ease-in-out infinite alternate;
}
@keyframes heroVideoDrift {
  0%   { transform: translate3d(-0.8%, 0, 0) scale(1.06); }
  100% { transform: translate3d(0.8%, -0.6%, 0) scale(1.10); }
}
/* grade: a cinematic lift of contrast, darker on the copy side so the thin caps hold */
.hero-field::before {
  content: ""; position: absolute; inset: 0; z-index: 1; transform: none; animation: none; will-change: auto;
  background:
    linear-gradient(90deg, rgba(10,12,16,0.78) 0%, rgba(10,12,16,0.62) 34%, rgba(10,12,16,0.34) 58%, rgba(10,12,16,0.22) 78%, rgba(10,12,16,0.40) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.35) 0%, rgba(10,12,16,0) 28%, rgba(10,12,16,0) 70%, rgba(10,12,16,0.55) 100%);
}
.hero-field::after { display: none; }

.hero h1, .hero .hero-sub, .hero .hero-sub b, .hero .assure, .hero .cue p, .hero .tuesday-eyebrow { color: #FFFFFF; }
.hero .hero-sub, .hero .assure, .hero .cue p { color: rgba(255,255,255,0.82); }
.hero .tuesday-eyebrow { color: rgba(255,255,255,0.72); }
.hero .btn--ghost {
  color: #FFFFFF;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 30px -14px rgba(0,0,0,0.5);
}
.hero .btn--ghost:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.8); color: #fff; }

/* opening: black, then the film fades up, then the phone rises through the last of it */
html.intro.white .intro-veil { display: block; background: #000; opacity: 1; pointer-events: auto; z-index: 120; transition: opacity 1600ms cubic-bezier(0.4, 0, 0.2, 1); }
html.intro.white.fade .intro-veil { opacity: 0; }
html.intro.white .intro-light { display: none; }
html.intro.white .hero-field .hero-video { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .hero-field .hero-video { animation: none; } }

/* ---------- hero: wider stage, so the copy and the phone have air between them ---------- */
.hero .hero-grid {
  max-width: 1480px;
  padding-left: clamp(24px, 4vw, 56px);
  padding-right: clamp(24px, 4vw, 56px);
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(var(--s6), 9vw, 180px);
}
@media (max-width: 1020px) { .hero .hero-grid { grid-template-columns: 1fr; gap: var(--s5); } }
.nav-inner { max-width: 1480px; padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }

/* ---------- hero heading on three lines: a bold orange lead, then thin ---------- */
.hero .hero-grid { grid-template-columns: 1fr 1fr; gap: clamp(var(--s5), 6vw, 110px); }
.hero h1 {
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  max-width: none;
  white-space: nowrap;
}
.hero h1 .h1-lead { font-weight: 700; color: var(--orange); letter-spacing: 0.005em; }
@media (max-width: 1020px) { .hero h1 { white-space: normal; font-size: clamp(34px, 6vw, 48px); } .hero h1 br { display: none; } }

/* ---------- background film: softened so the phone and the copy sit in front of it ---------- */
.hero-field .hero-video { filter: blur(7px) saturate(1.05); }
.hero-field::before {
  background:
    linear-gradient(90deg, rgba(10,12,16,0.70) 0%, rgba(10,12,16,0.52) 34%, rgba(10,12,16,0.26) 58%, rgba(10,12,16,0.16) 78%, rgba(10,12,16,0.34) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.30) 0%, rgba(10,12,16,0) 28%, rgba(10,12,16,0) 70%, rgba(10,12,16,0.50) 100%);
}

/* ---------- nav: clear liquid glass (no milk), light type while it sits over the dark film ---------- */
.nav, html.intro.white .nav {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(28px) saturate(170%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.04);
  border-bottom: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 30px -22px rgba(0,0,0,0.35);
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
.nav::after { background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 45%, transparent 100%); }
.nav.nav--light {                      /* once scrolled onto the light sections */
  background: rgba(255,255,255,0.42);
  border-bottom-color: rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 0 rgba(52,53,57,0.05), 0 12px 32px -18px rgba(20,22,26,0.2);
}
.nav.nav--dark .nav-links a, html.intro.white .nav.nav--dark .nav-links a { color: rgba(255,255,255,0.82); }
.nav.nav--dark .nav-links a:hover, .nav.nav--dark .nav-links a[aria-current="page"], html.intro.white .nav.nav--dark .nav-links a:hover { color: #fff; }
.nav.nav--dark .nav-dropdown-menu { background: rgba(20,22,26,0.72); border-color: rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 48px -24px rgba(0,0,0,0.6); }
.nav.nav--dark .nav-dropdown-menu a { color: rgba(255,255,255,0.86); }
.nav.nav--dark .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ---------- hero heading: the lockup ---------- */
.hero h1 {
  line-height: 1.0;
  text-shadow: 0 2px 28px rgba(0,0,0,0.35);
}
.hero h1 .h1-lead { font-weight: 700; letter-spacing: -0.005em; display: inline-block; margin-bottom: 0.06em; }
.hero h1 .h1-thin, .hero h1 { font-weight: 300; }
.hero h1 { letter-spacing: 0.035em; }
/* the right-hand chip stays inside the viewport on the wider stage */
.hero .tuesday { margin-right: clamp(0px, 3vw, 48px); }
.tmoment-2 { right: calc(50% - 150px - 124px); }

/* ---------- moment chips: liquid glass, whatever is behind them ---------- */
.hero .tmoment {
  background: linear-gradient(160deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 100%);
  border: 1px solid rgba(255,255,255,0.42);
  backdrop-filter: blur(26px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(255,255,255,0.08), 0 18px 40px -22px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.86);
}
.hero .tmoment .t { color: #FFFFFF; }
.hero .tmoment .t small { color: var(--orange); }

/* ---------- the film's grade: one soft black gradient, heaviest at the left, gone by the right ---------- */
.hero-field::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.60) 25%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.20) 75%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,0.30) 100%);
}

/* nav: no highlight wash across the top, just the glass and a hairline */
.nav::after { display: none; }
.nav, html.intro.white .nav { box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 10px 30px -22px rgba(0,0,0,0.35); }
.nav.nav--light { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 0 rgba(52,53,57,0.05), 0 12px 32px -18px rgba(20,22,26,0.2); }

/* ---------- liquid glass, clearer: light blur, almost no tint, the edge does the work ---------- */
.nav, html.intro.white .nav {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(9px) saturate(150%) brightness(1.02);
  -webkit-backdrop-filter: blur(9px) saturate(150%) brightness(1.02);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.nav.nav--light {
  background: rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 1px 0 rgba(52,53,57,0.05);
}

.hero .tmoment {
  position: absolute;
  background: linear-gradient(150deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.09) 100%);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(10px) saturate(160%) brightness(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(160%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),      /* lit top edge */
    inset 1px 0 0 rgba(255,255,255,0.18),      /* lit left edge */
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 24px 48px -28px rgba(0,0,0,0.6);
  overflow: hidden;
}
.hero .tmoment::before {                     /* a soft specular sweep, like light caught in the pane */
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 90%; pointer-events: none;
  background: radial-gradient(60% 70% at 30% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
}
.hero .tmoment .t, .hero .tmoment p, .hero .tmoment span { position: relative; }
.hero .tmoment { color: rgba(255,255,255,0.9); text-shadow: 0 1px 2px rgba(0,0,0,0.25); }

/* ---------- phone: grounded with a real shadow, lit from the upper left ---------- */
.phone3d.at-rest {
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.35))
    drop-shadow(14px 28px 36px rgba(0,0,0,0.45))
    drop-shadow(30px 70px 90px rgba(0,0,0,0.38));
}

/* ---------- phone column: fixed stage, pushed to the right edge, so the gaps either side of the phone read as equal ---------- */
.hero .hero-grid { grid-template-columns: minmax(0, 1fr) 620px; gap: clamp(var(--s4), 4vw, 72px); }
.hero .tuesday { width: 620px; justify-self: end; margin-right: 0; }
@media (max-width: 1020px) { .hero .hero-grid { grid-template-columns: 1fr; } .hero .tuesday { width: auto; justify-self: stretch; } }

/* ---------- stage edges: half the margin on wide screens, the content and the phone sit nearer the edges ---------- */
.hero .hero-grid, .nav-inner {
  max-width: none;
  padding-left: max(24px, calc(56px + (100vw - 1480px) / 5.5));
  padding-right: max(24px, calc(56px + (100vw - 1480px) / 5.5));
}
.hero .hero-grid { width: 100%; flex: 1 1 100%; }

/* ---------- phone 15% larger and lower; everything anchored to its edges follows ---------- */
.hero .screen { width: min(74%, 345px); }
.hero .tuesday { margin-top: 56px; }
.tmoment-1 { left: calc(50% - 172px - 160px); }
.tmoment-2 { right: calc(50% - 172px - 124px); }
.tmoment-3 { left: calc(50% - 172px - 168px); }
.sam { right: calc(50% - 244px); }
.tuesday-eyebrow { right: calc(50% - 88px); }

/* ---------- hero copy: eased in from the left edge ---------- */
.hero .hero-grid > div:first-child { padding-left: clamp(24px, 4vw, 72px); }
@media (max-width: 1020px) { .hero .hero-grid > div:first-child { padding-left: 0; } }

/* ---------- heading: the thin lines sit a size down from the orange lead ---------- */
.hero h1 .h1-rest { font-size: 0.86em; letter-spacing: 0.03em; display: inline-block; line-height: 1.04; margin-top: 0.04em; }

/* ---------- hero heading: 52pt on a large screen, 49pt on a laptop ---------- */
.hero h1 { font-size: clamp(60px, 4.55vw, 69px); }
/* heading: 62pt on a large screen, 59pt on a laptop */
.hero h1 { font-size: clamp(72px, 5.47vw, 83px); }
.hero h1 .h1-lead { letter-spacing: -0.012em; }

/* ======================================================================
   THE PROOF — a dotted globe on a slate field that rises with the scroll
   ====================================================================== */
#proof { position: relative; overflow: hidden; --pf: 0; }
#proof .wrap { position: relative; z-index: 1; }
.proof-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #3B4858 0%, #5E6F84 30%, #93A3B6 58%, #CBD4DE 82%, #EEF1F5 100%);
  opacity: var(--pf);
  will-change: opacity;
}
#proof .kicker, #proof .h-display { text-align: center; }
#proof .kicker { color: color-mix(in srgb, rgba(255,255,255,0.78) calc(var(--pf) * 100%), var(--silver)); }
#proof .h-display { color: color-mix(in srgb, #FFFFFF calc(var(--pf) * 100%), var(--ink)); margin-left: auto; margin-right: auto; }

/* the globe */
.globe-wrap {
  position: absolute; left: 50%; top: 46%; width: clamp(300px, 34vw, 480px); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
}
.globe-wrap::before {                       /* soft halo behind the sphere */
  content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.14) 38%, rgba(255,255,255,0) 68%);
  opacity: var(--pf);
}
.globe-wrap::after {                        /* the sphere's body: a faint blue-white glass ball the dots sit on */
  content: ""; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.28) 0%, rgba(180,196,214,0.18) 40%, rgba(60,76,96,0.22) 100%);
  box-shadow: inset -24px -30px 60px rgba(30,40,54,0.35), 0 40px 80px -30px rgba(20,28,40,0.5);
  opacity: var(--pf);
}
.globe-wrap canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }

/* parallax hook: the reveal normally clears the transform, so it is re-expressed with the drift */
#proof .rv.in { transform: translate3d(0, var(--py, 0px), 0); }

@media (min-width: 1021px) {
  #proof.act { padding-bottom: calc(var(--s8) + 24px); }
  .proof-grid { position: relative; display: block; height: 880px; margin-top: var(--s4); }

  /* bottom block: the stat beside its explanation, like a caption to the globe */
  .proof-card {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: none; border: 0; box-shadow: none; padding: 0;
    display: grid; grid-template-columns: auto 1fr; column-gap: var(--s5); align-items: start;
    max-width: 880px; margin: 0 auto;
  }
  #proof .proof-card.rv { opacity: 1; transform: none; transition: none; }   /* the block itself never hides: the logo above it would vanish with it */
  .proof-card .proof-stat { grid-column: 1; font-size: clamp(4rem, 7.6vw, 7.2rem); letter-spacing: -0.04em; line-height: 0.9; color: var(--ink); }
  .proof-card .proof-stat em { display: block; font-size: 0.42em; letter-spacing: 0; margin-top: 0.18em; }
  .proof-card p { grid-column: 2; margin-top: 6px; max-width: 42ch; color: var(--ink-2); }
  .proof-card .link { grid-column: 2; }

  /* the Luca logo floats on its own glass card */
  .proof-card .luca-logo {
    position: absolute; left: 4%; bottom: calc(100% + 520px);
    height: 44px; width: auto; margin: 0;
    padding: 18px 24px; box-sizing: content-box;
    background: linear-gradient(150deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.56) 100%);
    border: 1px solid rgba(255,255,255,0.75); border-radius: 18px;
    backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 48px -24px rgba(20,28,40,0.45);
    transform: translate3d(0, var(--py, 0px), 0);
  }

  /* the quote floats to the right */
  .proof-quote {
    position: absolute; right: 2%; top: 120px; width: 340px;
    background: linear-gradient(150deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.56) 100%);
    border: 1px solid rgba(255,255,255,0.75); border-radius: 20px; padding: 22px 24px;
    backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 48px -24px rgba(20,28,40,0.45);
  }
  .proof-quote blockquote { font-size: 1.1rem; line-height: 1.45; }
  .proof-quote cite { color: var(--ink-dim); }

  /* the credentials float as glass chips around the globe */
  .badge-strip { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .badge-strip span {
    position: absolute; pointer-events: auto;
    background: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.8); color: var(--ink);
    backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 32px -18px rgba(20,28,40,0.45);
    transform: translate3d(0, var(--py, 0px), 0);
  }
  .badge-strip span:nth-child(1) { left: 12%; top: 330px; }
  .badge-strip span:nth-child(2) { left: 58%; top: 110px; }
  .badge-strip span:nth-child(3) { left: 63%; top: 560px; }
  .badge-strip span:nth-child(4) { left: 22%; top: 520px; }
}
@media (max-width: 1020px) {
  .globe-wrap { position: relative; left: auto; top: auto; transform: none; margin: var(--s4) auto 0; width: min(70vw, 320px); }
  #proof .rv.in { transform: none; }
}
@media (prefers-reduced-motion: reduce) { #proof .rv.in, .badge-strip span, .proof-card .luca-logo { transform: none !important; } }

/* proof: field runs white at the top into the slate at the bottom; the globe fills more of the stage */
.proof-field { background: linear-gradient(180deg, #F7F8FA 0%, #D3DBE4 22%, #9AAABC 48%, #5E6F84 76%, #3B4858 100%); }
#proof .kicker { color: var(--silver); }
#proof .h-display { color: var(--ink); }
.globe-wrap { width: clamp(380px, 46vw, 660px); top: 50%; }
@media (min-width: 1021px) {
  .proof-grid { height: 960px; }
  .proof-card .proof-stat { color: color-mix(in srgb, #FFFFFF calc(var(--pf) * 100%), var(--ink)); }
  .proof-card p { color: color-mix(in srgb, rgba(255,255,255,0.86) calc(var(--pf) * 100%), var(--ink-2)); }
  .proof-card .link { color: color-mix(in srgb, #FFFFFF calc(var(--pf) * 100%), var(--ink)); }
  .proof-card .luca-logo { bottom: calc(100% + 600px); }
  .badge-strip span:nth-child(4) { left: 16%; top: 600px; }
  .badge-strip span:nth-child(3) { left: 66%; top: 620px; }
}

/* proof: seamless join with the white section above, and the field is revealed top-down by the scroll */
#proof.act--paper { background: var(--white); --pw: 0; }
.proof-field {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F4F7 12%, #CFD7E0 30%, #9AAABC 52%, #5E6F84 78%, #3B4858 100%);
  opacity: calc(1 - (1 - var(--pf)) * 1);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(var(--pw) * 100% - 30%), rgba(0,0,0,0) calc(var(--pw) * 100%));
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(var(--pw) * 100% - 30%), rgba(0,0,0,0) calc(var(--pw) * 100%));
}

/* proof: the copy and cards appear with the scroll (not on a timer), and the slate sits higher */
.proof-field { background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F5 8%, #C3CDD8 22%, #8A9BAE 40%, #5E6F84 62%, #3F4D5E 82%, #3B4858 100%); }
@media (min-width: 1021px) {
  #proof .rv, #proof .rv.in { opacity: 1; transform: none; transition: none; }
  #proof .kicker, #proof .h-display, .proof-quote, .proof-stat, .proof-card p, .proof-card .link {
    opacity: var(--rvo, 0); transform: translate3d(0, calc(var(--rvy, 28px) + var(--py, 0px)), 0);
  }
  .badge-strip span, .proof-card .luca-logo { opacity: var(--rvo, 0); transform: translate3d(0, calc(var(--rvy, 28px) + var(--py, 0px)), 0); }
  .proof-card .proof-stat { color: color-mix(in srgb, #FFFFFF calc(var(--pf) * 100%), var(--ink)); }
}
/* proof: the field returns to white at its foot, so the price section follows without a step */
.proof-field { background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F5 7%, #C3CDD8 19%, #8A9BAE 36%, #5E6F84 56%, #3B4858 74%, #3B4858 84%, #8A9BAE 94%, #FFFFFF 100%); }
/* proof: the quote, kicker and headline are .rv too; the reveal override above out-ranked their scroll rule */
@media (min-width: 1021px) {
  #proof .wrap .proof-quote, #proof .wrap .kicker, #proof .wrap .h-display {
    opacity: var(--rvo, 0); transform: translate3d(0, calc(var(--rvy, 28px) + var(--py, 0px)), 0); transition: none;
  }
}
/* proof: the slate holds to the bottom edge; the price section starts clean beneath it */
.proof-field { background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F5 7%, #C3CDD8 19%, #8A9BAE 36%, #5E6F84 56%, #3B4858 76%, #3B4858 100%); }
/* the globe can be spun by hand */
.globe-wrap { pointer-events: none; }
.globe-wrap canvas { pointer-events: auto; cursor: grab; touch-action: pan-y; border-radius: 50%; }
.globe-wrap canvas.grabbing { cursor: grabbing; }
.globe-wrap { z-index: 1; }
.badge-strip span, .proof-quote, .proof-card .luca-logo { z-index: 2; }
/* globe: no glass body, just dots in space and a faint breath of light behind them */
.globe-wrap::after { display: none; }
.globe-wrap::before { background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0) 68%); }
/* globe: 15% larger */
.globe-wrap { width: clamp(437px, 52.9vw, 759px); }
@media (min-width: 1021px) { .proof-grid { height: 1040px; } .proof-card .luca-logo { bottom: calc(100% + 680px); } .badge-strip span:nth-child(4) { top: 680px; } .badge-strip span:nth-child(3) { top: 700px; } }

/* ---------- proof: the reference's spread — a smaller globe, the pieces pushed out toward the edges ---------- */
.globe-wrap { width: clamp(300px, 28vw, 420px); top: 48%; }
@media (min-width: 1021px) {
  .proof-grid { height: 860px; perspective: 1200px; }
  .proof-card .luca-logo { left: 7%; bottom: calc(100% + 560px); }          /* upper left */
  .badge-strip span:nth-child(1) { left: 1%; top: 330px; }                   /* mid left */
  .badge-strip span:nth-child(2) { left: auto; right: 4%; top: 70px; }       /* upper right */
  .proof-quote { right: 0; top: 330px; width: 330px; }                       /* mid right */
  .badge-strip span:nth-child(4) { left: 18%; top: 600px; }                  /* lower left */
  .badge-strip span:nth-child(3) { left: auto; right: 12%; top: 590px; }     /* lower right */

  /* the pieces answer the cursor: they drift with it by depth, and lift and tilt under it */
  .proof-quote, .badge-strip span, .proof-card .luca-logo {
    transform:
      translate3d(var(--cx, 0px), calc(var(--rvy, 28px) + var(--py, 0px) + var(--cy, 0px)), 0)
      rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
    transition: box-shadow 350ms ease;
    will-change: transform;
  }
  #proof .wrap .proof-quote {
    transform:
      translate3d(var(--cx, 0px), calc(var(--rvy, 28px) + var(--py, 0px) + var(--cy, 0px)), 0)
      rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  }
  .proof-quote.lift, .badge-strip span.lift, .proof-card .luca-logo.lift {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 34px 60px -26px rgba(20,28,40,0.6);
  }
  .badge-strip span { pointer-events: auto; cursor: default; }
}
/* proof: the stage runs to the same edges as the hero, so the pieces can sit wide */
#proof .wrap { max-width: none; padding-left: max(24px, calc(56px + (100vw - 1480px) / 5.5)); padding-right: max(24px, calc(56px + (100vw - 1480px) / 5.5)); }
@media (min-width: 1021px) { .proof-card { max-width: 980px; } }
/* proof: the globe back to its large size; the pieces keep the wide spread, with clear water between them */
.globe-wrap { width: clamp(437px, 52.9vw, 759px); top: 50%; }
@media (min-width: 1021px) {
  .proof-grid { height: 1040px; }
  .proof-card .luca-logo { left: 6%; bottom: calc(100% + 700px); }
  .badge-strip span:nth-child(1) { left: 1%; top: 430px; }
  .badge-strip span:nth-child(2) { left: auto; right: 4%; top: 70px; }
  .proof-quote { right: 0; top: 300px; width: 330px; }
  .badge-strip span:nth-child(4) { left: 12%; top: 760px; }
  .badge-strip span:nth-child(3) { left: auto; right: 6%; top: 800px; }
}
@media (min-width: 1021px) { .badge-strip span:nth-child(1) { left: 6%; top: 430px; } }
/* proof heading: 20pt larger (46px → 73px at the top end) */
#proof .h-display { font-size: clamp(54px, 3.8vw, 73px); }

/* ======================================================================
   SITE RULE — stage edges. Every section runs to the same edges as the hero:
   no centred 1200px box; the side margin is 56px at 1480 wide and grows slowly
   beyond that (half the old margin on large screens). Override per section only
   when asked. Inner measures (prose, ledes) keep their own max-widths.
   ====================================================================== */
:root { --stage-pad: max(24px, calc(56px + (100vw - 1480px) / 5.5)); }
.wrap, .nav-inner, .hero .hero-grid, #proof .wrap {
  max-width: none;
  padding-left: var(--stage-pad);
  padding-right: var(--stage-pad);
}

/* proof: the floating pieces in the same clear liquid glass as the hero chips */
@media (min-width: 1021px) {
  .proof-quote, .badge-strip span {
    background: linear-gradient(150deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.10) 100%);
    border: 1px solid rgba(255,255,255,0.34);
    backdrop-filter: blur(10px) saturate(160%) brightness(1.06);
    -webkit-backdrop-filter: blur(10px) saturate(160%) brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 1px 0 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.06), 0 24px 48px -28px rgba(0,0,0,0.55);
    color: rgba(255,255,255,0.9); text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  }
  .proof-quote blockquote, .proof-quote cite { color: rgba(255,255,255,0.92); }
  .proof-quote cite { color: rgba(255,255,255,0.72); }
  .badge-strip span { color: rgba(255,255,255,0.92); }
  .proof-card .luca-logo {                                     /* the logo needs a touch more body behind it to stay legible */
    background: linear-gradient(150deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.46) 100%);
    border: 1px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 24px 48px -28px rgba(0,0,0,0.5);
  }
  .proof-quote.lift, .badge-strip span.lift { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 1px 0 0 rgba(255,255,255,0.22), 0 34px 60px -26px rgba(0,0,0,0.65); }
  /* the ICF / EMCC chip tucks in nearer the globe */
  .badge-strip span:nth-child(3) { right: 22%; top: 740px; }
}
/* the two upper chips sit on the pale part of the field: dark type there */
@media (min-width: 1021px) {
  .badge-strip span:nth-child(1), .badge-strip span:nth-child(2) {
    color: var(--ink); text-shadow: none;
    background: linear-gradient(150deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 100%);
    border-color: rgba(255,255,255,0.6);
  }
}
/* the Luca logo on the same clear glass as everything else, no white slab behind it */
@media (min-width: 1021px) {
  .proof-card .luca-logo {
    background: linear-gradient(150deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 100%);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 1px 0 0 rgba(255,255,255,0.18), 0 24px 48px -28px rgba(0,0,0,0.5);
  }
}

/* ---------- proof: the number and the claim in one frame; the pieces trace the globe's curve ---------- */
@media (min-width: 1021px) {
  .proof-grid { height: 940px; }
  /* the PKF block: lower left, where the Azure chip was */
  .proof-card {
    left: 6%; right: auto; bottom: auto; top: 560px; width: 400px; max-width: none; margin: 0;
    display: block;
  }
  .proof-card .proof-stat { font-size: clamp(3.4rem, 5.2vw, 5rem); line-height: 0.92; }
  .proof-card .proof-stat em { font-size: 0.42em; margin-top: 0.14em; }
  .proof-card p { margin-top: 14px; max-width: 34ch; font-size: 0.98rem; }
  .proof-card .link { margin-top: 12px !important; }
  .proof-card .luca-logo { left: 0; bottom: calc(100% + 420px); }                      /* stays in the upper left */
  /* satellites along the curve */
  .badge-strip span:nth-child(4) { left: 24%; top: 150px; }                           /* Azure: upper left, on the curve */
  .badge-strip span:nth-child(2) { left: auto; right: 16%; top: 170px; }              /* WEF: down and in, on the curve */
  .badge-strip span:nth-child(1) { left: 6%; top: 380px; }                            /* ESEY: mid left */
  .proof-quote { right: 0; top: 330px; }
  .badge-strip span:nth-child(3) { right: 20%; top: 720px; }                          /* ICF: lower right, on the curve */
}
@media (min-width: 1021px) {
  .proof-card { top: 400px; }                                   /* the number sits level with the globe's upper half, in frame with the claim */
  .proof-card .luca-logo { bottom: calc(100% + 150px); }        /* the logo rides just above it */
  .badge-strip span:nth-child(1) { left: 8%; top: 760px; }      /* ESEY: lower left, on the curve */
  .badge-strip span:nth-child(4) { color: var(--ink); text-shadow: none; background: linear-gradient(150deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 100%); border-color: rgba(255,255,255,0.6); }
  .badge-strip span:nth-child(1) { color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.25); background: linear-gradient(150deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.10) 100%); border-color: rgba(255,255,255,0.34); }
}
@media (min-width: 1021px) {
  .proof-card { left: 0; top: 360px; width: 420px; }                                  /* flush with the stage's left edge */
  .proof-card .proof-stat em { display: inline; font-size: 0.5em; margin: 0 0 0 0.18em; vertical-align: baseline; }   /* "800 people" on one line */
  .proof-card p { margin-top: 10px; max-width: 36ch; }
  .proof-card .luca-logo { left: 24px; bottom: calc(100% + 150px); }                  /* back up in the upper left, above the number */
  .badge-strip span:nth-child(1) { left: 6%; top: 190px; }                            /* ESEY: where the logo was */
  .badge-strip span:nth-child(4) { left: auto; right: 6%; top: 255px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.25); background: linear-gradient(150deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.10) 100%); border-color: rgba(255,255,255,0.34); }   /* Azure: between WEF and the quote */
  .badge-strip span:nth-child(1) { color: var(--ink); text-shadow: none; background: linear-gradient(150deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 100%); border-color: rgba(255,255,255,0.6); }
  .badge-strip span:nth-child(3) { right: 30%; top: 810px; }                          /* ICF: near the foot of the globe */
}
@media (min-width: 1021px) {
  .proof-card { top: 330px; }
  .proof-card p { font-size: 0.92rem; line-height: 1.5; }
  .proof-card .luca-logo { bottom: calc(100% + 200px); }      /* top of the stage, above the ESEY chip */
  .badge-strip span:nth-child(1) { top: 215px; }
}
@media (min-width: 1021px) { .badge-strip span:nth-child(1) { top: 300px; left: 7%; } }

/* ---------- proof: placement from the marked-up screenshot ---------- */
@media (min-width: 1021px) {
  .proof-grid { height: 780px; }
  .globe-wrap { top: 50%; }
  .proof-card { left: 0; top: 468px; width: 380px; }                                   /* red */
  .proof-card .luca-logo { left: 148px; bottom: calc(100% + 380px); }                 /* yellow: top of the stage, in from the edge */
  .badge-strip span:nth-child(1) { left: 17%; top: 259px; }                           /* purple: ESEY */
  .badge-strip span:nth-child(2) { left: auto; right: 24%; top: 35px; }               /* green: WEF */
  .badge-strip span:nth-child(4) { left: auto; right: 2.6%; top: 151px; }             /* pink: Azure */
  .proof-quote { right: 1.6%; top: 340px; width: 337px; }                             /* light blue */
  .badge-strip span:nth-child(3) { left: 52.7%; right: auto; top: 650px; }            /* dark blue: ICF */
}
/* the chip strip is a sibling of the stage, not a child: pin it to the stage's footprint so chip tops are stage-relative */
@media (min-width: 1021px) { .badge-strip { inset: auto 0 0 0; height: 780px; } }
@media (min-width: 1021px) { .badge-strip span:nth-child(3) { top: 600px; } }

/* proof: air between the title and the stage; a slow-moving light behind the glass for depth */
@media (min-width: 1021px) { .proof-grid { margin-top: 112px; } }
.proof-field { overflow: hidden; }
.proof-field::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(38% 42% at 30% 40%, rgba(170,196,226,0.55) 0%, rgba(170,196,226,0) 70%),
    radial-gradient(34% 38% at 72% 62%, rgba(96,120,152,0.55) 0%, rgba(96,120,152,0) 70%),
    radial-gradient(24% 28% at 58% 28%, rgba(255,214,186,0.18) 0%, rgba(255,214,186,0) 70%);
  mix-blend-mode: soft-light;
  opacity: calc(var(--pf) * 1);
  will-change: transform;
  animation: proofLight 34s ease-in-out infinite alternate;
}
@keyframes proofLight {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(2.5%, 2%, 0) rotate(2deg) scale(1.06); }
  100% { transform: translate3d(-1%, 3%, 0) rotate(-1.5deg) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .proof-field::after { animation: none; } }
@media (min-width: 1021px) { .proof-card { width: 440px; } .proof-card p { max-width: 50ch; } }
/* proof: half the dead space under the stat block */
@media (min-width: 1021px) { #proof.act { padding-bottom: 48px; } .proof-grid, .badge-strip { height: 740px; } }
/* proof glass: calmer, the blur no longer pumps the blue; a whisper of dark in the pane for type contrast */
@media (min-width: 1021px) {
  .proof-quote, .badge-strip span, .proof-card .luca-logo {
    backdrop-filter: blur(10px) saturate(105%); -webkit-backdrop-filter: blur(10px) saturate(105%);
  }
  .proof-quote, .badge-strip span:nth-child(3) {
    background: linear-gradient(150deg, rgba(255,255,255,0.10) 0%, rgba(30,40,54,0.10) 60%, rgba(255,255,255,0.06) 100%);
  }
}
.proof-field::after { opacity: calc(var(--pf) * 0.55); }
.proof-field::after {
  background:
    radial-gradient(38% 42% at 30% 40%, rgba(190,204,222,0.45) 0%, rgba(190,204,222,0) 70%),
    radial-gradient(34% 38% at 72% 62%, rgba(90,106,128,0.45) 0%, rgba(90,106,128,0) 70%),
    radial-gradient(24% 28% at 58% 28%, rgba(255,222,200,0.14) 0%, rgba(255,222,200,0) 70%);
}
/* proof: the field breathes and the light pools are visible again, without the blue coming back */
.proof-field { transform-origin: 50% 0; will-change: transform; animation: proofBreathe 30s ease-in-out infinite alternate; }
@keyframes proofBreathe {
  0%   { transform: translate3d(0, 0, 0) scaleY(1); }
  50%  { transform: translate3d(0, -2.5%, 0) scaleY(1.07); }
  100% { transform: translate3d(0, -1%, 0) scaleY(1.03); }
}
.proof-field::after {
  opacity: calc(var(--pf) * 0.85);
  background:
    radial-gradient(40% 44% at 28% 38%, rgba(214,224,236,0.55) 0%, rgba(214,224,236,0) 70%),
    radial-gradient(36% 40% at 74% 64%, rgba(70,84,104,0.55) 0%, rgba(70,84,104,0) 70%),
    radial-gradient(26% 30% at 56% 26%, rgba(255,226,206,0.16) 0%, rgba(255,226,206,0) 70%);
  animation-duration: 26s;
}
@keyframes proofLight {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) rotate(3deg) scale(1.08); }
  100% { transform: translate3d(-1.5%, 4%, 0) rotate(-2deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .proof-field { animation: none; } }
/* hero cue line: one line */
.hero .cue p { max-width: none; white-space: nowrap; }
@media (max-width: 640px) { .hero .cue p { white-space: normal; } }
/* proof kicker: 12pt */
#proof .kicker { font-size: 16px; }

/* ---------- the scale: heading sized like the proof's ---------- */
#scale .h-display { font-size: clamp(54px, 3.8vw, 73px); }
#scale > .wrap > .kicker { font-size: 16px; }

/* ======================================================================
   THE SCALE — the Companion panel: charcoal, the phone held in a hand
   ====================================================================== */
#scale > .wrap > .kicker, #scale .h-display { text-align: center; }
#scale .h-display { margin-left: auto; margin-right: auto; }
.duo { grid-template-columns: 1fr; gap: var(--s4); margin-top: 72px; }

.duo-card--companion {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 80% at 80% 20%, #2A2E35 0%, #1B1E23 55%, #141619 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 28px;
  padding: 64px 56px;
  min-height: 640px;
  display: grid; grid-template-columns: minmax(0, 46%) 1fr; align-items: center;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 40px 90px -30px rgba(0,0,0,0.6);
  transition: box-shadow 500ms var(--ease-out);
}
.duo-card--companion:hover { transform: none; }
.duo-card--companion .kicker { color: rgba(255,255,255,0.6); }
.duo-card--companion h3 { color: #fff; font-size: clamp(2rem, 2.8vw, 2.9rem); }
.duo-card--companion h3 em { color: var(--orange); }
.duo-card--companion p { color: rgba(255,255,255,0.78); max-width: 40ch; }
.duo-card--companion .link { color: #fff; margin-top: var(--s3); }
.duo-card--companion .link:hover { color: var(--orange); }
.duo-card--companion .kicker, .duo-card--companion h3, .duo-card--companion p, .duo-card--companion .link { grid-column: 1; position: relative; z-index: 3; }

/* the hand: enters from below right as the panel reveals, and settles */
.duo-card--companion .hand-stage {
  grid-column: 2; grid-row: 1 / span 5;
  position: absolute; right: -2%; bottom: -14%;
  width: clamp(420px, 36vw, 640px); aspect-ratio: 1400 / 1739;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible;
  transform: translate3d(14%, 34%, 0) rotate(7deg);
  transform-origin: 70% 90%;
  transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.duo-card--companion.in .hand-stage { transform: translate3d(0, 0, 0) rotate(0deg); transition-delay: 160ms; }
.hand-layers { position: absolute; inset: 0; transform-origin: 40% 40%; }
.hand-layers img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 0; }
.hand-back { z-index: 0; }
.hand-front { z-index: 2; pointer-events: none; }
/* the slot the 3D phone takes: the removed phone's footprint, sized to the 3D phone's own proportions */
.hand-slot {
  position: absolute; left: 2.6%; top: -2.2%; width: 42.6%; height: 70.9%;
  z-index: 1; border-radius: 10% / 5%; overflow: hidden; background: #0d0f12;
}
.hand-slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hand-stage.has3d .hand-slot { background: transparent; }
.hand-stage.has3d .hand-slot video { visibility: hidden; }
.hand-stage canvas.phone3d { z-index: 1 !important; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)); }

@media (max-width: 1020px) {
  .duo-card--companion { grid-template-columns: 1fr; min-height: 0; padding: 40px 28px 0; }
  .duo-card--companion .hand-stage { position: relative; right: auto; bottom: auto; width: 100%; max-width: 420px; margin: 24px auto -8%; transform: none; }
  .duo-card--companion .link { margin-bottom: 32px; }
}
.duo-card--companion { align-content: center; grid-auto-rows: max-content; row-gap: 4px; }
.duo-card--companion .kicker { white-space: nowrap; }
.duo-card--companion h3 { margin-top: 4px; }
.duo-card--companion .hand-stage { width: clamp(380px, 31vw, 560px); right: 0; bottom: -19%; }

/* --- Companion panel, half-and-half: Builder left, Companion right. Hand in a cropped window, no cursor tilt --- */
.duo { grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: 72px; align-items: stretch; }
.duo-card--companion {
  display: flex; flex-direction: column; align-content: normal; grid-auto-rows: auto; row-gap: 0;
  min-height: 0; padding: 48px 48px 40px;
}
.duo-card--companion .kicker { white-space: normal; }
.duo-card--companion h3 { margin-top: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.duo-card--companion p { max-width: none; }
.duo-card--companion .link { margin-top: auto; padding-top: var(--s3); position: relative; z-index: 3; }
.duo-card--companion .hand-stage,
.duo-card--companion.in .hand-stage {
  position: relative; right: auto; bottom: auto; width: 100%; height: clamp(380px, 30vw, 520px); aspect-ratio: auto;
  margin: var(--s3) 0 0; transform: none; transition: none; overflow: hidden; border-radius: 0;
}
.duo-card--companion .hand-layers {
  position: absolute; inset: auto; left: auto; right: -8%; top: 10px;
  width: 74%; aspect-ratio: 1400 / 1739; height: auto;
  transform: translate3d(16%, 40%, 0) rotate(8deg); transform-origin: 70% 90%;
  transition: transform 1500ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.duo-card--companion.hand-in .hand-layers { transform: translate3d(0, 0, 0) rotate(0deg); }
.duo-card--companion .hand-layers img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1020px) {
  .duo-card--companion { padding: 40px 28px 32px; }
  .duo-card--companion .hand-stage { position: relative; max-width: none; margin: 24px 0 0; height: clamp(320px, 70vw, 460px); }
  .duo-card--companion .hand-layers { width: 86%; right: -10%; }
}
.duo-card--companion { text-align: left; padding-bottom: 0; }
.duo-card--companion .kicker, .duo-card--companion h3, .duo-card--companion p { text-align: left; }
.duo-card--companion .hand-stage,
.duo-card--companion.in .hand-stage { width: auto; height: auto; flex: 1 1 auto; min-height: 520px; margin: var(--s3) -48px 0; }
.duo-card--companion .hand-layers { width: 58%; right: 4%; top: 16px; }
.duo-card--companion .link { position: absolute; left: 48px; bottom: 40px; margin: 0; padding: 0; }
@media (max-width: 1020px) {
  .duo-card--companion .hand-stage { margin: 24px -28px 0; min-height: 420px; }
  .duo-card--companion .hand-layers { width: 72%; right: -2%; }
  .duo-card--companion .link { left: 28px; bottom: 28px; }
}
.duo-card--companion { align-items: stretch; }

/* Companion: headroom above the phone (the 3D phone sits taller than the hand crop), bigger link, hover lift like the Builder card */
.duo-card--companion .hand-layers { aspect-ratio: 1400 / 1948; top: 4px; }
.duo-card--companion .hand-layers img { top: 10.71%; height: 89.29%; }
.duo-card--companion .hand-slot { top: 8.75%; height: 63.3%; }
.duo-card--companion .link { font-size: 1.2rem; }
.duo-card--companion { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.duo-card--companion:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 52px 110px -30px rgba(0,0,0,0.7); }

/* Companion: the photographed hand and phone as shot; the video sits on the screen, in front of everything */
.duo-card--companion .hand-layers { aspect-ratio: 1400 / 1739; top: 12px; }
.duo-card--companion .hand-layers img { top: 0; height: 100%; }
.duo-card--companion .hand-slot {
  left: 8.15%; top: 1.05%; width: 35.26%; height: 63.43%;
  z-index: 3; border-radius: 12.7% / 5.68%; overflow: hidden; background: #0d0f12;
  -webkit-mask-image: -webkit-radial-gradient(#000, #000); /* keeps the rounded clip crisp */
}
.duo-card--companion .hand-slot video { visibility: visible; width: 100%; height: 100%; object-fit: cover; }

/* Companion placement per reference: copy in a narrow left column, hand/phone anchored to the card's bottom-right and cut by its bottom edge */
.duo-card--companion { aspect-ratio: 747 / 906; min-height: 0; }
.duo-card--companion p { max-width: 36%; }
.duo-card--companion .hand-stage,
.duo-card--companion.in .hand-stage {
  position: absolute; left: 34%; top: 35%; right: auto; bottom: auto;
  width: 70%; height: auto; aspect-ratio: 1400 / 1739; min-height: 0; margin: 0; flex: none; overflow: visible;
}
.duo-card--companion .hand-layers { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; top: 0; right: 0; }
@media (max-width: 1020px) {
  .duo-card--companion { aspect-ratio: auto; min-height: 0; padding-bottom: 0; }
  .duo-card--companion p { max-width: none; }
  .duo-card--companion .hand-stage, .duo-card--companion.in .hand-stage { position: relative; left: auto; top: auto; width: 100%; max-width: 420px; margin: 24px auto -6%; }
}
.duo-card--companion p.kicker { max-width: none; white-space: nowrap; }
.duo-card--companion p:not(.kicker) { max-width: 38%; }

/* The scale: tighter vertical rhythm so the section sits closer to one view; Companion heading +50%, hand zoomed and moved right */
#scale { padding: 48px 0 40px; }
#scale .h-display { max-width: 24ch; }
.duo { margin-top: 36px; }
#scale .zpd-line { margin-top: 36px; }
.duo-card { padding: 40px 48px 36px; }
.duo-card:not(.duo-card--companion) .duo-media { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.duo-card:not(.duo-card--companion) .duo-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.duo-card--companion { aspect-ratio: 747 / 700; padding: 40px 48px 0; }
.duo-card--companion h3 { font-size: clamp(2.25rem, 3.6vw, 3rem); }
.duo-card--companion .hand-stage,
.duo-card--companion.in .hand-stage { left: 42%; top: 24%; width: 76%; }
.duo-card--companion .link { left: 48px; bottom: 36px; }

/* Builder card: the framework's 30% tone (paper-2 → silver-2, with a slate pool in the lower right), ink type; link sized to match the Companion's */
.duo-card--builder, .duo-card:not(.duo-card--companion) {
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(59,72,88,0.22) 0%, rgba(59,72,88,0) 70%),
    radial-gradient(60% 50% at 0% 0%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, var(--paper-2) 0%, var(--silver-2) 100%);
  border: 1px solid rgba(52,53,57,0.08);
  border-radius: 28px;
}
.duo-card:not(.duo-card--companion) .link { font-size: 1.2rem; }
.duo-card:not(.duo-card--companion) .duo-media video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: 13px; }

/* Builder laptop: a cut render (base + lid) at a fixed internal size, scaled to fit; the lid swings open around its hinge, the console plays on the panel */
.duo-card:not(.duo-card--companion) .duo-media.laptop-stage {
  position: relative; background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; overflow: visible;
  perspective: 2600px; perspective-origin: 50% 40%;
}
.laptop { position: absolute; left: 50%; top: 50%; width: 1200px; height: 789px; transform: translate(-50%, -50%) scale(0.5); transform-origin: 50% 50%; transform-style: preserve-3d; }
.laptop-base, .laptop-lid > img { position: absolute; left: 0; top: 0; width: 1200px; height: 789px; max-width: none; display: block; border-radius: 0; object-fit: fill; }
.laptop-base { filter: drop-shadow(0 30px 40px rgba(20,22,26,0.28)); }
.laptop-lid {
  position: absolute; left: 0; top: 0; width: 1200px; height: 789px;
  transform-origin: 419px 624px;                 /* hinge midpoint */
  transform: rotate3d(0.99865, -0.05197, 0, -86deg);
  transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform 1800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.laptop-stage.lid-open .laptop-lid { transform: rotate3d(0.99865, -0.05197, 0, 0deg); transition-delay: 120ms; }
.laptop-screen {
  position: absolute; left: 0; top: 0; width: 787px; height: 525px; object-fit: cover; object-position: top; display: block;
  transform-origin: 0 0;
  transform: matrix3d(1.159881,0.066427,0,0.000197,-0.000126,1.058686,0,-0.000004,0,0,1,0,29.324759,43.987137,0,1);
  border-radius: 0;
}
.duo-card:not(.duo-card--companion) .duo-media video.laptop-screen { width: 787px; height: 525px; border-radius: 0; }

/* Builder laptop, face on: a drawn device so the console reads straight; the lid opens toward the viewer from the hinge */
.duo-card:not(.duo-card--companion) .duo-media.laptop-stage { perspective: 1800px; perspective-origin: 50% 10%; }
.laptop--front { width: 1040px; height: 700px; }
.laptop--front .laptop-lid {
  position: absolute; left: 20px; top: 30px; width: 1000px; height: 640px;
  background: linear-gradient(180deg, #2A2D33 0%, #16181C 100%);
  border-radius: 26px 26px 10px 10px;
  box-shadow: inset 0 0 0 2px #B9C2CA, inset 0 0 0 3px rgba(255,255,255,0.35), 0 1px 0 rgba(255,255,255,0.3);
  transform-origin: 50% 100%;
  transform: rotateX(-88deg);
  transition: transform 1800ms cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden; will-change: transform;
}
.laptop-stage.lid-open .laptop--front .laptop-lid { transform: rotateX(0deg); transition-delay: 120ms; }
.laptop--front .laptop-lid > img, .laptop--front img.laptop-base { display: none; }
.duo-card:not(.duo-card--companion) .duo-media video.laptop-screen,
.laptop--front .laptop-screen {
  position: absolute; left: 26px; top: 34px; width: 948px; height: 572px; transform: none;
  object-fit: cover; object-position: top; border-radius: 8px; background: #0d0f12; display: block;
}
.laptop--front .laptop-cam { position: absolute; left: 50%; top: 14px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #0a0b0d; box-shadow: inset 0 0 0 2px #23262b, 0 0 0 1px rgba(255,255,255,0.08); }
.laptop--front .laptop-base {
  position: absolute; left: 0; top: 668px; width: 1040px; height: 24px; border-radius: 4px 4px 14px 14px;
  background: linear-gradient(180deg, #F2F4F6 0%, #CBD3DA 40%, #9EACB8 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 28px 40px -16px rgba(20,22,26,0.35), 0 50px 90px -30px rgba(20,22,26,0.35);
  transform: translateZ(2px);
}
.laptop--front .laptop-notch { position: absolute; left: 50%; top: 0; width: 160px; height: 7px; margin-left: -80px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #8E9BA6, #B4BEC7); }

/* Builder laptop: keyboard deck tilted back from the hinge for depth, ground shadow, Builder heading matched to the Companion's */
.duo-card:not(.duo-card--companion) h3 { font-size: clamp(2.25rem, 3.6vw, 3rem); }
.laptop--front { height: 800px; }
.laptop--front .laptop-lid { top: 20px; }
.laptop--front .laptop-base {
  top: 660px; height: 300px; border-radius: 6px 6px 22px 22px;
  background: linear-gradient(180deg, #DDE3E8 0%, #CBD3DA 60%, #B5BFC8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -3px 0 rgba(20,22,26,0.18), inset 0 -4px 0 rgba(255,255,255,0.35);
  transform-origin: 50% 0; transform: rotateX(78deg); transform-style: preserve-3d;
}
.laptop--front .laptop-notch { top: auto; bottom: 0; height: 6px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #A9B4BE, #8E9BA6); }
.laptop--front .laptop-keys {
  position: absolute; left: 110px; top: 28px; width: 820px; height: 150px; border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, #262930 0 44px, transparent 44px 52px),
    repeating-linear-gradient(180deg, #262930 0 24px, transparent 24px 30px),
    #AEB8C2;
  background-blend-mode: normal;
  box-shadow: inset 0 0 0 1px rgba(20,22,26,0.12);
  -webkit-mask: linear-gradient(#000, #000);
}
.laptop--front .laptop-keys::before { content: ""; position: absolute; inset: 0; border-radius: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 44px, #AEB8C2 44px 52px), repeating-linear-gradient(180deg, transparent 0 24px, #AEB8C2 24px 30px); }
.laptop--front .laptop-pad { position: absolute; left: 50%; top: 196px; width: 300px; height: 86px; margin-left: -150px; border-radius: 8px; background: linear-gradient(180deg, #C3CCD4, #B3BDC6); box-shadow: inset 0 0 0 1px rgba(20,22,26,0.14); }
.laptop--front .laptop-shadow { position: absolute; left: 40px; top: 730px; width: 960px; height: 60px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(20,22,26,0.42) 0%, rgba(20,22,26,0) 70%); transform: translateZ(-40px); filter: blur(10px); z-index: -1; }
.laptop--front .laptop-keys { background: #B7C0C9; -webkit-mask: none; box-shadow: inset 0 0 0 1px rgba(20,22,26,0.10); }
.laptop--front .laptop-keys::before { background:
  repeating-linear-gradient(90deg, transparent 0 46px, #B7C0C9 46px 52px),
  repeating-linear-gradient(180deg, transparent 0 25px, #B7C0C9 25px 30px),
  linear-gradient(#3B3F46, #30343B); inset: 6px; border-radius: 8px; }
.laptop--front .laptop-shadow { top: 742px; left: 20px; width: 1000px; height: 70px; transform: none; z-index: 0; filter: blur(14px); background: radial-gradient(50% 50% at 50% 50%, rgba(20,22,26,0.5) 0%, rgba(20,22,26,0) 72%); }
.laptop--front .laptop-base, .laptop--front .laptop-lid { z-index: 1; }

/* Builder laptop: the supplied front-on photo, split at the hinge; lid opens toward the viewer, console on the panel */
.laptop--photo { width: 1200px; height: 820px; }
.laptop--photo img.laptop-base, .laptop--photo .laptop-lid > img { display: block; position: absolute; left: 0; top: 0; width: 1200px; height: 789px; max-width: none; border-radius: 0; object-fit: fill; filter: none; }
.laptop--photo .laptop-lid {
  position: absolute; left: 0; top: 0; width: 1200px; height: 789px; background: none; box-shadow: none; border-radius: 0;
  transform-origin: 600px 682px;            /* the hinge */
  transform: rotateX(-88deg);
  transition: transform 1800ms cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden; will-change: transform; z-index: 1;
}
.laptop-stage.lid-open .laptop--photo .laptop-lid { transform: rotateX(0deg); transition-delay: 120ms; }
.duo-card:not(.duo-card--companion) .duo-media video.laptop-screen,
.laptop--photo .laptop-screen { position: absolute; left: 107px; top: 24px; width: 983px; height: 654px; transform: none; object-fit: cover; object-position: top; border-radius: 0 0 6px 6px; background: #000; display: block; }
.laptop--photo img.laptop-base { z-index: 2; }
.laptop--photo .laptop-shadow { position: absolute; left: 60px; top: 760px; width: 1080px; height: 70px; border-radius: 50%; z-index: 0; filter: blur(14px); transform: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20,22,26,0.45) 0%, rgba(20,22,26,0) 72%); }
.duo-card:not(.duo-card--companion) .duo-media.laptop-stage { perspective: 2000px; perspective-origin: 50% 20%; }

/* Builder laptop: video fitted inside the display's bezel at 16:9, lid overlaps the hinge, glass glare, settle-in */
.duo-card:not(.duo-card--companion) .duo-media video.laptop-screen,
.laptop--photo .laptop-screen { left: 131px; top: 73px; width: 935px; height: 526px; border-radius: 4px; object-fit: cover; object-position: center; background: #000; }
.laptop--photo .laptop-lid::after {
  content: ""; position: absolute; left: 107px; top: 5px; width: 983px; height: 673px; border-radius: 24px 24px 4px 4px; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.045) 28%, rgba(255,255,255,0) 52%);
  mix-blend-mode: screen;
}
.laptop--photo .laptop-lid { z-index: 3; }
.laptop--photo img.laptop-base { z-index: 2; }
.laptop--photo .laptop-shadow { top: 770px; left: 90px; width: 1020px; height: 64px; filter: blur(16px); background: radial-gradient(50% 50% at 50% 50%, rgba(20,22,26,0.5) 0%, rgba(20,22,26,0) 70%); }
.laptop-stage .laptop { opacity: 0; transition: opacity 900ms var(--ease-out); }
.laptop-stage.lid-open .laptop { opacity: 1; }
.duo-card:not(.duo-card--companion) .duo-media.laptop-stage { perspective: 6000px; perspective-origin: 50% 30%; }
.laptop--photo .laptop-lid::after { background: linear-gradient(112deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 28%, rgba(255,255,255,0) 52%); }
.laptop--photo::before { content: ""; position: absolute; left: 112px; top: 672px; width: 976px; height: 16px; border-radius: 4px; background: linear-gradient(180deg, #1E2125, #2E3237); z-index: 2; }
.laptop--photo img.laptop-base { z-index: 1; }
.laptop--photo::before { top: 674px; height: 26px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #1E2125 0%, #2A2E33 55%, rgba(42,46,51,0) 100%); }

/* Builder laptop: clean cut at the deck's rear edge (no drawn hinge), lid pivots there; video fills the panel edge to edge */
.laptop--photo::before { display: none; }
.laptop--photo .laptop-lid { transform-origin: 600px 678px; }
.duo-card:not(.duo-card--companion) .duo-media video.laptop-screen,
.laptop--photo .laptop-screen { left: 121px; top: 40px; width: 955px; height: 598px; object-fit: cover; object-position: center; border-radius: 6px; }

/* Builder laptop: seam-proofing. Both layers overlap across the hinge and are rasterised the same way, so no hairline at the cut */
.laptop--photo img.laptop-base { transform: translateZ(0); backface-visibility: visible; }
.laptop--photo .laptop-lid { backface-visibility: visible; }
.laptop--photo .laptop-lid::after { mix-blend-mode: normal; }
.laptop--photo .laptop-lid > img { image-rendering: auto; }
/* the base image was being stretched to the stage box by an older media rule; pin both layers to the same 1200x789 frame */
.duo-card:not(.duo-card--companion) .duo-media .laptop--photo img.laptop-base,
.duo-card:not(.duo-card--companion) .duo-media .laptop--photo .laptop-lid > img { width: 1200px; height: 789px; object-fit: fill; object-position: 0 0; }

/* Both cards on the framework's silver field; hover brings up a quiet orange halo */
.duo-card--companion {
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(59,72,88,0.22) 0%, rgba(59,72,88,0) 70%),
    radial-gradient(60% 50% at 0% 0%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, var(--paper-2) 0%, var(--silver-2) 100%);
  border: 1px solid rgba(52,53,57,0.08); color: var(--ink);
  box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -20px rgba(52,53,57,0.18);
}
.duo-card--companion .kicker { color: var(--ink-dim); }
.duo-card--companion h3 { color: var(--ink); }
.duo-card--companion p:not(.kicker) { color: var(--ink-dim); }
.duo-card--companion .link { color: var(--ink); }
.duo-card--companion .link:hover { color: var(--orange); }
.duo-card--companion:hover { box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 36px 80px -20px rgba(52,53,57,0.24); }
.duo-card--companion .hand-slot { background: #0d0f12; }

.duo-card { position: relative; overflow: hidden; isolation: isolate; }
.duo-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    radial-gradient(75% 65% at 100% 0%, rgba(245,96,28,0.26) 0%, rgba(245,96,28,0.08) 38%, rgba(245,96,28,0) 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(245,96,28,0.10) 0%, rgba(245,96,28,0) 65%);
  opacity: 0; transition: opacity 700ms var(--ease-out);
}
.duo-card:hover::before { opacity: 1; }
.duo-card { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), border-color 500ms var(--ease-out); }
.duo-card:hover { border-color: rgba(245,96,28,0.28); }
.duo-card > * { position: relative; z-index: 1; }
.duo-card--companion .hand-stage { z-index: 1; }
.duo-card--companion .link { z-index: 3; }
/* hover halo: clean orange over a white lift so it never mixes with the grey into brown */
.duo-card::before {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(245,96,28,0.55) 0%, rgba(255,140,80,0.28) 30%, rgba(255,190,150,0.10) 55%, rgba(255,255,255,0) 72%),
    radial-gradient(55% 45% at 0% 100%, rgba(255,150,100,0.18) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.45) 100%);
}
.duo-card:hover { border-color: rgba(245,96,28,0.45); }
/* halo pooled along the bottom of the card; the link flips to white when the card is hovered so it stays legible on the orange */
.duo-card::before {
  background:
    radial-gradient(90% 70% at 50% 110%, rgba(245,96,28,0.72) 0%, rgba(245,96,28,0.50) 28%, rgba(255,140,80,0.22) 52%, rgba(255,255,255,0) 74%),
    radial-gradient(45% 40% at 0% 100%, rgba(245,96,28,0.35) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.40) 100%);
}
.duo-card .link { transition: color 500ms var(--ease-out); }
.duo-card .link::after { transition: color 500ms var(--ease-out); }
.duo-card:hover .link, .duo-card:hover .link::after, .duo-card--companion:hover .link { color: #FFFFFF; }
.duo-card::before {
  background:
    radial-gradient(95% 62% at 50% 108%, rgba(245,96,28,0.96) 0%, rgba(245,96,28,0.80) 26%, rgba(250,130,70,0.40) 50%, rgba(255,255,255,0) 74%),
    radial-gradient(50% 44% at 0% 100%, rgba(245,96,28,0.75) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.40) 100%);
}

/* =====================================================================
   THE REVEAL: the hero's sibling. Same film, same left-to-right grade, glass chips, display-scale type
   ===================================================================== */
#reveal { background: #0F1216; padding: 96px 0 104px; }
#reveal .amb {
  inset: 0; width: 100%; height: 100%; transform: scale(1.06);
  filter: blur(7px) saturate(1.05) brightness(0.9);
  transition: opacity 1600ms ease-out;
}
#reveal::before {
  inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,12,16,0.78) 0%, rgba(10,12,16,0.60) 36%, rgba(10,12,16,0.30) 62%, rgba(10,12,16,0.18) 82%, rgba(10,12,16,0.36) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.55) 0%, rgba(10,12,16,0.10) 30%, rgba(10,12,16,0.10) 70%, rgba(10,12,16,0.62) 100%);
}
#reveal::after { opacity: 0.35; z-index: 1; }
#reveal .wrap { position: relative; z-index: 2; }
#reveal .kicker { font-size: 16px; color: rgba(255,255,255,0.62); }
#reveal .h-display { font-size: clamp(54px, 3.8vw, 73px); max-width: 20ch; color: #fff; }
#reveal .lede { color: rgba(255,255,255,0.78); font-weight: 300; }
#reveal .reveal-grid { margin-top: 56px; align-items: start; }
/* the owned chips: hero glass, arriving one by one */
#reveal .owned { max-width: 560px; gap: 12px; }
#reveal .owned span {
  font-size: 0.95rem; font-weight: 500; color: #fff; padding: 11px 20px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 1px 0 0 rgba(255,255,255,0.14), 0 10px 30px -14px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  transform: translateY(18px) scale(0.96);
  transition: opacity 700ms var(--ease-out), transform 900ms cubic-bezier(0.16,1,0.3,1);
}
#reveal .in .owned span { transform: none; }
#reveal .owned-note { color: rgba(255,255,255,0.62); font-size: 0.95rem; max-width: 44ch; }
/* right column: the outcome layer, framed in quiet glass */
#reveal .reveal-grid > div:last-child {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px; padding: 40px 44px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 30px 70px -30px rgba(0,0,0,0.7);
  backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
}
#reveal .reveal-couplet { margin-top: 0; font-size: clamp(2.25rem, 3.6vw, 3rem); line-height: 1.08; max-width: none; }
#reveal .name-line { border-top-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.80); max-width: none; font-size: 1.05rem; }
#reveal .name-line b { color: #fff; }
#reveal .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#reveal .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
@media (max-width: 1020px) { #reveal .reveal-grid > div:last-child { padding: 28px; } }

/* =====================================================================
   THE PRICE: white act, display-scale line, calculator on the silver card with the orange halo
   ===================================================================== */
#price { padding: 96px 0 104px; }
#price > .wrap > .kicker { font-size: 16px; }
#price .price-line { font-size: clamp(54px, 3.8vw, 73px); letter-spacing: -0.02em; line-height: 1.02; }
#price .price-note { font-size: 1.05rem; color: var(--ink-dim); margin-top: 16px; }
#price .mini-calc {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 980px; margin-top: 48px; padding: 36px 40px; gap: 24px;
  border-radius: 28px; border: 1px solid rgba(52,53,57,0.08);
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(59,72,88,0.22) 0%, rgba(59,72,88,0) 70%),
    radial-gradient(60% 50% at 0% 0%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, var(--paper-2) 0%, var(--silver-2) 100%);
  box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -20px rgba(52,53,57,0.18);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), border-color 500ms var(--ease-out);
}
#price .mini-calc:hover { transform: translateY(-4px); border-color: rgba(245,96,28,0.45); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 36px 80px -20px rgba(52,53,57,0.24); }
#price .mini-calc::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    radial-gradient(95% 62% at 50% 108%, rgba(245,96,28,0.96) 0%, rgba(245,96,28,0.80) 26%, rgba(250,130,70,0.40) 50%, rgba(255,255,255,0) 74%),
    linear-gradient(160deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.40) 100%);
  opacity: 0; transition: opacity 700ms var(--ease-out);
}
#price .mini-calc:hover::before { opacity: 1; }
#price .mini-calc > * { position: relative; z-index: 1; }
#price .mini-field label { color: var(--ink-dim); }
#price .mini-field select, #price .mini-field input {
  background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.9); border-radius: 12px; padding: 13px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px -2px rgba(52,53,57,0.12);
}
#price .mini-out { padding: 0 8px 0 24px; border-left: 1px solid rgba(52,53,57,0.10); }
#price .mini-out .n { font-size: clamp(2rem, 2.6vw, 2.6rem); font-variant-numeric: tabular-nums; }
#price .mini-out small { color: var(--ink-dim); font-size: 0.8rem; }
#price .mini-calc:hover .mini-field label, #price .mini-calc:hover .mini-out small { color: var(--ink-2); }
#price .hero-ctas { margin-top: 36px; }
#price .assure { color: var(--ink-dim); }

/* =====================================================================
   THE DOOR: the page's closing dark moment. Slate field from the proof, breathing light, one orange button
   ===================================================================== */
.door {
  background: linear-gradient(180deg, #3B4858 0%, #2A3038 48%, #1B1E23 100%);
  padding: 120px 0 128px; overflow: hidden;
}
.door::before {
  inset: -20%; opacity: 1;
  background:
    radial-gradient(42% 46% at 22% 30%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(38% 40% at 78% 70%, rgba(170,190,210,0.12) 0%, rgba(170,190,210,0) 70%);
  animation: proofLight 26s ease-in-out infinite alternate;
  will-change: transform;
}
.door::after { opacity: 0.4; }
.door .wrap { position: relative; z-index: 2; }
.door .h-display { font-size: clamp(54px, 3.8vw, 73px); max-width: 22ch; color: #fff; }
.door .lede { color: rgba(255,255,255,0.78); font-weight: 300; max-width: 44ch; margin-top: 20px; }
.door .btn--primary { margin-top: 36px; padding: 18px 36px; font-size: 1.05rem; box-shadow: 0 14px 40px -12px rgba(245,96,28,0.7); }
.door .assure {
  display: inline-block; margin-top: 28px; padding: 10px 20px; border-radius: 999px;
  color: rgba(255,255,255,0.82); font-size: 0.95rem;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
}
@media (prefers-reduced-motion: reduce) { .door::before { animation: none; } }

/* =====================================================================
   FOOTER: ends light. Paper field, stage padding, quiet hairlines
   ===================================================================== */
.footer { background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); border-top: 0; padding: 72px 0 36px; color: var(--ink-dim); }
.footer-grid { gap: 48px; }
.footer img { height: 22px; }
.footer h5 { color: var(--ink-dim); font-size: 0.8rem; letter-spacing: 0.16em; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--orange); }
.footer .cred-strip { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(52,53,57,0.10); }
.footer .cred-strip span {
  color: var(--ink-dim); border: 1px solid rgba(52,53,57,0.10); background: rgba(255,255,255,0.7);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px -3px rgba(52,53,57,0.15); padding: 8px 16px;
}
.footer-legal { margin-top: 28px; color: var(--silver); }
#reveal .amb { opacity: 1; }   /* poster shows at once; the film takes over when it plays */
.door .assure { display: table; margin: 28px auto 0; }
#reveal::before {
  background:
    linear-gradient(90deg, rgba(10,12,16,0.82) 0%, rgba(10,12,16,0.68) 36%, rgba(10,12,16,0.52) 62%, rgba(10,12,16,0.50) 82%, rgba(10,12,16,0.62) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.55) 0%, rgba(10,12,16,0.12) 30%, rgba(10,12,16,0.12) 70%, rgba(10,12,16,0.66) 100%);
}
#reveal .amb { filter: blur(8px) saturate(0.95) brightness(0.78); }

/* Price calculator: plain white card again (no silver field, no orange halo, no lift) */
#price .mini-calc { background: var(--white); border: 1px solid rgba(52,53,57,0.08); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -20px rgba(52,53,57,0.18); transition: none; }
#price .mini-calc:hover { transform: none; border-color: rgba(52,53,57,0.08); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -20px rgba(52,53,57,0.18); }
#price .mini-calc::before { display: none; }
#price .mini-field select, #price .mini-field input { background: var(--paper); border: 1px solid rgba(52,53,57,0.08); box-shadow: none; }
#price .mini-calc:hover .mini-field label, #price .mini-calc:hover .mini-out small { color: var(--ink-dim); }

/* hero phone: always fully in the first view. Sits higher, and caps its height against the viewport on shorter screens */
.hero .tuesday { margin-top: 20px; }
.hero .screen { width: min(74%, 345px, 33.5vh); }

/* The scale: both cards back on the charcoal; the orange halo now rises over the dark field on hover */
.duo-card, .duo-card--companion {
  background: radial-gradient(90% 80% at 80% 20%, #2A2E35 0%, #1B1E23 55%, #141619 100%);
  border: 1px solid rgba(255,255,255,0.06); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 40px 90px -30px rgba(0,0,0,0.6);
}
.duo-card:hover, .duo-card--companion:hover { border-color: rgba(245,96,28,0.55); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 52px 110px -30px rgba(0,0,0,0.7); }
.duo-card .kicker, .duo-card--companion .kicker { color: rgba(255,255,255,0.6); }
.duo-card h3, .duo-card--companion h3 { color: #fff; }
.duo-card p:not(.kicker), .duo-card--companion p:not(.kicker) { color: rgba(255,255,255,0.78); }
.duo-card .link, .duo-card--companion .link { color: #fff; }
.duo-card::before {
  background:
    radial-gradient(95% 62% at 50% 108%, rgba(245,96,28,0.92) 0%, rgba(245,96,28,0.62) 28%, rgba(245,96,28,0.22) 54%, rgba(245,96,28,0) 76%),
    radial-gradient(50% 44% at 0% 100%, rgba(245,96,28,0.55) 0%, rgba(245,96,28,0) 62%);
}
.duo-card:hover .link, .duo-card:hover .link::after, .duo-card--companion:hover .link { color: #fff; }
.laptop--photo .laptop-shadow { background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%); }
.duo-card:not(.duo-card--companion) {
  background: radial-gradient(90% 80% at 80% 20%, #2A2E35 0%, #1B1E23 55%, #141619 100%);
  border: 1px solid rgba(255,255,255,0.06);
}
.duo-card:not(.duo-card--companion):hover { border-color: rgba(245,96,28,0.55); }

/* The scale: back to the silver cards with the orange halo over a white lift, ink type, white link on hover */
.duo-card, .duo-card--companion, .duo-card:not(.duo-card--companion) {
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(59,72,88,0.22) 0%, rgba(59,72,88,0) 70%),
    radial-gradient(60% 50% at 0% 0%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, var(--paper-2) 0%, var(--silver-2) 100%);
  border: 1px solid rgba(52,53,57,0.08); color: var(--ink);
  box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -20px rgba(52,53,57,0.18);
}
.duo-card:hover, .duo-card--companion:hover, .duo-card:not(.duo-card--companion):hover { border-color: rgba(245,96,28,0.45); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 36px 80px -20px rgba(52,53,57,0.24); }
.duo-card .kicker, .duo-card--companion .kicker { color: var(--ink-dim); }
.duo-card h3, .duo-card--companion h3 { color: var(--ink); }
.duo-card p:not(.kicker), .duo-card--companion p:not(.kicker) { color: var(--ink-dim); }
.duo-card .link, .duo-card--companion .link { color: var(--ink); }
.duo-card::before {
  background:
    radial-gradient(95% 62% at 50% 108%, rgba(245,96,28,0.96) 0%, rgba(245,96,28,0.80) 26%, rgba(250,130,70,0.40) 50%, rgba(255,255,255,0) 74%),
    radial-gradient(50% 44% at 0% 100%, rgba(245,96,28,0.75) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.40) 100%);
}
.duo-card:hover .link, .duo-card:hover .link::after, .duo-card--companion:hover .link { color: #fff; }
.laptop--photo .laptop-shadow { background: radial-gradient(50% 50% at 50% 50%, rgba(20,22,26,0.5) 0%, rgba(20,22,26,0) 70%); }

/* =====================================================================
   THE PRICE, second pass: film background, hero-style type on the left, the calculator as Apple glass on the right
   ===================================================================== */
#price { position: relative; overflow: hidden; isolation: isolate; background: #0F1216; padding: 112px 0 120px; text-align: left; }
#price .price-field { position: absolute; inset: 0; z-index: 0; }
#price .price-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: blur(7px) saturate(1.05) brightness(0.85); transform: scale(1.06); }
#price .price-field::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,12,16,0.80) 0%, rgba(10,12,16,0.62) 36%, rgba(10,12,16,0.34) 62%, rgba(10,12,16,0.22) 82%, rgba(10,12,16,0.40) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.45) 0%, rgba(10,12,16,0.08) 30%, rgba(10,12,16,0.08) 70%, rgba(10,12,16,0.55) 100%);
}
#price > .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 560px); column-gap: clamp(32px, 5vw, 96px); align-items: center;
}
#price > .wrap > .kicker, #price .price-line, #price .price-note, #price .hero-ctas, #price .assure { grid-column: 1; }
#price > .wrap > .kicker { color: rgba(255,255,255,0.62); }
#price .price-line {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 300; color: #fff;
  font-size: clamp(60px, 5vw, 78px); line-height: 1.02; letter-spacing: 0.005em; margin-top: 12px; max-width: 12ch;
}
#price .price-line em { font-weight: 700; color: var(--orange); letter-spacing: -0.012em; display: block; }
#price .price-note { color: rgba(255,255,255,0.80); font-weight: 300; font-size: 1.15rem; margin-top: 22px; max-width: 40ch; }
#price .hero-ctas { justify-content: flex-start !important; margin-top: 32px; }
#price .assure { color: rgba(255,255,255,0.66); margin-top: 16px; }
/* the calculator: Apple glass */
#price .mini-calc {
  grid-column: 2; grid-row: 1 / span 5; align-self: center;
  margin: 0; max-width: none; padding: 32px 32px 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; align-items: end;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.26); border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), inset 1px 0 0 rgba(255,255,255,0.14), 0 30px 80px -30px rgba(0,0,0,0.7);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: none; transform: none;
}
#price .mini-calc:hover { transform: none; border-color: rgba(255,255,255,0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), inset 1px 0 0 rgba(255,255,255,0.14), 0 30px 80px -30px rgba(0,0,0,0.7); }
#price .mini-calc::before { display: none; }
#price .mini-field:first-child { grid-column: 1 / -1; }
#price .mini-field label { color: rgba(255,255,255,0.66); }
#price .mini-field select, #price .mini-field input {
  color: #fff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 13px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); color-scheme: dark;
}
#price .mini-field select option { color: var(--ink); background: #fff; }
#price .mini-out {
  grid-column: 1 / -1; border: 0; border-top: 1px solid rgba(255,255,255,0.16); padding: 20px 0 0; margin-top: 4px;
  text-align: left; display: flex; align-items: baseline; gap: 12px;
}
#price .mini-out .n { font-size: clamp(2.4rem, 3vw, 3.2rem); }
#price .mini-out small { color: rgba(255,255,255,0.66); font-size: 0.9rem; margin: 0; }
#price .mini-calc:hover .mini-field label, #price .mini-calc:hover .mini-out small { color: rgba(255,255,255,0.66); }
@media (max-width: 1020px) {
  #price > .wrap { grid-template-columns: 1fr; }
  #price .mini-calc { grid-column: 1; grid-row: auto; margin-top: 32px; }
  #price .price-line { font-size: clamp(44px, 9vw, 60px); }
}
#price .price-line { max-width: none; white-space: nowrap; }
@media (max-width: 1020px) { #price .price-line { white-space: normal; } }
/* price: the real film; the CTA lives inside the glass card */
#price .price-video { object-position: 62% 50%; filter: blur(6px) saturate(1.0) brightness(0.9); }
#price .price-field::after {
  background:
    linear-gradient(90deg, rgba(10,12,16,0.82) 0%, rgba(10,12,16,0.66) 34%, rgba(10,12,16,0.36) 58%, rgba(10,12,16,0.22) 78%, rgba(10,12,16,0.34) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.40) 0%, rgba(10,12,16,0.06) 30%, rgba(10,12,16,0.06) 70%, rgba(10,12,16,0.52) 100%);
}
#price .mini-calc .mini-cta-row { grid-column: 1 / -1; margin-top: 8px; justify-content: flex-start !important; }
#price .mini-calc .mini-cta-row .btn { width: 100%; text-align: center; padding: 16px 28px; }
#price .assure { margin-top: 28px; }
/* price: the section takes the film's own 16:9 height, so the whole frame shows */
#price { aspect-ratio: 16 / 9; min-height: 0; padding: 0; display: grid; align-items: center; }
#price > .wrap { width: 100%; padding-top: 48px; padding-bottom: 48px; }
#price .price-video { object-position: 50% 50%; }
@media (max-width: 1020px) { #price { aspect-ratio: auto; padding: 72px 0; display: block; } }
/* price: film sharp; the grade alone carries the type */
#price .price-video { filter: saturate(1.0) brightness(0.92); transform: scale(1.0); }
#price .price-field::after {
  background:
    linear-gradient(90deg, rgba(10,12,16,0.84) 0%, rgba(10,12,16,0.68) 30%, rgba(10,12,16,0.34) 52%, rgba(10,12,16,0.14) 72%, rgba(10,12,16,0.22) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.36) 0%, rgba(10,12,16,0.04) 28%, rgba(10,12,16,0.04) 72%, rgba(10,12,16,0.46) 100%);
}
/* price: zoomed so she sits between the copy and the card */
#price .price-video { transform: scale(1.32) translateX(-9%); transform-origin: 50% 55%; }
#price .price-video { transform: scale(1.3) translate(-9%, 3.5%); }
#price .price-video { transform: scale(1.3) translate(-8%, 17%); }
#price .price-video { transform: scale(1.38) translate(-8%, 12%); }

/* =====================================================================
   THE PRICE, third pass (reference layout): copy top-left, glass dome with the figure, one glass bar of fields along the foot
   ===================================================================== */
#price > .wrap { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding-top: 72px; padding-bottom: 40px; }
#price > .wrap > .kicker { grid-column: auto; }
#price .price-line {
  text-transform: none; font-weight: 300; font-size: clamp(56px, 4.6vw, 76px); letter-spacing: -0.02em; line-height: 1.04; margin-top: 10px; white-space: normal;
}
#price .price-line em { font-weight: 500; display: block; letter-spacing: -0.02em; }
#price .price-note { font-size: 1.1rem; margin-top: 18px; max-width: 34ch; }
#price .assure { order: 10; margin-top: 14px; font-size: 0.85rem; color: rgba(255,255,255,0.55); align-self: flex-start; }
/* the bar */
#price .mini-calc {
  grid-column: auto; grid-row: auto; align-self: stretch; order: 9; position: relative; margin-top: auto;
  display: grid; grid-template-columns: 1.3fr 1fr 0.9fr auto; gap: 0; align-items: center;
  padding: 14px 14px 14px 20px; border-radius: 999px;
  background: rgba(14,16,20,0.46); border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 30px 80px -30px rgba(0,0,0,0.8);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  overflow: visible;
}
#price .mini-field { grid-column: auto; position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 6px 22px 6px 6px; border-right: 1px solid rgba(255,255,255,0.14); }
#price .mini-field:first-child { grid-column: auto; }
#price .mini-field:nth-child(3) { border-right: 0; }
#price .mini-field::before {
  content: ""; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%;
  background-color: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
#price .mini-field:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M9 10h.01M15 10h.01M9 13.5h.01M15 13.5h.01'/%3E%3C/svg%3E"); }
#price .mini-field:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6M16 5.2a3.2 3.2 0 0 1 0 6.1M18 14.3c2.1.6 3.5 2.4 3.5 5.7'/%3E%3C/svg%3E"); }
#price .mini-field:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.5c-.6-1-1.7-1.5-3-1.5-2 0-3.2 1-3.2 2.2 0 2.8 6.4 1.3 6.4 4.2 0 1.3-1.3 2.1-3.2 2.1-1.4 0-2.6-.5-3.2-1.5M12 6.5v2M12 15.5v2'/%3E%3C/svg%3E"); }
#price .mini-field label { grid-column: 2; margin: 0 0 2px; font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); text-transform: none; font-weight: 500; }
#price .mini-field select, #price .mini-field input {
  grid-column: 2; padding: 0 26px 0 0; border: 0; background: none; box-shadow: none; border-radius: 0;
  font-size: 1.05rem; font-weight: 500; color: #fff; line-height: 1.3; appearance: none; -webkit-appearance: none; outline: none; width: 100%;
}
#price .mini-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 16px 16px; cursor: pointer; }
#price .mini-field input[type=number]::-webkit-inner-spin-button, #price .mini-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#price .mini-field input[type=number] { -moz-appearance: textfield; }
#price .mini-field:focus-within::before { background-color: rgba(245,96,28,0.22); border-color: rgba(245,96,28,0.55); }
/* the CTA at the end of the bar */
#price .mini-calc .mini-cta-row { grid-column: auto; margin: 0; padding-left: 14px; }
#price .mini-calc .mini-cta-row .btn { width: auto; padding: 16px 28px; border-radius: 999px; white-space: nowrap; }
#price .mini-calc .mini-cta-row .btn::after { content: " →"; }
/* the dome: the figure rises out of the bar */
#price .mini-out {
  position: absolute; left: 50%; bottom: calc(100% - 1px); transform: translateX(-50%);
  width: min(640px, 60vw); aspect-ratio: 2 / 1; grid-column: auto; margin: 0; padding: 0 32px 22px; border: 0;
  border-radius: 999px 999px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; text-align: center;
  background: rgba(14,16,20,0.42);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
#price .mini-out::before {   /* the orange arc */
  content: ""; position: absolute; inset: -1px -1px 0 -1px; border-radius: inherit; pointer-events: none;
  padding: 1px; background: linear-gradient(180deg, rgba(245,96,28,0.95) 0%, rgba(245,96,28,0.35) 55%, rgba(245,96,28,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
#price .mini-out::after {    /* a soft glow under the arc */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(245,96,28,0.22) 0%, rgba(245,96,28,0) 70%);
}
#price .mini-out .n { font-size: clamp(64px, 6.2vw, 104px); line-height: 1; letter-spacing: -0.03em; font-weight: 700; color: var(--orange); position: relative; }
#price .mini-out .n .cur { color: rgba(255,255,255,0.86); font-weight: 300; letter-spacing: -0.02em; }
#price .mini-out small { position: relative; font-size: 0.9rem; color: rgba(255,255,255,0.7); }
@media (max-width: 1020px) {
  #price > .wrap { height: auto; }
  #price .mini-calc { grid-template-columns: 1fr; border-radius: 28px; padding: 16px; margin-top: 260px; }
  #price .mini-field { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.14); padding: 12px 6px; }
  #price .mini-field:nth-child(3) { border-bottom: 0; }
  #price .mini-calc .mini-cta-row { padding: 12px 0 0; }
  #price .mini-calc .mini-cta-row .btn { width: 100%; }
  #price .mini-out { width: min(520px, 92vw); }
}

/* =====================================================================
   THE PRICE, to the reference: copy top-left, one vertical frosted card on the right
   (figure pane on top, stacked field rows, full-width orange CTA)
   ===================================================================== */
#price > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); column-gap: clamp(32px, 5vw, 96px); align-items: center; height: 100%; padding-top: 64px; padding-bottom: 64px; }
#price > .wrap > .kicker, #price .price-line, #price .price-note, #price .assure { grid-column: 1; }
#price > .wrap > .kicker { align-self: end; }
#price .price-line, #price .price-note, #price .assure { align-self: start; }
#price .assure { order: 0; margin-top: 28px; font-size: 0.95rem; color: rgba(255,255,255,0.78); }
#price .price-video { transform: scale(1.38) translate(-2%, 12%); }
#price .price-field::after {
  background:
    linear-gradient(90deg, rgba(10,12,16,0.70) 0%, rgba(10,12,16,0.46) 32%, rgba(10,12,16,0.18) 55%, rgba(10,12,16,0.10) 75%, rgba(10,12,16,0.22) 100%),
    linear-gradient(180deg, rgba(10,12,16,0.30) 0%, rgba(10,12,16,0.04) 28%, rgba(10,12,16,0.04) 72%, rgba(10,12,16,0.40) 100%);
}
/* the card */
#price .mini-calc {
  grid-column: 2; grid-row: 1 / span 5; order: 0; align-self: center; margin: 0; position: relative;
  display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 30px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 1px 0 0 rgba(255,255,255,0.18), 0 40px 100px -30px rgba(0,0,0,0.6);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  overflow: hidden;
}
/* figure pane */
#price .mini-out {
  order: -1; position: static; transform: none; width: auto; aspect-ratio: auto; left: auto; bottom: auto;
  margin: 0; padding: 30px 20px 24px; border: 0; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  background: rgba(255,255,255,0.58); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
#price .mini-out::before, #price .mini-out::after { display: none; }
#price .mini-out .n { font-size: clamp(44px, 3.6vw, 60px); font-weight: 700; letter-spacing: -0.025em; color: var(--orange); }
#price .mini-out .n .cur { color: var(--ink); font-weight: 300; }
#price .mini-out small { color: var(--ink-dim); font-size: 0.85rem; }
/* rows */
#price .mini-field {
  position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center;
  padding: 8px 14px 8px 10px; border: 0; border-radius: 16px;
  background: rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
#price .mini-field:nth-child(3) { border-right: 0; }
#price .mini-field::before {
  width: 40px; height: 40px; border-radius: 12px; background-color: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.3); background-size: 20px 20px;
}
#price .mini-field label { grid-column: 2; font-size: 0.68rem; color: rgba(255,255,255,0.62); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 1px; }
#price .mini-field select, #price .mini-field input { grid-column: 2; font-size: 1rem; color: #fff; }
#price .mini-field:focus-within { background: rgba(255,255,255,0.22); }
#price .mini-field:focus-within::before { background-color: rgba(245,96,28,0.28); border-color: rgba(245,96,28,0.6); }
/* CTA */
#price .mini-calc .mini-cta-row { padding: 0; margin-top: 2px; }
#price .mini-calc .mini-cta-row .btn { width: 100%; padding: 17px 28px; border-radius: 18px; display: flex; justify-content: center; gap: 10px; }
@media (max-width: 1020px) {
  #price > .wrap { grid-template-columns: 1fr; height: auto; }
  #price .mini-calc { grid-column: 1; grid-row: auto; margin-top: 32px; }
}
#price .mini-calc { align-items: stretch; }
#price > .wrap { align-content: center; grid-auto-rows: max-content; row-gap: 0; }
#price > .wrap > .kicker, #price .price-line, #price .price-note, #price .assure { align-self: auto; }
#price .price-note { margin-top: 20px; }
#price .assure { margin-top: 24px; }

/* =====================================================================
   THE PRICE: two light frosted cards, as the reference. Price card above, fields card below. Ink type on light glass.
   ===================================================================== */
#price .mini-calc { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 14px; overflow: visible; }
#price .mini-out, #price .mini-fields {
  background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.75); border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 30px 80px -30px rgba(0,0,0,0.55);
  backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
}
#price .mini-out { order: -1; padding: 28px 20px 22px; }
#price .mini-out .n { font-size: clamp(44px, 3.6vw, 60px); }
#price .mini-out .n .cur { color: var(--ink-2); }
#price .mini-out small { color: var(--ink-dim); }
#price .mini-fields { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
#price .mini-field { background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.8); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(52,53,57,0.04); border-radius: 16px; padding: 8px 14px 8px 10px; }
#price .mini-field::before { background-color: rgba(52,53,57,0.06); border: 1px solid rgba(52,53,57,0.08); }
#price .mini-field:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343539' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-5h6v5M9 10h.01M15 10h.01M9 13.5h.01M15 13.5h.01'/%3E%3C/svg%3E"); }
#price .mini-field:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343539' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6M16 5.2a3.2 3.2 0 0 1 0 6.1M18 14.3c2.1.6 3.5 2.4 3.5 5.7'/%3E%3C/svg%3E"); }
#price .mini-field:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343539' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9.5c-.6-1-1.7-1.5-3-1.5-2 0-3.2 1-3.2 2.2 0 2.8 6.4 1.3 6.4 4.2 0 1.3-1.3 2.1-3.2 2.1-1.4 0-2.6-.5-3.2-1.5M12 6.5v2M12 15.5v2'/%3E%3C/svg%3E"); }
#price .mini-field label { color: var(--ink-dim); }
#price .mini-field select, #price .mini-field input { color: var(--ink); color-scheme: light; }
#price .mini-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343539' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
#price .mini-field:focus-within { background: #fff; }
#price .mini-field:focus-within::before { background-color: rgba(245,96,28,0.12); border-color: rgba(245,96,28,0.5); }
#price .mini-fields .mini-cta-row { margin-top: 4px; }
/* price cards: proper glass. Near-clear white tint, deep blur with a brightness lift so ink type still reads */
#price .mini-out, #price .mini-fields {
  background: rgba(255,255,255,0.30); border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 1px 0 0 rgba(255,255,255,0.35), 0 30px 80px -30px rgba(0,0,0,0.55);
  backdrop-filter: blur(34px) saturate(170%) brightness(1.18); -webkit-backdrop-filter: blur(34px) saturate(170%) brightness(1.18);
}
#price .mini-field { background: rgba(255,255,255,0.38); border: 1px solid rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); }
#price .mini-field::before { background-color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.7); }
#price .mini-field:focus-within { background: rgba(255,255,255,0.7); }
#price .mini-out .n .cur { color: var(--ink); }
#price .mini-out small, #price .mini-field label { color: var(--ink-2); }
/* price cards: liquid glass. Hairline edge only, specular sweep, refraction-like inner light */
#price .mini-out, #price .mini-fields {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.26) 100%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 1px 0 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    inset 0 0 40px rgba(255,255,255,0.10),
    0 30px 80px -30px rgba(0,0,0,0.55);
  backdrop-filter: blur(30px) saturate(180%) brightness(1.15); -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.15);
}
#price .mini-out::before, #price .mini-fields::before {   /* specular sweep across the top-left */
  content: ""; display: block; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    linear-gradient(118deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.12) 26%, rgba(255,255,255,0) 48%),
    radial-gradient(80% 60% at 100% 100%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
  -webkit-mask: none; mask: none; padding: 0;
}
#price .mini-out::after { display: none; }
#price .mini-out > *, #price .mini-fields > * { position: relative; z-index: 1; }
#price .mini-field {
  background: linear-gradient(135deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.18) 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 18px rgba(255,255,255,0.06);
}
#price .mini-field::before { background-color: rgba(255,255,255,0.34); border-color: rgba(255,255,255,0.40); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
#price .mini-field:focus-within { background: rgba(255,255,255,0.52); }

/* =====================================================================
   THE PRICE, final layout (reference): bright still, ink copy top-left, one wide glass bar along the foot, setup line beneath
   ===================================================================== */
#price { background: #E9E6E2; aspect-ratio: 2560 / 1378; }
#price .price-field::after { background: linear-gradient(90deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 60%); }
#price .price-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
#price > .wrap { display: flex; flex-direction: column; align-items: stretch; height: 100%; padding-top: clamp(40px, 7.5vw, 128px); padding-bottom: 36px; }
#price > .wrap > .kicker { color: var(--ink-dim); font-size: 13px; letter-spacing: 0.22em; display: flex; align-items: center; gap: 24px; }
#price > .wrap > .kicker::after { content: ""; width: 96px; height: 1px; background: rgba(52,53,57,0.35); }
#price .price-line { color: var(--ink); font-weight: 300; font-size: clamp(60px, 6.2vw, 108px); line-height: 1.0; letter-spacing: -0.03em; margin-top: 36px; }
#price .price-line em { font-weight: 400; display: block; letter-spacing: -0.03em; }
#price .price-note { color: var(--ink-2); font-weight: 300; font-size: clamp(1.05rem, 1.4vw, 1.45rem); line-height: 1.35; margin-top: 26px; max-width: 24ch; }
/* the bar */
#price .mini-calc {
  order: 0; margin-top: auto; position: relative; width: 100%;
  display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.1fr auto; align-items: center; gap: 0;
  padding: 36px 36px 36px 48px; border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.58) 50%, rgba(255,255,255,0.70) 100%);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.4), 0 40px 80px -30px rgba(40,40,45,0.45), 0 8px 24px -12px rgba(40,40,45,0.25);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  overflow: hidden;
}
#price .mini-calc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 1;
  background: linear-gradient(118deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 28%, rgba(255,255,255,0) 50%), radial-gradient(60% 70% at 92% 50%, rgba(245,96,28,0.10) 0%, rgba(245,96,28,0) 70%); }
#price .mini-calc > * { position: relative; z-index: 1; }
#price .mini-field { display: block; padding: 0 36px 0 0; margin-right: 36px; border: 0; border-right: 1px solid rgba(52,53,57,0.14); border-radius: 0; background: none; box-shadow: none; }
#price .mini-field::before { display: none; }
#price .mini-field label { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); margin-bottom: 14px; }
#price .mini-field select, #price .mini-field input {
  display: block; width: 100%; font-size: 1.15rem; font-weight: 400; color: var(--ink); padding: 16px 44px 16px 22px; border-radius: 14px;
  background-color: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,1); box-shadow: 0 1px 2px rgba(52,53,57,0.06), inset 0 1px 0 #fff;
}
#price .mini-field input { padding-right: 22px; }
#price .mini-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343539' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-position: right 18px center; background-size: 16px; }
#price .mini-field:focus-within { background: none; }
#price .mini-field select:focus, #price .mini-field input:focus { border-color: rgba(245,96,28,0.6); box-shadow: 0 0 0 3px rgba(245,96,28,0.14); }
/* the figure */
#price .mini-out { order: 0; display: block; padding: 0 24px 0 0; margin: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-align: left; border-radius: 0; overflow: visible; }
#price .mini-out::before, #price .mini-out::after { display: none; }
#price .mini-out-label { display: block; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
#price .mini-out .n { display: block; font-size: clamp(36px, 2.8vw, 48px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--orange); }
#price .mini-out .n .cur { color: var(--orange); font-weight: 700; }
#price .mini-out small { display: block; margin-top: 10px; font-size: 0.95rem; color: var(--ink-2); }
/* the arrow button */
#price .mini-calc .mini-cta-row { margin: 0; padding: 0; justify-content: flex-end !important; }
#price .mini-calc .mini-cta-row .btn { width: 96px; height: 96px; padding: 0; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 14px 34px -10px rgba(245,96,28,0.65); }
#price .mini-calc .mini-cta-row .btn::after { content: ""; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
#price .mini-calc .mini-cta-row .btn .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the setup line */
#price .assure { order: 1; margin: 44px auto 0; align-self: center; display: flex; align-items: center; gap: 24px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
#price .assure::before, #price .assure::after { content: ""; width: 120px; height: 1px; background: rgba(52,53,57,0.3); }
@media (max-width: 1020px) {
  #price { aspect-ratio: auto; }
  #price .mini-calc { grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px; }
  #price .mini-field { border-right: 0; padding: 0; margin: 0; }
  #price .mini-out { grid-column: 1 / -1; }
  #price .mini-calc .mini-cta-row { grid-column: 1 / -1; justify-content: center !important; }
  #price .assure { white-space: normal; text-align: center; }
  #price .assure::before, #price .assure::after { display: none; }
}
#price > .wrap { padding-bottom: 56px; }
#price .assure { margin-top: 52px; }
#price .price-note { max-width: 30ch; }
/* price copy: heading back to its previous size and weights; plain kicker, no rule */
#price > .wrap > .kicker { font-size: 16px; letter-spacing: 0.14em; display: block; }
#price > .wrap > .kicker::after { display: none; }
#price .price-line { font-size: clamp(56px, 4.6vw, 76px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.04; margin-top: 10px; }
#price .price-line em { font-weight: 500; letter-spacing: -0.02em; }
#price .price-note { font-size: 1.1rem; margin-top: 20px; max-width: 34ch; }
/* price: a soft white wash over the copy side so the wall reads evenly behind the type */
#price .price-field::after { background: linear-gradient(90deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.40) 26%, rgba(255,255,255,0.18) 44%, rgba(255,255,255,0) 60%); }
/* price heading and note aligned to the page's display scale (same as the proof, scale, reveal and door headings) */
#price .price-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(54px, 3.8vw, 73px); line-height: 1.0; letter-spacing: var(--track-display); color: var(--ink); margin-top: 12px; }
#price .price-line em { font-weight: 700; letter-spacing: var(--track-display); color: var(--orange); display: block; }
#price .price-note { font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 300; color: var(--ink-dim); margin-top: 24px; max-width: 34ch; }
#price .price-field::after { background: linear-gradient(90deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.16) 30%, rgba(255,255,255,0) 56%); }
/* price: clean plate supplied; no wash needed, section takes the plate's own proportion */
#price { aspect-ratio: 16 / 9; }
#price .price-field::after { background: none; }
#price .price-still { object-position: 50% 50%; }
/* price heading and note at the hero's sizes */
#price .price-line { font-size: clamp(72px, 5.47vw, 83px); line-height: 1.0; }
#price .price-note { font-size: 20.8px; font-weight: 300; margin-top: 24px; max-width: 30ch; }
/* price: soft white wash left to right behind the copy; card text stays ink on hover and focus */
#price .price-field::after { background: linear-gradient(90deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.30) 24%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 58%); }
#price .mini-calc:hover .mini-field label, #price .mini-calc:hover .mini-out small, #price .mini-calc:hover .mini-out-label,
#price .mini-calc:focus-within .mini-field label, #price .mini-calc:focus-within .mini-out small, #price .mini-calc:focus-within .mini-out-label { color: var(--ink-2); }
#price .mini-field select, #price .mini-field input,
#price .mini-field select:hover, #price .mini-field input:hover,
#price .mini-field select:focus, #price .mini-field input:focus,
#price .mini-calc:hover .mini-field select, #price .mini-calc:hover .mini-field input { color: var(--ink); background-color: rgba(255,255,255,0.92); }
#price .mini-calc:hover .mini-out .n, #price .mini-calc:hover .mini-out .n .cur { color: var(--orange); }
#price .price-field::after { background: linear-gradient(90deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.50) 26%, rgba(255,255,255,0.26) 44%, rgba(255,255,255,0.08) 56%, rgba(255,255,255,0) 64%); }
#price .price-note { color: var(--ink-2); }
#price .price-field::after {
  background: linear-gradient(90deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.78) 24%, rgba(255,255,255,0.50) 40%, rgba(255,255,255,0.16) 52%, rgba(255,255,255,0) 60%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, rgba(0,0,0,0) 60%); mask-image: linear-gradient(90deg, #000 0%, #000 36%, rgba(0,0,0,0) 60%);
}
/* price: softer wash, and the blur is a masked copy of the image (no backdrop-filter, so no seam while scrolling) */
#price .price-field::after { backdrop-filter: none; -webkit-backdrop-filter: none; -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.46) 24%, rgba(255,255,255,0.22) 42%, rgba(255,255,255,0) 56%); }
#price .price-still--soft { filter: blur(10px); transform: scale(1.03);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,0) 56%); mask-image: linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,0) 56%); }
/* price copy: centred in the space above the bar */
#price > .wrap { padding-top: 0; }
#price > .wrap > .kicker { margin-top: auto; }
#price .mini-calc { margin-top: auto; }
/* price plate zoomed, anchored to the top so her head keeps its headroom */
#price .price-still { transform: scale(1.15); transform-origin: 50% 0%; }
#price .price-still--soft { transform: scale(1.18); transform-origin: 50% 0%; }
/* price: the film, same framing as the still */
#price video.price-still { filter: none; }
#price .price-still--soft { filter: blur(10px); }
/* price: one video only; the soft layer is a pre-blurred still (no live blur filter, no second decode) */
#price .price-still--soft { filter: none; will-change: auto; }
#price video.price-still { will-change: transform; backface-visibility: hidden; }
/* price bar: liquid glass (near-clear tint, deep blur, hairline edge, specular sweep); smaller arrow button */
#price .mini-calc {
  background: linear-gradient(135deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.38) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 1px 0 0 rgba(255,255,255,0.3), inset 0 0 40px rgba(255,255,255,0.12), 0 36px 90px -30px rgba(40,40,45,0.45), 0 8px 24px -12px rgba(40,40,45,0.2);
  backdrop-filter: blur(28px) saturate(170%) brightness(1.08); -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.08);
}
#price .mini-calc::before { background: linear-gradient(118deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0) 50%), radial-gradient(60% 70% at 92% 50%, rgba(245,96,28,0.08) 0%, rgba(245,96,28,0) 70%); }
#price .mini-field { border-right-color: rgba(52,53,57,0.12); }
#price .mini-field select, #price .mini-field input,
#price .mini-field select:hover, #price .mini-field input:hover, #price .mini-field select:focus, #price .mini-field input:focus,
#price .mini-calc:hover .mini-field select, #price .mini-calc:hover .mini-field input {
  background-color: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(52,53,57,0.05);
}
#price .mini-field select:focus, #price .mini-field input:focus { border-color: rgba(245,96,28,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(245,96,28,0.14); }
#price .mini-calc .mini-cta-row .btn { width: 64px; height: 64px; box-shadow: 0 10px 26px -10px rgba(245,96,28,0.6); }
#price .mini-calc .mini-cta-row .btn::after { width: 20px; height: 20px; }
#price .mini-calc .mini-cta-row .btn:hover { transform: translateY(-1px) scale(1.04); }
/* price bar: clearer glass. Less tint, lighter blur, stronger edge light and refraction highlights */
#price .mini-calc {
  background: linear-gradient(135deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.20) 100%);
  border: 1px solid rgba(255,255,255,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 1px 0 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(255,255,255,0.25), inset 0 0 60px rgba(255,255,255,0.08), 0 36px 90px -30px rgba(40,40,45,0.5);
  backdrop-filter: blur(14px) saturate(180%) brightness(1.04); -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.04);
}
#price .mini-calc::before {
  background:
    linear-gradient(112deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 30%),
    radial-gradient(60% 70% at 92% 50%, rgba(245,96,28,0.07) 0%, rgba(245,96,28,0) 70%);
}
#price .mini-field select, #price .mini-field input,
#price .mini-field select:hover, #price .mini-field input:hover,
#price .mini-calc:hover .mini-field select, #price .mini-calc:hover .mini-field input {
  background-color: rgba(255,255,255,0.40); border: 1px solid rgba(255,255,255,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
#price .mini-field select:focus, #price .mini-field input:focus { background-color: rgba(255,255,255,0.62); }
#price .mini-field label, #price .mini-out-label, #price .mini-out small { color: var(--ink); }
/* a soft lift under the price column so it reads over the dark part of the film */
#price .mini-out { position: relative; }
#price .mini-out::before { content: ""; display: block; position: absolute; inset: -18px -20px -18px -28px; border-radius: 20px; z-index: -1;
  background: radial-gradient(70% 80% at 40% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.30) 55%, rgba(255,255,255,0) 100%); filter: blur(6px); }

/* price: the figure floats above the bar as hero text; the bar holds the three fields and the arrow */
#price .mini-out { order: 0; margin: auto auto 28px; padding: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; }
#price .mini-out::before { display: none; }
#price .mini-out-label { display: flex; align-items: center; gap: 18px; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); margin: 0; }
#price .mini-out-label::before, #price .mini-out-label::after { content: ""; width: 120px; height: 1px; background: rgba(52,53,57,0.3); }
#price .mini-out .n { font-size: clamp(88px, 7.2vw, 124px); line-height: 1; font-weight: 700; letter-spacing: -0.035em; color: var(--orange); }
#price .mini-out .n .cur { color: rgba(52,53,57,0.72); font-weight: 300; letter-spacing: -0.03em; }
#price .mini-out small { margin: 4px 0 0; font-size: 0.95rem; color: var(--ink-2); }
#price > .wrap > .kicker { margin-top: auto; }
#price .price-note { margin-bottom: 0; }
#price .mini-calc { margin-top: 0; grid-template-columns: 1fr 1fr 1fr auto; padding: 28px 28px 28px 40px; }
#price .mini-field { padding-right: 32px; margin-right: 32px; }
#price .mini-field:nth-child(3) { border-right: 1px solid rgba(52,53,57,0.12); }
#price .mini-calc .mini-cta-row { padding-left: 4px; }
@media (max-width: 1020px) { #price .mini-out .n { font-size: clamp(56px, 12vw, 88px); } #price .mini-out-label::before, #price .mini-out-label::after { width: 48px; } }
/* the figure reads over the film: a soft light pool behind it, and the label sits closer */
#price .mini-out { position: relative; padding: 18px 48px 6px; }
#price .mini-out::before { content: ""; display: block; position: absolute; inset: -10px -40px; border-radius: 50%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%); filter: blur(10px); }
#price .mini-out .n { text-shadow: 0 2px 24px rgba(255,255,255,0.6); }
#price .mini-out-label { color: var(--ink); }
#price .mini-out small { color: var(--ink); }
#price .mini-out::before { display: none; }
#price .mini-out .n { text-shadow: none; }
/* price: dark grade on the left (hero style), white copy over it */
#price .price-field::after { background: linear-gradient(90deg, rgba(10,12,16,0.82) 0%, rgba(10,12,16,0.66) 24%, rgba(10,12,16,0.34) 44%, rgba(10,12,16,0.08) 58%, rgba(10,12,16,0) 66%); }
#price > .wrap > .kicker { color: rgba(255,255,255,0.66); }
#price .price-line { color: #fff; }
#price .price-note { color: rgba(255,255,255,0.82); }
#price .mini-out-label { color: rgba(255,255,255,0.85); }
#price .mini-out-label::before, #price .mini-out-label::after { background: rgba(255,255,255,0.45); }
#price .mini-out .n .cur { color: rgba(255,255,255,0.88); }
#price .mini-out small { color: rgba(255,255,255,0.85); }
#price .assure { color: rgba(255,255,255,0.78); }
#price .assure::before, #price .assure::after { background: rgba(255,255,255,0.4); }
/* bar over the dark grade: white type, darker glass fields */
#price .mini-field label { color: rgba(255,255,255,0.8); }
#price .mini-field { border-right-color: rgba(255,255,255,0.18); }
#price .mini-field select, #price .mini-field input,
#price .mini-field select:hover, #price .mini-field input:hover,
#price .mini-calc:hover .mini-field select, #price .mini-calc:hover .mini-field input,
#price .mini-field select:focus, #price .mini-field input:focus {
  color: #fff; background-color: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); color-scheme: dark;
}
#price .mini-field select:focus, #price .mini-field input:focus { border-color: rgba(245,96,28,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 3px rgba(245,96,28,0.18); }
#price .mini-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
#price .mini-field select option { color: var(--ink); background: #fff; }
#price .mini-calc { background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.14) 100%); border-color: rgba(255,255,255,0.42); }
#price .mini-calc:hover .mini-field label { color: rgba(255,255,255,0.8); }

/* =====================================================================
   THE PRICE, layout pass: one column reads claim → terms → proof; the film owns the right; controls along the foot
   ===================================================================== */
#price > .wrap { padding-bottom: 48px; }
#price > .wrap > .kicker { margin-top: auto; }
#price .price-line { font-size: clamp(64px, 4.9vw, 76px); }
#price .price-note { margin-top: 18px; }
#price .mini-out {
  margin: 36px 0 auto; padding: 28px 0 0; align-items: flex-start; text-align: left; gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.22); width: min(100%, 560px);
}
#price .mini-out-label { gap: 0; font-size: 0.74rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.62); }
#price .mini-out-label::before, #price .mini-out-label::after { display: none; }
#price .mini-out .n { font-size: clamp(72px, 5.9vw, 92px); letter-spacing: -0.035em; line-height: 0.95; }
#price .mini-out .n .cur { color: rgba(255,255,255,0.82); }
#price .mini-out small { margin-top: 2px; font-size: 1rem; color: rgba(255,255,255,0.72); }
#price .mini-calc { margin-top: 40px; }
#price .price-field::after { background: linear-gradient(90deg, rgba(10,12,16,0.84) 0%, rgba(10,12,16,0.70) 26%, rgba(10,12,16,0.40) 46%, rgba(10,12,16,0.10) 60%, rgba(10,12,16,0) 68%); }
@media (max-width: 1020px) { #price .mini-out { width: 100%; } #price .mini-out .n { font-size: clamp(56px, 12vw, 80px); } }
#price .mini-out { margin-bottom: 0; }
#price .mini-calc { margin-top: auto; }
#price video.price-still { transform: scale(1.28); transform-origin: 50% 0%; }
/* price bar: type is always white, in every state; a dark grade rises from the foot so the bar reads over the bright floor */
#price .mini-field label, #price .mini-calc:hover .mini-field label, #price .mini-calc:focus-within .mini-field label,
#price .mini-field:focus-within label { color: #fff !important; }
#price .mini-field select, #price .mini-field input,
#price .mini-field select:hover, #price .mini-field input:hover,
#price .mini-field select:focus, #price .mini-field input:focus,
#price .mini-field select:active, #price .mini-field input:active,
#price .mini-calc:hover .mini-field select, #price .mini-calc:hover .mini-field input { color: #fff !important; -webkit-text-fill-color: #fff; }
#price .mini-field input::placeholder { color: rgba(255,255,255,0.6); }
#price .mini-field input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: inset 0 0 0 1000px rgba(40,44,50,0.6); }
#price .mini-field select option { color: #343539; background: #fff; }
#price .mini-field select, #price .mini-field input,
#price .mini-field select:hover, #price .mini-field input:hover,
#price .mini-calc:hover .mini-field select, #price .mini-calc:hover .mini-field input,
#price .mini-field select:focus, #price .mini-field input:focus { background-color: rgba(20,22,26,0.34); border-color: rgba(255,255,255,0.30); }
#price .mini-calc { background: linear-gradient(135deg, rgba(20,22,26,0.30) 0%, rgba(20,22,26,0.16) 50%, rgba(20,22,26,0.26) 100%); border-color: rgba(255,255,255,0.36); }
#price .mini-calc::before { background: linear-gradient(112deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 18%, rgba(255,255,255,0) 36%), linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 30%); }
#price .price-field { isolation: isolate; }
#price .price-field::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,16,0) 52%, rgba(10,12,16,0.30) 72%, rgba(10,12,16,0.62) 100%); }

/* =====================================================================
   THE REVEAL, second pass: devices on a dark stage (left), copy (right), the owned systems as floating glass cards
   ===================================================================== */
#reveal { background: #14171C; padding: 112px 0 120px; overflow: hidden; }
#reveal .amb { display: none; }
#reveal::before, #reveal::after { display: none; }
#reveal .reveal-field { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #1B1E23 0%, #2A3038 42%, #3B4858 100%); }
#reveal .reveal-field::before { content: ""; position: absolute; inset: -20%;
  background: radial-gradient(42% 46% at 28% 36%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%), radial-gradient(38% 40% at 78% 74%, rgba(170,190,210,0.12) 0%, rgba(170,190,210,0) 70%);
  animation: proofLight 26s ease-in-out infinite alternate; }
#reveal .reveal-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;   /* the reflective floor */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%); }
#reveal .wrap { position: relative; z-index: 1; }
#reveal .reveal-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; margin-top: 0; }
/* copy */
#reveal .reveal-copy > div { background: none; border: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#reveal .reveal-copy .h-display { font-size: clamp(48px, 3.4vw, 64px); max-width: 16ch; }
#reveal .reveal-copy .owned-note { margin-top: 22px; }
#reveal .reveal-couplet { margin-top: 36px; font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
#reveal .name-line { margin-top: 20px; padding-top: 18px; font-size: 1rem; }
/* stage */
#reveal .reveal-stage { position: relative; aspect-ratio: 1 / 0.86; min-height: 520px; }
#reveal .rv-devices { position: absolute; inset: 0; }
#reveal .rv-laptop { position: absolute; left: 4%; right: 10%; top: 12%; aspect-ratio: 1200 / 789; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6)); }
#reveal .rv-laptop img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#reveal .rv-laptop-lid { position: absolute; inset: 0; }
#reveal .rv-laptop-screen { left: 10.1% !important; top: 3.3% !important; width: 79.6% !important; height: 76% !important; object-fit: cover; object-position: top; border-radius: 6px; }
#reveal .rv-phone { position: absolute; right: 2%; bottom: 6%; width: 21%; aspect-ratio: 886 / 1831;
  background: #0d0f12; border-radius: 15% / 7.3%; padding: 3.2%; box-shadow: inset 0 0 0 2px #3a3d43, inset 0 0 0 3px rgba(255,255,255,0.18), 0 40px 70px rgba(0,0,0,0.65); }
#reveal .rv-phone::before { content: ""; position: absolute; left: 50%; top: 4.2%; width: 30%; height: 3.2%; transform: translateX(-50%); background: #0d0f12; border-radius: 999px; z-index: 2; }
#reveal .rv-phone-screen { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 12% / 5.8%; display: block; }
/* reflection */
#reveal .rv-devices::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10%; height: 22%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%); filter: blur(14px); transform: scaleY(-1); opacity: 0.6; }
/* the owned systems: floating glass cards around the devices */
#reveal .owned { position: absolute; inset: 0; max-width: none; gap: 0; display: block; pointer-events: none; }
#reveal .owned span {
  position: absolute; pointer-events: auto; font-size: 0.9rem; padding: 12px 18px; border-radius: 14px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), inset 1px 0 0 rgba(255,255,255,0.14), 0 24px 50px -20px rgba(0,0,0,0.7);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  transform: translateY(18px) scale(0.96); transition: opacity 700ms var(--ease-out), transform 900ms cubic-bezier(0.16,1,0.3,1), box-shadow 400ms var(--ease-out);
}
#reveal .owned span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(245,96,28,0.18); }
#reveal .reveal-stage.in .owned span { opacity: 1; transform: none; }
#reveal .owned span:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 30px 60px -20px rgba(0,0,0,0.8); }
#reveal .reveal-stage.in .owned span:nth-child(1) { transition-delay: 150ms; } #reveal .reveal-stage.in .owned span:nth-child(2) { transition-delay: 240ms; }
#reveal .reveal-stage.in .owned span:nth-child(3) { transition-delay: 330ms; } #reveal .reveal-stage.in .owned span:nth-child(4) { transition-delay: 420ms; }
#reveal .reveal-stage.in .owned span:nth-child(5) { transition-delay: 510ms; } #reveal .reveal-stage.in .owned span:nth-child(6) { transition-delay: 600ms; }
#reveal .reveal-stage.in .owned span:nth-child(7) { transition-delay: 690ms; } #reveal .reveal-stage.in .owned span:nth-child(8) { transition-delay: 780ms; }
#reveal .owned span:nth-child(1) { left: -4%; top: 6%; }       /* LMS */
#reveal .owned span:nth-child(2) { left: 46%; top: -2%; }      /* LXP */
#reveal .owned span:nth-child(3) { right: -2%; top: 14%; }     /* SharePoint */
#reveal .owned span:nth-child(4) { left: -6%; top: 40%; }      /* policies */
#reveal .owned span:nth-child(5) { right: -6%; top: 46%; }     /* frameworks */
#reveal .owned span:nth-child(6) { left: 2%; top: 72%; }       /* experts */
#reveal .owned span:nth-child(7) { left: 36%; bottom: 2%; }    /* comms */
#reveal .owned span:nth-child(8) { right: 20%; bottom: -4%; }  /* strategy */
/* the devices rise in with the stage */
#reveal .rv-devices { opacity: 0; transform: translateY(28px) scale(0.97); transition: opacity 900ms var(--ease-out), transform 1200ms cubic-bezier(0.16,1,0.3,1); }
#reveal .reveal-stage.in .rv-devices { opacity: 1; transform: none; }
@media (max-width: 1020px) {
  #reveal .reveal-grid { grid-template-columns: 1fr; row-gap: 48px; }
  #reveal .reveal-stage { min-height: 0; aspect-ratio: 1 / 0.95; }
  #reveal .owned span { font-size: 0.8rem; padding: 9px 13px; }
}
#reveal .reveal-grid > .reveal-copy { background: none; border: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
#reveal .owned span:nth-child(5) { right: -4%; top: 34%; }     /* frameworks: clear of the phone */
#reveal .owned span:nth-child(3) { right: 6%; top: 10%; }      /* SharePoint */
#reveal .owned span:nth-child(8) { right: 26%; bottom: -2%; }  /* strategy */
#reveal .rv-phone { right: 4%; }
#reveal .reveal-grid > div.reveal-copy:last-child, #reveal .reveal-grid > div:last-child.reveal-copy { background: none; border: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
@media (max-width: 1020px) { #reveal .reveal-grid > div:last-child.reveal-copy { padding: 0; } }

/* =====================================================================
   THE REVEAL, third pass: real iPhone frame, both devices standing on one glossy floor with true reflections,
   glass cards overlapping the devices, heading in caps
   ===================================================================== */
#reveal .reveal-copy .h-display { text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.02; max-width: 15ch; }
#reveal .reveal-stage { aspect-ratio: 1 / 0.9; }
#reveal .rv-devices::after { display: none; }
/* the floor line both devices stand on: 70% down the stage */
#reveal .rv-devices::before { content: ""; position: absolute; left: -6%; right: -6%; top: 70%; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 30%, rgba(255,255,255,0.16) 70%, rgba(255,255,255,0) 100%); }
#reveal .rv-laptop {
  left: 0; right: auto; width: 84%; top: auto; bottom: 30%;
  filter: none;
  -webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(0,0,0,0) 62%, rgba(0,0,0,0.30) 100%);
}
#reveal .rv-laptop-base { filter: drop-shadow(0 24px 30px rgba(0,0,0,0.55)); }
#reveal .rv-phone {
  right: 4%; bottom: 30%; width: 22%; aspect-ratio: 760 / 1570;
  background: none; padding: 0; border-radius: 0; box-shadow: none;
  -webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(0,0,0,0) 58%, rgba(0,0,0,0.32) 100%);
}
#reveal .rv-phone::before { display: none; }
#reveal .rv-phone-screen { position: absolute; left: 2.8%; top: 1.1%; width: 94%; height: 97.8%; border-radius: 13% / 6.3%; }
#reveal .rv-phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
/* the glass cards sit over the devices */
#reveal .owned { z-index: 2; }
#reveal .owned span { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.30); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
#reveal .owned span:nth-child(1) { left: -3%; right: auto; top: 10%; bottom: auto; }    /* LMS: over the lid's top-left */
#reveal .owned span:nth-child(2) { left: 34%; right: auto; top: 1%; bottom: auto; }     /* LXP: over the top bezel */
#reveal .owned span:nth-child(3) { left: 52%; right: auto; top: 22%; bottom: auto; }    /* SharePoint: on the screen */
#reveal .owned span:nth-child(4) { left: -5%; right: auto; top: 36%; bottom: auto; }    /* policies: left edge of the screen */
#reveal .owned span:nth-child(5) { left: auto; right: -4%; top: 30%; bottom: auto; }    /* frameworks: over the phone's top */
#reveal .owned span:nth-child(6) { left: 8%; right: auto; top: 58%; bottom: auto; }     /* experts: over the keyboard */
#reveal .owned span:nth-child(7) { left: 30%; right: auto; top: 46%; bottom: auto; }    /* comms: lower screen */
#reveal .owned span:nth-child(8) { left: auto; right: 10%; top: 60%; bottom: auto; }    /* strategy: over the phone's foot */
@media (max-width: 1020px) { #reveal .owned span:nth-child(1), #reveal .owned span:nth-child(4) { left: 0; } #reveal .owned span:nth-child(5) { right: 0; } }
/* reveal: heading breaks after "owned"; glass cards only around the laptop's edges, never over the middle of the screen */
#reveal .reveal-copy .h-display { max-width: none; }
#reveal .owned span:nth-child(2) { left: 24%; top: 1%; }       /* LXP: top bezel, left */
#reveal .owned span:nth-child(3) { left: 54%; top: 4%; }       /* SharePoint: top bezel, right */
#reveal .owned span:nth-child(7) { left: 36%; top: 63%; }      /* comms: front edge of the base */
#reveal .reveal-copy .h-display { font-size: clamp(42px, 3.2vw, 58px); }
/* reveal heading: second line in Roboto Condensed Thin, as the hero's thin lines */
#reveal .reveal-copy .h-display .h-thin { font-weight: 100; letter-spacing: 0.02em; }

/* reveal: the Builder UI in the laptop, with its panels flowing out past the bezel */
#reveal .rv-laptop { left: 15%; width: 64%; }
#reveal .rv-laptop-screen { object-position: center !important; }
#reveal .rv-laptop img.rv-ui-pieces {
  position: absolute; inset: auto; left: -22.91%; top: -25.29%; width: 145.68%; height: auto; max-width: none; z-index: 2;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
}
#reveal .rv-phone { right: 0; width: 17%; z-index: 3; }
/* reveal: larger laptop, phone to the front right, the glass tiles placed around the Builder's flowing panels */
#reveal .rv-laptop { left: 10%; width: 72%; }
#reveal .rv-phone { right: -6%; width: 17%; }
#reveal .owned span:nth-child(1) { left: 1%;  right: auto; top: 6%;  bottom: auto; }   /* LMS: above the left-top panel */
#reveal .owned span:nth-child(2) { left: 30%; right: auto; top: 3%;  bottom: auto; }   /* LXP: top edge */
#reveal .owned span:nth-child(3) { left: 58%; right: auto; top: 5%;  bottom: auto; }   /* SharePoint: above the charter panel */
#reveal .owned span:nth-child(4) { left: -5%; right: auto; top: 36%; bottom: auto; }   /* policies: between the left panels */
#reveal .owned span:nth-child(5) { left: auto; right: -5%; top: 22%; bottom: auto; }   /* frameworks: beside the charter panel */
#reveal .owned span:nth-child(6) { left: 2%;  right: auto; top: 66%; bottom: auto; }   /* experts: under the content store panel */
#reveal .owned span:nth-child(7) { left: 33%; right: auto; top: 74%; bottom: auto; }   /* comms: in front of the base */
#reveal .owned span:nth-child(8) { left: 60%; right: auto; top: 66%; bottom: auto; }   /* strategy: under the builder-steps panel */

/* reveal: the owned systems back to pills, in a row beneath the devices; panels without the soft shadow halo */
#reveal .rv-laptop img.rv-ui-pieces { filter: none; }
#reveal .owned {
  position: absolute; left: 0; right: 0; top: auto; bottom: 0; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: none; pointer-events: auto;
}
#reveal .owned span,
#reveal .owned span:nth-child(n) { position: static; left: auto; right: auto; top: auto; bottom: auto;
  border-radius: 999px; padding: 9px 16px; font-size: 0.85rem; }
#reveal .owned span::before { width: 6px; height: 6px; margin-right: 8px; }
#reveal .owned span:hover { transform: translateY(-2px); }

/* reveal: the iMac mockup (background removed, glass panels kept translucent) standing on the floor; pills beneath */
#reveal .reveal-stage { aspect-ratio: 1 / 0.92; }
#reveal .rv-devices::before { top: 79%; }
#reveal .rv-imac { position: absolute; left: -4%; width: 108%; bottom: 21%; display: block;
  -webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(0,0,0,0) 78%, rgba(0,0,0,0.22) 100%); }
#reveal .rv-imac img { display: block; width: 100%; height: auto; }
#reveal .owned { bottom: 0; }
/* reveal: more room above the iMac */
#reveal { padding-top: 176px; }

/* reveal: iMac as layers. The panels pop off the screen in turn as the stage comes into view */
#reveal .rv-imac picture, #reveal .rv-imac img { display: block; }
#reveal .rv-imac-base img { width: 100%; height: auto; }
#reveal .rv-panel { position: absolute; z-index: 2; }
#reveal .rv-panel img { width: 100%; height: auto; }
#reveal .rv-panel--lt { left: 1.636%; top: 3.728%; width: 16.576%; transform-origin: 85% 80%; }
#reveal .rv-panel--lb { left: 0.654%; top: 56.675%; width: 25.082%; transform-origin: 85% 20%; }
#reveal .rv-panel--rt { left: 83.206%; top: 0.907%; width: 14.904%; transform-origin: 15% 80%; }
#reveal .rv-panel--rb { left: 82.806%; top: 39.496%; width: 16.612%; transform-origin: 15% 20%; }
#reveal .rv-panel { opacity: 0; transform: scale(0.82) translateY(16px); filter: blur(4px);
  transition: opacity 420ms var(--ease-out), transform 760ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 500ms var(--ease-out); }
#reveal .reveal-stage.pop .rv-panel { opacity: 1; transform: none; filter: none; }
#reveal .reveal-stage.pop .rv-panel--lt { transition-delay: 350ms; }
#reveal .reveal-stage.pop .rv-panel--rt { transition-delay: 520ms; }
#reveal .reveal-stage.pop .rv-panel--rb { transition-delay: 690ms; }
#reveal .reveal-stage.pop .rv-panel--lb { transition-delay: 860ms; }
@media (prefers-reduced-motion: reduce) { #reveal .rv-panel { transition: none; opacity: 1; transform: none; filter: none; } }

/* =====================================================================
   SECTION HEADINGS IN THE HERO'S STYLE: Roboto Condensed caps at the hero's size,
   a bold orange lead line and thin lines beneath (white on dark sections, ink on light)
   ===================================================================== */
.h-hero, #reveal .reveal-copy .h-display.h-hero, #price .price-line.h-hero, .door .h-display.h-hero, #proof .h-display.h-hero, #scale .h-display.h-hero {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 300;
  font-size: clamp(72px, 5.47vw, 83px); line-height: 1.04; letter-spacing: 0.005em; max-width: none; white-space: normal;
}
.h-hero .h-lead { font-weight: 700; color: var(--orange); letter-spacing: -0.012em; display: inline; font-style: normal; }
.h-hero .h-rest { font-weight: 300; font-size: 0.86em; letter-spacing: 0.03em; display: inline-block; line-height: 1.04; margin-top: 0.04em; }
/* thin lines: white on the dark sections, ink on the light ones */
#reveal .h-hero .h-rest, #price .h-hero .h-rest, .door .h-hero .h-rest { color: #fff; }
#scale .h-hero .h-rest, #proof .h-hero .h-rest { color: var(--ink); }
#price .price-line.h-hero em { display: inline; }
/* reveal: give the copy column room for the hero-size lead line */
#reveal .reveal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 72px); }
#reveal .h-hero .h-lead, .h-hero .h-lead { white-space: nowrap; }
#reveal .reveal-grid { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); }

/* =====================================================================
   EVERY SECTION FILLS THE SCREEN: at least one viewport tall, content centred, generous padding top and bottom
   ===================================================================== */
#reveal, #scale, #proof, .door {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(112px, 14vh, 168px); padding-bottom: clamp(96px, 12vh, 152px);
  box-sizing: border-box;
}
#reveal > .wrap, #scale > .wrap, #proof > .wrap, .door > .wrap { width: 100%; }
#price { min-height: 100vh; min-height: 100svh; aspect-ratio: auto; }
#price > .wrap { padding-top: clamp(112px, 14vh, 168px); padding-bottom: clamp(48px, 7vh, 88px); min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
@media (max-width: 1020px) {
  #reveal, #scale, #proof, .door { padding-top: 96px; padding-bottom: 88px; }
}
#proof.act { padding-top: clamp(112px, 14vh, 168px); padding-bottom: clamp(96px, 12vh, 152px); }
#price > .wrap { padding-bottom: clamp(72px, 9vh, 112px); }
/* reveal: true 50/50 split; heading scaled to fit its half */
#reveal .reveal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 4vw, 80px); }
#reveal .rv-imac { left: 0; width: 100%; }
#reveal .reveal-copy .h-display.h-hero { font-size: clamp(52px, 4.1vw, 72px); }
#reveal .rv-devices::before { display: none; }

/* reveal motion, smoother: compositor-only properties, no blur, gentle easing, panels follow the iMac as it settles */
#reveal .rv-imac { -webkit-box-reflect: none; }
#reveal .rv-imac-base { -webkit-box-reflect: below 0 linear-gradient(to bottom, rgba(0,0,0,0) 78%, rgba(0,0,0,0.22) 100%); }
#reveal .rv-devices {
  opacity: 0; transform: translate3d(0, 40px, 0) scale(0.975);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity; backface-visibility: hidden;
}
#reveal .reveal-stage.in .rv-devices { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
#reveal .rv-panel {
  opacity: 0; filter: none; transform: translate3d(0, 14px, 0) scale(0.9);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 1100ms cubic-bezier(0.18, 1.18, 0.4, 1);
  will-change: transform, opacity; backface-visibility: hidden;
}
#reveal .reveal-stage.pop .rv-panel { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }
#reveal .reveal-stage.pop .rv-panel--lt { transition-delay: 700ms; }
#reveal .reveal-stage.pop .rv-panel--rt { transition-delay: 880ms; }
#reveal .reveal-stage.pop .rv-panel--rb { transition-delay: 1060ms; }
#reveal .reveal-stage.pop .rv-panel--lb { transition-delay: 1240ms; }
/* leaving: panels fade out quickly together so the replay starts clean */
#reveal .reveal-stage:not(.pop) .rv-panel { transition-duration: 250ms, 250ms; transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { #reveal .rv-devices, #reveal .rv-panel { transition: none; opacity: 1; transform: none; } }

/* scale-section laptop: smoother lid. Composited layers, no edge-on start, softer easing, the console video kept on its own layer */
.laptop-stage .laptop { will-change: transform, opacity; transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.laptop--photo .laptop-lid {
  transform: rotateX(-78deg); opacity: 0;
  transition: transform 1700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.laptop-stage.lid-open .laptop--photo .laptop-lid { transform: rotateX(0deg); opacity: 1; transition-delay: 150ms, 150ms; }
.laptop--photo .laptop-screen { transform: translateZ(0.1px); backface-visibility: hidden; }
.laptop--photo img.laptop-base { transform: translateZ(0); }
/* the card's hover lift no longer re-rasterises the 3D lid */
.duo-card:not(.duo-card--companion) { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .laptop--photo .laptop-lid { transition: none; transform: none; opacity: 1; } }

/* =====================================================================
   PRICE FIELDS: glass-over-orange icon tiles (placeholder art), white line icons
   ===================================================================== */
#price .mini-field { position: relative; padding-left: 74px; }
#price .mini-field::before, #price .mini-field::after { content: ""; display: block; position: absolute; top: 50%; border-radius: 14px; pointer-events: none; }
/* the orange tile behind, tilted */
#price .mini-field::before {
  left: 0; width: 42px; height: 42px; margin-top: -30px; transform: rotate(-14deg);
  background: linear-gradient(150deg, #FF8A55 0%, #F5601C 48%, #C9420B 100%);
  box-shadow: 0 6px 14px -6px rgba(245,96,28,0.55);
}
/* the frosted glass tile in front, carrying the white icon */
#price .mini-field::after {
  left: 12px; width: 46px; height: 46px; margin-top: -18px;
  background-color: rgba(255,255,255,0.16);
  background-repeat: no-repeat; background-position: center; background-size: 24px 24px;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 1px 0 0 rgba(255,255,255,0.3), 0 10px 22px -10px rgba(0,0,0,0.5);
  backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%);
}
/* industry: a sawtooth roofline, the shape of working industry rather than an office block */
#price .mini-field:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V10l5 3.2V10l5 3.2V10l5 3.2V5.5h3V20z'/%3E%3Cpath d='M7 20v-3h3v3M14 17h3'/%3E%3C/svg%3E"); }
/* people: a cohort, three heads rising along one shared arc */
#price .mini-field:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='13' r='2'/%3E%3Ccircle cx='12' cy='9.5' r='2.4'/%3E%3Ccircle cx='19' cy='6' r='2.8'/%3E%3Cpath d='M2.5 20.5c3.2-3.4 7-5.1 11.4-5.1 2.9 0 5.4.7 7.6 2'/%3E%3C/svg%3E"); }
/* currency: two coins with an exchange arc between them */
#price .mini-field:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Ccircle cx='16.5' cy='8.5' r='4.5'/%3E%3Cpath d='M16.5 6.6v3.8M6 15.5h3'/%3E%3Cpath d='M4.5 8.5a6 6 0 0 1 5-4.4M8 3l1.6 1.1L8.6 5.8'/%3E%3Cpath d='M19.5 15.5a6 6 0 0 1-5 4.4M16 21l-1.6-1.1 1-1.7'/%3E%3C/svg%3E"); }
#price .mini-field:focus-within::after { border-color: rgba(255,255,255,0.85); background-color: rgba(255,255,255,0.24); }
@media (max-width: 1020px) { #price .mini-field { padding-left: 70px; } }
/* the orange back tile: beat the older per-field rules (same specificity, later wins) */
#price .mini-field:nth-child(1)::before, #price .mini-field:nth-child(2)::before, #price .mini-field:nth-child(3)::before {
  background: linear-gradient(150deg, #FF8A55 0%, #F5601C 48%, #C9420B 100%); border: 0;
  box-shadow: 0 6px 14px -6px rgba(245,96,28,0.55); grid-row: auto; display: block;
}
#price .mini-field::after { background-size: 26px 26px; }
/* currency, simplified: two coins and one exchange arc */
#price .mini-field:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='5'/%3E%3Ccircle cx='16' cy='9' r='5'/%3E%3Cpath d='M3.5 7.5A6.5 6.5 0 0 1 9 3'/%3E%3Cpath d='M7.2 1.8 9 3 7.8 4.8'/%3E%3C/svg%3E"); }
/* price fields: icon tile sits beside the label, above the dropdown */
#price .mini-field { padding-left: 0; }
#price .mini-field label { display: flex; align-items: center; min-height: 52px; padding-left: 66px; margin-bottom: 12px; }
#price .mini-field::before { top: 6px; margin-top: 0; }
#price .mini-field::after { top: 4px; margin-top: 0; width: 44px; height: 44px; }
/* currency: a dollar sign */
#price .mini-field:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19'/%3E%3Cpath d='M16.5 6.5c-.9-1.4-2.6-2.2-4.5-2.2-2.6 0-4.4 1.4-4.4 3.4 0 4.6 9.2 2.6 9.2 7.8 0 2.1-2 3.6-4.8 3.6-2.1 0-3.9-.9-4.8-2.4'/%3E%3C/svg%3E"); }
@media (max-width: 1020px) { #price .mini-field { padding-left: 0; } }
/* reveal: pills without the dots; a tight contact shadow under the iMac's foot instead of the old blob */
#reveal .owned span::before { display: none; content: none; }
#reveal .rv-imac::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 34%; width: 30%; top: 97.2%; height: 3.6%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0) 100%);
  filter: blur(4px);
}
#reveal .rv-imac-base { position: relative; z-index: 1; }

/* =====================================================================
   THE DOOR: the meeting photograph behind, a centred dark grade so the white type reads
   ===================================================================== */
.door { position: relative; isolation: isolate; background: #14171C; }
.door::before { display: none; }
.door .door-photo { position: absolute; inset: 0; z-index: -2; }
.door .door-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.door::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 1; mix-blend-mode: normal; background:
  radial-gradient(62% 58% at 50% 50%, rgba(12,14,18,0.78) 0%, rgba(12,14,18,0.62) 55%, rgba(12,14,18,0.48) 100%),
  linear-gradient(180deg, rgba(12,14,18,0.55) 0%, rgba(12,14,18,0.15) 30%, rgba(12,14,18,0.25) 70%, rgba(12,14,18,0.7) 100%); }
.door .wrap { text-align: center; }
.door .lede { max-width: 46ch; color: rgba(255,255,255,0.86); }
.door .door-assure { display: block; margin-top: 6px; color: rgba(255,255,255,0.72); }
@media (prefers-reduced-motion: reduce) { .door::after { animation: none; } }
.door .lede { max-width: none; }
.door .door-assure { display: inline; margin: 0; color: rgba(255,255,255,0.86); }
/* door: lift the copy into the bright window band of the photo */
.door { padding-top: clamp(96px, 11vh, 132px); padding-bottom: clamp(220px, 30vh, 340px); }
.door .door-photo img { object-position: 50% 62%; }
.door::after { background:
  radial-gradient(60% 46% at 50% 38%, rgba(12,14,18,0.74) 0%, rgba(12,14,18,0.58) 55%, rgba(12,14,18,0.42) 100%),
  linear-gradient(180deg, rgba(12,14,18,0.5) 0%, rgba(12,14,18,0.12) 30%, rgba(12,14,18,0.2) 70%, rgba(12,14,18,0.62) 100%); }
.door { justify-content: flex-start; padding-top: clamp(112px, 13vh, 150px); padding-bottom: clamp(220px, 30vh, 340px); }
.door::after { background:
  radial-gradient(60% 42% at 50% 30%, rgba(12,14,18,0.74) 0%, rgba(12,14,18,0.58) 55%, rgba(12,14,18,0.42) 100%),
  linear-gradient(180deg, rgba(12,14,18,0.5) 0%, rgba(12,14,18,0.12) 30%, rgba(12,14,18,0.2) 70%, rgba(12,14,18,0.62) 100%); }
.door { padding-top: clamp(140px, 16vh, 180px); }

/* =====================================================================
   FOOTER: dark, flowing straight out of the closing photograph
   ===================================================================== */
.door::after { background:
  radial-gradient(60% 42% at 50% 30%, rgba(12,14,18,0.74) 0%, rgba(12,14,18,0.58) 55%, rgba(12,14,18,0.42) 100%),
  linear-gradient(180deg, rgba(12,14,18,0.5) 0%, rgba(12,14,18,0.12) 30%, rgba(12,14,18,0.2) 62%, rgba(20,23,28,0.9) 90%, #14171C 100%); }
.footer { background: #14171C; color: rgba(255,255,255,0.6); border-top: 0; padding: 40px 0 36px; }
.footer img { height: 22px; }
.footer p { color: rgba(255,255,255,0.6); }
.footer h5 { color: rgba(255,255,255,0.42); }
.footer a, .footer li { color: rgba(255,255,255,0.62); }
.footer a { transition: color 250ms var(--ease-out); }
.footer a:hover { color: var(--orange); }
.footer .cred-strip { border-top: 1px solid rgba(255,255,255,0.10); margin-top: 56px; padding-top: 28px; align-items: center; }
.footer .cred-strip span {
  color: #fff; font-size: 0.85rem; padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 26px -14px rgba(0,0,0,0.7);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
/* store links: badge-shaped, black with a fine rim, so they read as the app stores rather than more pills */
.footer .cred-strip .store-badge {
  margin-left: auto; padding: 10px 18px; border-radius: 10px; font-weight: 600; letter-spacing: 0.01em;
  background: #000; border: 1px solid rgba(255,255,255,0.35); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.footer .cred-strip .store-badge + .store-badge { margin-left: 0; }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.10); margin-top: 28px; padding-top: 22px; color: rgba(255,255,255,0.4); font-size: 0.82rem; }
.footer-legal a { color: rgba(255,255,255,0.5); }
@media (max-width: 1020px) { .footer .cred-strip .store-badge { margin-left: 0; } }
.door::after { background:
  radial-gradient(60% 42% at 50% 30%, rgba(12,14,18,0.74) 0%, rgba(12,14,18,0.58) 55%, rgba(12,14,18,0.42) 100%),
  linear-gradient(180deg, rgba(12,14,18,0.5) 0%, rgba(12,14,18,0.12) 30%, rgba(12,14,18,0.2) 58%, rgba(20,23,28,0.92) 86%, #14171C 95%, #14171C 100%); }
/* door → footer: a longer, eased fade so the photo melts into the charcoal rather than stopping */
.door::after { background:
  radial-gradient(60% 42% at 50% 30%, rgba(12,14,18,0.74) 0%, rgba(12,14,18,0.58) 55%, rgba(12,14,18,0.42) 100%),
  linear-gradient(180deg,
    rgba(12,14,18,0.5) 0%, rgba(12,14,18,0.12) 30%, rgba(12,14,18,0.16) 48%,
    rgba(20,23,28,0.28) 60%, rgba(20,23,28,0.45) 70%, rgba(20,23,28,0.63) 79%,
    rgba(20,23,28,0.79) 87%, rgba(20,23,28,0.91) 94%, #14171C 100%); }
/* use the footer's own charcoal in both grade layers so the bottom edge matches it exactly (no seam) */
.door::after { background:
  radial-gradient(60% 42% at 50% 30%, rgba(20,23,28,0.74) 0%, rgba(20,23,28,0.58) 55%, rgba(20,23,28,0.42) 100%),
  linear-gradient(180deg,
    rgba(20,23,28,0.5) 0%, rgba(20,23,28,0.12) 30%, rgba(20,23,28,0.16) 48%,
    rgba(20,23,28,0.28) 60%, rgba(20,23,28,0.45) 70%, rgba(20,23,28,0.63) 79%,
    rgba(20,23,28,0.79) 87%, rgba(20,23,28,0.91) 94%, #14171C 100%); }

/* =====================================================================
   HEADING HIERARCHY + RESPONSIVE TYPE
   Bookends (hero, door) stay at full hero size. Middle sections step down a quarter.
   Lead lines are bold white/ink; orange is kept to one or two words.
   Nothing is allowed to run off its column: headings wrap and balance.
   ===================================================================== */
.h-hero .h-lead, #reveal .h-hero .h-lead { white-space: normal; }
.h-hero { text-wrap: balance; overflow-wrap: break-word; }
/* middle headings: three-quarters of the hero */
.h-hero--mid, #reveal .reveal-copy .h-display.h-hero--mid, #price .price-line.h-hero--mid, #proof .h-display.h-hero--mid, #scale .h-display.h-hero--mid {
  font-size: clamp(40px, 4.3vw, 62px); line-height: 1.04;
}
/* lead lines: bold, no longer a solid orange line */
.h-hero--mid .h-lead { color: #fff; }
#scale .h-hero--mid .h-lead, #proof .h-hero--mid .h-lead { color: var(--ink); }
.h-hero .h-accent, .h-hero--mid .h-accent { color: var(--orange); }
#proof .h-hero--mid .h-rest.h-accent { color: var(--orange); display: inline; font-size: 1em; font-weight: 300; }
#price .h-hero--mid .h-lead.h-accent { color: var(--orange); }

/* hero headline: sized to its column so it never reaches the phone */
.hero h1 { font-size: clamp(44px, 4.55vw, 83px); }
@media (max-width: 1500px) { .hero .hero-grid { grid-template-columns: minmax(0, 1fr) 540px; } }
@media (max-width: 1280px) { .hero .hero-grid { grid-template-columns: minmax(0, 1fr) 470px; } .hero h1 { font-size: clamp(42px, 4.4vw, 60px); } }

/* the door's bookend heading wraps cleanly on narrow screens */
.door .h-hero { font-size: clamp(40px, 5.47vw, 83px); }

/* reveal copy: room for the mid heading at laptop widths */
#reveal .reveal-copy { min-width: 0; }

/* scale + companion card headings must never spill */
.duo-card h3, .duo-card--companion h3 { overflow-wrap: break-word; text-wrap: balance; }

/* pills: no glass on the decorative ones (reveal, footer), just a clean hairline outline */
#reveal .owned span, .footer .cred-strip .cred-pill {
  background: transparent; border: 1px solid rgba(255,255,255,0.24);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: rgba(255,255,255,0.86);
}
#reveal .owned span:hover { transform: none; border-color: rgba(255,255,255,0.4); box-shadow: none; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 1020px) {
  .duo { grid-template-columns: 1fr; }
  .duo-card--companion, .duo-card { aspect-ratio: auto; }
  .duo-card--companion p:not(.kicker) { max-width: 60%; }
  #reveal .reveal-grid, #price > .wrap { grid-template-columns: 1fr; }
  .hero .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(34px, 9.6vw, 44px); }
  .h-hero--mid, #reveal .reveal-copy .h-display.h-hero--mid, #price .price-line.h-hero--mid, #proof .h-display.h-hero--mid, #scale .h-display.h-hero--mid { font-size: clamp(30px, 8.6vw, 40px); }
  .door .h-hero { font-size: clamp(32px, 9.4vw, 44px); }
  .duo-card--companion p:not(.kicker) { max-width: none; }
  #price .mini-calc { grid-template-columns: 1fr; border-radius: 22px; padding: 18px; }
  #price .mini-field { border-right: 0; margin-right: 0; padding-right: 0; }
  #price .mini-out .n { font-size: clamp(48px, 13vw, 64px); }
  .footer .cred-strip .store-badge { margin-left: 0; }
}
/* hero moment chips: tuck in toward the phone on laptops, step aside on small laptops/tablets */
@media (max-width: 1500px) {
  .hero .tmoment-1 { left: calc(50% - 172px - 92px); }
  .hero .tmoment-3 { left: calc(50% - 172px - 100px); }
}
@media (max-width: 1180px) { .hero .tmoment-1, .hero .tmoment-3 { display: none; } }

/* Reveal stage: the min-height + aspect-ratio pair forced a 565px width into a 467px column at laptop widths. */
#reveal .reveal-stage { min-height: 0; min-width: 0; }
@media (max-width: 1100px) {
  #reveal .reveal-grid { grid-template-columns: 1fr; }
  #reveal .reveal-stage { max-width: 640px; width: 100%; margin: 0 auto; }
}

/* Scale cards at laptop and tablet widths: phone no longer climbs into the Companion heading, laptop keeps a usable size */
@media (max-width: 1300px) and (min-width: 1021px) {
  .duo-card, .duo-card--companion { aspect-ratio: 747 / 780; }
  .duo-card { padding: 36px 36px 32px; }
  .duo-card--companion { padding: 36px 36px 0; }
  .duo-card--companion .link { left: 36px; bottom: 32px; }
  .duo-card--companion h3 { font-size: clamp(1.9rem, 2.9vw, 2.6rem); position: relative; z-index: 2; }
  .duo-card--companion p:not(.kicker) { max-width: 44%; position: relative; z-index: 2; }
  .duo-card--companion .hand-stage, .duo-card--companion.in .hand-stage { left: 46%; top: 38%; width: 70%; }
}
@media (max-width: 1020px) {
  .duo-card:not(.duo-card--companion) .duo-media.laptop-stage { flex: none; width: 100%; height: auto; aspect-ratio: 1200 / 820; max-height: 440px; margin-top: 24px; }
  .duo-card--companion { min-height: 560px; padding-bottom: 0; }
  .duo-card--companion p:not(.kicker) { max-width: 46%; position: relative; z-index: 2; }
  .duo-card--companion .hand-stage, .duo-card--companion.in .hand-stage { position: absolute; left: 50%; top: 30%; width: 58%; max-width: none; margin: 0; }
}
@media (max-width: 640px) {
  .duo-card--companion { min-height: 0; }
  .duo-card--companion p:not(.kicker) { max-width: none; }
  .duo-card--companion .hand-stage, .duo-card--companion.in .hand-stage { position: relative; left: auto; top: auto; width: 86%; margin: 20px auto -38%; }
}
@media (max-width: 640px) {
  .duo-card--companion p.kicker { white-space: normal; }
  .duo-card--companion { display: flex; flex-direction: column; }
  .duo-card--companion .link { position: relative; left: auto; bottom: auto; margin-top: 18px; order: 2; }
  .duo-card--companion .hand-stage, .duo-card--companion.in .hand-stage { order: 3; margin: 12px auto -38%; }
}

/* The price: give the heading group room to breathe (looser leading, more air between kicker, heading, note and the estimate) */
#price .wrap > .kicker { margin-bottom: 0; }
#price .price-line.h-hero--mid { line-height: 1.14; margin-top: 22px; }
#price .price-note { margin-top: 26px; }
#price .mini-out { margin-top: 60px; }
#price .assure { margin-top: 36px; }

/* =====================================================================
   Capabilities: hero + Builder as one pinned scroll sequence
   ===================================================================== */
.bflow { position: relative; height: calc(100vh + 460vh); background: #14171C; }
.bflow-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #14171C; isolation: isolate; }
.bflow-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bflow-glow span { position: absolute; border-radius: 50%; filter: blur(60px); will-change: opacity, transform; }
.bflow-glow .g1 { width: 70vw; height: 70vw; right: -24vw; bottom: -40vw; background: radial-gradient(closest-side, rgba(245,96,28,0.55), rgba(245,96,28,0)); opacity: calc(0.25 + var(--gp, 0) * 0.75); }
.bflow-glow .g2 { width: 60vw; height: 50vw; left: -20vw; bottom: -30vw; background: radial-gradient(closest-side, rgba(255,170,90,0.42), rgba(255,170,90,0)); opacity: calc(var(--gs, 0) * 1); }
.bflow-glow .g3 { width: 90vw; height: 40vw; left: 5vw; top: -26vw; background: radial-gradient(closest-side, rgba(120,140,165,0.22), rgba(120,140,165,0)); }

.bflow-hero { position: absolute; inset: 0; z-index: 2; background: transparent; will-change: opacity, transform; }
.bflow-hero h1 { color: #fff; }
.bflow-hero .lede { color: rgba(255,255,255,0.72); }
.bflow-hero .kicker { color: rgba(255,255,255,0.6); }

.bflow-builder { position: absolute; inset: 0; z-index: 3; padding: 0; min-height: 0; background: transparent; display: block; }
.bflow-device { position: absolute; inset: 0; perspective: 6000px; perspective-origin: 50% 30%; pointer-events: none; }
.bflow .laptop { left: 0; top: 0; transform-origin: 0 0; opacity: 1; }
.bflow .laptop-stage .laptop { opacity: 1; }
.bflow .laptop--photo .laptop-shadow { background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 70%); }
.bflow .bf-screen { opacity: 0; transition: opacity 600ms var(--ease-out); }
.bflow .bf-screen.is-on { opacity: 1; }

.bflow-copy { position: absolute; left: 58%; right: clamp(24px, 5vw, 88px); top: 50%; transform: translateY(-50%); max-width: 520px; opacity: 0; will-change: opacity, transform; padding-top: 32px; }
.bflow-copy .kicker { color: rgba(255,255,255,0.6); }
.bflow-copy .h-display { color: #fff; font-size: clamp(30px, 2.7vw, 46px); line-height: 1.06; margin: 10px 0 14px; max-width: 16ch; }
.bflow-copy .lede { color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.55; margin: 0; max-width: 46ch; }
.bf-kicker { color: rgba(255,255,255,0.45); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 26px 0 8px; }

.bf-steps { list-style: none; margin: 0; padding: 0; }
.bf-step { position: relative; border-top: 1px solid rgba(255,255,255,0.1); opacity: 0.46; transition: opacity 500ms var(--ease-out); }
.bf-step:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.bf-step.is-on { opacity: 1; }
.bf-step:hover { opacity: 0.85; }
.bf-step.is-on:hover { opacity: 1; }
.bf-step-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 0; cursor: pointer; }
.bf-step-head:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
.bf-step .dock-badge { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; transform: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.bf-step .dock-svg { width: 74%; height: 74%; color: #fff; }
.bf-step-label { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; }
.bf-step-body { display: block; max-height: 0; overflow: hidden; transition: max-height 600ms var(--ease-out), padding 600ms var(--ease-out); }
.bf-step.is-on .bf-step-body { max-height: 260px; padding-bottom: 16px; }
.bf-step-title { color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.bf-step-title em { font-style: normal; color: var(--orange); }
.bf-step-body p { color: rgba(255,255,255,0.7); font-size: 14.5px; line-height: 1.55; margin: 0; }
.bf-step-body .chip-note { display: inline-block; margin-top: 6px; font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); border: 1px dashed rgba(255,255,255,0.25); border-radius: 6px; padding: 2px 6px; }
.bf-step-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; }
.bf-step-bar i { display: block; height: 100%; width: 0; background: var(--orange); }
.bf-step.is-on .bf-step-bar i { width: calc(var(--f, 0) * 100%); }

/* Static fallback: phones, tablets, short screens, reduced motion */
.bflow.is-static { height: auto; }
.bflow.is-static .bflow-stage { position: relative; height: auto; overflow: hidden; }
.bflow.is-static .bflow-hero { position: relative; inset: auto; }
.bflow.is-static .bflow-builder { position: relative; inset: auto; padding: 24px 0 72px; }
.bflow.is-static .bflow-device { position: relative; inset: auto; width: calc(100% - 40px); max-width: 760px; margin: 0 auto; aspect-ratio: 1200 / 820; }
.bflow.is-static .bflow-copy { position: relative; left: auto; right: auto; top: auto; transform: none !important; opacity: 1 !important; max-width: 760px; margin: 24px auto 0; padding: 0 20px; }
/* stronger warm build toward the last Builder step */
.bflow-glow .g1 { background: radial-gradient(closest-side, rgba(245,96,28,0.75), rgba(245,96,28,0)); opacity: calc(0.3 + var(--gp, 0) * 0.7); }
.bflow-glow .g2 { background: radial-gradient(closest-side, rgba(255,166,77,0.55), rgba(255,166,77,0)); }
/* nav over the dark sequence: dark glass, white type */
.nav.nav--dark { background: rgba(20,23,28,0.62); border-bottom-color: rgba(255,255,255,0.08); }
.nav.nav--dark .nav-links a, .nav.nav--dark .nav-links button, .nav.nav--dark .nav-toggle { color: rgba(255,255,255,0.82); }
.nav.nav--dark .nav-links a:hover, .nav.nav--dark .nav-links a[aria-current="page"] { color: #fff; }
.nav.nav--dark .btn--primary, .nav.nav--dark .nav-links a.btn--primary { color: #fff; }
.nav.nav--dark .nav-dropdown-menu a { color: var(--ink); }
/* copy panel anchored from the top so it doesn't drift as each step opens */
.bflow-copy { top: clamp(84px, calc(50vh - 300px), 240px); transform: none; padding-top: 0; }
@media (min-width: 1700px) {
  .bflow-copy { max-width: 600px; }
  .bflow-copy .lede { font-size: 18px; }
  .bf-step-label { font-size: 19px; }
  .bf-step-title { font-size: 20px; }
  .bf-step-body p { font-size: 16px; }
}
@media (max-height: 820px) and (min-width: 1021px) {
  .bflow-copy { top: 80px; }
  .bflow-copy .h-display { font-size: clamp(26px, 2.4vw, 36px); margin: 6px 0 10px; }
  .bflow-copy .lede { font-size: 14.5px; line-height: 1.5; }
  .bf-kicker { margin: 16px 0 4px; }
  .bf-step-head { padding: 8px 0; }
  .bf-step.is-on .bf-step-body { padding-bottom: 10px; }
  .bf-step-body p { font-size: 13.5px; line-height: 1.5; }
}

/* Capabilities hero: homepage heading style, centred in the first view, lines rise in on arrival */
.bflow-hero { display: flex; align-items: center; padding: 64px 0 0; }
.bflow-hero .wrap { width: 100%; }
.bflow-hero h1.bf-h1 { font-size: clamp(44px, 4.55vw, 83px); line-height: 1.04; color: #fff; max-width: none; margin: 14px 0 26px; }
.bflow-hero .bf-h1 .h-rest { color: #fff; }
.bflow-hero .bf-h1 .h-lead { color: var(--orange); }
.bflow-hero .bf-h1 .ln { display: inline-block; }
.bflow-hero .lede { max-width: 56ch; font-size: 18px; line-height: 1.55; }
.bflow .bf-in, .bflow .bf-h1 .ln { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 1100ms cubic-bezier(0.22, 1, 0.36, 1); }
.bflow.bf-ready .bf-in, .bflow.bf-ready .bf-h1 .ln { opacity: 1; transform: none; }
.bflow.bf-ready .bflow-hero .kicker { transition-delay: 100ms; }
.bflow.bf-ready .bf-h1 .h-rest .ln:nth-of-type(1) { transition-delay: 220ms; }
.bflow.bf-ready .bf-h1 .h-rest .ln:nth-of-type(2) { transition-delay: 360ms; }
.bflow.bf-ready .bf-h1 .h-lead .ln { transition-delay: 520ms; }
.bflow.bf-ready .bflow-hero .lede { transition-delay: 720ms; }
@media (prefers-reduced-motion: reduce) { .bflow .bf-in, .bflow .bf-h1 .ln { opacity: 1; transform: none; transition: none; } }
.bflow.is-static .bflow-hero { padding: calc(64px + 56px) 0 48px; }
@media (max-width: 640px) { .bflow-hero h1.bf-h1 { font-size: clamp(32px, 9vw, 44px); } .bflow-hero .lede { font-size: 16px; } }

/* Builder step icons (artwork carries its own soft shadow) */
.bf-icon { width: 44px; height: 44px; margin: -4px -4px -4px -4px; flex: none; display: block; }
.bf-icon img { width: 100%; height: 100%; display: block; }
.bf-step-body { padding-left: 50px; }

/* Capabilities hero, v2: text comes in on the first scroll (translate/opacity), lifts away later on scroll (transform/filter, driven by JS) */
.bflow { height: calc(100vh + 600vh); }
.bflow.is-static { height: auto; }
.bflow .bf-in, .bflow .bf-h1 .ln { opacity: 0; transform: none; translate: 0 38px; transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), translate 1100ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, translate, transform, filter; }
.bflow.bf-ready .bf-in, .bflow.bf-ready .bf-h1 .ln { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .bflow .bf-in, .bflow .bf-h1 .ln { opacity: 1; translate: none; transition: none; } }

/* scroll cue on arrival, gone once the text is in */
.bf-cue { position: absolute; left: 50%; bottom: 44px; z-index: 4; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,0.55); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; pointer-events: none; transition: opacity 500ms var(--ease-out); }
.bf-cue i { position: relative; width: 1px; height: 46px; background: rgba(255,255,255,0.16); overflow: hidden; }
.bf-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--orange); animation: bfCue 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes bfCue { to { top: 100%; } }
.bflow.bf-ready .bf-cue, .bflow.is-static .bf-cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bf-cue i::after { animation: none; top: 30%; } }

/* Builder laptop on Capabilities: scroll-driven opening, full 16:9 video inside the display */
.bflow-device { perspective: 2400px; perspective-origin: 50% 40%; }
.bflow .laptop--photo .laptop-lid { transition: none; will-change: transform, opacity; }
.bflow.is-static .laptop--photo .laptop-lid { transform: none; opacity: 1; }
.bflow .laptop--photo .laptop-screen.bf-screen { left: 112px; top: 64px; width: 976px; height: 549px; object-fit: contain; object-position: center; background: #000; border-radius: 4px; }
.bflow .bf-screen.is-on { opacity: var(--on, 1); }
.bflow .laptop--photo .laptop-shadow { opacity: calc(0.35 + var(--lift, 1) * 0.65); }
.bflow-hero h1.bf-h1 { line-height: 1; font-weight: 300; letter-spacing: 0.035em; }

/* Builder laptop entrance, v3: no hinge. Arrives open, rises and straightens, screen wakes, a light sweeps the glass, a warm halo blooms behind */
.bflow .laptop--photo .laptop-lid { transform: none !important; opacity: 1 !important; transition: none; }
.bflow .bf-screen.is-on { opacity: 1; }
.bf-glass { position: absolute; left: 107px; top: 5px; width: 986px; height: 640px; border-radius: 22px 22px 4px 4px; pointer-events: none; z-index: 2; overflow: hidden;
  background: rgba(0,0,0, calc(1 - var(--on, 1))); }
.bf-glass::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 38%; left: calc(-45% + var(--sheen, 1) * 150%);
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.13) 45%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.13) 55%, rgba(255,255,255,0) 100%);
  transform: skewX(-12deg); opacity: calc(var(--on, 1) * (1 - var(--sheen, 1) * 0.9)); }
.bf-halo { position: absolute; left: 50%; top: 46%; width: 1500px; height: 1000px; margin: -500px 0 0 -750px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(245,96,28,0.34), rgba(245,96,28,0.12) 45%, rgba(245,96,28,0) 75%); filter: blur(20px); opacity: var(--halo, 0.45); }
.bflow.is-static .bf-glass { background: transparent; }
.bflow.is-static .bf-glass::after { display: none; }
.bflow .laptop--photo .laptop-shadow { opacity: 1; }
/* Builder videos: a slight vertical stretch (about 6%) so they fill more of the display without distorting the type */
.bflow .laptop--photo .laptop-screen.bf-screen { left: 111px; top: 50px; width: 978px; height: 584px; object-fit: fill; }

/* Builder flow v4: longer travel per step */
.bflow { height: calc(100vh + 836vh); }
.bflow.is-static { height: auto; }

/* Background: graphite spotlight. Near-black graphite, a soft cool light from above that follows the laptop, a faint floor sheen and fine grain. No orange glows. */
.bflow, .bflow-stage { background: #0D0F12; }
.bflow-glow { background:
    radial-gradient(48% 62% at var(--slx, 50%) -6%, rgba(214,224,238,calc(0.13 * var(--sla, 0.35))) 0%, rgba(214,224,238,calc(0.05 * var(--sla, 0.35))) 38%, rgba(214,224,238,0) 72%),
    radial-gradient(70% 22% at var(--slx, 50%) 100%, rgba(190,200,214,0.07) 0%, rgba(190,200,214,0) 70%),
    linear-gradient(180deg, #111317 0%, #0D0F12 55%, #0B0C0F 100%); }
.bflow-glow span { display: none; }
.bflow-glow::after { content: ""; position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* the halo behind the laptop becomes a cool, barely-there bloom */
.bf-halo { background: radial-gradient(closest-side, rgba(200,212,228,0.10), rgba(200,212,228,0.04) 45%, rgba(200,212,228,0) 75%); }
/* hairline horizon under the laptop for a sense of floor */
.bflow-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28vh; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(13,15,18,0) 0%, rgba(8,9,11,0.55) 100%); }
.bflow-hero, .bflow-builder, .bf-cue { z-index: 3; }
.nav.nav--dark { background: rgba(13,15,18,0.66); }
/* step progress line in a quiet white, orange kept for the accent words only */
.bf-step-bar i { background: linear-gradient(90deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35)); }

/* Builder videos: taller fit to the display (vertical stretch about 11%, type still reads naturally) */
.bflow .laptop--photo .laptop-screen.bf-screen { left: 111px; top: 28px; width: 978px; height: 612px; object-fit: fill; }

/* Builder laptop grounding: a soft lit floor with a dark contact shadow, so it sits rather than floats */
.bflow .laptop--photo .laptop-shadow { left: -60px; top: 748px; width: 1320px; height: 120px; filter: none; border-radius: 50%; z-index: 0; opacity: 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(205,214,228,0.10) 0%, rgba(205,214,228,0.04) 45%, rgba(205,214,228,0) 70%); }
.bflow .laptop--photo .laptop-shadow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 26px; height: 64px; border-radius: 50%; filter: blur(18px);
  background: radial-gradient(50% 50% at 50% 45%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 75%); }
.bflow .laptop--photo .laptop-shadow::after { content: ""; position: absolute; left: 4%; right: 4%; top: 34px; height: 14px; border-radius: 50%; filter: blur(6px);
  background: rgba(0,0,0,0.75); }
.bflow .laptop--photo .laptop-shadow { top: 742px; height: 150px; left: -120px; width: 1440px;
  background: radial-gradient(50% 50% at 50% 46%, rgba(205,214,228,0.20) 0%, rgba(205,214,228,0.08) 42%, rgba(205,214,228,0) 70%); }
.bflow .laptop--photo .laptop-shadow::before { left: 10%; right: 10%; top: 40px; height: 70px; filter: blur(16px);
  background: radial-gradient(50% 50% at 50% 40%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0) 78%); }
.bflow .laptop--photo .laptop-shadow::after { left: 9%; right: 9%; top: 44px; height: 10px; filter: blur(5px); background: rgba(0,0,0,0.85); }
.bflow .laptop--photo .laptop-shadow { top: 730px; height: 230px; left: -160px; width: 1520px;
  background: radial-gradient(48% 42% at 50% 34%, rgba(205,214,228,0.17) 0%, rgba(205,214,228,0.07) 50%, rgba(205,214,228,0) 100%); }
.bflow .laptop--photo .laptop-shadow::before { left: 13%; right: 13%; top: 52px; height: 44px; filter: blur(12px);
  background: radial-gradient(50% 50% at 50% 40%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 80%); }
.bflow .laptop--photo .laptop-shadow::after { left: 12%; right: 12%; top: 56px; height: 8px; filter: blur(4px); background: rgba(0,0,0,0.85); }

/* Builder copy in the site's display style: condensed caps, thin line over a bold orange line */
.bflow-copy .h-display.bf-h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 300; color: #fff;
  font-size: clamp(34px, 3.1vw, 54px); line-height: 1; letter-spacing: 0.02em; max-width: none; margin: 12px 0 16px; }
.bflow-copy .bf-h2 .h-rest { color: #fff; font-size: 0.86em; letter-spacing: 0.03em; }
.bflow-copy .bf-h2 .h-lead { color: var(--orange); font-weight: 700; letter-spacing: -0.005em; }
.bflow-copy .lede { color: rgba(255,255,255,0.74); }
.bf-kicker { font-family: var(--font-display); letter-spacing: 0.18em; color: rgba(255,255,255,0.5); }
.bf-step-label { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em; font-size: 19px; }
.bf-step-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 300; letter-spacing: 0.03em; font-size: 21px; line-height: 1.15; }
.bf-step-title em { font-weight: 700; }
/* bigger step icons */
.bf-icon { width: 58px; height: 58px; margin: -6px -4px -6px -6px; }
.bf-step-head { gap: 14px; padding: 10px 0; }
.bf-step-body { padding-left: 62px; }
@media (min-width: 1700px) { .bf-step-label { font-size: 21px; } .bf-step-title { font-size: 23px; } .bf-icon { width: 64px; height: 64px; } .bf-step-body { padding-left: 68px; } }
@media (max-height: 820px) and (min-width: 1021px) { .bflow-copy .h-display.bf-h2 { font-size: clamp(28px, 2.6vw, 40px); margin: 8px 0 10px; } .bf-icon { width: 50px; height: 50px; } .bf-step-body { padding-left: 56px; } .bf-step-title { font-size: 18px; } }
.bf-kicker { letter-spacing: 0.12em; white-space: nowrap; font-size: 12px; } @media (max-width: 1180px) { .bf-kicker { white-space: normal; } }
/* "Build 5 Capability Academies" on one line */
.bflow-copy .h-display.bf-h2 { font-size: clamp(30px, 2.6vw, 50px); }
.bflow-copy .bf-h2 .h-rest { white-space: nowrap; }
@media (max-height: 820px) and (min-width: 1021px) { .bflow-copy .h-display.bf-h2 { font-size: clamp(26px, 2.3vw, 38px); } }
@media (max-width: 640px) { .bflow-copy .bf-h2 .h-rest { white-space: normal; } }

/* =====================================================================
   Capabilities: Zone of Proximal Development, the rings beat
   ===================================================================== */
.zpd2 { position: relative; height: 240vh; padding: 0; background: #0D0F12; color: #fff; min-height: 0; display: block; }
.zpd2::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 70% 50%, rgba(214,224,238,0.06), rgba(214,224,238,0) 70%), linear-gradient(180deg, #0D0F12 0%, #101216 50%, #0D0F12 100%); }
.zpd2-grid { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 96px); padding-top: 64px; }
.zpd2-copy { position: relative; z-index: 2; opacity: var(--copy, 1); transform: translate3d(0, calc((1 - var(--copy, 1)) * 30px), 0); }
.zpd2-copy .kicker { color: rgba(255,255,255,0.55); }
.zpd2 .zpd2-h { font-size: clamp(40px, 4.3vw, 72px); line-height: 1.02; margin: 14px 0 28px; color: #fff; }
.zpd2-h .zl { display: inline-block; opacity: 0.18; transition: opacity 600ms var(--ease-out), color 600ms var(--ease-out); }
.zpd2-h .zl.is-lit { opacity: 1; }
.zpd2-h .zl-1, .zpd2-h .zl-2 { color: #fff; font-weight: 300; font-size: 0.86em; letter-spacing: 0.03em; }
.zpd2-h .zl-3 { font-style: normal; color: var(--orange); font-weight: 700; }
.zpd2-quote { margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--orange); }
.zpd2-quote p { margin: 0; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; font-weight: 300; color: rgba(255,255,255,0.9); max-width: 44ch; }
.zpd2-quote cite { display: block; margin-top: 10px; font-style: normal; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: rgba(255,255,255,0.5); }
.zpd2-body { margin: 0; max-width: 54ch; color: rgba(255,255,255,0.66); font-size: 15.5px; line-height: 1.6; }

.zpd2-viz { position: relative; z-index: 1; display: grid; place-items: center; }
.zpd2-svg { width: min(46vw, 78vh, 640px); height: auto; overflow: visible; }
.zpd2-ring { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 1.2; stroke-dasharray: 1600; stroke-dashoffset: calc(1600 * (1 - var(--draw, 1))); }
.zpd2-ring--out { stroke-dasharray: 3 7; stroke-dashoffset: 0; opacity: var(--draw, 1); }
.zpd2-ring--mid { stroke: rgba(255,255,255,calc(0.28 + var(--band, 0) * 0.5)); }
.zpd2-core { fill: rgba(255,255,255,0.045); opacity: var(--draw, 1); }
.zpd2-band { fill: url(#zpdBand); opacity: var(--band, 0); }
.zpd2-bloom { opacity: calc(var(--band, 0) * 0.35 + var(--bloom, 0) * 0.4); transform: scale(calc(1 + var(--bloom, 0) * 1.6)); transform-origin: 0 0; transform-box: view-box; }
.zpd2-label { fill: rgba(255,255,255,0.5); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; text-anchor: middle; opacity: var(--draw, 1); }
.zpd2-label--mid { fill: rgba(255,255,255,calc(0.5 + var(--band, 0) * 0.45)); }
.zpd2-dot { opacity: var(--dot, 1); }
.zpd2-dot-core { fill: #fff; }
.zpd2-dot-halo { fill: rgba(255,255,255,0.14); }
/* the bloom spills toward the Companion as the section hands over */
.zpd2-viz::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(0.6 + var(--bloom, 0) * 1.4)); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(245,96,28,0.16), rgba(245,96,28,0) 70%); opacity: var(--bloom, 0); }

.zpd2.is-static { height: auto; }
.zpd2.is-static .zpd2-grid { position: relative; height: auto; grid-template-columns: 1fr; padding: 96px 0 96px; }
.zpd2.is-static .zpd2-svg { width: min(86vw, 520px); }
@media (max-width: 640px) { .zpd2 .zpd2-h { font-size: clamp(34px, 9.4vw, 44px); } }
/* ZPD: calmer warmth. The band glows only within the ring; the hand-over bloom is a soft, cool widening rather than an orange flood */
.zpd2-band { opacity: calc(var(--band, 0) * 0.7); }
.zpd2-bloom { opacity: calc(var(--band, 0) * 0.16 + var(--bloom, 0) * 0.08); transform: scale(calc(1 + var(--bloom, 0) * 0.35)); }
.zpd2-bloom circle { stroke-width: 50; }
.zpd2-viz::after { background: radial-gradient(closest-side, rgba(214,224,238,0.07), rgba(214,224,238,0) 70%); transform: translate(-50%, -50%) scale(calc(0.8 + var(--bloom, 0) * 0.6)); }
.zpd2 .zpd2-svg { transform: scale(calc(1 + var(--bloom, 0) * 0.08)); transition: none; }
.zpd2.is-static .zpd2-grid { padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.zpd2-quote p { max-width: none; } @media (max-width: 640px) { .zpd2-quote .zq-br { display: none; } }

/* =====================================================================
   Capabilities: Companion pinned sequence
   ===================================================================== */
.cflow { position: relative; height: calc(100vh + 580vh); padding: 0; min-height: 0; display: block; background: #0D0F12; color: #fff; }
.cflow-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; --ph: calc((100vh - 64px) * 0.179); }
.cflow-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
    radial-gradient(42% 46% at 50% 44%, rgba(245,96,28,calc(0.16 * var(--warm, 0))) 0%, rgba(245,96,28,0) 70%),
    radial-gradient(46% 60% at 50% -8%, rgba(214,224,238,0.10) 0%, rgba(214,224,238,0.03) 40%, rgba(214,224,238,0) 72%),
    linear-gradient(180deg, #0D0F12 0%, #101216 55%, #0B0C0F 100%); }
.cflow-glow::after { content: ""; position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.cf-phone { position: absolute; left: 0; top: 0; width: 380px; height: 785px; transform-origin: 50% 50%; z-index: 3; will-change: transform, opacity; }
.cf-halo { position: absolute; inset: -14% -30%; border-radius: 50%; z-index: -1; pointer-events: none; filter: blur(30px); opacity: var(--halo, 0);
  background: radial-gradient(closest-side, rgba(214,224,238,0.20), rgba(214,224,238,0.06) 55%, rgba(214,224,238,0) 80%); }
.cf-screen { position: absolute; left: 10.5px; top: 9px; width: 357px; height: 768px; border-radius: 54px; overflow: hidden; background: #000; }
.cf-scr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity 500ms var(--ease-out); display: block; }
.cf-scr.is-on { opacity: 1; }
.cf-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55)); }

.cf-kicker { position: absolute; left: 0; right: 0; top: calc(64px + 5vh); text-align: center; color: rgba(255,255,255,0.6); z-index: 4; margin: 0; transition: top 0ms; }
.cf-kicker.is-end { top: calc(50% - clamp(110px, 12vw, 160px)); }
.cflow .cf-h { position: absolute; left: 0; right: 0; top: 50%; margin: -0.9em 0 0; text-align: center; z-index: 4; color: #fff; opacity: 0;
  font-size: clamp(44px, 4.55vw, 83px); line-height: 1; }
.cf-h .h-rest { color: #fff; }
.cf-h .h-lead { color: var(--orange); }

.cf-feature { position: absolute; z-index: 4; width: min(330px, calc(50vw - var(--ph) - 96px)); opacity: 0; will-change: opacity, transform; }
.cf-feature h3 { margin: 0 0 10px; font-family: var(--font-display); text-transform: uppercase; font-weight: 300; letter-spacing: 0.02em; color: #fff; font-size: clamp(40px, 3.8vw, 68px); line-height: 1; }
.cf-feature h3 em { font-style: normal; font-weight: 700; color: var(--orange); }
.cf-feature p { margin: 0; color: rgba(255,255,255,0.7); font-size: 15.5px; line-height: 1.55; }
.cf-f1, .cf-f3 { right: calc(50% + var(--ph) + 64px); text-align: right; }
.cf-f1 p, .cf-f3 p { margin-left: auto; }
.cf-f2 { left: calc(50% + var(--ph) + 64px); }
.cf-f1 { top: 26%; }
.cf-f2 { top: 22%; }
.cf-f3 { top: 58%; }

.cf-card { position: absolute; z-index: 5; width: clamp(120px, 10vw, 170px); aspect-ratio: 380 / 676; border-radius: 18px; overflow: hidden; opacity: 0;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.14); background: #111;
  transform: translate3d(calc((1 - var(--pop, 0)) * -110px), calc((1 - var(--pop, 0)) * 30px), 0) scale(calc(0.55 + var(--pop, 0) * 0.45)) rotate(calc(var(--pop, 0) * var(--rot, 0deg))); }
.cf-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-card--a { left: calc(50% + var(--ph) - 46px); top: 50%; --rot: -4deg; }
.cf-card--b { left: calc(50% + var(--ph) + clamp(96px, 9vw, 150px)); top: 58%; --rot: 5deg; }

/* phones, tablets, short screens, reduced motion: a calm stacked layout */
.cflow.is-static { height: auto; }
.cflow.is-static .cflow-stage { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; padding: 96px clamp(20px, 4vw, 40px) 96px; gap: 22px; }
.cflow.is-static .cf-kicker, .cflow.is-static .cf-h, .cflow.is-static .cf-phone, .cflow.is-static .cf-feature, .cflow.is-static .cf-card { position: relative; left: auto; right: auto; top: auto; margin: 0; opacity: 1; transform: none; }
.cflow.is-static .cf-h { font-size: clamp(32px, 8.6vw, 52px); }
.cflow.is-static .cf-phone { width: 260px; height: 537px; }
.cflow.is-static .cf-screen { left: 7.2px; top: 6.2px; width: 244px; height: 525px; border-radius: 38px; }
.cflow.is-static .cf-feature { width: 100%; max-width: 520px; text-align: left; }
.cflow.is-static .cf-feature h3 { font-size: clamp(32px, 8vw, 44px); }
.cflow.is-static .cf-card { display: none; }
/* no top spotlight on the Companion's arrival, so it joins the rings section without a seam; the light grows with the phone */
.cflow-glow { background:
    radial-gradient(42% 46% at 50% 44%, rgba(245,96,28,calc(0.16 * var(--warm, 0))) 0%, rgba(245,96,28,0) 70%),
    radial-gradient(46% 60% at 50% -8%, rgba(214,224,238,calc(0.10 * var(--halo, 0))) 0%, rgba(214,224,238,calc(0.03 * var(--halo, 0))) 40%, rgba(214,224,238,0) 72%),
    #0D0F12; }
.cflow.is-static .cflow-stage { overflow: hidden; }
/* Companion arrival: no orange glow, graphite only with the cool halo */
.cflow-glow { background:
    radial-gradient(46% 60% at 50% -8%, rgba(214,224,238,calc(0.10 * var(--halo, 0))) 0%, rgba(214,224,238,calc(0.03 * var(--halo, 0))) 40%, rgba(214,224,238,0) 72%),
    #0D0F12; }

/* =====================================================================
   Capabilities: the closing frame. Graphite eases into silver for the value and leaders sections,
   then back to graphite for the closing call and the footer.
   ===================================================================== */
.cap-value, .cap-leaders, .cap-door { position: relative; min-height: 0; display: block; }
.cap-value { padding: 46vh 0 16vh; color: var(--ink);
  background: linear-gradient(180deg, #0D0F12 0, #15181C 8vh, #3A4048 18vh, #7D8893 27vh, #B9C4CD 35vh, #DCE3E9 42vh, var(--paper-2) 52vh, var(--paper-2) 100%); }
.cap-leaders { padding: 12vh 0 52vh; color: var(--ink);
  background: linear-gradient(180deg, var(--paper-2) 0, var(--paper) 40%, var(--paper-2) calc(100% - 48vh), #B9C4CD calc(100% - 38vh), #6E7983 calc(100% - 28vh), #2A2E35 calc(100% - 16vh), #0D0F12 100%); }
.cap-door { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16vh 0 22vh;
  background: linear-gradient(180deg, #0D0F12 0%, #101216 60%, #14171C 100%); }
.cap-door::before, .cap-door::after { display: none; }
.cap-door .wrap { position: relative; z-index: 1; }

/* headings in the site's display style */
.cap-value .cap-h, .cap-leaders .cap-h { color: var(--ink); margin: 0 0 clamp(36px, 5vh, 56px); max-width: none; }
.cap-value .cap-h .h-rest, .cap-leaders .cap-h .h-rest { color: var(--ink); }
.cap-value .cap-h .h-lead, .cap-leaders .cap-h .h-lead { color: var(--orange); font-style: normal; }
.cap-value .cap-h .h-rest .h-lead { font-size: 1.163em; }
.cap-leaders .kicker { color: var(--ink-dim); }
.cap-door .cap-h { color: #fff; font-size: clamp(40px, 4.55vw, 83px); line-height: 1.02; margin: 0 auto 24px; max-width: none; }
.cap-door .cap-h .h-rest { color: #fff; }
.cap-door .lede { color: rgba(255,255,255,0.72); margin: 0 auto 36px; }
.cap-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cap-door .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.32); background: transparent; }
.cap-door .btn--ghost:hover { border-color: #fff; }

/* value tiles: the homepage's silver cards */
.cap-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; }
.cap-tiles .tile { position: relative; border-radius: 26px; padding: 30px 28px 34px; min-height: 260px; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(59,72,88,0.18) 0%, rgba(59,72,88,0) 70%),
    radial-gradient(60% 50% at 0% 0%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, var(--paper) 0%, var(--silver-2) 100%);
  border: 1px solid rgba(52,53,57,0.08); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -24px rgba(52,53,57,0.22);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), border-color 500ms var(--ease-out); }
.cap-tiles .tile:hover { transform: translateY(-6px); border-color: rgba(245,96,28,0.45); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 36px 80px -24px rgba(52,53,57,0.28); }
.cap-tiles .tile .n { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 4.2vw, 72px); line-height: 1; color: var(--orange); margin: 0 0 auto; background: none; width: auto; height: auto; border: 0; }
.cap-tiles .tile h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; font-size: 19px; color: var(--ink); margin: 54px 0 10px; }
.cap-tiles .tile p { color: var(--ink-dim); font-size: 15px; line-height: 1.55; margin: 0; }

/* leader quotes: white cards on silver */
.cap-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cap-quotes .qcard { position: relative; background: #fff; border-radius: 26px; padding: 64px 30px 30px; border: 1px solid rgba(52,53,57,0.06);
  box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -28px rgba(52,53,57,0.25); }
.cap-quotes .qcard::before { content: "\201C"; position: absolute; left: 26px; top: 6px; font-family: Georgia, serif; font-size: 84px; line-height: 1; color: var(--orange); }
.cap-quotes .qcard p { color: var(--ink); font-size: 17px; line-height: 1.6; margin: 0 0 22px; }
.cap-quotes .qcard cite { font-style: normal; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--ink-dim); }

@media (max-width: 1100px) { .cap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cap-quotes { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cap-tiles { grid-template-columns: 1fr; } .cap-value { padding-top: 36vh; } .cap-door .cap-h { font-size: clamp(32px, 9vw, 44px); } }

/* =====================================================================
   Capabilities: SaaS vs Outcome as a Service, bento grid
   ===================================================================== */
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(300px, auto); gap: 20px; }
.bx-lead, .bx-tile { position: relative; border-radius: 28px; overflow: hidden; }
/* the statement tile: graphite, like a window back into the sections above */
.bx-lead { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 3vw, 48px);
  background: radial-gradient(80% 60% at 100% 0%, rgba(214,224,238,0.10) 0%, rgba(214,224,238,0) 60%), linear-gradient(160deg, #1A1D22 0%, #0F1114 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 40px 80px -30px rgba(13,15,18,0.55); color: #fff; }
.cap-value .bx-lead .cap-h { color: #fff; margin: 0; font-size: clamp(36px, 3.4vw, 60px); line-height: 1.04; }
.cap-value .bx-lead .cap-h .h-rest { color: #fff; }
.cap-value .bx-lead .cap-h .h-rest .h-lead { color: var(--orange); }
.bx-viz { display: block; width: 100%; height: auto; overflow: visible; }
.bx-viz--snap { margin-top: 40px; }

/* the four outcome tiles: the homepage's silver cards */
.bx-tile { display: flex; flex-direction: column; padding: 26px 26px 28px; color: var(--ink);
  background:
    radial-gradient(70% 60% at 100% 100%, rgba(59,72,88,0.16) 0%, rgba(59,72,88,0) 70%),
    radial-gradient(60% 50% at 0% 0%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, var(--paper) 0%, var(--silver-2) 100%);
  border: 1px solid rgba(52,53,57,0.08); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 24px 60px -26px rgba(52,53,57,0.24);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), border-color 500ms var(--ease-out); }
.bx-tile:hover { transform: translateY(-6px); border-color: rgba(245,96,28,0.45); box-shadow: 0 1px 2px rgba(52,53,57,0.04), 0 36px 80px -26px rgba(52,53,57,0.3); }
.bx-top { display: flex; align-items: center; justify-content: space-between; }
.bx-icon { width: 44px; height: 44px; border-radius: 13px; background: var(--c); display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.08), 0 8px 18px -8px rgba(20,22,26,0.45); }
.bx-icon svg { width: 72%; height: 72%; }
.bx-tile .n { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1; color: rgba(52,53,57,0.35); }
.bx-tile .bx-viz { margin: 18px 0 14px; }
.bx-tile h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; font-size: 19px; color: var(--ink); margin: auto 0 8px; }
.bx-tile p { color: var(--ink-dim); font-size: 15px; line-height: 1.55; margin: 0; }

/* line graphics: drawn in when the tile arrives, one orange moment each */
.bx-ln { fill: none; stroke: rgba(52,53,57,0.32); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1); }
.in .bx-ln { stroke-dashoffset: 0; }
.bx-ln--out, .bx-ln--grow, .bx-ln--shift, .bx-ln--track { stroke: var(--orange); stroke-width: 2.4; }
.bx-ln--out { transition-delay: 700ms; }
.bx-ln--ghost { stroke-dasharray: 3 6; stroke-dashoffset: 0; opacity: 0; transition: opacity 600ms ease; }
.in .bx-ln--ghost { opacity: 1; }
.bx-ln--shift { transition-delay: 500ms; }
.bx-src { fill: rgba(52,53,57,0.45); }
.bx-pulse { fill: var(--orange); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 400ms ease 1200ms; }
.in .bx-pulse { opacity: 1; animation: bxPulse 2.4s ease-in-out 1.6s infinite; }
@keyframes bxPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(245,96,28,0)); } 50% { transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(245,96,28,0.6)); } }
.bx-net path { fill: none; stroke: rgba(52,53,57,0.28); stroke-width: 1.6; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms; }
.in .bx-net path { stroke-dashoffset: 0; }
.bx-node { fill: #fff; stroke: rgba(52,53,57,0.4); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.in .bx-node { transform: scale(1); }
.in .bx-node:nth-of-type(2) { transition-delay: 120ms; } .in .bx-node:nth-of-type(3) { transition-delay: 240ms; } .in .bx-node:nth-of-type(4) { transition-delay: 360ms; } .in .bx-node:nth-of-type(5) { transition-delay: 480ms; }
.bx-node--hub { fill: var(--orange); stroke: none; }
.bx-step { fill: #fff; stroke: rgba(52,53,57,0.4); stroke-width: 1.6; opacity: 0; transition: opacity 400ms ease; }
.in .bx-step { opacity: 1; }
.in .bx-step:nth-of-type(1) { transition-delay: 400ms; } .in .bx-step:nth-of-type(2) { transition-delay: 700ms; } .in .bx-step:nth-of-type(3) { transition-delay: 1000ms; }
.bx-step--now { fill: var(--orange); stroke: none; }
.in .bx-step--now { transition-delay: 1300ms; }

/* statement tile: scattered tools snap into one line, then the outcome lights */
.bx-lead .bx-ln--track { stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset 1200ms cubic-bezier(0.22, 1, 0.36, 1) 900ms; }
.bx-lead.in .bx-ln--track { stroke-dashoffset: 0; }
.bx-pc { fill: rgba(255,255,255,0.10); stroke: rgba(255,255,255,0.35); stroke-width: 1.2; transform-box: fill-box; transform-origin: center;
  transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), fill 600ms ease 1100ms, stroke 600ms ease 1100ms; }
.bx-lead.in .bx-pc { transform: none; fill: rgba(255,255,255,0.92); stroke: rgba(255,255,255,0); }
.bx-lead.in .bx-pc:nth-child(2) { transition-delay: 60ms, 1160ms, 1160ms; } .bx-lead.in .bx-pc:nth-child(3) { transition-delay: 120ms, 1220ms, 1220ms; }
.bx-lead.in .bx-pc:nth-child(4) { transition-delay: 180ms, 1280ms, 1280ms; } .bx-lead.in .bx-pc:nth-child(5) { transition-delay: 240ms, 1340ms, 1340ms; } .bx-lead.in .bx-pc:nth-child(6) { transition-delay: 300ms, 1400ms, 1400ms; }
.bx-lead .bx-pulse { transition-delay: 1900ms; }
.bx-lead.in .bx-pulse { animation-delay: 2.3s; }
.bx-pieces { position: relative; }
.bx-lead .bx-ln--track { stroke: var(--orange); }

@media (prefers-reduced-motion: reduce) { .bx-ln, .bx-net path { transition: none; stroke-dashoffset: 0; } .bx-pc, .bx-node { transition: none; transform: none; } .bx-pulse, .bx-step { opacity: 1; animation: none; transition: none; } }
@media (max-width: 1100px) { .bento { grid-template-columns: 1fr 1fr; } .bx-lead { grid-column: span 2; grid-row: auto; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bx-lead { grid-column: auto; } .cap-value .bx-lead .cap-h { font-size: clamp(30px, 8.4vw, 40px); } }
.bx-viz--snap { margin-top: auto; }
.bx-viz--snap { max-width: 520px; }

/* =====================================================================
   Capabilities: Echoed by our leaders. Portrait graphics with the quote beneath.
   ===================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: 8px; }
.ld { margin: 0; }
.ld:nth-child(2) { margin-top: clamp(40px, 6vh, 72px); }   /* a gentle offset so the row reads like an editorial spread */
.ld-art { position: relative; aspect-ratio: 645 / 1086; max-width: 380px; transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out); filter: drop-shadow(0 30px 40px rgba(20,22,26,0.22)); }
.ld-art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ld:hover .ld-art { transform: translateY(-8px); filter: drop-shadow(0 40px 50px rgba(20,22,26,0.28)); }
/* stand-in until Chantelle's and David's portraits arrive: the same panel shape, name and role */
.ld-ph { position: absolute; inset: 0; border-radius: 52px 0 0 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 26px 34px;
  background: linear-gradient(180deg, #2E3034 0%, #1C1D20 100%);
  clip-path: polygon(0 0, 52.6% 0, 52.6% 42%, 100% 42%, 100% 100%, 0 100%); }
.ld-ph::before { content: ""; position: absolute; left: 50%; top: 22%; width: 46%; aspect-ratio: 1; transform: translateX(-30%); border-radius: 50%; background: rgba(255,255,255,0.06); }
.ld-ph::after { content: ""; position: absolute; left: 50%; top: 52%; width: 86%; height: 40%; transform: translateX(-46%); border-radius: 50% 50% 0 0; background: rgba(255,255,255,0.05); }
.ld-ph-name { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: clamp(22px, 2vw, 32px); line-height: 1.1; letter-spacing: -0.01em; }
.ld-ph-role { position: relative; z-index: 1; color: rgba(255,255,255,0.9); font-size: clamp(16px, 1.4vw, 22px); margin-top: 4px; }
.ld-q { position: relative; margin: 26px 0 0; padding: 0 0 0 30px; max-width: 380px; }
.ld-q::before { content: "\201C"; position: absolute; left: -2px; top: -16px; font-family: Georgia, serif; font-size: 64px; line-height: 1; color: var(--orange); }
.ld-q p { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.6; }
@media (max-width: 1100px) { .leaders { grid-template-columns: 1fr 1fr; } .ld:nth-child(2) { margin-top: 0; } }
@media (max-width: 640px) { .leaders { grid-template-columns: 1fr; } .ld-art { max-width: 320px; } }
/* placeholder, simplified: plain panel in the graphic's colour, name and role only */
.ld-ph { clip-path: none; border-radius: 52px 0 0 0; padding: 0 28px 28px 30px; background: linear-gradient(180deg, #303236 0%, #1E1F22 100%); }
.ld-ph::before, .ld-ph::after { display: none; }
.ld-ph-name { font-size: clamp(22px, 1.9vw, 30px); }

/* no sideways movement: decorative glows and blooms are clipped at the page edge (clip keeps the pinned sections working) */
html, body { overflow-x: clip; }
.bflow, .zpd2, .cflow, .cap-value, .cap-leaders, .cap-door { overflow-x: clip; }
html { overscroll-behavior-x: none; }
/* Builder copy never runs past the right edge on smaller laptops */
@media (max-width: 1180px) and (min-width: 1021px) { .bflow-copy { left: 55%; right: 28px; } .bflow-copy .bf-h2 .h-rest { white-space: normal; } }
/* leaders: real portraits; on hover, focus or tap the panel turns Superworker orange */
.ld-art { aspect-ratio: auto; }
.ld-art img { height: auto; }
.ld-art .ld-hot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 450ms var(--ease-out); }
.ld:hover .ld-hot, .ld:focus-visible .ld-hot, .ld.is-picked .ld-hot { opacity: 1; }
.ld { outline: none; cursor: default; }
.ld:focus-visible .ld-art { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 40px 8px 8px 8px; }
/* scroll cue: always present through the hero (JS fades it with the hero text), easier to see */
.bflow.bf-ready .bf-cue { opacity: 1; }
.bflow.is-static .bf-cue { display: none; }
.bf-cue { z-index: 6; bottom: 36px; gap: 12px; color: rgba(255,255,255,0.78); font-size: 12px; letter-spacing: 0.28em; font-weight: 500; }
.bf-cue i { height: 54px; background: rgba(255,255,255,0.22); }

/* =====================================================================
   Capabilities: "in your own context". Builder names the academy, Companion makes it yours.
   ===================================================================== */
.cap-door { padding-top: 14vh; padding-bottom: 16vh; }
.cap-door .lede { margin-bottom: 48px; }
.play { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) 56px auto minmax(220px, 0.62fr); align-items: center; gap: 0 20px; text-align: left; margin: 0 auto 56px; max-width: 1320px; }
.pl-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: rgba(255,255,255,0.78); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; }
.pl-tag span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-weight: 700; letter-spacing: 0; font-size: 12px; }
.pl-companion .pl-tag { white-space: nowrap; }

/* laptop */
.pl-laptop-box { position: relative; width: 100%; }
.pl-laptop { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pl-laptop .laptop-lid { transform: none !important; opacity: 1 !important; transition: none; }
.pl-laptop .laptop-shadow { top: 742px; height: 120px; left: -60px; width: 1320px; background: radial-gradient(50% 50% at 50% 40%, rgba(0,0,0,0.7), rgba(0,0,0,0) 70%); filter: blur(10px); }
.pl-bscreen { position: absolute; left: 111px; top: 28px; width: 978px; height: 612px; overflow: hidden; border-radius: 6px; background: #2B2D31; }
.pb-ui { position: absolute; left: 0; top: 0; width: 1280px; height: 801px; transform: scale(0.7641); transform-origin: 0 0; color: #fff; font-family: var(--font-display);
  background: radial-gradient(120% 70% at 10% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%), repeating-radial-gradient(140% 90% at 120% 120%, rgba(255,255,255,0.05) 0 2px, rgba(255,255,255,0) 2px 46px), linear-gradient(180deg, #4A4C51 0%, #2E3034 100%); }
.pb-cols { position: absolute; inset: 0 0 92px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.pb-col { position: relative; padding: 0 26px; border-right: 1px solid rgba(255,255,255,0.08); }
.pb-col:last-child { border-right: 0; }
.pb-col h4 { margin: 0 -26px 22px; padding: 22px 0; text-align: center; font-weight: 300; font-size: 30px; letter-spacing: 0.02em; text-transform: uppercase; background: rgba(255,255,255,0.06); }
.pb-sub { margin: 0 0 14px; font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.pb-sub--roles { margin-top: 34px; }
.pb-bubble { height: 46px; width: 82%; border-radius: 6px; background: rgba(255,255,255,0.78); margin-bottom: 14px; }
.pb-bubble--me { width: 56%; margin-left: auto; background: rgba(160,176,192,0.75); }
.pb-bubble--s { width: 64%; }
.pb-field { position: relative; display: block; margin-top: 6px; padding: 14px 16px 12px; border-radius: 10px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); }
.pb-field span { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.pb-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 700 30px/1.15 var(--font-display); letter-spacing: 0.01em; padding: 0; caret-color: var(--orange); }
.play.is-typing .pb-field { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(245,96,28,0.18); }
.pb-caret { position: absolute; right: 16px; bottom: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); animation: pbPulse 1.6s ease-in-out infinite; }
.play.is-typing .pb-caret { opacity: 0; }
@keyframes pbPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,96,28,0.6); } 50% { box-shadow: 0 0 0 10px rgba(245,96,28,0); } }
.pb-build { display: block; margin: 16px 0 0 auto; padding: 10px 26px; border-radius: 999px; border: 0; background: var(--orange); color: #fff; font: 700 17px var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.pb-build:hover { background: var(--orange-hover); }
.pb-rolebar { height: 18px; width: 70%; border-radius: 9px; background: rgba(255,255,255,0.12); margin-bottom: 12px; }
.pb-rolebar--s { width: 48%; }
.pb-journey { list-style: none; margin: 0; padding: 0; counter-reset: j; }
.pb-journey li { counter-increment: j; display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: 8px; background: rgba(255,255,255,0.07); font-size: 16px; }
.pb-journey li b { font-weight: 700; }
.pb-journey li b::before { content: counter(j) "  "; color: var(--orange); }
.pb-journey li span { color: rgba(255,255,255,0.6); text-transform: uppercase; font-size: 13px; letter-spacing: 0.1em; }
.pb-dock { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 26px 10px 20px; border-radius: 12px; background: rgba(30,32,36,0.82); }
.pb-dock-ico { width: 40px; height: 40px; border-radius: 10px; }
.pb-dock-ico--on { box-shadow: 0 0 0 2px #fff inset; }
.pb-dock b { margin-left: 20px; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; }

/* the hand-off line */
.pl-link { position: relative; height: 2px; align-self: center; margin-top: 30px; background: rgba(255,255,255,0.14); border-radius: 2px; overflow: visible; }
.pl-link i { position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); opacity: 0; }
.pl-link.is-sending { background: linear-gradient(90deg, rgba(245,96,28,0.2), rgba(245,96,28,0.8)); }
.pl-link.is-sending i { animation: plSend 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes plSend { 0% { left: 0; opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0.2; } }

/* phone */
.pl-phone-box { position: relative; height: clamp(440px, 62vh, 600px); }
.pl-phone { position: absolute; left: 0; top: 0; width: 380px; height: 785px; transform-origin: 0 0; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55)); }
.pl-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pc-screen { --acc: #F5601C; position: absolute; left: 10.5px; top: 9px; width: 357px; height: 768px; border-radius: 54px; overflow: hidden; font-family: var(--font-display); color: #fff;
  background: repeating-radial-gradient(160% 110% at 130% 40%, rgba(255,255,255,0.045) 0 3px, rgba(255,255,255,0) 3px 38px), linear-gradient(180deg, #2A2C30 0%, #17181B 100%); transition: background 500ms ease, color 500ms ease; }
.pc-screen[data-style="light"] { color: #2A2C30; background: repeating-radial-gradient(160% 110% at 130% 40%, rgba(0,0,0,0.035) 0 3px, rgba(0,0,0,0) 3px 38px), linear-gradient(180deg, #F6F7F9 0%, #E5E8EC 100%); }
.pc-status { display: flex; justify-content: space-between; align-items: center; padding: 18px 34px 0 40px; font-family: var(--font-body); font-size: 15px; }
.pc-sig { width: 54px; height: 11px; border-radius: 3px; background: linear-gradient(90deg, currentColor 0 30%, transparent 30% 38%, currentColor 38% 62%, transparent 62% 70%, currentColor 70%); opacity: 0.85; }
.pc-head { display: flex; align-items: center; gap: 10px; margin: 30px 16px 6px; padding: 10px 12px 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.pc-screen[data-style="light"] .pc-head { background: rgba(255,255,255,0.8); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 6px 16px -10px rgba(0,0,0,0.3); }
.pc-head b { flex: 1; text-align: center; font-size: 17px; letter-spacing: 0.06em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 400ms ease; }
.pc-head b.is-new { animation: pcNew 0.9s ease; }
@keyframes pcNew { 0% { color: var(--acc); text-shadow: 0 0 14px var(--acc); } 100% { text-shadow: 0 0 0 transparent; } }
.pc-chev { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); opacity: 0.7; }
.pc-menu { width: 30px; height: 30px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px var(--acc); transition: background 400ms ease, box-shadow 400ms ease; }
.pc-path { list-style: none; margin: 0; padding: 4px 0 0; position: relative; }
.pc-mod { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 18px; margin: 0 14px 6px; border-radius: 22px; opacity: 0; transform: translateY(16px); transition: opacity 500ms ease calc(var(--i) * 90ms), transform 600ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 90ms); }
.pc-in .pc-mod { opacity: 1; transform: none; }
.pc-mod::before { content: ""; position: absolute; inset: 0; border-radius: 22px; border: 1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03); }
.pc-screen[data-style="light"] .pc-mod::before { border-color: rgba(0,0,0,0.10); background: rgba(255,255,255,0.55); }
.pc-mod--r { flex-direction: row-reverse; text-align: right; }
.pc-txt { position: relative; flex: 1; min-width: 0; }
.pc-txt b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-txt small { display: block; font-size: 12px; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.pc-act { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.pc-mod--r .pc-act { justify-content: flex-end; }
.pc-box { width: 14px; height: 14px; border: 1.6px solid currentColor; border-radius: 3px; opacity: 0.8; }
.pc-clock { width: 15px; height: 15px; border: 1.6px solid currentColor; border-radius: 50%; opacity: 0.8; position: relative; }
.pc-clock::after { content: ""; position: absolute; left: 50%; top: 2px; width: 4px; height: 5px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; }
.pc-ico { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--acc); box-shadow: 0 8px 18px -8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.35); transition: background 400ms ease, transform 400ms ease; }
.pc-ico::after { content: ""; position: absolute; inset: 13px; background: #fff; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.pc-screen[data-icons="line"] .pc-ico { background: transparent; box-shadow: inset 0 0 0 2px var(--acc); }
.pc-screen[data-icons="line"] .pc-ico::after { background: var(--acc); }
.pc-screen.is-swap .pc-ico { animation: pcSwap 0.5s ease; }
@keyframes pcSwap { 0% { transform: scale(0.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.pc-bar { position: absolute; left: 14px; right: 14px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-radius: 999px; background: rgba(10,11,13,0.9); color: #fff; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pc-screen[data-style="light"] .pc-bar { background: rgba(255,255,255,0.95); color: #2A2C30; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.35); }
.pc-bar .pc-on { color: var(--acc); transition: color 400ms ease; }
.pc-logo { width: 22px; height: 26px; border: 2.4px solid currentColor; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border-left-color: transparent; transform: rotate(18deg); opacity: 0.9; }

/* controls: Apple-style pills */
.pl-controls { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.pl-pill { border-radius: 22px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); overflow: hidden; transition: background 300ms ease; }
.pl-pill.is-open { background: rgba(255,255,255,0.09); }
.pl-pill-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 18px; cursor: pointer; color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; font-weight: 700; }
.pl-pill-head i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6); position: relative; }
.pl-pill-head i::before, .pl-pill-head i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); }
.pl-pill-head i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 300ms ease; }
.pl-pill.is-open .pl-pill-head i::after { transform: translate(-50%, -50%) rotate(0deg); }
.pl-pill-head:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; border-radius: 22px; }
.pl-pill-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--ease-out); padding: 0 18px; }
.pl-pill-body > * { overflow: hidden; }
.pl-pill-body { display: block; max-height: 0; overflow: hidden; transition: max-height 400ms var(--ease-out), padding 400ms var(--ease-out); }
.pl-pill.is-open .pl-pill-body { max-height: 200px; padding-bottom: 16px; }
.pl-pill-body p { margin: 0 0 12px; color: rgba(255,255,255,0.66); font-size: 14px; line-height: 1.45; }
.pl-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-swatches button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--sw); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); transition: transform 200ms ease, box-shadow 200ms ease; }
.pl-swatches button[aria-checked="true"] { box-shadow: 0 0 0 2px #0D0F12, 0 0 0 4px #fff; }
.pl-swatches button:hover { transform: scale(1.1); }
.pl-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.35); }
.pl-seg button { border: 0; background: transparent; color: rgba(255,255,255,0.75); padding: 7px 14px; border-radius: 999px; cursor: pointer; font: 600 13px var(--font-body); }
.pl-seg button[aria-checked="true"] { background: #fff; color: #14171C; }

@media (max-width: 1180px) { .play { grid-template-columns: minmax(0, 1fr) auto; gap: 28px 32px; } .pl-builder { grid-column: 1 / -1; } .pl-link { display: none; } }
@media (max-width: 760px) { .play { grid-template-columns: 1fr; justify-items: center; } .pl-builder, .pl-companion, .pl-controls { width: 100%; } .pl-phone-box { margin: 0 auto; height: 520px; } .pl-companion .pl-tag { white-space: normal; } }
.pc-screen[data-icons="classic"] .pc-ico[data-k="view"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M11%209%20L31%2019%20L22%2022%20L18%2031%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M11%209%20L31%2019%20L22%2022%20L18%2031%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); }
.pc-screen[data-icons="classic"] .pc-ico[data-k="watch"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M14%2010%20L31%2020%20L14%2030%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M14%2010%20L31%2020%20L14%2030%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); }
.pc-screen[data-icons="classic"] .pc-ico[data-k="read"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%2210%22%20y%3D%2211%22%20width%3D%2220%22%20height%3D%223.6%22%20rx%3D%221.8%22%20fill%3D%22%23000%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2218.2%22%20width%3D%2220%22%20height%3D%223.6%22%20rx%3D%221.8%22%20fill%3D%22%23000%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2225.4%22%20width%3D%2213%22%20height%3D%223.6%22%20rx%3D%221.8%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Crect%20x%3D%2210%22%20y%3D%2211%22%20width%3D%2220%22%20height%3D%223.6%22%20rx%3D%221.8%22%20fill%3D%22%23000%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2218.2%22%20width%3D%2220%22%20height%3D%223.6%22%20rx%3D%221.8%22%20fill%3D%22%23000%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2225.4%22%20width%3D%2213%22%20height%3D%223.6%22%20rx%3D%221.8%22%20fill%3D%22%23000%22/%3E%3C/svg%3E"); }
.pc-screen[data-icons="dots"] .pc-ico[data-k="view"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M12%2012%20L28%2028%20M28%2012%20L12%2028%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M12%2012%20L28%2028%20M28%2012%20L12%2028%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); }
.pc-screen[data-icons="dots"] .pc-ico[data-k="watch"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M13%2012%20L29%2020%20L13%2028%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20fill%3D%22none%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M13%2012%20L29%2020%20L13%2028%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20fill%3D%22none%22/%3E%3C/svg%3E"); }
.pc-screen[data-icons="dots"] .pc-ico[data-k="read"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2229%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2211%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M11%2029%20L29%2011%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2229%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2211%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M11%2029%20L29%2011%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); }
.pc-screen[data-icons="line"] .pc-ico[data-k="view"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M6%2020%20C%2011%2012%2C%2029%2012%2C%2034%2020%20C%2029%2028%2C%2011%2028%2C%206%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M6%2020%20C%2011%2012%2C%2029%2012%2C%2034%2020%20C%2029%2028%2C%2011%2028%2C%206%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3C/svg%3E"); }
.pc-screen[data-icons="line"] .pc-ico[data-k="watch"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3Cpath%20d%3D%22M17%2014.5%20L26%2020%20L17%2025.5%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3Cpath%20d%3D%22M17%2014.5%20L26%2020%20L17%2025.5%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"); }
.pc-screen[data-icons="line"] .pc-ico[data-k="read"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M12%207%20H24%20L30%2013%20V33%20H12%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%2019%20H26%20M16%2024%20H26%20M16%2029%20H22%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M12%207%20H24%20L30%2013%20V33%20H12%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%2019%20H26%20M16%2024%20H26%20M16%2029%20H22%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }
.play { align-items: end; }
.pl-builder .pl-tag, .pl-companion .pl-tag { margin-bottom: 18px; }
.pl-link { align-self: center; }
.pl-controls { align-self: center; }

/* "own context" v2: a big laptop showing the real Builder screen, the phone overlapping it, a readable callout for the name */
.play { grid-template-columns: minmax(0, 1fr) auto minmax(210px, 250px); gap: 0 28px; align-items: center; max-width: 1400px; }
.pl-builder { position: relative; margin-right: -120px; z-index: 1; }
.pl-companion { position: relative; z-index: 2; }
.pl-companion .pl-tag { justify-content: flex-start; }
.pl-bscreen { background: #3A3C40; }
.pb-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.pb-live { position: absolute; left: 343px; top: 349px; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 12.2px/1.2 "Roboto Condensed", "Arial Narrow", sans-serif; color: #fff; letter-spacing: 0.005em; transform: scaleX(0.92); transform-origin: 0 50%; }
.pb-ring { position: absolute; left: 334px; top: 342px; width: 140px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 2px var(--orange); opacity: 0; pointer-events: none; }
.pb-ring.is-on { animation: pbRing 0.9s ease; }
.play.is-typing .pb-ring { opacity: 1; animation: none; }
@keyframes pbRing { 0% { opacity: 1; } 100% { opacity: 0; } }
/* readable callout, glass, pointing at the name on the screen */
.pb-callout { position: absolute; z-index: 3; left: 4%; top: 58%; width: min(360px, 46%); padding: 16px 18px 14px; border-radius: 18px;
  background: rgba(22,24,28,0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 24px 50px -20px rgba(0,0,0,0.7); }
.pb-callout::after { content: ""; position: absolute; right: -46px; top: 30px; width: 46px; height: 1.5px; background: linear-gradient(90deg, rgba(245,96,28,0.9), rgba(245,96,28,0)); }
.pb-callout label { display: block; color: rgba(255,255,255,0.6); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; margin-bottom: 8px; }
.pb-callout-row { display: flex; gap: 10px; align-items: center; }
.pb-callout input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  color: #fff; font: 700 18px/1.2 var(--font-display); caret-color: var(--orange); }
.play.is-typing .pb-callout input { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 4px rgba(245,96,28,0.16); }
.pb-callout .pb-build { margin: 0; padding: 10px 16px; font-size: 14px; }
.pb-callout-hint { display: block; margin-top: 8px; color: rgba(255,255,255,0.5); font-size: 12.5px; }
.pb-caret, .pb-field { display: none; }
@media (max-width: 1180px) { .play { grid-template-columns: minmax(0, 1fr) auto; } .pl-builder { grid-column: 1 / -1; margin-right: 0; } .pb-callout { top: auto; bottom: 10%; } }
@media (max-width: 760px) { .play { grid-template-columns: 1fr; } .pb-callout { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 12px; } .pb-callout::after { display: none; } }
.pb-callout { top: 34%; left: 1%; width: min(340px, 40%); }
.pb-callout::after { top: auto; bottom: 40px; right: -40px; width: 40px; }
@media (max-width: 1180px) { .pb-callout { top: auto; bottom: 8%; } }
@media (max-width: 760px) { .pb-callout { top: auto; bottom: auto; left: auto; width: 100%; } }
/* callout sits on the deck, below the screen, so the live name on the screen stays visible */
.pb-callout { top: auto; bottom: -6%; left: 4%; width: min(380px, 44%); }
.pb-callout::after { display: none; }
.pl-builder { padding-bottom: 40px; }
.pc-head b { letter-spacing: 0.03em; font-size: 16px; }
@media (max-width: 1180px) { .pb-callout { bottom: -6%; } }

/* Builder screen from the Figma file (BUilder_Claude, frame 1:14): a 1920x1080 render; the academy heading and its
   "Building" tag are live, placed at the design's own coordinates (675,127), Roboto Condensed Bold 20 / Roboto Bold 12 */
.pl-bscreen { background: #1b1c1f; }
.pb-layer { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(0.509375, 0.566667); pointer-events: none; }
.pb-acad { position: absolute; left: 675px; top: 127px; display: flex; align-items: center; gap: 16px; height: 23px; }
.pb-acad .pb-live { position: static; max-width: 560px; transform: none; font: 700 20px/23px "Roboto Condensed", "Arial Narrow", sans-serif; color: #fff; text-transform: uppercase; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-tag { flex: none; height: 20px; padding: 0 10px; border-radius: 5px; background: #224F99; color: #fff; font: 700 12px/20px "Roboto", sans-serif; }
.pb-acad .pb-ring { position: absolute; left: -8px; top: -6px; right: -8px; bottom: -6px; width: auto; height: auto; border-radius: 8px; box-shadow: 0 0 0 3px var(--orange); opacity: 0; }
.pb-acad .pb-ring.is-on { animation: pbRing 0.9s ease; }
.play.is-typing .pb-acad .pb-ring { opacity: 1; animation: none; }

/* Companion screen from the Figma file (BUilder_Claude, frame 1:216 "iPhone 16 - 1"): the design's own render, with the
   journey title live, the accent colour re-tinted through a mask of the design's orange, and optional icon sets on top */
.pc-screen.pcf { background: #111; }
.pcf-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; transition: filter 500ms ease; }
.pcf-accent { position: absolute; inset: 0; background: var(--acc); mix-blend-mode: color; pointer-events: none; transition: background 400ms ease;
  -webkit-mask: url("../assets/play-companion-accent.png") 0 0 / 100% 100% no-repeat; mask: url("../assets/play-companion-accent.png") 0 0 / 100% 100% no-repeat; }
.pcf-layer { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform-origin: 0 0; transform: scale(0.90840, 0.90141); }
.pcf-title { position: absolute; left: 34px; top: 73px; width: 286px; height: 34px; display: flex; align-items: center; justify-content: center;
  font: 700 18px/1 "Roboto Condensed", "Arial Narrow", sans-serif; color: #fff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.pcf-title.is-new { animation: pcNew 0.9s ease; }
.pcf-ico { position: absolute; width: 79px; height: 79px; border-radius: 50%; opacity: 0; transform: scale(0.6); transition: opacity 300ms ease, transform 400ms cubic-bezier(0.34,1.56,0.64,1); }
.pcf-ico::after { content: ""; position: absolute; inset: 20px; background: #fff; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.pc-screen.pcf:not([data-icons="classic"]) .pcf-ico { opacity: 1; transform: none; }
.pc-screen.pcf[data-icons="dots"] .pcf-ico { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acc) 70%, #fff), var(--acc) 70%); box-shadow: 0 8px 18px -6px rgba(0,0,0,0.6); }
.pc-screen.pcf[data-icons="line"] .pcf-ico { background: rgba(20,22,26,0.92); box-shadow: inset 0 0 0 3px var(--acc), 0 8px 18px -6px rgba(0,0,0,0.6); }
.pc-screen.pcf[data-icons="line"] .pcf-ico::after { background: var(--acc); }
/* light: the design inverted to a paper tone, the accent kept rich */
.pc-screen.pcf[data-style="light"] .pcf-base { filter: invert(1) hue-rotate(180deg) brightness(1.06) contrast(0.92); }
.pc-screen.pcf[data-style="light"] .pcf-title { color: #1E1E1E; }
.pc-screen.pcf[data-style="light"][data-icons="line"] .pcf-ico { background: rgba(255,255,255,0.95); }
.pc-screen.pcf .pc-mod, .pc-screen.pcf .pc-path { display: none; }
.pc-screen.pcf[data-icons="dots"] .pcf-ico[data-k="view"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M12%2012%20L28%2028%20M28%2012%20L12%2028%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M12%2012%20L28%2028%20M28%2012%20L12%2028%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); }
.pc-screen.pcf[data-icons="dots"] .pcf-ico[data-k="watch"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M13%2012%20L29%2020%20L13%2028%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20fill%3D%22none%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2228%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M13%2012%20L29%2020%20L13%2028%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20fill%3D%22none%22/%3E%3C/svg%3E"); }
.pc-screen.pcf[data-icons="dots"] .pcf-ico[data-k="read"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2229%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2211%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M11%2029%20L29%2011%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2229%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2211%22%20r%3D%224%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M11%2029%20L29%2011%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22/%3E%3C/svg%3E"); }
.pc-screen.pcf[data-icons="line"] .pcf-ico[data-k="view"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M6%2020%20C%2011%2012%2C%2029%2012%2C%2034%2020%20C%2029%2028%2C%2011%2028%2C%206%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M6%2020%20C%2011%2012%2C%2029%2012%2C%2034%2020%20C%2029%2028%2C%2011%2028%2C%206%2020%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%224.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3C/svg%3E"); }
.pc-screen.pcf[data-icons="line"] .pcf-ico[data-k="watch"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3Cpath%20d%3D%22M17%2014.5%20L26%2020%20L17%2025.5%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22/%3E%3Cpath%20d%3D%22M17%2014.5%20L26%2020%20L17%2025.5%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E"); }
.pc-screen.pcf[data-icons="line"] .pcf-ico[data-k="read"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M12%207%20H24%20L30%2013%20V33%20H12%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%2019%20H26%20M16%2024%20H26%20M16%2029%20H22%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M12%207%20H24%20L30%2013%20V33%20H12%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%2019%20H26%20M16%2024%20H26%20M16%2029%20H22%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }
.pc-screen.pcf .pcf-ico[data-k="brand"]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M26 11c-2-3-9-3-10 1-1 5 10 5 9 11-1 5-9 5-11 1%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%224%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M26 11c-2-3-9-3-10 1-1 5 10 5 9 11-1 5-9 5-11 1%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%224%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.pc-screen.pcf:not([data-icons="classic"]) .pcf-ico:last-child { opacity: 0.35; }
.pc-screen.pcf[data-style="light"] .pcf-accent { mix-blend-mode: normal; opacity: 0.9; }

/* Companion v3: Figma Dark / Light frames on a canvas; free colour pickers for URL, PDF and Video icons */
.pc-screen.pcf { background: #111; }
.pcf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pc-screen.pcf.is-swap .pcf-canvas { animation: pcfSwap 0.5s ease; }
@keyframes pcfSwap { 0% { opacity: 0.55; } 100% { opacity: 1; } }
.pc-screen.pcf[data-style="light"] .pcf-title { color: #111; }
.pl-picks { display: flex; gap: 14px; margin-bottom: 12px; }
.pl-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.pl-pick b { color: rgba(255,255,255,0.8); font: 700 12px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.pl-pick-sw { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35);
  background: conic-gradient(from 0deg, #ff4d4d, #ffb14d, #f5e14d, #5fd36b, #4dc3ff, #6b6bff, #d34dff, #ff4d4d); }
.pl-pick.is-set .pl-pick-sw { box-shadow: 0 0 0 2px #0D0F12, 0 0 0 4px #fff; }
.pl-pick-sw input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.pl-pick:focus-within .pl-pick-sw { outline: 2px solid var(--orange); outline-offset: 3px; }
.pl-reset { all: unset; cursor: pointer; color: rgba(255,255,255,0.55); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.pl-reset:hover { color: #fff; }

/* "own context" layout v3: laptop and phone side by side at true scale (MacBook 312mm wide : iPhone 147.6mm tall),
   no overlap; the three controls sit in a row underneath */
.pc-screen.pcf[data-style="light"] .pcf-title { color: #fff; }
.play { --ph: min(560px, 62vh, calc((min(100vw, 1440px) - 140px) / 2.6)); display: grid; grid-template-columns: auto auto; justify-content: center; align-items: end; gap: 28px 48px; max-width: none; }
.pl-builder { margin: 0; padding: 0; width: calc(var(--ph) * 2.1138); }
.pl-companion { width: calc(var(--ph) * 0.4841); }
.pl-phone-box { height: var(--ph); width: 100% !important; }
.pl-builder .pl-tag, .pl-companion .pl-tag { white-space: nowrap; }
.pl-controls { grid-column: 1 / -1; width: 100%; max-width: calc(var(--ph) * 2.598 + 48px); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; align-items: start; justify-self: center; }
.pl-controls .pl-pill { min-width: 0; }
.pl-pill.is-open .pl-pill-body { max-height: 260px; }
.pl-pill-body .pb-callout-row { display: flex; gap: 10px; align-items: center; }
.pl-pill-body .pb-callout-row input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); color: #fff; font: 700 17px/1.2 var(--font-display); caret-color: var(--orange); }
.play.is-typing .pl-pill-body .pb-callout-row input { box-shadow: inset 0 0 0 1.5px var(--orange), 0 0 0 4px rgba(245,96,28,0.16); }
.pl-pill-body .pb-build { margin: 0; padding: 10px 16px; font-size: 14px; }
/* colour wheels: wrap and shrink rather than clip */
.pl-picks { flex-wrap: wrap; gap: 10px 14px; }
.pl-pick { min-width: 44px; }
.pl-pick-sw { width: 36px; height: 36px; }
@media (max-width: 1100px) {
  .play { --ph: min(520px, 62vh, calc((100vw - 80px) / 2.2)); grid-template-columns: 1fr; justify-items: center; }
  .pl-builder { width: min(calc(var(--ph) * 2.1138), calc(100vw - 48px)); }
  .pl-controls { grid-template-columns: 1fr 1fr; max-width: 760px; }
  .pl-controls .pl-pill:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .play { --ph: min(520px, 120vw); }
  .pl-controls { grid-template-columns: 1fr; }
  .pl-companion .pl-tag, .pl-builder .pl-tag { white-space: normal; }
}
/* icon swatches: the real icons, with an edit badge */
.pl-pick-sw { width: 52px; height: 52px; background: none; box-shadow: 0 6px 14px -6px rgba(0,0,0,0.6); overflow: visible; }
.pl-pick-sw canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.pl-edit { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.4); pointer-events: none; }
.pl-edit::after { content: ""; position: absolute; inset: 5px; background: #14171C; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%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 24 24'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z' fill='none' stroke='black' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pl-pick:hover .pl-pick-sw { transform: translateY(-2px); }
.pl-pick-sw { transition: transform 200ms ease; }
.pl-pick.is-set .pl-pick-sw { box-shadow: 0 0 0 2px #0D0F12, 0 0 0 4px rgba(255,255,255,0.9), 0 6px 14px -6px rgba(0,0,0,0.6); }
.pl-pick-sw input { z-index: 2; }
.pl-companion .pl-tag { white-space: normal; align-items: flex-start; line-height: 1.35; }
.pl-companion .pl-tag span { flex: none; }
/* the laptop artwork is decoration: it never takes clicks, and the controls sit above it */
.pl-laptop, .pl-laptop *, .pl-phone .pl-frame, .laptop-shadow { pointer-events: none; }
.pl-builder, .pl-companion { position: relative; z-index: 1; }
.pl-controls { position: relative; z-index: 5; }

/* ZPD graphic: median line and two ruler axes (Seniority across, Team up), drawn in with the rings */
.zpd2-axes { opacity: var(--draw, 1); }
.zpd2-median { stroke: rgba(255,255,255,0.32); stroke-width: 1.2; stroke-dasharray: 600; stroke-dashoffset: calc(600 * (1 - var(--draw, 1))); }
.zpd2-ruler line { stroke: rgba(255,255,255,0.3); stroke-width: 1.2; }
.zpd2-ruler .zpd2-ruler-base { stroke: rgba(255,255,255,0.26); }
.zpd2-label.zpd2-axis-label { text-anchor: inherit; }
.zpd2-axes text[text-anchor="end"] { text-anchor: end; }
.zpd2-axes text[text-anchor="middle"] { text-anchor: middle; }
.zpd2-svg { overflow: visible; }

/* ZPD graphic v3: refined. Hairline rings and rulers, quiet labels, and one zone lit at a time in its own colour */
.zpd2 { --zblue: #9FB2BE; }
.zpd2-h .zl-blue { color: var(--zblue); }
.zpd2 .zpd2-svg { width: min(46vw, 80vh, 660px); }
.zpd2-ring { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 0.9; stroke-dasharray: 1600; stroke-dashoffset: calc(1600 * (1 - var(--draw, 1))); }
.zpd2-ring--out { stroke-dasharray: 1 5; stroke-dashoffset: 0; stroke: rgba(255,255,255,calc(0.28 + var(--hard, 0) * 0.5)); stroke-width: 1.1; opacity: var(--draw, 1); }
.zpd2-ring--mid { stroke: rgba(255,255,255,calc(0.26 + var(--band, 0) * 0.55)); }
.zpd2-ring--in { stroke: rgba(255,255,255,calc(0.26 + var(--easy, 0) * 0.6)); }
.zpd2-centre { fill: rgba(255,255,255,0.35); opacity: var(--draw, 1); }
.zpd2-core, .zpd2-band, .zpd2-bloom { display: none; }
.zpd2-zone { transition: opacity 500ms var(--ease-out); }
.zpd2-zone--easy { opacity: var(--easy, 0); }
.zpd2-zone--hard { opacity: var(--hard, 0); }
.zpd2-zone--band { opacity: var(--band, 0); }
.zpd2-label { fill: rgba(255,255,255,0.46); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; text-anchor: middle; opacity: var(--draw, 1); transition: fill 500ms ease; }
.zpd2-label--in { fill: rgba(255,255,255,calc(0.46 + var(--easy, 0) * 0.5)); }
.zpd2-label--out { fill: color-mix(in srgb, var(--zblue) calc(var(--hard, 0) * 100%), rgba(255,255,255,0.46)); }
.zpd2-label--mid { fill: color-mix(in srgb, #FFB08A calc(var(--band, 0) * 100%), rgba(255,255,255,0.46)); }
.zpd2-tag { fill: rgba(255,255,255,0.42); font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; }
.zpd2-axes { opacity: calc(var(--draw, 1) * 0.9); }
.zpd2-ruler line { stroke: rgba(255,255,255,0.22); stroke-width: 0.8; }
.zpd2-ruler .zpd2-ruler-base { stroke: rgba(255,255,255,0.16); }
.zpd2-median { stroke: rgba(255,255,255,0.18); stroke-width: 0.8; stroke-dasharray: 2 4; stroke-dashoffset: 0; }
/* the learner: a crisp white point whose ring takes the colour of the zone it is in */
.zpd2-dot-halo { fill: rgba(255,255,255,0.08); }
.zpd2-dot-ring { fill: none; stroke-width: 1.4; stroke: color-mix(in srgb, #F5601C calc(var(--band, 0) * 100%), color-mix(in srgb, var(--zblue) calc(var(--hard, 0) * 100%), #FFFFFF)); }
.zpd2-dot-core { fill: #fff; }
.zpd2-viz::after { display: none; }
.zpd2 { --zblue: #708699; }
/* blue reads as blue, not charcoal: brighter fill in the zone, a lit edge, and the heading line glows in its own colour */
.zpd2-ring--out { stroke: color-mix(in srgb, #A9BBCA calc(var(--hard, 0) * 100%), rgba(255,255,255,0.28)); stroke-width: calc(1.1px + var(--hard, 0) * 0.8px); }
.zpd2-h .zl-blue.is-lit { text-shadow: 0 0 18px rgba(112,134,153,0.85), 0 0 42px rgba(112,134,153,0.45); font-weight: 400; }
.zpd2-label--out { fill: rgba(255,255,255,calc(0.46 + var(--hard, 0) * 0.5)); }
/* Companion phone: vector frame, sharp at any size; the screen sits exactly inside the black border */
.cf-frame { left: -3px; width: calc(100% + 6px); }
.cf-screen { left: 17.5px; top: 13.5px; width: 345px; height: 758px; border-radius: 48.5px; }
.cflow.is-static .cf-screen { left: 11.9px; top: 9.2px; width: 236px; height: 518.5px; border-radius: 33px; }
.cf-scr { image-rendering: auto; }

/* ===== Companion opening: Face ID, welcome notification, journey and its dropdown (12 Oct) ===== */
.cflow { height: calc(100vh + 840vh); }
.cf-lock { position: absolute; inset: 0; z-index: 1; pointer-events: none; text-align: center; will-change: opacity; }
.cf-clock { position: absolute; left: 0; right: 0; top: 150px; font: 300 84px/1 "Roboto", sans-serif; letter-spacing: -0.02em; color: rgba(255,255,255,0.92); }
.cf-jr { position: absolute; inset: 0; z-index: 1; opacity: 0; --rev: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--rev) * 135% - 35%), transparent calc(var(--rev) * 135%));
          mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--rev) * 135% - 35%), transparent calc(var(--rev) * 135%)); }
.cf-jr img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.cf-jr-t { position: absolute; left: 8.65%; top: 8.57%; width: 72.8%; height: 3.99%; display: flex; align-items: center; justify-content: center;
  font: 700 15.8px/1 "Roboto Condensed", "Arial Narrow", sans-serif; color: #fff; text-transform: uppercase; white-space: nowrap; opacity: var(--tt, 0); }
.cf-screen .cf-scr[data-k="1"], .cf-screen .cf-scr[data-k="2"] { z-index: 2; }
.cf-note { position: absolute; left: 9px; right: 9px; top: 47px; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 11px 14px 11px 11px;
  border-radius: 24px; background: rgba(38,40,46,0.66); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.14), 0 14px 30px -12px rgba(0,0,0,0.7); opacity: 0; transform-origin: 50% 0; will-change: transform, opacity; }
.cf-note-ic { width: 40px; height: 40px; border-radius: 10px; flex: none; display: block; }
.cf-note-tx { flex: 1; min-width: 0; }
.cf-note-app { margin: 0 0 3px; display: flex; justify-content: space-between; font: 500 11.5px/1.2 "Roboto", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.58); }
.cf-note-app span { text-transform: none; letter-spacing: 0; }
.cf-note-msg { margin: 0; font: 700 15.5px/1.25 "Roboto", sans-serif; color: #fff; }
.cf-fid { position: absolute; left: 114.3px; top: 10.9px; width: 151.8px; z-index: 2; pointer-events: none; opacity: 0; }
.cf-fid svg { display: block; width: 100%; height: auto; }
.cf-dd { position: absolute; left: 0; top: 0; z-index: 4; width: 312px; height: 34px; border-radius: 17px; overflow: hidden; opacity: 0; transform-origin: 0 0; pointer-events: none;
  background: rgba(30,30,30,0.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13), 0 30px 60px -24px rgba(0,0,0,0.75); will-change: transform, opacity, height; }
.cf-dd-row { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font: 700 18px/21px "Roboto Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; color: #97A6B3; white-space: nowrap; }
.cf-dd-row:nth-child(1) { top: 6.5px; } .cf-dd-row:nth-child(2) { top: 51px; } .cf-dd-row:nth-child(3) { top: 87px; } .cf-dd-row:nth-child(4) { top: 123px; }
.cf-dd-row.is-cur { color: #fff; }
.cflow.is-static .cf-lock, .cflow.is-static .cf-jr, .cflow.is-static .cf-note, .cflow.is-static .cf-fid, .cflow.is-static .cf-dd { display: none; }
.cflow { height: calc(100vh + 880vh); } /* notification holds longer (13 Oct) */
/* price film: the same soft focus as the hero film (13 Oct) */
#price .price-field { overflow: hidden; }
#price video.price-still { filter: blur(7px) saturate(1.05); }
/* price film: 10% less colour (13 Oct); the pre-blurred still on the copy side matches */
#price video.price-still { filter: blur(7px) saturate(0.9); }
#price .price-still--soft { filter: saturate(0.9); }

/* ===== The price, 13 Oct: film shifted left; the calculator becomes a stacked card on the right ===== */
#price video.price-still { transform: translateX(-7%) scale(1.28); transform-origin: 50% 0%; }
#price .price-still--soft { transform: translateX(-7%) scale(1.18); transform-origin: 50% 0%; }
@media (min-width: 1021px) {
  #price > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 440px); grid-template-rows: auto auto auto auto auto;
    column-gap: clamp(48px, 6vw, 120px); align-content: center; }
  #price > .wrap > .kicker { grid-column: 1; grid-row: 1; margin-top: 0; }
  #price .price-line { grid-column: 1; grid-row: 2; }
  #price .price-note { grid-column: 1; grid-row: 3; }
  #price .mini-out { grid-column: 1; grid-row: 4; align-self: start; }
  #price .mini-calc { grid-column: 2; grid-row: 1 / 5; align-self: center; margin-top: 0;
    grid-template-columns: 1fr; padding: 30px 30px 30px; gap: 0; border-radius: 28px; }
  #price .mini-calc .mini-field { border-right: 0; margin-right: 0; padding-right: 0; padding-bottom: 22px; margin-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,0.16); }
  #price .mini-calc .mini-field:nth-of-type(3) { border-bottom: 0; margin-bottom: 8px; padding-bottom: 8px; }
  #price .mini-calc .mini-cta-row { grid-column: 1; padding: 0; margin: 0; justify-content: stretch !important; }
  #price .mini-calc .mini-cta-row .btn { width: 100%; height: 58px; padding: 0 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 12px;
    font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
  #price .mini-calc .mini-cta-row .btn .btn-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  #price .mini-calc .mini-cta-row .btn::after { width: 20px; height: 20px; flex: none; }
  #price .mini-calc .mini-cta-row .btn:hover { transform: translateY(-1px); }
  #price .assure { grid-column: 1 / -1; grid-row: 5; }
}
@media (min-width: 1021px) {
  /* the card's height goes into a spacer row, so the copy on the left keeps its own spacing */
  #price > .wrap { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
  #price .mini-calc { grid-row: 1 / 6; align-self: start; }
  #price .assure { grid-row: 6; }
}
/* the button reads "See the full picture" at every width */
#price .mini-calc .mini-cta-row { justify-content: stretch !important; }
#price .mini-calc .mini-cta-row .btn { width: 100%; height: 58px; padding: 0 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; font-weight: 600; }
#price .mini-calc .mini-cta-row .btn .btn-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
#price .mini-calc .mini-cta-row .btn::after { width: 20px; height: 20px; flex: none; }
/* price card, second pass (13 Oct): the glass no longer boosts colour, so it matches the film behind it */
#price .mini-calc { -webkit-backdrop-filter: blur(18px) saturate(1); backdrop-filter: blur(18px) saturate(1); }
@media (min-width: 1021px) {
  /* bigger card, anchored to the copy: top in line with the kicker, bottom in line with the estimated price */
  #price > .wrap { grid-template-columns: minmax(0, 1fr) clamp(420px, 36vw, 540px); }
  #price .mini-calc { grid-row: 1 / 5; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 40px 40px; border-radius: 32px; }
  #price .mini-calc .mini-field { padding-bottom: 28px; margin-bottom: 28px; }
  #price .mini-calc .mini-field:nth-of-type(3) { padding-bottom: 8px; margin-bottom: 12px; }
  #price .mini-field select, #price .mini-field input { height: 62px; font-size: 18px; }
  #price .mini-calc .mini-cta-row .btn { height: 64px; font-size: 17px; }
}
@media (min-width: 1021px) {
  #price .mini-calc { grid-row: 1 / 6; align-items: stretch; }
  #price .mini-calc > * { width: auto; align-self: stretch; }
}
.or-b { color: var(--orange); font-weight: 700; } /* bold orange words in copy (13 Oct) */
.p-gap { display: block; height: 0.9em; } /* paragraph-style gap inside one paragraph (13 Oct) */
@media (min-width: 1021px) {
  /* price card, third pass (13 Oct): larger field labels and icons, sitting higher in each block */
  #price .mini-calc { padding-top: 30px; }
  #price .mini-calc .mini-field label { font-size: 16px; letter-spacing: 0.08em; min-height: 58px; padding-left: 78px; margin-bottom: 12px; }
  #price .mini-calc .mini-field::after { width: 52px; height: 52px; top: 3px; background-size: 30px 30px; }
  #price .mini-calc .mini-field::before { width: 50px; height: 50px; top: 5px; }
  #price .mini-calc .mini-field { padding-bottom: 24px; margin-bottom: 16px; }
  #price .mini-calc .mini-field:nth-of-type(3) { padding-bottom: 8px; margin-bottom: 12px; }
}
@media (min-width: 1021px) {
  /* price card, fourth pass (13 Oct): larger icons, labels, inputs and button, even spacing, no empty band under the button */
  #price .mini-calc { padding: 36px 36px 36px; justify-content: space-between; }
  #price .mini-calc .mini-field label { font-size: 19px; letter-spacing: 0.07em; min-height: 64px; padding-left: 88px; margin-bottom: 14px; }
  #price .mini-calc .mini-field::after { width: 62px; height: 62px; top: 1px; border-radius: 16px; background-size: 34px 34px; }
  #price .mini-calc .mini-field::before { width: 60px; height: 60px; top: 3px; border-radius: 16px; }
  #price .mini-calc .mini-field { padding-bottom: 22px; margin-bottom: 22px; }
  #price .mini-calc .mini-field:nth-of-type(3) { padding-bottom: 0; margin-bottom: 22px; }
  #price .mini-field select, #price .mini-field input { height: 68px; font-size: 20px; padding-left: 24px; }
  #price .mini-calc .mini-cta-row .btn { height: 70px; font-size: 19px; }
  #price .mini-calc .mini-cta-row .btn::after { width: 22px; height: 22px; }
}
@media (min-width: 1021px) {
  /* price card nudged in from the right edge (13 Oct) */
  #price .mini-calc { position: relative; right: clamp(32px, 4.5vw, 72px); }
}
.cflow { height: calc(100vh + 895vh); } /* Welcome screen holds until the notification has gone (13 Oct) */
/* Companion screen (13 Oct): one clip in the journey layer, Show me first, then Ask me */
.cf-jr .cf-jr-v { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.cflow.is-static .cf-jr { display: block; opacity: 1; --rev: 1; }

/* ===== Companion, 14 Oct: the journey scrolls on the phone and its sources pop out beside it ===== */
.cflow { height: calc(100vh + 1135vh); }
.cf-ask { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; z-index: 2; opacity: 0; pointer-events: none; }
.cf-jr { -webkit-mask-image: none; mask-image: none; }
.cf-pops { position: absolute; inset: 0; z-index: 4; pointer-events: none; --cs: 1; }
.cf-pop { position: absolute; left: 0; top: 0; height: 0; opacity: 0; will-change: transform, opacity; }
/* the card: a hairline line out from the icon, a thin outlined box with the label, and the source's visual at the far end */
.cf-pop-line { position: absolute; top: 0; height: 1px; background: rgba(255,255,255,0.42); transform-origin: 0 50%; }
.cf-pop-box { position: absolute; top: 0; height: calc(60px * var(--cs)); width: calc(320px * var(--cs)); transform: translateY(-50%); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.42); border-radius: calc(16px * var(--cs));
  background: rgba(13,15,18,0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 300 calc(21px * var(--cs))/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.92); white-space: nowrap; }
.cf-pop-vis { position: absolute; top: 0; width: calc(150px * var(--cs)); height: calc(150px * var(--cs)); transform: translate(-50%, -50%); display: block; }
/* right-hand cards grow out to the right; left-hand ones to the left */
.cf-pop--r .cf-pop-line { left: 0; width: calc(72px * var(--cs)); }
.cf-pop--r .cf-pop-box { left: calc(72px * var(--cs)); }
.cf-pop--r .cf-pop-vis { left: calc(392px * var(--cs)); }
.cf-pop--l .cf-pop-line { right: 0; width: calc(72px * var(--cs)); transform-origin: 100% 50%; }
.cf-pop--l .cf-pop-box { right: calc(72px * var(--cs)); }
.cf-pop--l .cf-pop-vis { left: calc(-392px * var(--cs)); }
/* pop: the line draws, the box grows out, the visual lands last */
.cf-pop .cf-pop-line { transform: scaleX(var(--p1, 0)); }
.cf-pop .cf-pop-box { opacity: var(--p2, 0); transform: translateY(-50%) scale(calc(0.9 + 0.1 * var(--p2, 0))); }
.cf-pop--r .cf-pop-box { transform-origin: 0 50%; } .cf-pop--l .cf-pop-box { transform-origin: 100% 50%; }
.cf-pop .cf-pop-vis { opacity: var(--p3, 0); transform: translate(-50%, -50%) translateY(calc(18px * (1 - var(--p3, 0)))) scale(calc(0.86 + 0.14 * var(--p3, 0))); filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55)); }

/* the visuals (placeholders built from the site's own parts, to be swapped for supplied artwork) */
.cf-vis-video img { position: absolute; left: 50%; top: 50%; width: 86%; aspect-ratio: 16 / 10; object-fit: cover; transform: translate(-50%, -50%); border-radius: 8px; box-shadow: 0 0 0 5px #1A1C20, 0 0 0 6px rgba(255,255,255,0.18); display: block; }
.cf-vis-video em { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,0.92); }
.cf-vis-video em::after { content: ""; position: absolute; left: 14px; top: 10px; border-left: 12px solid #111; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.cf-vis-doc .cf-vis-pg { position: absolute; left: 50%; top: 50%; width: 58%; height: 76%; background: #F4F4F2; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,0.35); transform: translate(-50%, -50%) rotate(-9deg) translateX(-14px); }
.cf-vis-doc .cf-vis-pg:nth-child(2) { transform: translate(-50%, -50%) rotate(-3deg) translateX(-6px); }
.cf-vis-doc .cf-vis-pg:nth-child(3) { transform: translate(-50%, -50%) rotate(4deg) translateX(4px); padding: 16px 12px; box-sizing: border-box; }
.cf-vis-doc u, .cf-vis-url u, .cf-vis-action u { display: block; height: 4px; border-radius: 2px; background: #C9C9C4; margin: 0 0 8px; }
.cf-vis-doc u:first-child { width: 60%; background: var(--orange); height: 6px; }
.cf-vis-doc u:nth-child(2) { width: 90%; } .cf-vis-doc u:nth-child(3) { width: 75%; } .cf-vis-doc u:nth-child(4) { width: 85%; }
.cf-vis-url { }
.cf-vis-url .cf-vis-bar, .cf-vis-url .cf-vis-page { position: absolute; left: 50%; width: 92%; background: #F4F4F2; transform: translateX(-50%); box-shadow: 0 10px 22px rgba(0,0,0,0.4); }
.cf-vis-url .cf-vis-bar { top: 22%; height: 22px; border-radius: 8px 8px 0 0; background: #DADAD6; }
.cf-vis-url .cf-vis-bar i { position: absolute; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #AFAFAA; }
.cf-vis-url .cf-vis-bar i:nth-child(1) { left: 8px; } .cf-vis-url .cf-vis-bar i:nth-child(2) { left: 20px; } .cf-vis-url .cf-vis-bar i:nth-child(3) { left: 32px; }
.cf-vis-url .cf-vis-bar b { position: absolute; left: 48px; right: 8px; top: 6px; height: 10px; border-radius: 5px; background: #F7F7F5; }
.cf-vis-url .cf-vis-page { top: calc(22% + 22px); height: 46%; border-radius: 0 0 8px 8px; padding: 12px; box-sizing: border-box; }
.cf-vis-url u:first-child { width: 55%; background: var(--orange); height: 6px; } .cf-vis-url u:nth-child(2) { width: 90%; } .cf-vis-url u:nth-child(3) { width: 70%; }
.cf-vis-action { }
.cf-vis-action .cf-vis-row { position: absolute; left: 50%; width: 84%; height: 24px; transform: translateX(-50%); background: #F4F4F2; border-radius: 7px; box-shadow: 0 6px 14px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 10px; padding: 0 10px; box-sizing: border-box; }
.cf-vis-action .cf-vis-row:nth-child(1) { top: 22%; } .cf-vis-action .cf-vis-row:nth-child(2) { top: calc(22% + 30px); } .cf-vis-action .cf-vis-row:nth-child(3) { top: calc(22% + 60px); }
.cf-vis-action i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid #9A9A95; box-sizing: border-box; flex: none; }
.cf-vis-action i.is-done { background: var(--orange); border-color: var(--orange); position: relative; }
.cf-vis-action i.is-done::after { content: ""; position: absolute; left: 3px; top: 0.5px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cf-vis-action u { flex: 1; margin: 0; }
.cf-vis-audio svg { width: 100%; height: 100%; display: block; }
/* Show me copy sits higher, clear of the cards on its side */
.cf-f1 { top: 11%; }
.cflow.is-static .cf-pops, .cflow.is-static .cf-ask { display: none; }
/* cards: the visual sits past the end of the box, and the label keeps clear of it */
.cf-pop--r .cf-pop-vis { left: calc(412px * var(--cs)); }
.cf-pop--l .cf-pop-vis { left: calc(-412px * var(--cs)); }
.cf-pop--r .cf-pop-box { padding-right: calc(56px * var(--cs)); }
.cf-pop--l .cf-pop-box { padding-left: calc(56px * var(--cs)); }
.cf-pop-vis { width: calc(140px * var(--cs)); height: calc(140px * var(--cs)); }
/* pop-out cards, second pass: the box reaches onto the screen and wraps the item's icon; no separate line */
.cf-pop-line { display: none; }
.cf-pop-box { width: auto; }
.cf-pop--r .cf-pop-box { left: calc(-1 * var(--ir, 28px)); width: calc(var(--pad, 60px) + 300px * var(--cs)); padding: 0 calc(52px * var(--cs)) 0 var(--pad, 60px); transform-origin: 0 50%; }
.cf-pop--l .cf-pop-box { right: calc(-1 * var(--ir, 28px)); width: calc(var(--pad, 60px) + 300px * var(--cs)); padding: 0 var(--pad, 60px) 0 calc(52px * var(--cs)); transform-origin: 100% 50%; }
.cf-pop--r .cf-pop-vis { left: calc(var(--pad, 60px) + 300px * var(--cs) - var(--ir, 28px) + 8px); }
.cf-pop--l .cf-pop-vis { left: calc(-1 * (var(--pad, 60px) + 300px * var(--cs) - var(--ir, 28px) + 8px)); }
.cf-pop .cf-pop-box { transform: translateY(-50%) scaleX(var(--p2, 0)); opacity: 1; }
.cf-pop-box { height: calc(64px * var(--cs)); border-radius: calc(20px * var(--cs)); background: rgba(13,15,18,0.10); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ===== Companion, 14 Oct: dropdown caption, and the legend card for triggers and markers ===== */
.cflow { height: calc(100vh + 1245vh); }
.cf-dd-cap { position: absolute; left: 0; top: 0; z-index: 4; margin: 0; width: 312px; opacity: 0; pointer-events: none; text-align: center;
  font: 400 14px/1.45 var(--font-body); color: rgba(255,255,255,0.62); transform-origin: 0 0; }
.cf-legend { position: absolute; z-index: 4; left: calc(50% + var(--ph) + 64px); top: 20%; width: min(372px, calc(50vw - var(--ph) - 104px)); opacity: 0; pointer-events: none; will-change: transform, opacity;
  padding: 24px 26px 22px; border-radius: 22px; background: rgba(30,30,30,0.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13), 0 30px 60px -24px rgba(0,0,0,0.75); }
.cf-lg-intro { margin: 0 0 18px; font: 300 17px/1.4 var(--font-display); color: #fff; letter-spacing: 0.01em; }
.cf-lg-h { margin: 0 0 10px; font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cf-lg-row { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.cf-lg-row--3 { grid-template-columns: repeat(3, 1fr); }
.cf-lg-row--4 { grid-template-columns: repeat(4, 1fr); }
.cf-lg-row li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font: 400 12.5px/1.25 var(--font-body); color: rgba(255,255,255,0.86); }
.cf-lg-row svg { width: 34px; height: 34px; display: block; }
.cf-lg-chip { margin: 0; padding: 10px 14px; border-radius: 999px; font: 400 12.5px/1.35 var(--font-body); color: #fff; text-align: center;
  background: rgba(245,96,28,0.16); box-shadow: inset 0 0 0 1px rgba(245,96,28,0.5); }
@media (max-height: 760px) { .cf-legend { top: 14%; padding: 18px 20px 16px; } .cf-lg-intro { font-size: 15px; margin-bottom: 12px; } .cf-lg-row { margin-bottom: 12px; } .cf-lg-row svg { width: 28px; height: 28px; } }
.cflow.is-static .cf-dd-cap, .cflow.is-static .cf-legend { display: none; }

/* ===== Companion, 14 Oct: the journey dropdown works (desktop), with a chip row on mobile ===== */
.cf-dd { pointer-events: none; }
.cf-dd.is-live { pointer-events: auto; }
.cf-dd-row { appearance: none; background: none; border: 0; padding: 0 12px; height: 28px; cursor: pointer; color: #97A6B3; font: 700 18px/28px "Roboto Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; }
.cf-dd-row:nth-child(1) { top: 3px; } .cf-dd-row:nth-child(2) { top: 47.5px; } .cf-dd-row:nth-child(3) { top: 83.5px; } .cf-dd-row:nth-child(4) { top: 119.5px; }
.cf-dd-row:hover, .cf-dd-row:focus-visible { color: #fff; outline: none; }
.cf-dd-row.is-cur { color: #fff; }
.cf-dd-row:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
/* the chosen journey's name over the recording's own title bar (until each journey has its own recording) */
.cf-jr-title { position: absolute; left: 7.4%; top: 6.05%; width: 83.2%; height: 3.6%; display: none; align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(28,30,34,0.96); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); font: 700 15.8px/1 "Roboto Condensed", "Arial Narrow", sans-serif; color: #fff; text-transform: uppercase; white-space: nowrap; letter-spacing: 0.01em; }
.cf-jr-title.is-on { display: flex; }
.cflow.is-static .cf-jr-title { font-size: 10.8px; }
/* mobile: a row of journey chips above the phone */
.cf-jsw { display: none; }
.cflow.is-static .cf-jsw { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; margin: -6px 0 4px; }
.cf-jsw-b { appearance: none; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.78); border-radius: 999px; padding: 9px 14px; cursor: pointer;
  font: 700 12.5px/1 "Roboto Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.cf-jsw-b.is-cur { background: #fff; color: #111; border-color: #fff; }
.cf-jsw-b:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cf-feature, .cf-legend, .cf-pops, .cf-dd-cap { pointer-events: none; }
.cf-dd.is-live { z-index: 6; }
.cf-jr-title { left: 6.5%; top: 8.15%; width: 77.8%; height: 4.5%; }
.cflow.is-static .cf-jsw { position: relative; z-index: 2; }
/* legend, second pass: compact, top-right, shown alongside the source pop-outs */
.cflow { height: calc(100vh + 1135vh); }
.cf-legend { top: 10%; width: min(400px, calc(50vw - var(--ph) - 104px)); padding: 18px 20px 16px; border-radius: 18px; }
.cf-lg-intro { display: none; }
.cf-lg-h { margin: 0 0 8px; }
.cf-lg-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; }
.cf-lg-row li { flex-direction: row; gap: 7px; text-align: left; font-size: 12.5px; white-space: nowrap; }
.cf-lg-row svg { width: 24px; height: 24px; }
.cf-lg-chip { padding: 8px 12px; font-size: 12px; }
@media (max-height: 760px) { .cf-legend { top: 8%; padding: 14px 16px 12px; } .cf-lg-row { margin-bottom: 10px; } .cf-lg-row svg { width: 20px; height: 20px; } .cf-lg-row li { font-size: 12px; } }
/* legend sits bottom-left, the open corner while the sources are out */
.cf-legend { top: auto; bottom: 5%; left: clamp(24px, 4vw, 72px); width: min(400px, calc(50vw - var(--ph) - 96px)); }
@media (max-height: 760px) { .cf-legend { bottom: 3%; } }
/* legend: the shape rises in from below and sits with its bottom edge past the screen, part of the view rather than a floating panel */
.cf-legend { bottom: -34px; padding-bottom: 50px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-height: 760px) { .cf-legend { bottom: -34px; } }

/* ===== Companion, 14 Oct: Ask me (three ways, four buttons, typed line) and Coach me (the fan of moments) ===== */
.cf-f2 { top: 14%; }
.cf-trust { margin-top: 14px !important; font-size: 13px !important; color: rgba(255,255,255,0.5) !important; }
/* the three ways it helps: thin boxes, stacked on the left, not tied to the screen */
.cf-ways { position: absolute; z-index: 4; list-style: none; margin: 0; padding: 0; right: calc(50% + var(--ph) + 64px); top: 16%; width: min(360px, calc(50vw - var(--ph) - 104px)); display: grid; gap: 12px; pointer-events: none; }
.cf-way { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 14px; border: 1px solid rgba(255,255,255,0.42); border-radius: 18px; background: rgba(13,15,18,0.10); opacity: 0; transform: translate3d(-24px,0,0); will-change: transform, opacity; }
.cf-way svg { width: 32px; height: 32px; flex: none; }
.cf-way b { display: block; font: 300 17px/1.15 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.cf-way small { display: block; margin-top: 4px; font: 400 12.5px/1.4 var(--font-body); color: rgba(255,255,255,0.62); }
/* every answer ends in a next step: the four buttons, under the phone */
.cf-ctas { position: absolute; z-index: 4; left: 0; right: 0; bottom: 3%; text-align: center; opacity: 0; pointer-events: none; }
.cf-ctas-h { margin: 0 0 10px; font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cf-cta { display: inline-block; margin: 0 4px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.75); font: 700 13px/1 "Roboto Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.04); transition: background 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease; }
.cf-cta.is-lit { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-2px); }
/* a line being typed into the chat's input box */
.cf-type { position: absolute; left: 12%; top: 88.7%; height: 3.2%; display: flex; align-items: center; font: 400 13.5px/1 var(--font-body); color: rgba(255,255,255,0.9); white-space: nowrap; opacity: 0; z-index: 3; pointer-events: none; }
.cf-type-c { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; background: #fff; animation: cfBlink 1s steps(1) infinite; }
@keyframes cfBlink { 50% { opacity: 0; } }
.cflow.is-static .cf-type { font-size: 9.2px; }
/* a coaching moment landing in the chat */
.cf-inchat { position: absolute; left: 4.8%; top: 69%; width: 62%; height: 11.5%; display: flex; align-items: center; gap: 10px; padding: 8px; box-sizing: border-box; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.35); z-index: 3; opacity: 0; transform: translate3d(0,14px,0); pointer-events: none; }
.cf-inchat-img { height: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; display: block; }
.cf-inchat-play { position: absolute; left: 8px; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 calc(4.5% + 2px); border-radius: 50%; background: rgba(255,255,255,0.92); }
.cf-inchat-play::after { content: ""; position: absolute; left: 8px; top: 6px; border-left: 8px solid #111; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.cf-inchat-t { font: 400 11.5px/1.3 var(--font-body); color: #333; } .cf-inchat-t b { color: #111; }
.cflow.is-static .cf-inchat-t { font-size: 8px; } .cflow.is-static .cf-inchat { border-radius: 10px; padding: 5px; }
/* the fan of four moments, to the right of the phone */
.cf-fan { position: absolute; z-index: 5; left: calc(50% + var(--ph) + 40px); top: 12%; width: min(560px, calc(50vw - var(--ph) - 72px)); opacity: 0; pointer-events: none; }
.cf-fan.is-on { pointer-events: auto; }
.cf-fan-h { display: flex; align-items: center; gap: 14px; margin: 0 0 18px 10px; }
.cf-fan-tag { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); font: 700 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.cf-fan-ring { position: relative; width: 36px; height: 36px; display: block; } .cf-fan-ring svg { width: 36px; height: 36px; display: block; transform: rotate(-90deg); }
.cf-fan-arc { transition: stroke-dashoffset 250ms linear; }
.cf-fan-sec { position: absolute; left: 42px; top: 50%; transform: translateY(-50%); font: 400 12px/1 var(--font-body); color: rgba(255,255,255,0.6); white-space: nowrap; }
.cf-fan-snd { margin-left: auto; appearance: none; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.78); border-radius: 999px; padding: 8px 12px; cursor: pointer; font: 700 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.cf-fan-snd[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
.cf-tiles { position: relative; height: calc(var(--th, 300px) + 64px); }
.cf-tile { --tw: calc(var(--th, 300px) * 9 / 16); position: absolute; left: calc(var(--i) * (var(--tw) * 0.78)); top: 0; width: var(--tw); margin: 0; cursor: pointer; transform-origin: 50% 110%;
  transform: translate3d(0, calc(var(--i) * 6px), 0) rotate(calc((var(--i) - 1.5) * 3deg)); transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 450ms ease, opacity 450ms ease; opacity: 0; filter: brightness(0.62); z-index: calc(1 + var(--i)); }
.cf-tile video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; border-radius: 18px; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.22), 0 26px 50px -20px rgba(0,0,0,0.75); background: #111; }
.cf-tile figcaption { position: absolute; left: 0; right: 0; top: calc(100% + 10px); opacity: 0; transition: opacity 300ms ease; }
.cf-tile figcaption b { display: block; font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.cf-tile figcaption span { display: block; font: 400 12.5px/1.35 var(--font-body); color: rgba(255,255,255,0.78); }
.cf-tile.is-on { z-index: 10; filter: none; transform: translate3d(0, -14px, 0) rotate(0deg) scale(1.06); }
.cf-tile.is-on figcaption { opacity: 1; }
.cf-tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (max-height: 760px) { .cf-fan { top: 9%; } }
/* mobile: stacked list, a row of buttons, and a horizontal row of moments */
.cflow.is-static .cf-ways { position: relative; right: auto; top: auto; width: 100%; max-width: 520px; pointer-events: auto; }
.cflow.is-static .cf-way { opacity: 1; transform: none; }
.cflow.is-static .cf-ctas { position: relative; bottom: auto; opacity: 1; }
.cflow.is-static .cf-cta { margin: 4px; } .cflow.is-static .cf-cta:nth-child(3) { background: var(--orange); border-color: var(--orange); color: #fff; }
.cflow.is-static .cf-type, .cflow.is-static .cf-inchat { display: none; }
.cflow.is-static .cf-fan { position: relative; left: auto; top: auto; width: 100%; max-width: 520px; opacity: 1; pointer-events: auto; }
.cflow.is-static .cf-fan-h { margin-left: 0; flex-wrap: wrap; }
.cflow.is-static .cf-tiles { height: auto; display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 70px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.cflow.is-static .cf-tile { position: relative; left: auto; flex: 0 0 150px; width: 150px; transform: none; opacity: 1; filter: none; scroll-snap-align: center; }
.cflow.is-static .cf-tile figcaption { opacity: 1; }
.cflow { height: calc(100vh + 1215vh); }
.cflow { height: calc(100vh + 1245vh); }
.cf-fan { top: 17%; } @media (max-height: 760px) { .cf-fan { top: 12%; } }
.cf-fan-h { margin-bottom: 30px; }
.cflow.is-static .cf-tiles { padding-bottom: 92px; }
/* Ask me, second pass: the reply card lives under the copy, the questions people ask run under the phone, the boxes have more presence */
.cf-f2 { top: 9%; width: min(400px, calc(50vw - var(--ph) - 96px)); }
.cf-reply { margin-top: 22px; opacity: 0; transform: translate3d(0,16px,0); will-change: transform, opacity; }
.cf-reply-h { margin: 0 0 10px !important; font: 700 11px/1 var(--font-body) !important; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5) !important; }
.cf-bubble { padding: 16px 18px 14px; border-radius: 18px 18px 18px 4px; background: #F4F4F2; color: #1E1E1E; box-shadow: 0 16px 36px -16px rgba(0,0,0,0.7); }
.cf-bubble p { margin: 0 0 12px !important; font: 400 14px/1.5 var(--font-body) !important; color: #1E1E1E !important; }
.cf-bubble .cf-ctas { position: static; opacity: 1; text-align: left; display: flex; flex-wrap: wrap; gap: 6px; }
.cf-bubble .cf-cta { margin: 0; padding: 8px 13px; font-size: 12px; border-color: rgba(30,30,30,0.28); color: #333; background: #fff; }
.cf-bubble .cf-cta.is-lit { background: var(--orange); border-color: var(--orange); color: #fff; transform: none; }
.cf-ways { top: 12%; width: min(380px, calc(50vw - var(--ph) - 96px)); gap: 14px; }
.cf-way { padding: 14px 18px 14px 16px; }
.cf-way svg { width: 36px; height: 36px; }
.cf-way b { font-size: 19px; }
.cf-way small { font-size: 13px; margin-top: 5px; }
.cf-asks { position: absolute; z-index: 4; left: 0; right: 0; bottom: 4%; text-align: center; opacity: 0; pointer-events: none; }
.cf-asks-h { margin: 0 0 10px; font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cf-ask-chip { display: inline-block; margin: 0 5px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.82); font: 400 14px/1 var(--font-body); background: rgba(255,255,255,0.04); opacity: 0; transform: translate3d(0,10px,0); transition: opacity 400ms ease, transform 400ms ease; }
.cf-ask-chip.is-in { opacity: 1; transform: none; }
.cflow.is-static .cf-asks { position: relative; bottom: auto; opacity: 1; } .cflow.is-static .cf-ask-chip { opacity: 1; transform: none; margin: 4px; }
.cflow.is-static .cf-reply { opacity: 1; transform: none; }
/* Coach me: the tiles sit clear of the header */
.cf-tiles { padding-top: 40px; box-sizing: content-box; }
.cf-ways { top: 50%; transform: translateY(-50%); } .cflow.is-static .cf-ways { transform: none; }
/* the questions people ask now sit under the reply, in the right-hand column */
.cf-asks { position: static; text-align: left; margin-top: 22px; }
.cf-asks-h { margin: 0 0 10px !important; font: 700 11px/1 var(--font-body) !important; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5) !important; }
.cf-ask-chip { margin: 0 6px 6px 0; padding: 9px 14px; font-size: 13px; }
/* capabilities closing: the same photographed background and wash as the homepage's door (14 Oct) */
.cap-door { background: #14171C; min-height: 0; display: block; align-items: initial; justify-content: initial; padding-top: clamp(140px, 16vh, 180px); padding-bottom: clamp(220px, 30vh, 340px); }
.cap-door::after { display: block; }

/* ===== Capabilities, 14 Oct: "SaaS gives you tools" rebuilt as the handover (dark, product-led) ===== */
.cap-value.cap-hand { padding: clamp(96px, 14vh, 150px) 0 clamp(96px, 14vh, 150px); color: #fff; background: linear-gradient(180deg, #0D0F12 0%, #101216 50%, #0D0F12 100%); overflow: hidden; }
.cap-hand .cap-h { color: #fff; text-align: center; margin: 0 auto clamp(48px, 7vh, 84px); font-size: clamp(34px, 3.6vw, 64px); line-height: 1.04; }
.cap-hand .cap-h .h-rest { color: #fff; } .cap-hand .cap-h .h-lead { color: var(--orange); font-style: normal; }
.hand { display: grid; grid-template-columns: minmax(280px, 0.78fr) 120px minmax(0, 1.4fr); align-items: center; gap: 0 12px; }
.hand-tag { margin: 0 0 18px; font: 700 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
/* the owned systems: scattered, dim, separate */
.hand-tiles { position: relative; height: 340px; }
.hand-tile { position: absolute; left: var(--x); top: var(--y); padding: 12px 18px; border: 1px solid rgba(255,255,255,0.22); border-radius: 14px; background: rgba(255,255,255,0.03);
  font: 300 16px/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.62); white-space: nowrap;
  transform: rotate(var(--r)) translate3d(calc(var(--d, 0) * 1px), 0, 0); opacity: calc(0.35 + 0.65 * var(--v, 1)); transition: transform 600ms cubic-bezier(0.2,0.8,0.2,1), opacity 600ms ease; }
.hand-note { margin: 10px 0 0; font: 400 14px/1.5 var(--font-body); color: rgba(255,255,255,0.5); }
/* the flow between the two: three hairlines that draw in, with dots travelling along them */
.hand-flow { position: relative; height: 400px; }
.hand-flow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hand-flow-p { fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 0)); vector-effect: non-scaling-stroke; }
.hand-flow svg path { stroke-dasharray: 100; stroke-dashoffset: calc(100 - 100 * var(--draw, 0)); }
.hand-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px rgba(245,96,28,0.8); opacity: 0; }
.hand.is-flowing .hand-dot { animation: handDot 2.6s linear infinite; }
.hand-dot:nth-child(2) { offset-path: path("M0 200 C 50 200, 70 200, 120 200"); }
.hand-dot:nth-child(3) { offset-path: path("M0 60 C 60 60, 60 200, 120 200"); animation-delay: -0.9s; }
.hand-dot:nth-child(4) { offset-path: path("M0 340 C 60 340, 60 200, 120 200"); animation-delay: -1.8s; }
@keyframes handDot { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* the devices: Builder on the laptop, Companion on the phone in front */
.hand-devices { position: relative; height: 420px; }
.hand-laptop { position: absolute; left: 0; top: 0; width: 1200px; height: 789px; transform: scale(var(--ls, 0.46)); transform-origin: 0 0; }
.hand-laptop .laptop-lid { transform: none !important; transition: none; }
.hand-laptop .laptop-base { filter: drop-shadow(0 40px 50px rgba(0,0,0,0.6)); }
.hand-bscreen { position: absolute; left: 111px; top: 28px; width: 978px; height: 612px; overflow: hidden; border-radius: 6px; background: #1b1c1f; }
.hand-bscreen img { width: 100%; height: 100%; object-fit: fill; display: block; }
.hand-phone { position: absolute; right: 0; bottom: 0; width: 380px; height: 785px; transform: scale(var(--ps, 0.34)); transform-origin: 100% 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
.hand-pscreen { position: absolute; left: 17.5px; top: 13.5px; width: 345px; height: 758px; border-radius: 48.5px; overflow: hidden; background: #000; }
.hand-pscreen img { width: 100%; height: 100%; object-fit: fill; display: block; }
.hand-pframe { position: absolute; left: -3px; top: 0; width: calc(100% + 6px); height: 100%; display: block; }
/* the four outcomes: thin boxes that pop out around the devices */
.hand-outs { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hand-out { padding: 13px 16px; border: 1px solid rgba(255,255,255,0.42); border-radius: 16px; background: rgba(13,15,18,0.1); opacity: 0; transform: translate3d(0,14px,0); transition: opacity 500ms ease, transform 500ms cubic-bezier(0.2,0.8,0.2,1); }
.hand-out.is-in { opacity: 1; transform: none; }
.hand-out b { display: block; font: 300 17px/1.15 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.hand-out span { display: block; font: 400 12.5px/1.4 var(--font-body); color: rgba(255,255,255,0.62); }
/* the leaders section now carries the dark-to-light transition at its top */
.cap-leaders { padding-top: 40vh; background: linear-gradient(180deg, #0D0F12 0, #15181C 6vh, #3A4048 14vh, #7D8893 22vh, #B9C4CD 29vh, #DCE3E9 35vh, var(--paper-2) 42vh, var(--paper) 55%, var(--paper-2) calc(100% - 48vh), #B9C4CD calc(100% - 38vh), #6E7983 calc(100% - 28vh), #2A2E35 calc(100% - 16vh), #0D0F12 100%); }
@media (max-width: 1020px) {
  .hand { grid-template-columns: 1fr; gap: 28px; }
  .hand-tiles { height: auto; display: flex; flex-wrap: wrap; gap: 8px; }
  .hand-tile { position: static; transform: none !important; opacity: 0.7; font-size: 13px; padding: 9px 13px; white-space: normal; }
  .hand-flow { display: none; }
  .hand-devices { height: calc(100vw * 0.66); max-width: 100%; }
  .hand-phone { display: none; }
  .hand-outs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .hand-outs { grid-template-columns: 1fr; } .cap-value.cap-hand { padding-top: 72px; } }
.hand-laptop .laptop-lid { opacity: 1 !important; }
.hand { align-items: start; }
.hand-saas { padding-top: 8px; }
.hand-flow { align-self: center; margin-top: 40px; }
.hand-flow svg { overflow: visible; }
.hand-dot { fill: var(--orange); opacity: 0; transition: opacity 400ms ease; }
.hand.is-flowing .hand-dot { opacity: 1; }
.hand-dot { animation: none; }
/* flow lines: run from the tiles' right edge to the laptop's left edge, centred on the devices */
.hand { grid-template-columns: minmax(280px, 0.78fr) 140px minmax(0, 1.4fr); gap: 0; }
.hand-flow { width: 140px; height: 300px; margin: 120px 0 0; align-self: start; }
.hand-flow svg { width: 140px; height: 300px; }
.hand-dot { r: 3.5; }
.hand-flow { position: relative; width: 140px; height: 300px; min-height: 300px; }
.hand-flow svg { position: absolute; inset: 0; width: 140px; height: 300px; max-width: none; display: block; }
.hand { grid-template-columns: minmax(280px, 0.72fr) 150px minmax(0, 1.4fr); }
.hand-tiles { height: 320px; max-width: 420px; }
.hand-tile { transform: rotate(var(--r)) translate3d(calc(var(--d, 0) * 0.6px), 0, 0); }
.hand-flow { width: 150px; margin: 110px 0 0 -10px; overflow: visible; }
.hand-flow svg { width: 150px; }
.hand-flow svg path { stroke: rgba(255,255,255,0.3); }
/* the flow is drawn on a canvas that spans the whole handover, under the content */
.hand { position: relative; }
.hand-flow { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; margin: 0; pointer-events: none; z-index: 0; }
.hand-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hand-side { position: relative; z-index: 1; }
.hand { grid-template-columns: minmax(280px, 0.72fr) 110px minmax(0, 1.4fr); }
.hand-flow { position: absolute; inset: 0; grid-area: auto; }
.hand-gap { min-height: 1px; }
@media (max-width: 1020px) { .hand-flow { display: none; } .hand-gap { display: none; } }
.hand-flow { height: 100%; width: 100%; left: 0; top: 0; }

/* ===== Pricing page, 14 Oct: dark, filmed hero; glass calculator; dark setup and reasoning; the shared door ===== */
.pr-hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(64px + 8vh) 0 10vh; background: #0D0F12; color: #fff; overflow: hidden; }
.pr-film { position: absolute; inset: 0; z-index: -2; }
.pr-film video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; filter: saturate(0.9); transform: scale(1.06); }
.pr-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(10,12,16,0.86) 0%, rgba(10,12,16,0.74) 30%, rgba(10,12,16,0.42) 55%, rgba(10,12,16,0.12) 75%, rgba(10,12,16,0) 100%),
  linear-gradient(180deg, rgba(10,12,16,0.5) 0%, rgba(10,12,16,0) 30%, rgba(10,12,16,0) 55%, #0D0F12 100%); }
.pr-hero .wrap { position: relative; max-width: none; }
.pr-hero .kicker { color: rgba(255,255,255,0.62); }
.pr-h1 { margin: 22px 0 0; max-width: 12ch; font-size: clamp(56px, 6.2vw, 96px); }
.pr-h1 .h-rest { color: #fff; }
.pr-h1 .h-lead { display: inline; }
.pr-hero .lede { margin: 28px 0 0; max-width: 52ch; color: rgba(255,255,255,0.78); font-size: clamp(16px, 1.25vw, 19px); }
/* the calculator: dark glass, carrying on from the hero */
.pr-calc { background: linear-gradient(180deg, #0D0F12 0%, #101216 60%, #0D0F12 100%); color: #fff; padding: 0 0 clamp(96px, 12vh, 140px); margin-top: -8vh; position: relative; z-index: 1; }
.pr-calc .wrap > .kicker, .pr-why .kicker, .pr-setup .kicker { color: rgba(255,255,255,0.62); }
.pr-h2 { margin: 0 0 18px; }
.pr-h2 .h-rest { color: #fff; } .pr-h2 .h-lead { color: var(--orange); }
.pr-calc .lede, .pr-why .lede { color: rgba(255,255,255,0.72); }
.pr-calc .calc-app { margin-top: clamp(32px, 4vh, 48px); background: linear-gradient(135deg, rgba(20,22,26,0.3) 0%, rgba(20,22,26,0.16) 50%, rgba(20,22,26,0.26) 100%); border: 1px solid rgba(255,255,255,0.22); border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 40px 80px -40px rgba(0,0,0,0.8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.pr-calc .calc-in { border-right: 1px solid rgba(255,255,255,0.12); }
.pr-calc .calc-out { background: rgba(255,255,255,0.03); }
.pr-calc .mini-field label { color: rgba(255,255,255,0.62); }
.pr-calc .mini-field select, .pr-calc .mini-field input { color: #fff; -webkit-text-fill-color: #fff; background-color: rgba(20,22,26,0.34); border-color: rgba(255,255,255,0.2); }
.pr-calc .mini-field select:focus, .pr-calc .mini-field input:focus { border-color: rgba(255,255,255,0.5); }
.pr-calc .mini-field select option { color: #343539; background: #fff; }
.pr-calc .lvl-head { color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.14); }
.pr-calc .lvl-row { color: rgba(255,255,255,0.78); border-bottom-color: rgba(255,255,255,0.07); }
.pr-calc .calc-res div b { color: #fff; }
.pr-calc .calc-res div:first-child b { color: var(--orange); }
.pr-calc .calc-res div small { color: rgba(255,255,255,0.5); }
.pr-calc .calc-tier { color: rgba(255,255,255,0.55); }
.pr-calc .assure { color: rgba(255,255,255,0.5); }
.pr-assure { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pr-assure li { padding: 8px 13px; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; font: 700 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
/* setup: a dark band, the fee in display type, the inclusions numbered */
.pr-setup { background: #0D0F12; color: #fff; padding: clamp(72px, 10vh, 120px) 0; }
.pr-setup .setup-card { margin: 0; background: none; border: 0; box-shadow: none; padding: 0; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pr-money { margin: 18px 0 0; font-size: clamp(44px, 4.6vw, 72px); }
.pr-money .h-rest { color: #fff; } .pr-money .h-lead { display: inline; }
.pr-done { margin: 10px 0 0; color: rgba(255,255,255,0.55); font-size: 17px; }
.pr-setup-p { color: rgba(255,255,255,0.72); max-width: 56ch; margin: 0 0 22px; font-size: 16.5px; line-height: 1.55; }
.pr-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pr-incl li { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; background: rgba(13,15,18,0.1); font: 300 16px/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.pr-incl li::before { display: none; }
.pr-incl li span { font: 700 11px/1 var(--font-body); letter-spacing: 0.12em; color: var(--orange); flex: none; }
/* why we price it this way: dark, with the three stages as thin boxes joined by hairlines */
.pr-why { background: linear-gradient(180deg, #0D0F12 0%, #14171C 100%); color: #fff; padding: clamp(96px, 12vh, 140px) 0; }
.pr-why .name-line { color: rgba(255,255,255,0.6); }
.pr-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin: clamp(36px, 5vh, 56px) auto; max-width: 900px; }
.pr-step { padding: 14px 24px; border: 1px solid rgba(255,255,255,0.42); border-radius: 999px; font: 300 clamp(15px, 1.3vw, 19px)/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.pr-step-line { flex: 1 1 40px; height: 1px; background: rgba(255,255,255,0.32); position: relative; }
.pr-step-line::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
@media (max-width: 760px) { .pr-steps { flex-direction: column; gap: 10px; } .pr-step-line { width: 1px; height: 28px; flex: none; } .pr-step-line::after { right: -3px; top: auto; bottom: -1px; } }
@media (max-width: 1020px) { .pr-setup .setup-card { grid-template-columns: 1fr; } .pr-h1 { font-size: clamp(44px, 10vw, 72px); } .pr-hero { min-height: 0; padding-top: calc(64px + 72px); padding-bottom: 72px; } .pr-calc { margin-top: 0; padding-top: 48px; } }
.pr-h1 { max-width: none; white-space: nowrap; }
.pr-h1 .h-rest { color: #fff; }
.pricing-page .door { padding-top: clamp(140px, 16vh, 180px); padding-bottom: clamp(220px, 30vh, 340px); }
.pricing-page .door::before { display: none; }
.pricing-page .door .door-photo { display: block; }
.pricing-page .door .h-hero .h-rest { color: #fff; }
.pricing-page .pr-assure { display: none; }
@media (max-width: 760px) { .pr-h1 { white-space: normal; } }
.pr-film video { object-position: 100% 50%; transform: translateX(14%) scale(1.12); transform-origin: 100% 50%; }
.pr-hero .wrap { padding-left: clamp(24px, 5vw, 72px); }
.pr-film video { object-position: 50% 50%; transform: translateX(22%) scale(1.0); transform-origin: 50% 50%; }
.pr-hero .wrap { padding-left: clamp(24px, 4vw, 56px); }
.pr-h1 { font-size: clamp(48px, 5.2vw, 82px); }
.pr-hero .lede { max-width: 44ch; }
.pr-hero::after { background:
  linear-gradient(90deg, rgba(10,12,16,0.92) 0%, rgba(10,12,16,0.8) 28%, rgba(10,12,16,0.45) 48%, rgba(10,12,16,0.1) 66%, rgba(10,12,16,0) 100%),
  linear-gradient(180deg, rgba(10,12,16,0.5) 0%, rgba(10,12,16,0) 30%, rgba(10,12,16,0) 55%, #0D0F12 100%); }
.pr-film video { width: 130%; left: auto; right: 0; position: absolute; top: 0; height: 100%; object-position: 100% 50%; transform: none; }
.pr-hero .wrap { padding-left: clamp(24px, 4vw, 56px); }
@media (max-width: 1020px) { .pr-film video { width: 100%; object-position: 70% 50%; } }
/* hero: she sits in the middle of the frame, so the type lives on the left over the quiet wall, and the film is pushed right */
.pr-film video { width: 118%; right: -4%; object-position: 100% 50%; }
.pr-hero .wrap { padding-left: clamp(24px, 4vw, 56px); max-width: none; }
.pr-h1 { font-size: clamp(44px, 4.6vw, 72px); max-width: 9ch; white-space: normal; }
.pr-hero .lede { max-width: 36ch; }
.pr-hero::after { background:
  linear-gradient(90deg, rgba(10,12,16,0.94) 0%, rgba(10,12,16,0.86) 22%, rgba(10,12,16,0.55) 38%, rgba(10,12,16,0.12) 52%, rgba(10,12,16,0) 100%),
  linear-gradient(180deg, rgba(10,12,16,0.5) 0%, rgba(10,12,16,0) 30%, rgba(10,12,16,0) 55%, #0D0F12 100%); }
.pr-hero .wrap { margin: 0; padding-left: clamp(32px, 6vw, 96px); width: 100%; max-width: none; }
.pr-h1 { max-width: 11ch; }
.pr-hero .lede { max-width: 40ch; }
.pr-h1 { max-width: none; white-space: nowrap; font-size: clamp(44px, 4.3vw, 68px); }
.pr-film video { width: 112%; right: -8%; }
@media (max-width: 760px) { .pr-h1 { white-space: normal; } }
/* pricing, second pass: the film runs behind the hero and the calculator as one scene; hero type set like the homepage's */
.pr-scene { position: relative; isolation: isolate; background: #0D0F12; }
.pr-scene .pr-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pr-scene .pr-film video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; right: auto; object-fit: cover; object-position: 100% 50%; transform: scale(1.18) translateX(6%); transform-origin: 50% 50%; filter: saturate(0.9); }
.pr-scene .pr-film::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(10,12,16,0.94) 0%, rgba(10,12,16,0.86) 22%, rgba(10,12,16,0.55) 38%, rgba(10,12,16,0.14) 52%, rgba(10,12,16,0.1) 100%),
  linear-gradient(180deg, rgba(10,12,16,0.5) 0%, rgba(10,12,16,0) 22%, rgba(10,12,16,0) 40%, rgba(10,12,16,0.72) 62%, rgba(10,12,16,0.9) 80%, #0D0F12 100%); }
.pr-hero { position: relative; z-index: 1; isolation: auto; overflow: visible; background: none; min-height: 88vh; min-height: 88svh; }
.pr-hero::after { display: none; }
.pr-hero .pr-h1 { font-family: var(--font-display); text-transform: uppercase; font-weight: 300; letter-spacing: 0.035em; line-height: 0.98; font-size: clamp(44px, 4.55vw, 83px); margin: 18px 0 0; color: #fff; white-space: nowrap; max-width: none; }
.pr-hero .pr-h1 .h1-lead { font-weight: 700; color: var(--orange); letter-spacing: -0.012em; display: inline-block; margin-bottom: 0.06em; }
.pr-hero .pr-h1 .h1-rest { font-weight: 300; font-size: 0.86em; letter-spacing: 0.03em; display: inline-block; line-height: 1.04; margin-top: 0.04em; color: #fff; }
.pr-hero .hero-sub { margin: 26px 0 0; max-width: 40ch; color: rgba(255,255,255,0.78); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }
.pr-calc { position: relative; z-index: 1; background: none; margin-top: 0; padding-top: 0; }
.pr-calc .calc-app { -webkit-backdrop-filter: blur(22px) saturate(1); backdrop-filter: blur(22px) saturate(1); background: linear-gradient(135deg, rgba(20,22,26,0.42) 0%, rgba(20,22,26,0.28) 50%, rgba(20,22,26,0.38) 100%); }
/* setup and reasoning: a warm spotlight and the graphite grain, so the dark half has depth */
.pr-setup { background: radial-gradient(60% 50% at 18% 30%, rgba(245,96,28,0.16) 0%, rgba(245,96,28,0) 70%), radial-gradient(50% 60% at 85% 90%, rgba(214,224,238,0.08) 0%, rgba(214,224,238,0) 70%), linear-gradient(180deg, #0D0F12 0%, #111318 100%); }
.pr-why { position: relative; background: radial-gradient(46% 60% at 50% 0%, rgba(214,224,238,0.10) 0%, rgba(214,224,238,0.03) 40%, rgba(214,224,238,0) 72%), linear-gradient(180deg, #111318 0%, #14171C 100%); }
.pr-why::before { content: ""; position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pr-why .wrap { position: relative; }
@media (max-width: 1020px) { .pr-scene .pr-film video { transform: scale(1.05); object-position: 70% 50%; } .pr-hero { min-height: 0; } .pr-hero .pr-h1 { white-space: normal; font-size: clamp(36px, 8vw, 56px); } }
/* the film fills the first screen and fades out under the calculator's heading */
.pr-scene .pr-film { inset: auto 0 auto 0; top: 0; height: 118vh; }
.pr-scene .pr-film::after { background:
  linear-gradient(90deg, rgba(10,12,16,0.94) 0%, rgba(10,12,16,0.86) 22%, rgba(10,12,16,0.55) 38%, rgba(10,12,16,0.14) 52%, rgba(10,12,16,0.1) 100%),
  linear-gradient(180deg, rgba(10,12,16,0.5) 0%, rgba(10,12,16,0) 20%, rgba(10,12,16,0) 55%, rgba(10,12,16,0.7) 78%, #0D0F12 100%); }
.pr-hero { min-height: 100vh; min-height: 100svh; }
.pr-calc { padding-top: 6vh; }

/* ===== Pricing, 14 Oct: industries as an arc of one-pagers; the chosen one grows into a panel ===== */
.ind-arc { position: relative; background: linear-gradient(180deg, #14171C 0%, #0D0F12 18%, #0D0F12 100%); color: #fff; padding: clamp(80px, 11vh, 130px) 0 0; overflow: hidden; }
.ind-head { text-align: center; }
.ind-arc .kicker { color: rgba(255,255,255,0.62); }
.ind-h2 { margin: 0 auto 18px; }
.ind-arc .lede { color: rgba(255,255,255,0.72); max-width: 60ch; margin: 0 auto; }
/* the stage: cards sit on a ring whose centre is well below the stage, so the visible part is an arc */
.ind-stage { position: relative; height: clamp(520px, 72vh, 700px); margin-top: 8px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.ind-stage.is-dragging { cursor: grabbing; }
.ind-ring { position: absolute; left: 50%; top: var(--cy, 120%); width: 0; height: 0; }
.ind-card { position: absolute; left: 0; top: 0; width: var(--cw, 180px); aspect-ratio: 420 / 594; margin: 0; transform-origin: 50% 50%; will-change: transform, opacity; cursor: pointer; }
.ind-card img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 30px 60px -24px rgba(0,0,0,0.85); background: #15181C; }
.ind-card figcaption { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font: 700 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); opacity: 0; transition: opacity 300ms ease; white-space: nowrap; }
.ind-card.is-near figcaption { opacity: 1; }
.ind-card.is-cur img { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.5), 0 0 0 6px rgba(245,96,28,0.18), 0 40px 70px -24px rgba(0,0,0,0.9); }
.ind-card:focus-visible { outline: none; } .ind-card:focus-visible img { box-shadow: 0 0 0 3px var(--orange); }
/* the focus block under the arc's centre */
.ind-focus { position: absolute; left: 50%; bottom: clamp(28px, 5vh, 56px); transform: translateX(-50%); width: min(560px, 90vw); text-align: center; z-index: 3; }
.ind-focus-n { margin: 0 0 8px; font: 300 clamp(26px, 2.6vw, 38px)/1.05 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }
.ind-focus-s { margin: 0 0 16px; font: 400 15px/1.5 var(--font-body); color: rgba(255,255,255,0.7); min-height: 2.9em; }
.ind-focus-c { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ind-arc .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.34); background: transparent; }
.ind-arc .btn--ghost:hover { border-color: #fff; }
.ind-arrow { position: absolute; top: 46%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(13,15,18,0.4); color: #fff; font-size: 20px; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 200ms ease, transform 200ms ease; }
.ind-arrow:hover { border-color: #fff; transform: scale(1.06); }
.ind-arrow--l { left: clamp(16px, 4vw, 64px); } .ind-arrow--r { right: clamp(16px, 4vw, 64px); }
.ind-dial { position: absolute; right: clamp(16px, 4vw, 64px); bottom: clamp(28px, 5vh, 56px); z-index: 3; font: 400 13px/1 var(--font-body); letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }
.ind-dial-n { color: #fff; font-weight: 700; margin-right: 4px; }
/* the panel: starts at the chosen cover's position and size, then fills the stage */
.ind-panel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background: #0D0F12; color: #fff; border-radius: 24px; overflow: hidden; transform-origin: 0 0; box-shadow: 0 60px 120px -40px rgba(0,0,0,0.9); }
.ind-panel[hidden] { display: none; }
.ind-panel.is-anim { transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 600ms ease; }
.ind-panel-in { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 80px); padding: clamp(32px, 6vh, 72px) clamp(32px, 7vw, 120px); opacity: 0; transition: opacity 400ms ease 250ms; }
.ind-panel.is-open .ind-panel-in { opacity: 1; }
.ind-panel-img { width: min(100%, 360px); aspect-ratio: 420 / 594; object-fit: cover; border-radius: 18px; justify-self: end; box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 40px 70px -24px rgba(0,0,0,0.9); }
.ind-panel-tx .kicker { color: rgba(255,255,255,0.62); }
.ind-panel-tx h3 { margin: 14px 0 12px; font-size: clamp(34px, 3.4vw, 56px); }
.ind-panel-s { margin: 0 0 14px; font: 400 17px/1.5 var(--font-body); color: #fff; }
.ind-panel-p { margin: 0 0 22px; font: 400 15px/1.55 var(--font-body); color: rgba(255,255,255,0.68); max-width: 52ch; }
.ind-panel-c { display: flex; gap: 10px; flex-wrap: wrap; }
.ind-panel-x { position: absolute; right: 20px; top: 20px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.ind-panel-x:hover { border-color: #fff; }
.ind-arc .door-spacer { height: 0; }
@media (max-width: 1020px) {
  .ind-stage { height: clamp(460px, 78vh, 620px); }
  .ind-arrow { display: none; }
  .ind-panel-in { grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 72px 20px 32px; overflow: auto; }
  .ind-panel-img { width: min(50%, 200px); justify-self: start; }
  .ind-dial { bottom: 12px; }
  .ind-focus { bottom: 16px; }
}
.ind-head { position: relative; z-index: 4; }
.ind-arrow { top: auto; bottom: clamp(28px, 5vh, 56px); z-index: 5; }
.ind-arrow--l { left: auto; right: calc(50% + 300px); } .ind-arrow--r { left: calc(50% + 300px); right: auto; }
.ind-stage { height: clamp(560px, 76vh, 760px); margin-top: 16px; }
.ind-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(13,15,18,0) 0%, rgba(13,15,18,0.85) 55%, #0D0F12 100%); pointer-events: none; z-index: 2; }
.ind-dial { right: auto; left: 50%; transform: translateX(-50%); bottom: 8px; }
@media (max-width: 1020px) { .ind-stage::after { height: 36%; } }
.ind-stage .ind-panel { z-index: 50; background: #0D0F12 !important; opacity: 1; }
.ind-stage .ind-panel[hidden] { display: none !important; }
.ind-panel-in { background: #0D0F12; }
.ind-stage .ind-panel { z-index: 500; }
.ind-stage .ind-ring { z-index: 1; }
.ind-panel-img { width: auto; max-width: 100%; height: min(78%, 520px); aspect-ratio: 420 / 594; }
@media (max-width: 1020px) { .ind-panel-img { height: auto; width: min(50%, 200px); } }
/* industries, second pass: a quieter heading, the focus block higher, the centre cover raised */
.ind-h2 { font-size: clamp(28px, 2.6vw, 44px); line-height: 1.1; letter-spacing: 0.02em; }
.ind-h2 .h-rest { font-weight: 300; font-size: 1em; }
.ind-h2 .h-lead { font-weight: 700; letter-spacing: -0.005em; }
.ind-arc .lede { font-size: clamp(15px, 1.1vw, 17px); max-width: 56ch; }
.ind-stage { height: clamp(520px, 70vh, 680px); }
.ind-focus { bottom: clamp(64px, 12vh, 128px); }
.ind-arrow { bottom: clamp(64px, 12vh, 128px); }
.ind-dial { bottom: clamp(32px, 6vh, 64px); }
.ind-stage::after { height: 52%; }
.ind-card.is-cur figcaption { opacity: 0; }
@media (max-width: 1020px) { .ind-focus { bottom: 40px; } .ind-dial { bottom: 14px; } .ind-h2 { font-size: clamp(26px, 6.4vw, 34px); } }

/* Pricing: "Why we price it this way" breaks the run of dark sections with a photograph under a dark overlay */
.pr-why--photo { background: #0F1114; overflow: hidden; isolation: isolate; }
.pr-why--photo::before { display: none; }
.pr-why-img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 42%; filter: saturate(0.9); z-index: 0; pointer-events: none; }
.pr-why-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,15,0.78) 0%, rgba(10,12,15,0.58) 45%, rgba(10,12,15,0.80) 100%),
              radial-gradient(60% 70% at 50% 50%, rgba(8,9,11,0.35) 0%, rgba(8,9,11,0) 100%); }
.pr-why--photo .wrap { position: relative; z-index: 2; }
.pr-why--photo .lede { color: rgba(255,255,255,0.84); }
.pr-why--photo .name-line { color: rgba(255,255,255,0.72); }
.pr-why--photo .pr-step { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.26); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (max-width: 1020px) { .pr-why-img { object-position: 46% 50%; } }

/* Capabilities: the four outcomes as people, not systems. A light section that runs on into the leaders. */
.cap-value.cap-people { position: relative; color: var(--ink); overflow: visible; padding: 0 0 clamp(56px, 8vh, 96px);
  background: linear-gradient(180deg, #0D0F12 0, #15181C 6vh, #3A4048 14vh, #7D8893 22vh, #B9C4CD 29vh, #DCE3E9 35vh, var(--paper-2) 42vh, var(--paper) 60vh, var(--paper) 100%); }
.cap-people .wrap { padding-top: 46vh; }
.cp-head { max-width: 1040px; margin: 0 auto clamp(40px, 6vh, 72px); text-align: center; }
.cp-head .kicker { color: var(--ink-dim); }
.cap-people .cap-h { margin: 0; }
.cp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 32px); align-items: start; }
.cp-item:nth-child(2), .cp-item:nth-child(4) { margin-top: clamp(40px, 6vw, 88px); }   /* a gentle stagger, like a contact sheet */
.cp-photo { position: relative; margin: 0 0 18px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #DCE3E9; box-shadow: 0 24px 48px -28px rgba(15,18,22,0.45); }
.cp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.2,0.7,0.2,1); }
.cp-item:hover .cp-photo img, .cp-item:focus-within .cp-photo img { transform: scale(1.04); }
.cp-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.28) 100%); pointer-events: none; }
.cp-num { position: absolute; left: 16px; bottom: 14px; z-index: 1; font: 300 13px/1 var(--font-display); letter-spacing: 0.18em; color: #fff; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cp-text { padding: 0 4px; }
.cp-h { margin: 0 0 8px; font: 700 clamp(19px, 1.5vw, 24px)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.cp-text p { margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: var(--ink-dim); max-width: 30ch; }
.cp-item:hover .cp-h, .cp-item:focus-within .cp-h { color: var(--orange); }
/* the leaders carry straight on from the light ground */
.cap-leaders { padding-top: clamp(40px, 6vh, 72px);
  background: linear-gradient(180deg, var(--paper) 0, var(--paper) 30%, var(--paper-2) calc(100% - 48vh), #B9C4CD calc(100% - 38vh), #6E7983 calc(100% - 28vh), #2A2E35 calc(100% - 16vh), #0D0F12 100%); }
@media (max-width: 1020px) {
  .cap-people .wrap { padding-top: 40vh; }
  .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cp-item:nth-child(2), .cp-item:nth-child(4) { margin-top: 36px; }
  .cp-text p { max-width: none; }
}
@media (max-width: 560px) {
  .cp-grid { grid-template-columns: 1fr; gap: 28px; }
  .cp-item:nth-child(2), .cp-item:nth-child(4) { margin-top: 0; }
  .cp-photo { aspect-ratio: 4 / 3; }
}

/* Outcomes: landscape photography, two across, so the people stay in frame; bigger numerals */
.cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px) clamp(24px, 3.2vw, 56px); }
.cp-item:nth-child(2), .cp-item:nth-child(4) { margin-top: clamp(48px, 7vw, 112px); }
.cp-item:nth-child(3) { margin-top: 0; }
.cp-photo { aspect-ratio: 3 / 2; border-radius: 20px; margin-bottom: 22px; }
.cp-photo::after { display: none; }
.cp-num { position: static; display: block; padding: 0; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; margin: 0 0 6px;
  font: 300 clamp(44px, 4.2vw, 64px)/1 var(--font-display); letter-spacing: 0.02em; color: var(--orange); }
.cp-photo .cp-num { position: absolute; left: 22px; top: 18px; margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.cp-h { font-size: clamp(22px, 1.9vw, 30px); }
.cp-text p { font-size: clamp(16px, 1.15vw, 18px); max-width: 40ch; }
@media (max-width: 1020px) { .cp-item:nth-child(2), .cp-item:nth-child(4) { margin-top: 40px; } }
@media (max-width: 560px) { .cp-grid { grid-template-columns: 1fr; } .cp-item:nth-child(2), .cp-item:nth-child(4) { margin-top: 0; } .cp-photo { aspect-ratio: 16 / 10; } .cp-photo .cp-num { font-size: 40px; left: 16px; top: 12px; } }
/* Outcomes numerals: heavy condensed figures that fade out towards the bottom, bleeding off the photo's lower-left edge */
.cp-photo .cp-num { left: 18px; top: auto; bottom: -0.16em; margin: 0; text-shadow: none;
  font: 700 clamp(120px, 12vw, 190px)/1 "Roboto Condensed", var(--font-display); letter-spacing: -0.02em;
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, rgba(236,239,243,0.96) 0%, rgba(200,206,214,0.82) 48%, rgba(170,178,188,0.28) 82%, rgba(170,178,188,0) 100%);
  -webkit-background-clip: text; background-clip: text; }
@media (max-width: 560px) { .cp-photo .cp-num { font-size: 96px; left: 12px; top: auto; } }
/* Outcomes numerals, larger and cut off at the frame's bottom edge */
.cp-photo .cp-num { left: 14px; bottom: -0.34em; font-size: clamp(170px, 17vw, 270px); line-height: 0.9;
  background: linear-gradient(180deg, rgba(236,239,243,0.98) 0%, rgba(205,211,219,0.9) 38%, rgba(175,183,193,0.42) 62%, rgba(175,183,193,0) 78%);
  -webkit-background-clip: text; background-clip: text; }
@media (max-width: 560px) { .cp-photo .cp-num { font-size: 140px; left: 10px; bottom: -0.34em; } }

/* Outcomes: a soft shade from the lower-left, fading out to the right, so the numerals read against the photo */
.cp-photo::after { display: block; background: linear-gradient(100deg, rgba(10,12,15,0.55) 0%, rgba(10,12,15,0.3) 30%, rgba(10,12,15,0) 62%), linear-gradient(0deg, rgba(10,12,15,0.3) 0%, rgba(10,12,15,0) 50%); }
.cp-photo .cp-num { z-index: 1; }
/* Outcomes numerals: the painted box now covers the whole glyph (no chopped tops or feet) and the fade reaches zero before the frame's edge */
.cp-photo .cp-num { line-height: 1; padding: 0.12em 0.04em 0.2em 0; bottom: -0.32em; left: 12px;
  background: linear-gradient(180deg, rgba(236,239,243,0.98) 0%, rgba(205,211,219,0.9) 36%, rgba(175,183,193,0.4) 58%, rgba(175,183,193,0) 70%);
  -webkit-background-clip: text; background-clip: text; }

/* =====================================================================
   INNER PAGES SYSTEM (Why, Contact, Diligence, Partners, Insights, FAQs)
   One display voice: thin line sets up, bold orange line lands. Photography where the point is people,
   neutral ground where it is argument. Dark and light alternate. Every page closes on the door.
   ===================================================================== */
.pg main { overflow: clip; }
.pg-h, .pg-h1 { font-family: var(--font-display); text-transform: uppercase; font-weight: 300; letter-spacing: 0.005em; color: var(--ink); max-width: none; margin: 0; }
.pg-h1 { font-size: clamp(44px, 5.6vw, 84px); line-height: 1.0; color: #fff; }
.pg-h { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.06; }
.pg-h .h-rest, .pg-h1 .h-rest { font-weight: 300; color: inherit; font-size: 1em; letter-spacing: 0.02em; display: inline; line-height: inherit; margin: 0; }
.pg-h .h-lead, .pg-h1 .h-lead { font-weight: 700; color: var(--orange); letter-spacing: -0.008em; display: inline; font-style: normal; }
.pg-h--white, .pg-h--white .h-rest { color: #fff; }
.pg .kicker { font-weight: 700; letter-spacing: 0.24em; font-size: 0.74rem; color: var(--ink-dim); margin-bottom: 18px; }
.pg .lede { max-width: 58ch; }
.pg .act { padding: clamp(88px, 11vh, 140px) 0; }
.pg .act--tight { padding: clamp(64px, 8vh, 96px) 0; }
.pg .act--dark { background: linear-gradient(180deg, #0D0F12 0%, #111318 50%, #0D0F12 100%); color: #fff; }
.pg .act--dark::before { display: none; }
.pg .act--dark .kicker { color: rgba(255,255,255,0.6); }
.pg .act--dark .lede, .pg .act--dark p { color: rgba(255,255,255,0.78); }
.pg .act--dark .pg-h { color: #fff; }
.pg .act--spot { position: relative; }
.pg .act--spot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 60% at 50% 0%, rgba(214,224,238,0.10) 0%, rgba(214,224,238,0.03) 40%, rgba(214,224,238,0) 72%); }
.pg .act--spot .wrap { position: relative; z-index: 1; }

/* the hero: a photograph under a dark wash, copy pinned to the lower-left like the pricing hero */
.pg-hero { position: relative; isolation: isolate; min-height: clamp(560px, 78vh, 820px); display: flex; align-items: flex-end; padding: calc(64px + 10vh) 0 clamp(56px, 8vh, 96px); color: #fff; background: #0F1114; overflow: hidden; }
.pg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; filter: saturate(0.9); transform: scale(1.06); animation: pgHeroSettle 1.8s cubic-bezier(0.2,0.7,0.2,1) forwards; }
@keyframes pgHeroSettle { to { transform: scale(1); } }
.pg-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,12,15,0.62) 0%, rgba(10,12,15,0.28) 38%, rgba(10,12,15,0.58) 72%, rgba(10,12,15,0.88) 100%),
              linear-gradient(90deg, rgba(10,12,15,0.55) 0%, rgba(10,12,15,0.2) 50%, rgba(10,12,15,0) 100%); }
.pg-hero .kicker { color: rgba(255,255,255,0.7); }
.pg-hero .lede { color: rgba(255,255,255,0.82); margin-top: 22px; max-width: 54ch; }
.pg-hero .pg-h1 { max-width: 20ch; }
.pg-hero--short { min-height: clamp(460px, 62vh, 640px); }
@media (prefers-reduced-motion: reduce) { .pg-hero-img { animation: none; transform: none; } }

/* big condensed numerals, the same figures as the outcomes on Capabilities */
.pg-num { font: 700 clamp(96px, 10vw, 160px)/0.9 var(--font-display); letter-spacing: -0.02em; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, rgba(52,53,57,0.22) 0%, rgba(52,53,57,0.1) 55%, rgba(52,53,57,0) 85%); -webkit-background-clip: text; background-clip: text; }
.act--dark .pg-num { background: linear-gradient(180deg, rgba(236,239,243,0.9) 0%, rgba(205,211,219,0.5) 50%, rgba(175,183,193,0) 85%); -webkit-background-clip: text; background-clip: text; }

/* stats: numbers that count up when they arrive */
.pg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 6vh, 72px); }
.pg-stat { position: relative; padding: 28px 0 0; border-top: 1px solid var(--silver-line); }
.pg-stat .n { font: 300 clamp(56px, 6vw, 96px)/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.pg-stat .n b { font-weight: 700; color: var(--orange); }
.pg-stat .l { margin: 14px 0 8px; font: 700 0.78rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); }
.pg-stat p { color: var(--ink-dim); font-size: 0.98rem; max-width: 30ch; }
.pg-stat cite { display: block; margin-top: 12px; font-style: normal; font-size: 0.75rem; color: var(--silver); }
.pg-quote { margin: clamp(56px, 8vh, 96px) auto 0; max-width: 880px; text-align: center; }
.pg-quote p { font: 300 clamp(22px, 2.2vw, 32px)/1.3 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.pg-quote p::before { content: ""; display: block; width: 48px; height: 2px; background: var(--orange); margin: 0 auto 24px; }
.pg-quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); }

/* phrase-by-phrase headline on the dark argument sections */
.pg-beats { display: flex; flex-wrap: wrap; gap: 0 0.3em; }
.pg-beats .beat { display: inline-block; opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.in .pg-beats .beat, .pg-beats.in .beat { opacity: 1; transform: none; }
.pg-beats .beat:nth-child(2) { transition-delay: 0.18s; } .pg-beats .beat:nth-child(3) { transition-delay: 0.36s; } .pg-beats .beat:nth-child(4) { transition-delay: 0.54s; }
.pg-couplet { margin-top: clamp(36px, 5vh, 56px); font: 300 clamp(24px, 2.4vw, 36px)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.pg-couplet em { font-style: normal; font-weight: 700; color: var(--orange); }
.pg .act--dark .pg-note { margin-top: 24px; max-width: 60ch; color: rgba(255,255,255,0.68); }

/* numbered steps: three (or four) across, numeral fading behind each */
.pg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(40px, 6vh, 64px); }
.pg-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-step { position: relative; padding: 28px 26px 30px; border-radius: 20px; background: var(--white); border: 1px solid var(--silver-line); overflow: hidden; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.pg-step:hover { transform: translateY(-6px); box-shadow: 0 28px 48px -32px rgba(15,18,22,0.35); }
.pg-step .pg-num { position: absolute; right: 10px; bottom: -0.28em; line-height: 1; padding: 0.1em 0 0.2em; pointer-events: none; }
.pg-step h3 { position: relative; font: 700 clamp(19px, 1.5vw, 23px)/1.2 var(--font-display); color: var(--ink); margin: 0 0 10px; }
.pg-step p { position: relative; color: var(--ink-dim); font-size: 0.96rem; max-width: 34ch; }
.pg-steps .pg-step { background: var(--paper); }
.act--white .pg-steps .pg-step { background: var(--paper); }

/* people strip: the PKF team */
.pg-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 6vh, 64px); }
.pg-split .luca-logo { height: 40px; width: auto; margin-bottom: 20px; }
.pg-split p { color: var(--ink-dim); }
.pg-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pg-person { text-align: center; }
.pg-person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: grayscale(1); transition: filter 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.pg-person:hover img { filter: none; transform: translateY(-4px); }
.pg-person b { display: block; margin-top: 12px; font-size: 0.9rem; color: var(--ink); }
.pg-person small { display: block; font-size: 0.74rem; line-height: 1.3; color: var(--silver); }
.pg-pull { margin-top: clamp(40px, 6vh, 64px); padding: 36px clamp(24px, 4vw, 56px); border-radius: 22px; background: #fff; border: 1px solid var(--silver-line); }
.pg-pull .kicker { margin-bottom: 14px; }
.pg-pull blockquote { margin: 0; font: 300 clamp(20px, 1.8vw, 26px)/1.35 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.pg-pull cite { display: block; margin-top: 14px; font-style: normal; font-size: 0.8rem; color: var(--silver); }

/* a ticker: names and standards that keep moving */
.pg-ticker { position: relative; overflow: hidden; margin-top: clamp(32px, 5vh, 56px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pg-ticker-row { display: flex; gap: 12px; width: max-content; animation: pgTicker 42s linear infinite; }
.pg-ticker:hover .pg-ticker-row { animation-play-state: paused; }
.pg-ticker-row span { flex: none; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--silver-line); background: var(--white); font: 700 0.78rem/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.act--dark .pg-ticker-row span { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #fff; }
@keyframes pgTicker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pg-ticker-row { animation: none; flex-wrap: wrap; width: auto; } }

/* documents: a list that slides as you hover */
.pg-docs { margin-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--silver-line); }
.pg-docs a { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 20px; padding: 22px 8px; border-bottom: 1px solid var(--silver-line); text-decoration: none; color: var(--ink); transition: background 0.4s, padding-left 0.5s var(--ease-out); }
.pg-docs a:hover { background: var(--paper); padding-left: 20px; }
.pg-docs .i { font: 700 0.7rem/1 var(--font-display); letter-spacing: 0.16em; color: var(--silver); }
.pg-docs .t { font: 400 clamp(17px, 1.3vw, 20px)/1.3 var(--font-body); }
.pg-docs .d { font: 700 0.74rem/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); white-space: nowrap; }
.pg-docs a:hover .d::after { content: " ↓"; }

/* two ways in: the booking card and the details card */
.pg-ways { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(40px, 6vh, 64px); align-items: start; }
.pg-card { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--white); border: 1px solid var(--silver-line); box-shadow: 0 30px 60px -40px rgba(15,18,22,0.3); }
.pg-card h3 { font: 300 clamp(26px, 2.4vw, 36px)/1.06 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); margin: 0 0 14px; }
.pg-card h3 em { font-style: normal; font-weight: 700; color: var(--orange); }
.pg-card p { color: var(--ink-dim); }
.pg-card .link { display: inline-block; margin-top: 18px; font-weight: 500; color: var(--ink); text-decoration: none; }
.pg-card .link::after { content: " →"; color: var(--orange); }
.pg-card--dark { background: #111318; border-color: rgba(255,255,255,0.1); color: #fff; }
.pg-card--dark h3, .pg-card--dark .link { color: #fff; } .pg-card--dark p { color: rgba(255,255,255,0.74); } .pg-card--dark .kicker { color: rgba(255,255,255,0.6); }

/* the booking panel: the calendar lives on the page */
.book { position: relative; margin-top: 22px; border-radius: 18px; overflow: hidden; background: #0F1114; border: 1px solid rgba(255,255,255,0.12); min-height: 560px; }
.book-cal { min-height: 560px; }
.book-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: rgba(255,255,255,0.7); font-size: 0.92rem; text-align: center; padding: 24px; transition: opacity 0.5s; }
.book.is-ready .book-wait { opacity: 0; pointer-events: none; }
.book-wait .ring { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); border-top-color: var(--orange); animation: bookSpin 0.9s linear infinite; }
@keyframes bookSpin { to { transform: rotate(360deg); } }
.book-wait a { color: #fff; }
.door .book-dock { max-width: 1040px; margin: 0 auto; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.9s var(--ease-out), opacity 0.6s, margin 0.6s; }
.door.is-booking .book-dock { max-height: 760px; opacity: 1; margin-top: 36px; }
.door .book-dock .book { margin-top: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(15,17,20,0.82); }
.door.is-booking .door-photo img { transform: scale(1.04); }
.door .door-photo img { transition: transform 2s var(--ease-out); }
.door .book-hint { margin-top: 14px; font-size: 0.86rem; color: rgba(255,255,255,0.6); }

/* the door, in the system, on every inner page */
.pg .door { padding: clamp(120px, 16vh, 180px) 0 clamp(120px, 16vh, 180px); min-height: 72vh; display: flex; align-items: center; justify-content: center; }
.pg .door .pg-h { color: #fff; font-size: clamp(40px, 4.55vw, 76px); line-height: 1.02; margin: 0 auto 22px; }
.pg .door .pg-h .h-rest { color: #fff; }
.pg .door .lede { margin: 0 auto 32px; color: rgba(255,255,255,0.78); }
.pg .door .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.32); background: transparent; }
.pg .door .btn--ghost:hover { border-color: #fff; }
.pg .door .btn { margin-top: 0; }
.pg .door .door-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* insights: a grid of pieces (placeholders until the library moves over) */
.pg-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(40px, 6vh, 64px); }
.pg-post { position: relative; display: block; text-decoration: none; color: var(--ink); border-radius: 20px; overflow: hidden; background: var(--paper); border: 1px solid var(--silver-line); transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.pg-post:hover { transform: translateY(-6px); box-shadow: 0 28px 48px -32px rgba(15,18,22,0.35); }
.pg-post .ph { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #DCE3E9, #B9C4CD); display: flex; align-items: center; justify-content: center; font: 700 0.7rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(52,53,57,0.5); }
.pg-post .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-post .b { padding: 22px 24px 26px; }
.pg-post .k { font: 700 0.68rem/1 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); }
.pg-post h3 { font: 700 1.15rem/1.3 var(--font-display); margin: 10px 0 8px; color: var(--ink); }
.pg-post p { font-size: 0.9rem; color: var(--ink-dim); }
.pg-post--feature { grid-column: span 3; display: grid; grid-template-columns: 1.3fr 1fr; }
.pg-post--feature .ph { aspect-ratio: auto; min-height: 320px; }
.pg-post--feature .b { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 56px); }
.pg-post--feature h3 { font-size: clamp(22px, 2vw, 30px); }

/* FAQs: a numbered accordion with the answer unfolding */
.pg-faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(32px, 5vh, 56px); }
.pg-faq-side { position: sticky; top: 112px; }
.pg-faq-side .pg-h { font-size: clamp(32px, 3.2vw, 48px); }
.pg-faq-side .assure { margin-top: 28px; color: var(--ink-dim); max-width: 32ch; }
.pg-faq { border-top: 1px solid var(--silver-line); }
.pg-faq details { border-bottom: 1px solid var(--silver-line); }
.pg-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 32px; align-items: baseline; gap: 16px; padding: 26px 0; font: 400 clamp(18px, 1.5vw, 22px)/1.3 var(--font-body); color: var(--ink); transition: color 0.3s; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary .i { font: 700 0.72rem/1 var(--font-display); letter-spacing: 0.18em; color: var(--silver); }
.pg-faq summary .x { position: relative; width: 24px; height: 24px; justify-self: end; align-self: center; }
.pg-faq summary .x::before, .pg-faq summary .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--orange); transform: translate(-50%, -50%); transition: transform 0.5s var(--ease-out); }
.pg-faq summary .x::after { transform: translate(-50%, -50%) rotate(90deg); }
.pg-faq details[open] summary { color: var(--orange); }
.pg-faq details[open] summary .x::after { transform: translate(-50%, -50%) rotate(0deg); }
.pg-faq .a { padding: 0 0 28px 72px; color: var(--ink-dim); font-size: 1rem; max-width: 60ch; }
.pg-faq details .a { animation: faqIn 0.6s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* small screens */
@media (max-width: 1020px) {
  .pg-hero { min-height: clamp(460px, 68vh, 640px); padding-top: calc(64px + 7vh); }
  .pg-hero .pg-h1 { max-width: none; }
  .pg-stats { grid-template-columns: 1fr; gap: 28px; }
  .pg-steps, .pg-steps--4 { grid-template-columns: 1fr 1fr; }
  .pg-split { grid-template-columns: 1fr; }
  .pg-ways { grid-template-columns: 1fr; }
  .pg-posts { grid-template-columns: 1fr 1fr; }
  .pg-post--feature { grid-column: span 2; grid-template-columns: 1fr; }
  .pg-faq-layout { grid-template-columns: 1fr; }
  .pg-faq-side { position: static; }
}
@media (max-width: 600px) {
  .pg-h1 { font-size: clamp(36px, 10vw, 48px); }
  .pg-h { font-size: clamp(28px, 7.6vw, 36px); }
  .pg-steps, .pg-steps--4, .pg-posts { grid-template-columns: 1fr; }
  .pg-post--feature { grid-column: span 1; }
  .pg-people { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .pg-faq summary { grid-template-columns: 40px 1fr 24px; }
  .pg-faq .a { padding-left: 0; }
  .book, .book-cal { min-height: 520px; }
}
.pg .door .door-photo { display: block; }
.pg .door::before { display: none; }
/* Capabilities leaders: no fade to black at the bottom any more; the section ends on paper and the door's photograph starts cleanly */
.cap-leaders { padding-bottom: clamp(80px, 10vh, 120px); background: var(--paper); }
/* inner-page heroes: the thin line and the bold line each hold one line, as on the pricing hero */
.pg-hero .pg-h1 { max-width: none; }
@media (min-width: 1021px) { .pg-hero .pg-h1 .h-rest, .pg-hero .pg-h1 .h-lead { white-space: nowrap; } }
.pg-hero .wrap { width: 100%; }
/* Inner-page heroes match the homepage hero: bold orange line first, thin line after, same sizes and spacing */
.pg-hero .pg-h1 { font-size: clamp(44px, 4.55vw, 83px); line-height: 0.98; letter-spacing: 0.035em; font-weight: 300; max-width: none; white-space: nowrap; }
.pg-hero .pg-h1 .h1-lead { font-weight: 700; color: var(--orange); letter-spacing: -0.012em; display: inline-block; margin-bottom: 0.06em; }
.pg-hero .pg-h1 .h1-rest { font-weight: 300; font-size: 0.86em; letter-spacing: 0.03em; display: inline-block; line-height: 1.04; margin-top: 0.04em; color: #fff; }
.pg-hero .lede { margin: 26px 0 0; max-width: 40ch; color: rgba(255,255,255,0.78); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }
@media (max-width: 1280px) { .pg-hero .pg-h1 { font-size: clamp(42px, 4.4vw, 60px); } }
@media (max-width: 1020px) { .pg-hero .pg-h1 { white-space: normal; font-size: clamp(34px, 6vw, 48px); } }
@media (max-width: 600px) { .pg-hero .pg-h1 { font-size: clamp(34px, 9.6vw, 44px); } }

/* =====================================================================
   THE BOOKING PANEL in every closing CTA: the calendar is on the page, over the door photograph
   ===================================================================== */
.door .book { position: relative; margin: clamp(28px, 4vh, 44px) auto 0; max-width: 1040px; min-height: 0; border-radius: 22px; overflow: hidden; text-align: left;
  background: rgba(15,17,20,0.78); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7); }
.door .book .book-cal { min-height: 0; }
.door .book.is-real .book-cal { min-height: 600px; }
.book .book-wait { display: none; }
.book.is-real:not(.is-ready) .book-wait { display: flex; }
.door .door-actions { margin-bottom: 0; }
/* the stand-in booker */
.bk { display: grid; grid-template-columns: 300px 1fr 240px; min-height: 520px; color: #fff; }
.bk-about { padding: 32px 30px; border-right: 1px solid rgba(255,255,255,0.1); }
.bk-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--orange); display: grid; place-items: center; margin-bottom: 18px; }
.bk-mark img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.bk-who { font-size: 0.86rem; color: rgba(255,255,255,0.6); margin: 0 0 6px; }
.bk-title { font: 700 1.3rem/1.2 var(--font-body); margin: 0 0 18px; color: #fff; }
.bk-meta { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.bk-meta li { display: flex; align-items: center; gap: 10px; }
.bk-i { width: 16px; height: 16px; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 50%; flex: none; position: relative; }
.bk-i--clock::after { content: ""; position: absolute; left: 6px; top: 3px; width: 1.5px; height: 5px; background: rgba(255,255,255,0.7); box-shadow: 1px 4px 0 -0.5px rgba(255,255,255,0.7); }
.bk-i--video { border-radius: 4px; }
.bk-i--video::after { content: ""; position: absolute; right: -5px; top: 3px; border: 4px solid transparent; border-left: 5px solid rgba(255,255,255,0.6); }
.bk-i--globe::after { content: ""; position: absolute; inset: 1px 4px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; }
.bk-note { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin: 0; }
.bk-cal { padding: 28px 28px 24px; }
.bk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bk-month { font: 500 1rem/1 var(--font-body); color: #fff; }
.bk-nav button { appearance: none; width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(255,255,255,0.08); color: #fff; font-size: 18px; cursor: pointer; margin-left: 6px; }
.bk-nav button:hover { background: rgba(255,255,255,0.16); } .bk-nav button:disabled { opacity: 0.3; cursor: default; }
.bk-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.bk-dow span { text-align: center; font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 6px 0; }
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bk-grid i { display: block; }
.bk-grid button { appearance: none; aspect-ratio: 1; border-radius: 10px; border: 0; background: rgba(255,255,255,0.08); color: #fff; font: 500 0.95rem/1 var(--font-body); cursor: pointer; transition: background 0.25s, transform 0.25s; }
.bk-grid button:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.bk-grid button:disabled { background: transparent; color: rgba(255,255,255,0.22); cursor: default; transform: none; }
.bk-grid button.is-today { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4); }
.bk-grid button.is-today::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); margin: 3px auto 0; }
.bk-grid button.is-on { background: var(--orange); color: #fff; }
.bk-slots { padding: 28px 24px; border-left: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; }
.bk-day { font: 500 0.95rem/1 var(--font-body); color: #fff; margin: 0 0 14px; min-height: 1em; }
.bk-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; }
.bk-list button { appearance: none; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: #fff; font: 500 0.9rem/1 var(--font-body); text-align: left; cursor: pointer; opacity: 0; transform: translateY(8px); transition: background 0.25s, border-color 0.25s; }
.bk-list.is-in button { animation: bkSlot 0.45s var(--ease-out) forwards; }
.bk-list.is-in button:nth-child(n+2) { animation-delay: 0.04s; } .bk-list.is-in button:nth-child(n+4) { animation-delay: 0.08s; } .bk-list.is-in button:nth-child(n+6) { animation-delay: 0.12s; } .bk-list.is-in button:nth-child(n+8) { animation-delay: 0.16s; } .bk-list.is-in button:nth-child(n+10) { animation-delay: 0.2s; }
@keyframes bkSlot { to { opacity: 1; transform: none; } }
.bk-list button:hover { border-color: var(--orange); background: rgba(245,96,28,0.12); }
.bk-list button.is-on { background: var(--orange); border-color: var(--orange); }
.bk-confirm { margin-top: 14px; justify-content: center; }
.bk-empty { margin: auto 0; font-size: 0.88rem; color: rgba(255,255,255,0.5); text-align: center; }
.bk-list:not(:empty) ~ .bk-empty { display: none; }
@media (max-width: 1020px) { .bk { grid-template-columns: 1fr; } .bk-about, .bk-slots { border: 0; border-top: 1px solid rgba(255,255,255,0.1); } .bk-about { order: 0; border-top: 0; padding-bottom: 20px; } .bk-cal { padding-top: 20px; } .bk-list { grid-template-columns: repeat(3, 1fr); max-height: none; } .bk-slots { padding-top: 20px; } }
@media (max-width: 600px) { .bk-list { grid-template-columns: repeat(2, 1fr); } .bk-cal, .bk-about, .bk-slots { padding-left: 18px; padding-right: 18px; } }
.bk-confirm[hidden] { display: none; }
.pg-ways { grid-template-columns: 1fr; }
.pg-ways .pg-card:not(.pg-card--dark) { max-width: 560px; }
.pg-card--dark .book { margin-top: 22px; background: #0F1114; }

/* =====================================================================
   ASK SUPERWORKER (FAQ page, UI mock)
   ===================================================================== */
.ask-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ask-rules { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.ask-rules li { position: relative; padding-left: 22px; color: rgba(255,255,255,0.78); font-size: 0.95rem; }
.ask-rules li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 2px; background: var(--orange); }
.ask-mock { margin-top: 28px; display: inline-block; padding: 8px 12px; border-radius: 999px; border: 1px dashed rgba(255,255,255,0.3); font: 500 0.72rem/1 var(--font-body); letter-spacing: 0.06em; color: rgba(255,255,255,0.6); }
.ask-chat { display: flex; flex-direction: column; height: min(640px, 78vh); border-radius: 24px; overflow: hidden; background: rgba(15,17,20,0.9); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7); }
.ask-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ask-head b { display: block; font-size: 0.95rem; color: #fff; } .ask-head small { display: block; font-size: 0.74rem; color: rgba(255,255,255,0.5); }
.ask-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--orange); display: grid; place-items: center; flex: none; }
.ask-mark img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.ask-live { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgba(61,220,132,0.18); }
.ask-thread { flex: 1; overflow: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.ask-msg { max-width: 82%; padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; line-height: 1.5; animation: askIn 0.45s var(--ease-out); }
.ask-msg p { margin: 0; color: inherit; } .ask-msg p + p { margin-top: 8px; }
.ask-msg--bot { align-self: flex-start; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.92); border-bottom-left-radius: 6px; }
.ask-msg--you { align-self: flex-end; background: var(--orange); color: #fff; border-bottom-right-radius: 6px; }
.ask-src { font-size: 0.72rem !important; letter-spacing: 0.04em; color: rgba(255,255,255,0.45) !important; margin-top: 10px !important; }
.ask-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ask-acts .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.ask-msg--typing { display: flex; gap: 5px; padding: 14px 16px; }
.ask-msg--typing span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); animation: askDot 1s infinite; }
.ask-msg--typing span:nth-child(2) { animation-delay: 0.15s; } .ask-msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes askDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes askIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ask-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 12px; scrollbar-width: none; }
.ask-chips::-webkit-scrollbar { display: none; }
.ask-chips button { flex: none; appearance: none; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: transparent; color: #fff; font: 500 0.82rem/1 var(--font-body); cursor: pointer; transition: border-color 0.25s, background 0.25s; }
.ask-chips button:hover { border-color: var(--orange); background: rgba(245,96,28,0.12); }
.ask-form { display: flex; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.ask-form input { flex: 1; min-width: 0; appearance: none; padding: 13px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: #fff; font: 400 0.95rem/1 var(--font-body); }
.ask-form input::placeholder { color: rgba(255,255,255,0.4); }
.ask-form input:focus { outline: none; border-color: var(--orange); }
.ask-form button { appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: background 0.25s, transform 0.25s; }
.ask-form button:hover { background: var(--orange-hover); transform: translateY(-1px); }
.ask-launch { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; border-radius: 999px; background: #0F1114; color: #fff; text-decoration: none; font: 500 0.9rem/1 var(--font-body); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6); transition: transform 0.3s var(--ease-out), background 0.3s; }
.ask-launch:hover { transform: translateY(-2px); background: #16191E; }
.ask-launch-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(245,96,28,0.5); animation: askPulse 2s infinite; }
@keyframes askPulse { 0% { box-shadow: 0 0 0 0 rgba(245,96,28,0.5); } 70% { box-shadow: 0 0 0 10px rgba(245,96,28,0); } 100% { box-shadow: 0 0 0 0 rgba(245,96,28,0); } }
@media (max-width: 1020px) { .ask-grid { grid-template-columns: 1fr; } .ask-chat { height: min(600px, 80vh); } .ask-launch { right: 14px; bottom: 14px; padding: 12px 16px 12px 14px; } }
/* Resources dropdown over dark sections: dark glass, white links (a later rule had turned the links dark on dark) */
.nav.nav--dark .nav-dropdown-menu { background: rgba(20,22,26,0.86); border-color: rgba(255,255,255,0.14); }
.nav.nav--dark .nav-dropdown-menu a { color: rgba(255,255,255,0.88); }
.nav.nav--dark .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* =====================================================================
   THE PROOF: milestones around the globe. One is lit at a time, its dot ringed and a leader drawn to its card;
   the rest sit as quiet one-line labels. Items whose dot is on the far side dim down.
   ===================================================================== */
.pf-stage { position: relative; margin-top: var(--s4); min-height: 1040px; display: grid; grid-template-columns: minmax(260px, 330px) 1fr minmax(260px, 330px); grid-template-rows: 1fr auto auto; gap: 0 24px; align-items: center; }
.pf-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.pf-lines path { fill: none; stroke: rgba(255,255,255,0.75); stroke-width: 1.2; stroke-dasharray: 1400; animation: pfLine 0.9s var(--ease-out) forwards; }
.pf-lines circle { fill: var(--orange); }
@keyframes pfLine { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
.pf-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; grid-row: 1; }
.pf-col--l { grid-column: 1; } .pf-col--r { grid-column: 3; }
.pf-item button { appearance: none; width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; transition: background 0.5s, border-color 0.5s, opacity 0.5s, transform 0.5s var(--ease-out); }
.pf-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.1); color: var(--orange); transition: background 0.5s; }
.pf-ico svg { width: 18px; height: 18px; }
.pf-body { display: block; min-width: 0; }
.pf-k { display: block; font: 700 0.68rem/1.3 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); }
.pf-t { display: block; margin-top: 6px; font-size: 0.9rem; line-height: 1.45; color: rgba(255,255,255,0.86); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s var(--ease-out), opacity 0.5s, margin 0.5s; }
.pf-item.is-on button { background: rgba(15,17,20,0.5); border-color: rgba(255,255,255,0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 48px -28px rgba(0,0,0,0.6); }
.pf-item.is-on .pf-ico { background: var(--orange); color: #fff; }
.pf-item.is-on .pf-t { max-height: 160px; opacity: 1; }
.pf-item.is-back button { opacity: 0.42; }
.pf-item button:hover { background: rgba(15,17,20,0.35); border-color: rgba(255,255,255,0.12); opacity: 1; }
.pf-item button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* colour follows the field: dark ink at the top of the section, white once the slate is behind */
#proof .pf-k { color: var(--orange); }
#proof .pf-t { color: color-mix(in srgb, rgba(255,255,255,0.86) calc(var(--pf) * 100%), var(--ink-2)); }
#proof .pf-ico { background: color-mix(in srgb, rgba(255,255,255,0.1) calc(var(--pf) * 100%), rgba(52,53,57,0.06)); }
#proof .pf-item.is-on .pf-ico { background: var(--orange); }
.pf-global { grid-column: 2; grid-row: 2; position: relative; z-index: 2; margin: 24px auto 0; max-width: 620px; padding: 20px 26px; border-radius: 18px; background: rgba(15,17,20,0.5); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: center; }
.pf-global p { margin-top: 8px; font-size: 0.92rem; line-height: 1.5; color: rgba(255,255,255,0.86); }
.pf-chips { grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.pf-chips span { padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); font: 700 0.74rem/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
#proof.act--paper .pf-stage { padding-bottom: 8px; }
@media (max-width: 1020px) {
  .pf-stage { display: block; min-height: 0; margin-top: 0; }
  .pf-lines { display: none; }
  .pf-col { gap: 4px; }
  .pf-col--l { margin-top: 24px; }
  .pf-item button { padding: 10px 10px; }
  .pf-item.is-back button { opacity: 0.7; }
  .pf-global { margin-top: 20px; }
}
/* Proof milestones: the site's light frosted glass instead of a dark card, and white bold labels */
.pf-item.is-on button, .pf-global { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); backdrop-filter: blur(18px) saturate(1); -webkit-backdrop-filter: blur(18px) saturate(1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 24px 48px -28px rgba(15,18,22,0.45); }
.pf-item button:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }
#proof .pf-k, .pf-k, .pf-global .pf-k { font-weight: 700; color: color-mix(in srgb, #FFFFFF calc(var(--pf) * 100%), var(--ink)); }
#proof .pf-item.is-on .pf-k { color: #fff; }
#proof .pf-t { color: color-mix(in srgb, rgba(255,255,255,0.9) calc(var(--pf) * 100%), var(--ink-2)); }
.pf-global p { color: rgba(255,255,255,0.9); }
.pf-lines path { stroke: rgba(255,255,255,0.85); }
.pf-lines circle { display: none; }

.pf-foot { grid-column: 1 / -1; grid-row: 4; position: relative; z-index: 2; margin: 18px auto 0; max-width: 820px; text-align: center; font-size: 0.74rem; line-height: 1.5; letter-spacing: 0.02em; color: rgba(255,255,255,0.6); }
@media (min-width: 1021px) { .pf-stage { grid-template-rows: 1fr auto auto auto; } }

.pf-global { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; text-align: left; max-width: 680px; }
.pf-global .pf-ico { background: var(--orange); color: #fff; }
.pf-global p { margin-top: 6px; }
#proof .pf-global .pf-ico { background: var(--orange); color: #fff; }
.tmoment .t small, .hero .tmoment .t small { font-size: 1em; }
/* Reveal: the iMac a little larger and shifted left */
@media (min-width: 1021px) { #reveal .rv-imac { width: 107%; left: -5%; } }

/* booking panel mark: the supplied white S, no recolouring */
.bk-mark img { filter: none; width: auto; height: 26px; }
/* The impact cards on laptop screens (1021–1500px): text sits on top at full width, the graphic below in its own band,
   so the laptop keeps a usable size and the phone never runs into the copy */
@media (min-width: 1021px) and (max-width: 1500px) {
  .duo-card, .duo-card--companion { aspect-ratio: auto; }
  .duo-card:not(.duo-card--companion) .duo-media.laptop-stage { flex: 1 1 auto; min-height: clamp(280px, 26vw, 400px); margin-top: 16px; }
  .duo-card--companion p:not(.kicker) { max-width: none; }
  .duo-card--companion .hand-stage, .duo-card--companion.in .hand-stage { position: relative; left: auto; top: auto; right: auto; bottom: auto; width: 100%; max-width: none; margin: 16px 0 0; height: clamp(300px, 27vw, 420px); overflow: hidden; }
  .duo-card--companion .hand-layers { right: -4%; top: 0; width: 62%; }
  .duo-card--companion .hand-stage { margin-bottom: 36px; }
}

/* Builder, Knowledge step: the ICF mark sits inline after the sentence, small but legible */
.icf-logo { display: inline-block; height: 30px; width: auto; vertical-align: middle; margin-left: 10px; position: relative; top: -2px; opacity: 0.92; }
@media (max-width: 1020px) { .icf-logo { height: 26px; } }
/* ZPD: the dot swells slightly at the top of each hop */
.zpd2-dot-core, .zpd2-dot-halo { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--hop, 0) * 0.45)); }

/* Companion: a sticky note under the nav for the whole Companion scroll; it leaves with the section */
.jr-note { position: sticky; top: 72px; z-index: 7; display: flex; justify-content: center; pointer-events: none; height: 0; }
.jr-note-in { pointer-events: auto; display: inline-flex; align-items: baseline; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(15,17,20,0.55); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 500 0.8rem/1 var(--font-body); letter-spacing: 0.02em; color: rgba(255,255,255,0.9); white-space: nowrap; }
.jr-note-in b { color: var(--orange); font-weight: 700; }
.jr-note-in small { font-size: 0.72rem; color: rgba(255,255,255,0.58); }
.cflow.is-static .jr-note { position: relative; top: auto; height: auto; padding: 16px 20px 0; }
@media (max-width: 640px) { .jr-note-in { white-space: normal; text-align: center; display: inline-block; line-height: 1.4; } }
.jr-note-in { display: inline-block; line-height: 1.3; }
.jr-note-in small { margin-left: 8px; }
/* Companion note: parked on the left, stacked on two lines so the pill fits its content */
.jr-note { justify-content: flex-start; padding-left: clamp(24px, 4vw, 56px); }
.jr-note-in { display: inline-block; padding: 12px 18px 12px; border-radius: 16px; line-height: 1.35; white-space: normal; max-width: 300px; }
.jr-note-in small { display: block; margin: 4px 0 0; }
.cflow.is-static .jr-note { padding-left: 20px; }
.jr-note { align-items: flex-start; padding-left: 24px; }
.jr-note-in { max-width: 200px; padding: 10px 14px; font-size: 0.74rem; border-radius: 14px; }
.jr-note-in small { font-size: 0.66rem; }
.jr-note { top: 84px; }
.jr-note-in { max-width: none; white-space: nowrap; padding: 12px 16px 11px; }
.jr-note-in small { white-space: normal; }

/* Companion pop-outs: the box is a pill tall enough to wrap the icon it starts from, and wide enough for the longer labels */
.cf-pop-box { height: max(calc(64px * var(--cs)), calc(2 * var(--ir, 28px) + 6px)); border-radius: 999px; font-size: calc(17px * var(--cs)); letter-spacing: 0.05em; }
.cf-pop--r .cf-pop-box { left: calc(-1 * var(--ir, 28px) - 3px); width: calc(var(--pad, 60px) + 340px * var(--cs)); padding: 0 calc(48px * var(--cs)) 0 calc(var(--pad, 60px) + 6px); }
.cf-pop--l .cf-pop-box { right: calc(-1 * var(--ir, 28px) - 3px); width: calc(var(--pad, 60px) + 340px * var(--cs)); padding: 0 calc(var(--pad, 60px) + 6px) 0 calc(48px * var(--cs)); }
.cf-pop--r .cf-pop-vis { left: calc(var(--pad, 60px) + 340px * var(--cs) - var(--ir, 28px) + 8px); }
.cf-pop--l .cf-pop-vis { left: calc(-1 * (var(--pad, 60px) + 340px * var(--cs) - var(--ir, 28px) + 8px)); }
.cf-pop-box { font-size: calc(15.5px * var(--cs)); letter-spacing: 0.06em; }
.cf-pop--r .cf-pop-box, .cf-pop--l .cf-pop-box { width: calc(var(--pad, 60px) + 370px * var(--cs)); }
.cf-pop--r .cf-pop-vis { left: calc(var(--pad, 60px) + 370px * var(--cs) - var(--ir, 28px) + 8px); }
.cf-pop--l .cf-pop-vis { left: calc(-1 * (var(--pad, 60px) + 370px * var(--cs) - var(--ir, 28px) + 8px)); }
/* Show Me copy sits a little lower so the sticky note has the corner to itself */
.cf-f1 { top: 17%; }
.cf-pop--r .cf-pop-box { width: calc(var(--pad, 60px) + 400px * var(--cs)); padding-right: calc(92px * var(--cs)); }
.cf-pop--l .cf-pop-box { width: calc(var(--pad, 60px) + 400px * var(--cs)); padding-left: calc(92px * var(--cs)); }
.cf-pop--r .cf-pop-vis { left: calc(var(--pad, 60px) + 400px * var(--cs) - var(--ir, 28px) + 8px); }
.cf-pop--l .cf-pop-vis { left: calc(-1 * (var(--pad, 60px) + 400px * var(--cs) - var(--ir, 28px) + 8px)); }
/* Companion pop-outs: bigger labels, longer pills to carry them */
.cf-pop-box { font-size: calc(20px * var(--cs)); letter-spacing: 0.05em; }
.cf-pop--r .cf-pop-box { width: calc(var(--pad, 60px) + 470px * var(--cs)); padding-right: calc(96px * var(--cs)); }
.cf-pop--l .cf-pop-box { width: calc(var(--pad, 60px) + 470px * var(--cs)); padding-left: calc(96px * var(--cs)); }
.cf-pop--r .cf-pop-vis { left: calc(var(--pad, 60px) + 470px * var(--cs) - var(--ir, 28px) + 8px); }
.cf-pop--l .cf-pop-vis { left: calc(-1 * (var(--pad, 60px) + 470px * var(--cs) - var(--ir, 28px) + 8px)); }

/* Companion: the line under the phone while the sources are popped out */
.cf-tag { position: absolute; left: 0; right: 0; top: 0; z-index: 4; text-align: center; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.cf-tag-h { margin: 0 0 6px; font-family: var(--font-display); text-transform: uppercase; font-weight: 300; letter-spacing: 0.04em; color: #fff; font-size: clamp(24px, 2vw, 34px); line-height: 1.05; }
.cf-tag-h em { font-style: normal; font-weight: 700; color: var(--orange); }
.cf-tag-s { margin: 0; color: rgba(255,255,255,0.7); font-size: 15.5px; line-height: 1.5; }
.cflow.is-static .cf-tag { display: none; }

/* Ask me: each icon sits on a backing shape (an orange tile behind a frosted glass tile); the reply and the asks sit centred on the phone */
.cf-way { position: relative; }
.cf-way .cf-way-ico { position: relative; flex: none; width: 60px; height: 60px; }
.cf-way .cf-way-ico::before { content: ""; position: absolute; left: 2px; top: 2px; width: 44px; height: 44px; border-radius: 13px; transform: rotate(-14deg);
  background: linear-gradient(145deg, #F27A3C 0%, #D9541B 60%, #B9430F 100%); box-shadow: 0 10px 22px -8px rgba(0,0,0,0.6); }
.cf-way .cf-way-ico::after { content: ""; position: absolute; left: 14px; top: 14px; width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0.26) 100%); border: 1px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.6); }
.cf-way .cf-way-ico svg { position: absolute; left: 20px; top: 20px; width: 32px; height: 32px; z-index: 1; margin: 0; }
.cf-f2 { top: 0; height: 100%; }
.cf-f2-top { position: absolute; left: 0; right: 0; top: 9%; }
.cf-f2-low { position: absolute; left: 0; right: 0; top: calc(50% + 32px); transform: translateY(-50%); }
.cf-f2-low .cf-reply { margin-top: 0; }
.cflow.is-static .cf-f2 { height: auto; }
.cflow.is-static .cf-f2-top, .cflow.is-static .cf-f2-low { position: static; transform: none; }
.cflow.is-static .cf-f2-low { margin-top: 22px; }

/* Coach me: the fan sits centred on the phone; one caption for the playing moment, centred under the fan rather than under its tile */
.cf-fan { top: calc(50% + 32px); transform: translateY(-50%); }
@media (max-height: 760px) { .cf-fan { top: calc(50% + 32px); } }
.cf-tile figcaption { display: none; }
.cf-tiles { height: calc(var(--th, 300px) + 40px); }
.cf-fan-cap { margin: 4px 0 0; text-align: center; opacity: 0; transform: translate3d(0,8px,0); transition: opacity 320ms ease, transform 320ms ease; }
.cf-fan-cap.is-in { opacity: 1; transform: none; }
.cf-fan-cap b { display: block; font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; }
.cf-fan-cap span { display: block; font: 400 14px/1.4 var(--font-body); color: rgba(255,255,255,0.8); }
.cflow.is-static .cf-fan { transform: none; }

/* mixed case inside an uppercase heading (SaaS) */
.tt-none { text-transform: none; }
/* Builder: sound toggle for the four clips */
.bf-snd { appearance: none; margin: 10px 0 16px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.78); border-radius: 999px; padding: 8px 12px 8px 30px; cursor: pointer; font: 700 11px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; position: relative; }
.bf-snd::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.bf-snd[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
.bf-snd[aria-pressed="true"]::before { background: var(--orange); }
/* Coach me: the header line sits clear of the raised tile */
.cf-fan-h { margin-bottom: 48px; }

/* Companion: the four journey recordings stack in the phone; the chosen one fades and settles in over the last */
.cf-jr .cf-jr-v { opacity: 0; transition: opacity 480ms ease, transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1); transform: scale(1.025); will-change: opacity, transform; }
.cf-jr .cf-jr-v.is-on { opacity: 1; transform: none; z-index: 1; }
.cf-jr.is-switching .cf-jr-v:not(.is-on) { opacity: 0; }

/* leaders: four across */
.leaders { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 36px); }
.ld-q p { font-size: 16px; }
@media (max-width: 1100px) { .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .leaders { grid-template-columns: 1fr; } }
/* FAQ: Ask section without the chat panel for now; copy sits on its own, centred */
.ask-grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; text-align: center; }
.ask-rules { text-align: left; display: inline-grid; }

/* ---------- FAQ: the film runs behind the hero only, graded like the homepage hero, and fades into the solid Ask section below ---------- */
.pg-hero--film { background: #0F1114; }
.pg-hero--film .film-field { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #0F1216; }
.pg-hero--film .film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.06); transform-origin: 50% 50%; will-change: transform; animation: heroVideoDrift 36s ease-in-out infinite alternate; filter: blur(7px) saturate(1.05); }
.pg-hero--film::after { background:
    linear-gradient(180deg, rgba(15,17,20,0.30) 0%, rgba(15,17,20,0) 25%, rgba(15,17,20,0) 48%, rgba(15,17,20,0.80) 80%, #0F1114 100%),
    linear-gradient(90deg, rgba(10,12,16,0.70) 0%, rgba(10,12,16,0.52) 34%, rgba(10,12,16,0.26) 58%, rgba(10,12,16,0.16) 78%, rgba(10,12,16,0.34) 100%); }
.pg .act.ask { background: #0F1114; }
.pg .act.ask::before { display: none; }
.pg .act.ask.act--spot::after { display: none; }
.pg .act.ask { padding-top: clamp(32px, 5vh, 64px); }
@media (prefers-reduced-motion: reduce) { .pg-hero--film .film-video { animation: none; } }

/* ---------- pricing: the hero film softened and graded like the homepage hero (the fade to the dark section below stays) ---------- */
.pr-scene .pr-film video { filter: blur(7px) saturate(1.05); }
.pr-scene .pr-film::after { background:
  linear-gradient(90deg, rgba(10,12,16,0.70) 0%, rgba(10,12,16,0.52) 34%, rgba(10,12,16,0.26) 58%, rgba(10,12,16,0.16) 78%, rgba(10,12,16,0.34) 100%),
  linear-gradient(180deg, rgba(10,12,16,0.30) 0%, rgba(10,12,16,0) 20%, rgba(10,12,16,0) 55%, rgba(10,12,16,0.7) 78%, #0D0F12 100%); }

/* pricing hero: copy back on the site grid (same left edge as the logo), film a touch darker */
.pr-hero .wrap { margin: 0; width: 100%; max-width: none; padding-left: max(24px, calc(56px + (100vw - 1480px) / 5.5)); padding-right: max(24px, calc(56px + (100vw - 1480px) / 5.5)); }
.pr-scene .pr-film::after { background:
  linear-gradient(90deg, rgba(10,12,16,0.80) 0%, rgba(10,12,16,0.64) 34%, rgba(10,12,16,0.40) 58%, rgba(10,12,16,0.30) 78%, rgba(10,12,16,0.46) 100%),
  linear-gradient(180deg, rgba(10,12,16,0.36) 0%, rgba(10,12,16,0.06) 20%, rgba(10,12,16,0.06) 55%, rgba(10,12,16,0.72) 78%, #0D0F12 100%); }

/* pricing calculator: the three fields share one height; the select arrow sits in from the edge */
.pr-calc .mini-field select, .pr-calc .mini-field input { box-sizing: border-box; height: 52px; padding-top: 0; padding-bottom: 0; line-height: 50px; font-size: 1rem; }
.pr-calc .mini-field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 16px 16px; }
.pr-calc .mini-field select::-ms-expand { display: none; }
/* pricing calculator: the two headline figures (per user, monthly total) half as big again; the two below stay as they were */
.pr-calc .calc-res div:nth-child(1) b { font-size: 3.3rem; line-height: 1.05; }
.pr-calc .calc-res div:nth-child(2) b { font-size: 2.55rem; line-height: 1.05; }
.pr-calc .calc-res div:nth-child(1), .pr-calc .calc-res div:nth-child(2) { margin-bottom: 6px; }

/* pricing calculator: the tier summary as two bullets */
.calc-tier-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.calc-tier-list li { position: relative; padding-left: 18px; }
.calc-tier-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
/* FAQ Ask section: the intro line centred with its block */
.pg .ask .ask-copy .lede { margin-left: auto; margin-right: auto; text-align: center; max-width: 60ch; }
/* insights cards: the text block is a block, so its padding wraps the title and standfirst too */
.pg-post .b { display: block; }
.pg-post .k { display: block; }
.pg-post h3 { margin: 12px 0 8px; }
.pg-post p { margin: 0; }
.pg-post--feature .b { display: flex; }
/* the booking section is the contact target site-wide */
#book { scroll-margin-top: 64px; }
/* keep hyphenated terms whole at line ends */
.nowrap { white-space: nowrap; }

/* page hero as film: same place and grade as the still, with the film's own slow drift */
.pg-hero-video { object-position: 50% 45%; animation: heroVideoDrift 36s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .pg-hero-video { animation: none; transform: none; } }

/* Why: "How it gets fought today" over a photo, shaded like the pricing why-section */
.why-photo { position: relative; background: #0F1114; overflow: hidden; isolation: isolate; }
.why-photo::before, .why-photo.act--spot::after { display: none; }
.why-photo-img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 42%; filter: saturate(0.9); z-index: 0; pointer-events: none; }
.why-photo-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,15,0.80) 0%, rgba(10,12,15,0.62) 45%, rgba(10,12,15,0.82) 100%),
              linear-gradient(90deg, rgba(10,12,15,0.55) 0%, rgba(10,12,15,0.15) 55%, rgba(10,12,15,0) 100%); }
.why-photo .wrap { position: relative; z-index: 2; }
.why-photo .lede { color: rgba(255,255,255,0.84); }
/* a beat that always starts its own line (the heading is a flex row, so a <br> would be ignored) */
.pg-beats .beat--line { flex-basis: 100%; }

/* Companion pop-outs: real artwork in place of the drawn placeholders */
.cf-vis-img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; height: auto; }
.cf-vis-img--systems img { width: 230%; max-width: none; }
.cf-vis-img--docs img { width: 180%; max-width: none; }
.cf-vis-img--audio img { width: 120%; max-width: none; }
.cf-pop .cf-vis-img { filter: drop-shadow(0 22px 30px rgba(0,0,0,0.6)); }
.cf-vis-video--clip video { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 9 / 16; object-fit: cover; transform: translate(-50%, -50%); border-radius: 12px; display: block; box-shadow: 0 0 0 4px #1A1C20, 0 0 0 5px rgba(255,255,255,0.25), 0 18px 30px rgba(0,0,0,0.5); background: #111; }
.cflow.is-static .cf-vis-video--clip video { width: 100px; }
/* the larger artwork sits further out so it clears the label in the pill */
.cf-pop--r .cf-vis-img--systems { left: calc(500px * var(--cs)); }
.cf-vis-img--systems img { width: 200%; }
.cf-pop--r .cf-vis-img--docs { left: calc(460px * var(--cs)); }
.cf-vis-img--docs img { width: 165%; }
.cf-pop--r .cf-vis-img--audio { left: calc(440px * var(--cs)); }
.cf-vis-img--audio img { width: 115%; }
.cf-pop--r .cf-vis-img--systems { left: calc(600px * var(--cs)); }
.cf-vis-img--systems img { width: 160%; }
.cf-pop--r .cf-vis-img--docs { left: calc(585px * var(--cs)); }
.cf-vis-img--docs img { width: 150%; }
.cf-pop--r .cf-vis-img--audio { left: calc(560px * var(--cs)); }
.cf-vis-img--audio img { width: 100%; }

/* ---------- leaders, glass cards: the portrait rests behind reeded glass with the words on it; hover lifts the glass ---------- */
.leaders2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 36px); margin-top: 8px; margin-bottom: clamp(18px, 2.2vw, 36px); }
.ld2 { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #0F1114; isolation: isolate; cursor: default; box-shadow: 0 30px 60px -30px rgba(20,22,26,0.45); }
.ld2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ld2-clear { opacity: 0; transition: opacity 650ms var(--ease-out); }
.ld2:hover .ld2-clear, .ld2:focus-visible .ld2-clear { opacity: 1; }
.ld2-copy { position: absolute; left: 0; top: 0; bottom: 0; width: 48%; padding: clamp(22px, 3vw, 44px) clamp(18px, 2.4vw, 36px) clamp(22px, 3vw, 44px) clamp(22px, 3vw, 44px); display: flex; flex-direction: column; justify-content: flex-end; text-align: left; color: #fff; z-index: 2;
  transition: opacity 500ms var(--ease-out), transform 650ms var(--ease-out); }
.ld2:hover .ld2-copy, .ld2:focus-visible .ld2-copy { opacity: 0; transform: translateX(-12px); }
.ld2-name { margin: 0; font: 700 clamp(20px, 1.7vw, 28px)/1.1 var(--font-display); letter-spacing: -0.01em; color: #fff; }
.ld2-role { margin: 4px 0 0; font: 400 clamp(13px, 1vw, 16px)/1.3 var(--font-body); color: rgba(255,255,255,0.78); }
.ld2-q { margin: 16px 0 0; padding: 0 0 0 22px; position: relative; }
.ld2-q::before { content: "\201C"; position: absolute; left: -2px; top: -12px; font-family: Georgia, serif; font-size: 48px; line-height: 1; color: var(--orange); }
.ld2-q p { margin: 0; font: 400 clamp(13px, 1.02vw, 16px)/1.5 var(--font-body); color: rgba(255,255,255,0.92); }
.ld2:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (max-width: 900px) { .leaders2 { grid-template-columns: 1fr; } .ld2-copy { width: 60%; } }
@media (prefers-reduced-motion: reduce) { .ld2-clear, .ld2-copy { transition: none; } }
.ld2-copy { width: 44%; text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35); }

/* leaders glass cards, second pass: name and role larger and always on the glass; the quote only on hover/tap, spread across the clear portrait */
.ld2 { cursor: pointer; }
.ld2:hover .ld2-copy, .ld2:focus-visible .ld2-copy, .ld2.is-open .ld2-copy { opacity: 1; transform: none; }
.ld2.is-open .ld2-clear { opacity: 1; }
.ld2-copy { width: 46%; justify-content: flex-end; }
.ld2-name { font-size: clamp(26px, 2.2vw, 38px); }
.ld2-role { font-size: clamp(15px, 1.2vw, 20px); margin-top: 6px; }
.ld2-q { position: absolute; left: clamp(22px, 3vw, 44px); right: clamp(22px, 3vw, 44px); top: clamp(22px, 3vw, 44px); margin: 0; padding: 0 0 0 clamp(26px, 2.4vw, 38px); opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-out) 120ms, transform 650ms var(--ease-out) 120ms; }
.ld2-q::before { left: 0; top: -10px; font-size: clamp(48px, 4vw, 64px); }
.ld2-q p { font: 300 clamp(18px, 1.75vw, 30px)/1.3 var(--font-display); letter-spacing: 0.01em; color: #fff; max-width: 28ch; }
.ld2:hover .ld2-q, .ld2:focus-visible .ld2-q, .ld2.is-open .ld2-q { opacity: 1; transform: none; }
/* the quote runs over the top of the picture, so the clear portrait gets a soft darkening up there while the quote is showing */
.ld2::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease-out);
  background: linear-gradient(180deg, rgba(8,9,11,0.72) 0%, rgba(8,9,11,0.45) 42%, rgba(8,9,11,0) 70%); }
.ld2:hover::after, .ld2:focus-visible::after, .ld2.is-open::after { opacity: 1; }

/* the quote belongs to the card, not the name column: it runs across the top of the portrait */
.ld2 > .ld2-q { z-index: 3; width: 62%; left: clamp(22px, 3vw, 44px); right: auto; }
.ld2 > .ld2-q p { max-width: none; }
.leaders2 { margin-bottom: 0; }
.ld2-copy { width: 54%; }

/* Diligence, the Companion: copy on the left, the phone mockup loop on the right */
.dl-companion-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dl-companion-media { position: relative; border-radius: 22px; overflow: hidden; background: #000; aspect-ratio: 10 / 9; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08); }
.dl-companion-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .dl-companion-grid { grid-template-columns: 1fr; } }
/* Interact and build: the simulation screen recording loops in a small landscape screen on the left */
.cf-vis-sim video { position: absolute; left: 50%; top: 50%; width: 190%; max-width: none; aspect-ratio: 3014 / 1518; height: auto; transform: translate(-50%, -50%); border-radius: 10px; display: block; background: #111; box-shadow: 0 0 0 4px #1A1C20, 0 0 0 5px rgba(255,255,255,0.22), 0 18px 30px rgba(0,0,0,0.5); }
.cf-pop--l .cf-vis-sim { left: calc(-520px * var(--cs)); }
.cflow.is-static .cf-vis-sim video { width: 180px; }
.cf-pop--l .cf-vis-sim { left: calc(-650px * var(--cs)); }
.cf-vis-sim video { width: 175%; }

/* Show me pop-outs, sized to the marked boxes: larger artwork, pushed a little further out */
.cf-vis-video--clip video { width: 105%; }
.cf-pop--l .cf-vis-sim { left: calc(-690px * var(--cs)); }
.cf-vis-sim video { width: 300%; }
.cf-pop--r .cf-vis-img--systems { left: calc(650px * var(--cs)); }
.cf-vis-img--systems img { width: 310%; }
.cf-pop--r .cf-vis-img--docs { left: calc(640px * var(--cs)); }
.cf-vis-img--docs img { width: 300%; }
.cf-pop--r .cf-vis-img--audio { left: calc(565px * var(--cs)); }
.cf-vis-img--audio img { width: 160%; }
.cf-vis-video--clip video { width: 145%; }
.cf-pop--l .cf-vis-video--clip { left: calc(-538px * var(--cs)); }
.cf-pop--l .cf-vis-sim { left: calc(-645px * var(--cs)); }
.cf-vis-sim video { width: 282%; }
.cf-pop--r .cf-vis-img--systems { left: calc(641px * var(--cs)); }
.cf-vis-img--systems img { width: 243%; }
.cf-pop--r .cf-vis-img--docs { left: calc(622px * var(--cs)); }
.cf-vis-img--docs img { width: 260%; }
.cf-pop--r .cf-vis-img--audio { left: calc(546px * var(--cs)); }
.cf-vis-img--audio img { width: 117%; }
.cf-pop--l .cf-vis-sim { left: calc(-615px * var(--cs)); }
.cf-vis-sim video { width: 250%; }
.cf-vis-img--systems img { width: 225%; }
.cf-vis-img--docs img { width: 235%; }

/* Diligence Companion loop without its black box: the video's black is screened away into the section's own dark */
.dl-companion-media { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.dl-companion-media video { mix-blend-mode: screen; border-radius: 0; }
.dl-companion .wrap { z-index: auto; }
.dl-companion.act--spot::after { display: none; }
.pg .act.dl-companion .wrap { z-index: auto; }
/* reference assets: the mining one-pager spread (wide), sized to the same box */
.cf-pop--r .cf-vis-img--docs { left: calc(640px * var(--cs)); }
.cf-vis-img--docs img { width: 290%; }
.cf-pop--r .cf-vis-img--docs { left: calc(615px * var(--cs)); }
.cf-vis-img--docs img { width: 250%; }