/* ===== Tokens (light theme · light-blue base) ===== */
:root {
  --bg: #eaf2fd;
  --bg-2: #dfeafb;
  --surface: #ffffff;
  --surface-2: #eef5ff;
  --line: #d6e2f2;
  --text: #14243b;
  --muted: #566579;
  --violet: #2f6fed;   /* primary accent (light blue) */
  --violet-2: #5b9bff; /* lighter blue */
  --yellow: #f5b301;
  --teal: #12a5a0;
  --pink: #ff6aa2;
  --radius: 20px;
  --maxw: 1120px;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 800px at 80% -10%, #d8e8ff 0%, transparent 55%),
    radial-gradient(1000px 700px at -10% 20%, #e4f0ff 0%, transparent 50%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ===== Nav ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 48px);
  background: rgba(234, 242, 253, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: .2px; }
/* Hand-drawn S: a felt-tip stroke with a doubled-back ghost line and an
   open sketch ring that deliberately overshoots instead of closing. */
.nav__logo { display: block; width: 36px; height: 36px; transform: rotate(-5deg); }
.nav__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nav__logo path { stroke-linecap: round; stroke-linejoin: round; }
.nav__ink { stroke: url(#inkS); stroke-width: 3.4; }
.nav__ink--ghost { stroke: var(--violet-2); stroke-width: 1.3; opacity: .38; }
.nav__ring { stroke: var(--violet-2); stroke-width: 1.9; opacity: .5; }
/* Hovering re-inks the mark, ring first, then the letter over it */
.nav__brand:hover .nav__ring,
.nav__brand:hover .nav__ink { stroke-dasharray: 220; animation: ink-draw .75s ease forwards; }
.nav__brand:hover .nav__ink { animation-delay: .12s; }
@keyframes ink-draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav__brand:hover .nav__ring,
  .nav__brand:hover .nav__ink { animation: none; stroke-dasharray: none; }
}
.nav__links { display: flex; align-items: center; gap: 8px; }
.nav__links a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 500; transition: color .2s, background .2s; }
.nav__links a:hover { color: var(--text); background: var(--surface-2); }
.nav__cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer; }
.nav__cta:hover { color: var(--violet); background: var(--surface-2); }

/* ===== Layout ===== */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 48px);
}
#problem,
#scope {
  background-image: radial-gradient(rgba(47, 111, 237, .10) 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: var(--radius);
}
.kicker { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 700; color: var(--violet); margin-bottom: 14px; }
.section__title { font-family: var(--font-display); font-size: clamp(28px, 4.5vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 20px; }
.section__lede { max-width: 760px; color: var(--muted); font-size: clamp(16px, 2vw, 19px); margin-bottom: 44px; }
.subhead { font-family: var(--font-display); font-size: 22px; margin: 56px 0 22px; }
strong, .section__lede strong { color: var(--text); }

/* ===== Hero ===== */
.hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 48px) 28px;
  text-align: center;
}
.hero__glow {
  position: absolute; inset: -12% 0 auto 0; height: 720px; z-index: -1;
  background:
    radial-gradient(680px 340px at 20% 6%, rgba(47, 111, 237, .34), transparent 66%),
    radial-gradient(520px 320px at 84% 2%, rgba(120, 160, 255, .30), transparent 70%),
    radial-gradient(760px 420px at 58% 46%, rgba(110, 200, 255, .22), transparent 72%);
  filter: blur(8px);
}

/* Sky decor: two soft clouds beside the hero title on the right */
.hero__sky { position: absolute; inset: 0 0 auto 0; height: 340px; z-index: -1; pointer-events: none; overflow: hidden; }
.hero__cloud {
  position: absolute; height: auto; will-change: transform;
  filter: brightness(1.9) contrast(1.05) drop-shadow(0 6px 16px rgba(120, 160, 220, .28));
}
.hero__cloud--1 { top: 30px;  right: 13%; width: 280px; opacity: 1; animation: drift-x 40s ease-in-out infinite; }
.hero__cloud--2 { top: 128px; right: 2%;  width: 340px; opacity: 1; animation: drift-x 52s ease-in-out infinite reverse; }

/* Butterflies fluttering in the sky */
.hero__bfly { position: absolute; height: auto; will-change: transform; transform-origin: center; filter: drop-shadow(0 6px 12px rgba(90, 60, 140, .22)); }
.hero__bfly--big   { top: 118px; right: 8%; width: 76px; }
.hero__bfly--small { top: 44px; right: 15%; width: 44px; opacity: .92; }

@keyframes drift-x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(30px); }
}
/* In-place wing flap: both wings fold up together (horizontal squish) */
@keyframes flutter-1 {
  0%   { transform: scaleX(1)   translateY(0); }
  50%  { transform: scaleX(.5)  translateY(-3px); }
  100% { transform: scaleX(1)   translateY(0); }
}
@keyframes flutter-2 {
  0%   { transform: scaleX(1)   translateY(0); }
  50%  { transform: scaleX(.45) translateY(-2px); }
  100% { transform: scaleX(1)   translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cloud, .hero__bfly { animation: none !important; }
}
@media (max-width: 720px) {
  .hero__cloud--1 { width: 190px; }
  .hero__cloud--2 { width: 220px; }
  .hero__bfly--small { display: none; }
  .hero__bfly--big { width: 58px; }
}

.eyebrow { color: var(--muted); font-size: 13px; letter-spacing: 1px; margin-bottom: 22px; text-align: left; }
.hero__title {
  font-family: "Oswald", var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(34px, 7.5vw, 82px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; margin-left: -6px;
}
.hero__title--accent {
  background: linear-gradient(92deg, #2f6fed, #4f9bff, #7cc0ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__lede { max-width: 620px; margin: 26px 0 0; color: var(--muted); font-size: clamp(16px, 2vw, 20px); text-align: left; }

/* Hero meta strip: role / scope / domain / platform */
.herobar {
  max-width: 900px; margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--surface);
  background-image: radial-gradient(rgba(47, 111, 237, .10) 1px, transparent 1px);
  background-size: 14px 14px;
  overflow: hidden;
}
.herobar__item { padding: 18px 22px; text-align: left; }
.herobar__label { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); margin-bottom: 8px; }
.herobar__val { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); }

.hero__media { margin: 56px auto 24px; max-width: 900px; }
.hero__shot { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(20, 40, 80, .35); }
/* Cut-out artwork carries its own panel edges, so it needs no frame of its own */
.hero__shot--bare { border: 0; border-radius: 0; box-shadow: none; background: transparent; filter: drop-shadow(0 22px 40px rgba(20, 40, 80, .22)); }

/* ===== Hero panels =====
   Crisp crops of three pieces of the calendar, parked exactly over their own
   pixels in the shot below. They are invisible until pointed at, when the piece
   lifts off the screenshot. Percentages are fractions of the 1024x576 frame the
   crops came from, so the stack only stays aligned while all four use it. */
.hero__media--layered { position: relative; transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.hero__shot { transition: filter .4s ease; }
/* Inset by the shot's border so the panels measure against image pixels only */
.hero__panels { position: absolute; inset: 1px; pointer-events: none; }
.hero__panel {
  position: absolute; display: block; height: auto; pointer-events: auto;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1), filter .4s ease;
}
.hero__panel:hover { z-index: 3; filter: drop-shadow(0 18px 30px rgba(20, 40, 80, .42)); }
.hero__panel--strip { left: 15.625%; top: 25.694%; width: 83.594%; }
/* Nearly the full width of the shot, so it swells rather than jumps */
.hero__panel--strip:hover { transform: scale(1.08); }
.hero__panel--regions { left: 0.488%; top: 34.201%; width: 15.137%; }
.hero__panel--regions:hover { transform: scale(1.34) translateY(-4px); }
.hero__panel--detail { left: 56.543%; top: 46.458%; width: 16.367%; }
.hero__panel--detail:hover { transform: scale(1.34) translateY(-4px); }
/* Pointing anywhere else on the shot lifts the whole window. Scaling the
   container rather than the image keeps the panels registered to it. */
.hero__media--layered:hover:not(:has(.hero__panel:hover)) { transform: scale(1.012); }
@media (prefers-reduced-motion: reduce) {
  .hero__panel:hover, .hero__media--layered:hover:not(:has(.hero__panel:hover)) { transform: none; }
}

/* iPhone frame (kept dark for realism) */
.device {
  position: relative; display: inline-block; padding: 6px;
  background: #0b0b14; border-radius: 30px;
  box-shadow: 0 30px 60px -24px rgba(20, 40, 80, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .08);
  transition: transform .3s ease;
}
.device img { display: block; width: 100%; height: auto; border-radius: 24px; }
.device::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 15px; background: #0b0b14; border-radius: 0 0 12px 12px; z-index: 2;
}

/* Meta */
.meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.meta > div { background: var(--surface); padding: 16px 18px; text-align: left; }
.meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 4px; }
.meta dd { font-family: var(--font-display); font-weight: 600; font-size: 15px; }

/* ===== Placeholders ===== */
.ph {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px dashed var(--line);
  color: var(--muted); font-family: var(--font-display); font-weight: 600;
  letter-spacing: .3px; text-align: center;
}
.ph--hero { aspect-ratio: 16 / 8; font-size: 18px; }
.ph--event { aspect-ratio: 4 / 3; font-size: 16px; }
.ph--circle { width: 90px; height: 90px; border-radius: 50%; font-size: 40px; color: var(--violet); margin-bottom: 20px; }

/* ===== Grids & cards ===== */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: 0 18px 40px -20px rgba(47, 111, 237, .45); }
.card__num { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--violet); }
.card h3 { font-family: var(--font-display); font-size: 19px; margin: 10px 0 8px; }
.card p { color: var(--muted); font-size: 15px; }

/* Wide 2-up cards led by an oversized numeral, in the persona card's tinted box */
.grid--bignum { gap: 24px; }
.card--bignum {
  padding: 34px 36px 32px;
  background: linear-gradient(150deg, #d7e6fd 0%, #e2e6fb 46%, #ddd7f7 100%);
  border-left: 3px solid var(--violet);
}
.card--bignum .card__num { display: block; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin-bottom: 20px; }
.card--bignum h3 { font-size: 17px; margin: 0 0 10px; }
.card--bignum p { font-size: 14px; line-height: 1.55; max-width: 46ch; }
@media (max-width: 820px) {
  .grid--bignum { grid-template-columns: 1fr; }
  .card--bignum { padding: 28px 26px; }
}

/* ===== Flow figure ===== */
.flow__label { margin-top: 88px; margin-bottom: 24px; }
.flow { margin-top: 0; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }

/* ===== Research and analysis (full-width block) ===== */
/* Scope and design intros run the full section width rather than the narrower default measure */
#scope .section__lede,
#walkthrough .section__lede { max-width: none; }
.research { width: 100%; display: flex; flex-direction: column; gap: 28px; }
.research__lede { color: var(--muted); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.6; max-width: none; }
.research__heading { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }

.research__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rcard { background: linear-gradient(160deg, #dbeafe 0%, #eaf2fd 58%, #e7e9fb 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.rcard:hover { border-color: var(--violet); transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(47, 111, 237, .45); }
.rcard h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 6px; }
.rcard__meta { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--violet); margin-bottom: 10px; }
.rcard p { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Coverage matrix */
.rtable { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rtable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rtable caption { text-align: left; padding: 18px 20px 0; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rtable th, .rtable td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.rtable thead th { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.rtable tbody th { font-weight: 500; color: var(--text); }
.rtable tbody tr:last-child th, .rtable tbody tr:last-child td { border-bottom: 0; }
.rtable tbody tr:hover { background: rgba(47, 111, 237, .05); }
.rtable td { color: var(--muted); }
.rtable td.y { color: var(--violet); font-weight: 600; }
.rtable td.n { color: var(--muted); }
.rtable td.p { color: var(--text); }

/* Options */
.research__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ocard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: var(--radius); padding: 22px 20px; }
.ocard h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 10px; }
.ocard__pro, .ocard__con { position: relative; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ocard__pro { margin-bottom: 8px; }
.ocard__pro::before { content: "+"; position: absolute; left: 0; top: -1px; font-family: var(--font-display); font-weight: 700; color: var(--violet); }
.ocard__con::before { content: "\2212"; position: absolute; left: 0; top: -1px; font-family: var(--font-display); font-weight: 700; color: var(--muted); }

@media (max-width: 1000px) {
  .research__grid { grid-template-columns: repeat(2, 1fr); }
  .research__options { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .research__grid { grid-template-columns: 1fr; }
}

/* ===== Screens gallery ===== */
.screens { display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; margin-top: 44px; }
.screen { flex: 0 1 300px; max-width: 300px; text-align: center; }
.screen .device { width: 100%; }
.screen .device:hover { transform: translateY(-8px); }
.screen figcaption {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(47, 111, 237, .10);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.35;
  text-align: left;
}
.screen figcaption svg { width: 16px; height: 16px; flex: none; color: var(--violet); }
@media (max-width: 640px) { .screen { flex-basis: 260px; max-width: 78vw; } }

/* ===== Early versions (three desktop screens side by side) ===== */
.earlies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 24px; row-gap: 40px; margin-top: 44px; align-items: start; }
.early { margin: 0; }
.early img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 20px 44px -26px rgba(20, 40, 80, .45);
  transition: transform .3s ease, box-shadow .3s ease;
}
.early:hover img { transform: translateY(-5px); box-shadow: 0 28px 56px -26px rgba(20, 40, 80, .5); }
.early figcaption { margin-top: 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) {
  .earlies { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== Final version (copy left, full screen right) ===== */
.finals { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 88px); }
.final { display: grid; grid-template-columns: 0.72fr 2fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.final__copy { position: sticky; top: 96px; }
.final__step { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); margin-bottom: 10px; }
.final__title { font-family: var(--font-display); font-size: clamp(24px, 2.9vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 22px; }
.final__list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.final__list li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.final__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.final__media { margin: 0; }
.final__media img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 24px 52px -28px rgba(20, 40, 80, .45);
}
/* Auto-looping three-step sequence, crossfaded in place of a GIF.
   Frame 1 is the always-present base; frames 2 and 3 fade in over it. */
.seq {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 24px 52px -28px rgba(20, 40, 80, .45);
}
.seq__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.seq__frame:nth-child(2), .seq__frame:nth-child(3) { opacity: 0; animation: seq-step 9s linear infinite; }
.seq__frame:nth-child(2) { animation-delay: 0s; }
.seq__frame:nth-child(3) { animation-delay: 3s; }
@keyframes seq-step {
  0%, 30%   { opacity: 0; }
  34%, 63%  { opacity: 1; }
  67%, 100% { opacity: 0; }
}
/* Two-frame variant: shorter loop, single crossfade */
.seq--2 .seq__frame:nth-child(2) { animation: seq-step-2 7s linear infinite; }
@keyframes seq-step-2 {
  0%, 45%  { opacity: 0; }
  50%, 95% { opacity: 1; }
  100%     { opacity: 0; }
}
.seq__caption { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
.seq__caption span {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  color: var(--muted); padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.seq__caption span + span::before { content: "→ "; color: var(--violet); }
/* Without motion, the three states stack so the sequence is still readable */
@media (prefers-reduced-motion: reduce) {
  .seq { aspect-ratio: auto; display: grid; gap: 16px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .seq__frame {
    position: static; width: 100%; height: auto; opacity: 1; animation: none;
    border: 1px solid var(--line); border-radius: 14px; background: #fff;
    box-shadow: 0 24px 52px -28px rgba(20, 40, 80, .45);
  }
}

/* Two named views side by side, no supporting copy */
.finalpair { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.finalone { margin: 0; }
.finalone__title { font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; }
.finalone img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  box-shadow: 0 24px 52px -28px rgba(20, 40, 80, .45);
}

@media (max-width: 900px) {
  .final { grid-template-columns: 1fr; }
  .final__copy { position: static; }
  .finalpair { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== Experience / walkthrough ===== */
.checkout { display: flex; gap: 64px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 48px; }

.gallery { flex: none; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gallery__viewport { position: relative; width: 300px; }
.gallery__stage { position: relative; width: 100%; aspect-ratio: 300 / 649; overflow: hidden; padding: 7px; border-radius: 34px; background: #0b0b14; box-shadow: 0 34px 80px -34px rgba(20, 40, 80, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .08); }
.gallery__stage::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 42%; height: 18px; background: #0b0b14; border-radius: 0 0 14px 14px; z-index: 3; }
.gallery__track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.gallery__slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.gallery__ph {
  width: 100%; height: 100%; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(160deg, #f4f8ff, #e6f0ff);
  color: var(--violet); font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border-radius: 26px;
}
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px);
  color: var(--text); display: grid; place-items: center; cursor: pointer; z-index: 3;
  transition: background .2s, transform .2s, color .2s, border-color .2s;
  box-shadow: 0 8px 20px -12px rgba(20, 40, 80, .4);
}
.gallery__nav:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.gallery__nav svg { width: 20px; height: 20px; }
.gallery__nav--prev { left: -22px; }
.gallery__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.gallery__nav--next { right: -22px; }
.gallery__nav--next:hover { transform: translateY(-50%) translateX(2px); }
.gallery__dots { display: flex; gap: 10px; }
.gallery__dots button { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .2s, transform .2s; }
.gallery__dots button.is-active { background: var(--violet); transform: scale(1.25); }
@media (max-width: 560px) { .gallery__viewport { width: 78vw; max-width: 300px; } }

.checkout__col { max-width: 380px; }
.checkout__steps { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.checkout__steps li { display: flex; gap: 16px; }
.checkout__steps .n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; background: linear-gradient(135deg, #2f6fed, #5b9bff); box-shadow: 0 8px 20px -8px rgba(47, 111, 237, .6); }
.checkout__steps h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 4px; }
.checkout__steps p { color: var(--muted); font-size: 14px; }

/* ===== Split (problem) ===== */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
.lead { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.split__left p { color: var(--muted); }

.callout {
  margin-top: 22px; padding: 20px 22px;
  background: linear-gradient(135deg, rgba(47, 111, 237, .10), rgba(91, 155, 255, .08));
  border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 16px;
}
.callout__label { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); margin-bottom: 8px; }
.callout p { color: var(--text) !important; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.5; }

.split__heading { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.split__right { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s; }
.row:hover { border-color: var(--violet); }
.row__num { font-family: var(--font-display); font-weight: 700; color: var(--violet); background: var(--surface-2); min-width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.row h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 4px; }
.row p { color: var(--muted); font-size: 15px; }

/* ===== Outcomes ===== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 44px; }
.stat {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* A blue bloom sitting behind the card, faded in on hover */
.stat::before {
  content: ""; position: absolute; inset: -16px; z-index: -1; pointer-events: none;
  border-radius: calc(var(--radius) + 12px);
  background: radial-gradient(58% 58% at 50% 42%, rgba(47, 111, 237, .38), transparent 72%);
  opacity: 0; transition: opacity .28s ease;
}
.stat:hover { transform: translateY(-5px); border-color: var(--violet); box-shadow: 0 22px 46px -22px rgba(47, 111, 237, .55); }
.stat:hover::before { opacity: 1; }
.stat__i { font-family: var(--font-display); font-size: 22px; font-weight: 700; background: linear-gradient(92deg, #2f6fed, #5b9bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; line-height: 1; margin-bottom: 14px; }
.stat h3 { font-family: var(--font-display); font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.stat p { color: var(--muted); font-size: 15px; }
.quote { font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.4; letter-spacing: -0.01em; max-width: 900px; padding-left: 24px; border-left: 4px solid var(--violet); color: var(--text); }
.quote__line { display: block; }
.quote__line + .quote__line { margin-top: 1em; }
.quote a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.quote a:hover { color: var(--violet); }
/* Outcome figures. The 1px gap over a tinted background draws every divider,
   so cells stay separated however many wrap onto a row. */
.outcome {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.outcome__cell { background: var(--surface); padding: clamp(18px, 2.4vw, 28px); }
/* Two lines are reserved whether or not a figure needs them, so a longer label
   wrapping does not push its caption out of line with the others */
.outcome__figure {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--violet); margin-bottom: 12px; min-height: 2.2em;
}
.outcome__note {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  color: var(--muted);
}
@media (max-width: 900px) { .outcome { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .outcome { grid-template-columns: 1fr; } }

/* ===== Footer ===== */
.footer { max-width: var(--maxw); margin: 0 auto; padding: 60px clamp(20px, 5vw, 48px) 80px; border-top: 1px solid var(--line); }
.footer__nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.footer__next, .footer__back { font-family: var(--font-display); font-size: clamp(18px, 2.5vw, 26px); font-weight: 600; }
.footer__next:hover { color: var(--violet); }
.footer__back:hover { color: var(--violet-2); }
.footer__links { display: flex; gap: 18px; margin-bottom: 20px; }
.footer__links a, .footer__links button { color: var(--muted); background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.footer__links a:hover, .footer__links button:hover { color: var(--text); }
.footer__credit { color: var(--muted); font-size: 13px; }
/* Credit left, back to top right; wraps to two rows on narrow screens */
.footer__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer__top { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; transition: color .2s; }
.footer__top:hover { color: var(--text); }
.footer__top-icon { width: 15px; height: 15px; flex-shrink: 0; transition: transform .2s; }
.footer__top:hover .footer__top-icon { transform: translateY(-2px); }

/* ===== Persona (image card + blocks, light-blue theme) ===== */
.persona { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 20px; align-items: stretch; }
.persona__col { display: flex; flex-direction: column; gap: 16px; }
.persona__coltitle { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); margin-bottom: 2px; }
.pblock { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.pblock:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(47, 111, 237, .5); }
.pblock__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--violet); margin-bottom: 10px; }
.pblock__num--q { color: var(--violet-2); }
.pblock p { color: var(--muted); font-size: 14px; line-height: 1.45; }

.persona__card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(160deg, #dbeafe 0%, #eaf2fd 58%, #e7e9fb 100%); }
.persona__pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); background: rgba(47, 111, 237, .12); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; }
.persona__img { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; object-fit: cover; margin: 6px auto 8px; display: block; border-radius: 50%; box-shadow: 0 12px 26px -14px rgba(20, 40, 80, .45); }
.persona__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); }
.persona__role { color: var(--violet); font-weight: 600; font-size: 14px; margin-top: -6px; }
.persona__blurb { color: var(--muted); font-size: 15px; font-style: italic; line-height: 1.5; }

@media (max-width: 900px) {
  .persona { grid-template-columns: 1fr; }
}

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .nav__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .stats { grid-template-columns: 1fr; }
  .herobar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nav__links a:not(.nav__cta) { display: none; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .meta { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stat:hover { transform: none; }
  html { scroll-behavior: auto; }
  .footer__top:hover .footer__top-icon { transform: none; }
}