/* 6labs.ai: the Phase 1 frame on the 6labs design system.
   Every value comes from the design system's tokens (ds-tokens.css, generated from
   sixlabs-screen-library/src/components/design-system). The site's names below are aliases onto them,
   so page rules read one vocabulary. Selected is navy; the accent is for accent words, dots, data and focus. */

/* ------------------------------------------------------------------ tokens */
:root {
  --font-inter: "Inter";
  --font-outfit: "Outfit";
  --font-jbmono: "JetBrains Mono", ui-monospace, monospace;

  --ink: var(--ds-color-ink);
  --ink-2: var(--ds-color-text-body);
  --ink-3: var(--ds-color-text-muted);
  --quiet: var(--ds-color-text-quiet);
  --ground: var(--ds-color-page);
  --surface: var(--ds-color-surface);
  --container-bg: var(--ds-color-container);
  --line: var(--ds-color-line);
  --line-2: var(--ds-color-line-strong);
  --line-faint: var(--ds-color-line-faint);
  --accent: var(--ds-color-accent);
  --accent-tint: var(--ds-color-accent-glow-08);
  --accent-line: rgb(0 102 204 / 0.35);
  --primary: var(--ds-color-primary);
  --primary-hover: var(--ds-color-primary-hover);
  --muted-head: #5f636b; /* the B2B header's link ink */

  /* data colours (cohorts, answers, dial categories), unchanged from 6labs.ai */
  --red: #E0484A;
  --amber: #D29A1E;
  --green: #2AA876;
  --purple: #8B5CF6;
  --magenta: #C7399A;

  --font-display: var(--ds-font-display);
  --font: var(--ds-font-sans);
  --mono: var(--ds-font-mono);

  /* layout: the design system's container (1400) with its 16 / 64px section gutters */
  --container: var(--ds-container);
  --gutter: var(--ds-gutter-page);
  --reading: 720px;
  --header-h: 64px;
  --subnav-h: 56px; /* the How it works bar under the header */
  --section-gap: var(--ds-rhythm-section);
  --head-gap: var(--ds-space-12);
  --r-card: var(--ds-radius-md);
  --r-stage: var(--ds-radius-lg);
  --r-small: var(--ds-radius-sm);
  --shadow-card: none;
  --shadow-float: var(--ds-shadow-float);
  --ease: var(--ds-ease-out);
}
@media (min-width: 768px) { :root { --gutter: var(--ds-gutter-section-md); --header-h: 72px; } }
@media (max-width: 640px) { :root { --head-gap: var(--ds-space-8); --r-stage: var(--ds-radius-md); } }

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body:not(.home) { padding-top: var(--header-h); }
/* a page running as a section inside the Lovable app: the app's own header sits outside this document */
body.embedded { padding-top: 0; }
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus-color); outline-offset: var(--ds-focus-offset); border-radius: var(--ds-radius-mark); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; z-index: 100; left: 16px; top: 12px; width: auto; height: auto; clip: auto; padding: 10px 14px; border-radius: var(--ds-radius-xs); background: var(--surface); box-shadow: var(--shadow-float); font-weight: 500; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-reading { width: min(var(--reading), 100% - 2 * var(--gutter)); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- type roles */
/* titles in the design system's display face (Outfit 500, set tight), everything else in Inter */
h1, h2, h3, .display, .h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.display { font-size: var(--ds-type-hero-size); line-height: var(--ds-type-hero-leading); letter-spacing: var(--ds-type-hero-tracking); }
.h2 { font-size: var(--ds-type-h2-size); line-height: var(--ds-type-h2-leading); }
.lede { font-size: var(--ds-type-player-body-size); line-height: var(--ds-type-player-body-leading); color: var(--ink-2); }
.accent { color: var(--accent); }
.eyebrow { font: var(--ds-type-eyebrow-weight) var(--ds-type-eyebrow-size)/var(--ds-type-eyebrow-leading) var(--font); letter-spacing: var(--ds-type-eyebrow-tracking); text-transform: uppercase; color: var(--ink-3); }
.meta { font: 400 var(--ds-type-card-meta-size)/1.5 var(--mono); letter-spacing: var(--ds-type-card-meta-tracking); text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------------ header */
/* the Phase 1 header, in the design system's type: solid ground and a hairline, logo, centred links with the
   current page underlined, language and Sign in. Fixed, so the home hero's stage sits under it as designed */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--ds-z-header); background: var(--ground); border-bottom: 1px solid var(--line); }
.header-inner { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; justify-self: start; }
.brand img { height: 32px; width: auto; }
.primary-nav { display: flex; gap: 4px; }
.primary-nav a {
  position: relative; padding: 10px 14px; border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--ink-2); letter-spacing: -.005em;
  transition: color .15s ease, background .15s ease;
}
.primary-nav a:hover { color: var(--ink); background: rgb(10 27 51 / .04); }
.primary-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.primary-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }

/* language menu */
.lang { position: relative; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer;
}
.lang-trigger:hover { color: var(--ink); background: rgb(10 27 51 / .04); }
.lang-trigger svg { width: 16px; height: 16px; }
.lang-trigger .chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.lang-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 6px; margin: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float);
}
.lang-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left;
}
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--ground); }
.lang-menu button[aria-checked="true"] { color: var(--accent); font-weight: 600; }
.lang-menu .code { flex: none; width: 28px; padding: 3px 0; border-radius: 6px; background: var(--ground); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: center; color: var(--ink-3); }
.lang-menu button[aria-checked="true"] .code { background: var(--accent-tint); color: var(--accent); }

/* buttons: the B2B page's flat 6px rectangles (b2b.css .b2b-btn) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  border-radius: var(--ds-radius-mark); border: 1px solid transparent; font-weight: 500; letter-spacing: -0.02em; line-height: 1; cursor: pointer;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease, transform .18s ease;
}
.btn-outline { height: 34px; padding: 0 16px; font-size: 13.5px; color: var(--ink); border-color: rgb(203 213 225 / 0.8); background: transparent; }
.btn-outline:hover { border-color: rgb(10 27 51 / 0.4); background: rgb(255 255 255 / 0.7); }
.btn-solid {
  background: #0b0b0d; border-color: #0b0b0d; color: #fff;
  box-shadow: 0 1px 2px rgba(16, 16, 19, .1), 0 4px 9px -2px rgba(16, 16, 19, .13), 0 9px 19px -8px rgba(16, 16, 19, .17);
}
.btn-solid:hover { background: #26262b; transform: translateY(1px); box-shadow: 0 1px 2px rgba(16, 16, 19, .15), 0 2px 5px -1px rgba(16, 16, 19, .13), 0 5px 10px -7px rgba(16, 16, 19, .11); }
.btn-solid:active { transform: translateY(2px); }
/* the design system's tertiary pill (Button tertiary sm) for in-page links */
.btn-primary { height: 40px; padding: 0 20px; border-radius: 9999px; font-size: 14px; color: #fff; background: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); transform: scale(1.03); }
.btn-primary:active { transform: scale(.98); }
.btn-primary svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .btn-primary:hover, .btn-primary:active { transform: none; } }
/* the Phase 1 secondary button (Sign in) */
.btn-secondary { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink-3); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn-pill {
  height: 32px; padding: 0 14px; border-radius: var(--ds-radius-full); font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background-color var(--ds-dur-ui) var(--ease), border-color var(--ds-dur-ui) var(--ease), scale var(--ds-dur-press) var(--ease);
}
.btn-pill:hover { border-color: var(--line-2); background: var(--ds-color-fill-hover); }
.btn-pill:active { scale: var(--ds-scale-press-pill); }
.btn-pill svg { width: 16px; height: 16px; stroke-width: 1.75; color: var(--ink-3); }

.burger { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), width .3s var(--ease), top .3s var(--ease); }
.burger span:first-child { top: 15px; width: 18px; }
.burger span:last-child { top: 23px; width: 12px; }
.burger[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 19px; width: 18px; transform: rotate(-45deg); }
.mobile-panel {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: calc(var(--ds-z-header) - 1); background: var(--ground);
  padding: 16px var(--gutter) 32px; display: flex; flex-direction: column;
}
.mobile-panel[hidden] { display: none; }
.mobile-panel a.mlink { display: flex; align-items: center; min-height: 56px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; border-bottom: 1px solid var(--line); }
.mobile-panel a.mlink[aria-current="page"] { color: var(--accent); }
.mobile-panel .btn { margin-top: 24px; }

@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .primary-nav, .header-actions .btn-signin { display: none; }
  .burger { display: block; }
}

/* -------------------------------------------------- How it works: the pages */
/* four independent pages, so pill links rather than steps, in a bar fixed under the header on every How it works
   page. Header and bar read as one block (the bar carries the hairline); the page you are on is the design system's
   selected state, navy with white text */
.hiw-bar { position: sticky; top: var(--header-h); z-index: calc(var(--ds-z-header) - 2); background: var(--ground); border-bottom: 1px solid var(--line); }
.has-subnav .site-header { border-bottom-color: transparent; }
.hiw-nav { height: var(--subnav-h); display: flex; align-items: center; justify-content: center; gap: 8px; }
.hiw-nav a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: var(--ds-radius-full);
  border: 1px solid var(--line-2); background: var(--surface); font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2);
  transition: border-color var(--ds-dur-ui) var(--ease), color var(--ds-dur-ui) var(--ease), background-color var(--ds-dur-ui) var(--ease);
}
.hiw-nav a:hover { border-color: var(--ink-3); color: var(--ink); }
.hiw-nav a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.hiw-nav a[aria-current="page"]:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.hiw-nav a[aria-current="page"] .gl.on { color: #9cc0ff; } /* the glitch's glyphs, light enough to read on navy */
@media (max-width: 640px) { .hiw-nav { gap: 6px; } .hiw-nav a { height: 34px; padding: 0 12px; font-size: 13px; } }

/* the hover glitch (site.js): each letter holds its width while the model's glyphs run through it in mono blue */
.gl-box { display: inline-block; white-space: nowrap; }
.gl { display: inline-block; white-space: pre; text-align: center; }
.gl.on { font-family: var(--mono); font-weight: 500; color: var(--accent); }

/* ----------------------------------------------------------------- heroes */
/* page heroes sit on the page's own ground (no glow), centred, at the design system's hero size */
.hero { position: relative; padding-top: clamp(56px, 7vw, 112px); text-align: center; }
.hero h1 { display: flex; flex-direction: column; align-items: center; }
.hero .lede { margin: 20px auto 0; max-width: 640px; text-wrap: balance; }
.hero .eyebrow { margin-bottom: 12px; }

/* jump links: the design system's TextLink (accent, a hairline underline) with a down arrow; lighter than the page
   pills above, since they only move down this page */
.jumps { margin-top: 28px; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 26px; }
.jumps a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 15px; font-weight: 500; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--accent-line);
  transition: text-decoration-color var(--ds-dur-ui) var(--ease);
}
.jumps a:hover { text-decoration-color: var(--accent); }
.jumps a::after {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%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' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------- sections */
.section { padding-top: var(--section-gap); scroll-margin-top: calc(var(--header-h) + var(--subnav-h)); }
.has-subnav .section { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 8px); }
.page-end { padding-bottom: var(--section-gap); }

/* section header (the design system's SectionHead): navy title with its accent words, muted subline;
   here laid out as two top-aligned columns on the container */
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 48px; align-items: start; }
.sec-head h2 { font-size: var(--ds-type-h2-size); line-height: var(--ds-type-h2-leading); }
.sec-head h2 .accent { color: var(--accent); }
.sec-head .desc { font-size: var(--ds-type-body-l-size); line-height: 1.55; color: var(--ink-3); padding-top: 6px; max-width: 520px; }
.sec-head .desc strong { color: var(--ink); font-weight: 500; }
@media (max-width: 800px) { .sec-head { grid-template-columns: minmax(0, 1fr); } .sec-head .desc { padding-top: 0; } }

/* "Today": the design system's live Badge leading the description */
.status { display: flex; gap: 12px; align-items: flex-start; }
.status b {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; margin-top: 1px;
  border: 1px solid var(--line); border-radius: var(--ds-radius-full); background: var(--surface); color: var(--ink);
  font: 500 var(--ds-type-badge-size)/1 var(--mono); letter-spacing: var(--ds-type-badge-tracking); text-transform: uppercase;
}
.status b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }

/* stage: the frame every animated visual sits in, the design system's container ground */
.figure { margin: var(--head-gap) auto 0; }
.stage {
  position: relative; overflow: hidden; height: var(--stage-h, 420px);
  background: var(--container-bg); border: 1px solid var(--line-faint); border-radius: var(--r-stage);
}
.stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 640px) { .stage { height: var(--stage-h-m, var(--stage-h, 420px)); } }
.stage .tl { left: 24px; top: 24px; }
.stage .bl { left: 24px; bottom: 24px; }
@media (max-width: 640px) { .stage .tl { left: 14px; top: 14px; } .stage .bl { left: 14px; bottom: 14px; } .stage .bub, .stage .stage-card { max-width: calc(100% - 28px); font-size: 14px; } }
.stage.fade-x > canvas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.stage.fade-y > canvas { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); }
.stage.fade-xy > canvas {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(180deg, #000 calc(100% - 56px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(180deg, #000 calc(100% - 56px), transparent);
}
.cap { margin-top: 20px; text-align: center; font-size: var(--ds-type-body-l-size); line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.cap .accent { color: var(--accent); }

/* speech bubbles and cards placed on a stage */
.bub {
  position: absolute; z-index: 2; max-width: min(360px, 44%); padding: 12px 16px; border-radius: var(--r-small);
  font-size: 15px; line-height: 1.45;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.bub.show { opacity: 1; transform: none; }
.bub.human { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-float); border-bottom-left-radius: 4px; }
.bub.twin { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bub.twin.unsure { background: var(--ds-color-container-deep); color: var(--ink); }
.bub.small { max-width: 240px; font-size: 14px; padding: 10px 13px; }
.caret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -.15em; margin-left: 2px; animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stage-card {
  position: absolute; z-index: 2; max-width: 360px; padding: 14px 16px; border-radius: var(--r-small);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.stage-card.show { opacity: 1; transform: none; }
.stage-card small { display: block; margin-bottom: 6px; font: 400 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.stage-card span { font-size: 15px; line-height: 1.45; }

/* chips: the design system's filter Chip (md), selected fills navy */
.pickers { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px; border-radius: var(--ds-radius-full);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  font-size: 13px; font-weight: 500; line-height: 1.35; cursor: pointer; text-align: left;
  transition: color var(--ds-dur-ui) var(--ease), background-color var(--ds-dur-ui) var(--ease), border-color var(--ds-dur-ui) var(--ease), scale var(--ds-dur-press) var(--ease);
}
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip:active { scale: var(--ds-scale-press-pill); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); opacity: .45; transition: opacity .2s ease; }
.chip small { color: var(--ink-3); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.on:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.chip.on i { opacity: 1; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9); }
.chip.on small { color: var(--ds-color-on-blue-75); }
.pickers.questions .chip { padding: 5px 14px; }
@media (max-width: 640px) {
  .pickers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .pickers::-webkit-scrollbar { display: none; }
  .pickers.questions .chip { max-width: 250px; white-space: normal; align-items: flex-start; border-radius: var(--ds-radius-xs); }
}

/* legend under a stage */
.legend { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 13px; color: var(--ink-2); min-height: 20px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- closing */
/* the design system's closing display line (SectionHead size="display") */
.closing { padding-top: var(--section-gap); padding-bottom: var(--ds-rhythm-closing-foot); text-align: center; }
.closing h2 { font-size: var(--ds-type-closing-size); line-height: var(--ds-type-closing-leading); letter-spacing: var(--ds-type-closing-tracking); display: flex; flex-direction: column; align-items: center; }
.closing h2 .accent { color: var(--accent); }
.closing p { margin: 20px auto 0; max-width: 520px; text-wrap: balance; font-size: var(--ds-type-subline-size); line-height: 1.5; color: var(--ink-3); }

/* next-page card: the design system's clickable feature Card (lift + sheen), with a solid navy IconButton */
@property --ds-sheen { syntax: "<number>"; inherits: false; initial-value: 0; }
.next-card {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; padding: 28px 24px 24px 28px;
  border-radius: var(--ds-radius-lg); border: var(--ds-stroke-sheen) solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%),
      color-mix(in srgb, var(--accent) calc(var(--ds-sheen) * 100%), transparent),
      color-mix(in srgb, var(--accent) calc(var(--ds-sheen) * 30%), transparent) 34%, transparent 68%) border-box,
    linear-gradient(var(--line), var(--line)) border-box;
  transition: translate var(--ds-dur-line) var(--ease), box-shadow var(--ds-dur-line) var(--ease), scale var(--ds-dur-press) var(--ease), --ds-sheen var(--ds-dur-sheen) ease;
}
@media (hover: hover) { .next-card:hover { --ds-sheen: 1; translate: 0 calc(var(--ds-lift-y) * -1); box-shadow: var(--ds-shadow-lift); } }
.next-card:active { scale: var(--ds-scale-press-card); }
.next-card .lbl { display: block; font: 400 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.next-card .ttl { display: block; margin-top: 6px; font-family: var(--font-display); font-size: var(--ds-type-card-name-size); font-weight: 500; letter-spacing: -0.025em; line-height: 1.25; color: var(--ink); }
.next-card .arrow { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: #fff; transition: background-color var(--ds-dur-ui) var(--ease), transform var(--ds-dur-line) var(--ease); }
.next-card:hover .arrow { background: var(--primary-hover); transform: translateX(2px); }
.next-card .arrow svg { width: 20px; height: 20px; stroke-width: 1.6; }