/* ==========================================================================
   Uthereal — site styles
   Layout concept: a quiet, spacious light canvas; one navy band for proof;
   the brand gradient only ever appears as thin lines (like the logo mark),
   never as a background wash. Citations in mono are the signature detail.
   ========================================================================== */

@import "../../../button-theme.css";

:root {
  /* Colour */
  --ink: #142030;          /* logo navy — headlines */
  --ink-2: #3a4458;        /* body text */
  --muted: #6b7489;        /* secondary text */
  --line: #e4e6ec;         /* hairlines */
  --bg: #fafafb;           /* page */
  --bg-2: #f2f3f6;         /* alternate sections */
  --card: #ffffff;
  --blue: #2b6ff8;
  --violet: #790dbe;
  --red: #fb5656;
  --grad: var(--master-gradient);
  --tint-blue: #e8eefe;
  --tint-violet: #f1e8f9;
  --tint-rose: #fdeced;
  --on-ink: #f4f5f8;
  --on-ink-muted: #a4acbf;

  /* Type */
  --f-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: var(--f-body);

  --t-display: clamp(3rem, 7.4vw, 7.25rem);
  --t-h2: clamp(2.2rem, 4.4vw, 4.25rem);
  --t-h3: clamp(1.45rem, 2vw, 1.9rem);
  --t-lead: clamp(1.1rem, 1.35vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-small: .9rem;
  --t-mono: .75rem;

  /* Space */
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1320px;
  --section: clamp(104px, 13vw, 200px);
  --radius: 28px;
  --radius-sm: 14px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--ink); font-family: var(--f-display); font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tint-violet); color: var(--ink); }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- Type roles ---------- */
.display { font-size: var(--t-display); line-height: .96; letter-spacing: -0.045em; font-weight: 500; }
.h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; }
.h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }
.mono-label {
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.section-head { display: grid; gap: 20px; margin-bottom: clamp(48px, 6vw, 88px); }
.section-head.split { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 40px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font-weight: 500; font-size: 1rem; line-height: 1.25; letter-spacing: -0.005em;
  transition: transform .4s var(--ease), background-color .3s, color .3s, box-shadow .3s;
  white-space: nowrap;
}
.btn-sm { height: 40px; padding: 0 18px; font-size: .925rem; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1f2d44; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(20, 32, 48, .6); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); }
.btn-ghost { padding-inline: 6px; color: var(--ink); }
.btn-ghost span { transition: transform .4s var(--ease); }
.btn-ghost:hover span { transform: translateX(4px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .5s var(--ease), background-color .4s, box-shadow .4s;
}
.site-header.is-scrolled { background: rgba(250, 250, 251, .82); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }
.header-row { height: var(--header-h); display: flex; align-items: center; gap: 32px; }
.brand img { width: 124px; height: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; font-size: .95rem; color: var(--ink); transition: background-color .25s; }
.nav-link:hover, .nav-item:focus-within > .nav-link { background: rgba(20, 32, 48, .06); }
.nav-link[aria-current="page"] { font-weight: 500; }
.has-menu > .nav-link::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.menu {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 340px;
  display: grid; gap: 2px; padding: 10px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(20, 32, 48, .35);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .25s, transform .35s var(--ease), visibility .25s;
}
.menu::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 12px; }
.nav-item:hover .menu, .nav-item:focus-within .menu, .nav-item.is-open .menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.menu a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; transition: background-color .2s; }
.menu a:hover { background: var(--bg-2); }
.menu strong { color: var(--ink); font-weight: 500; }
.menu span { font-size: .875rem; color: var(--muted); line-height: 1.4; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { background: var(--bg); border-top: 1px solid var(--line); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
.mobile-menu .wrap { display: grid; padding-block: 16px 32px; }
.mobile-menu a:not(.btn) { padding: 10px 0; font-family: var(--f-display); font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
.mobile-menu .mono-label { margin-top: 20px; }
.mobile-menu .btn { margin-top: 24px; justify-content: center; }

/* ---------- 1. Hero ---------- */
.hero { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 96px)); }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.hero-eyebrow .dot { width: 32px; height: 2px; border-radius: 0; flex: none; }
.layer-copy > .mono-label::before { content: ""; display: block; width: 80px; height: 2px; margin-bottom: 20px; background: var(--master-gradient); }
.hero-title { max-width: 13ch; text-align: left; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 1.02; }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.hero-title .w > span { display: inline-block; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 5vw, 80px); }
.hero-sub { display: grid; gap: 24px; padding-bottom: .4em; }
.hero-sub .lead { max-width: 30em; }
.hero-media { margin-top: clamp(40px, 5vw, 64px); }
.hero-frame {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-inline: var(--gutter);
  border-radius: var(--radius);
}
@keyframes heroBorder { to { background-position: 300% 0; } }
.hero-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* The cited answer — product moment */
.answer {
  position: absolute; left: calc(var(--gutter) + clamp(16px, 2.4vw, 40px)); top: clamp(20px, 3.4vw, 48px);
  width: min(420px, calc(100% - 40px));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 20px; padding: 18px 20px 16px;
  box-shadow: 0 40px 80px -40px rgba(20, 32, 48, .55), 0 0 0 1px rgba(20, 32, 48, .05);
  font-size: .95rem; line-height: 1.5;
}
.answer-head { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 500; color: var(--ink); }
.answer-scope { margin-left: auto; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.answer-scope::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1fae6b; }
.answer-q { margin: 14px 0 10px auto; width: fit-content; max-width: 88%; background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 16px 16px 4px 16px; }
.answer-a { color: var(--ink); }
.answer-a .aw { opacity: 1; }
.cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 3px; padding: 0 4px; border-radius: 5px; background: var(--tint-violet); color: var(--violet); font-family: var(--f-mono); font-size: .66rem; font-weight: 500; vertical-align: 2px; line-height: 1; }
.answer-src { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; gap: 4px; font-family: var(--f-mono); font-size: .72rem; color: var(--muted); }
.answer-src li { display: flex; gap: 8px; align-items: baseline; }
.answer-src span { color: var(--violet); }

.hero-caption {
  position: absolute; right: calc(var(--gutter) + clamp(16px, 2.4vw, 40px)); bottom: clamp(20px, 3.4vw, 48px);
  max-width: 400px; color: #fff; font-size: 1.05rem; line-height: 1.45;
  display: grid; gap: 8px;
}
.hero-caption .mono-label { color: rgba(255, 255, 255, .75); }
.hero-caption a { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.backers { padding-block: clamp(48px, 6vw, 80px) 0; display: grid; gap: 24px; }
.backer-list { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 56px); }
.backer-list li { font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: -0.02em; color: #8d94a5; }

/* ---------- 2. Problem ---------- */
.statement {
  margin-top: 28px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.9rem, 3.7vw, 3.5rem); line-height: 1.12; letter-spacing: -0.03em;
  color: var(--ink); max-width: 22ch;
}
.statement .sw { transition: none; }
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(64px, 8vw, 120px); }
.problem-grid article { border-top: 1px solid var(--ink); padding-top: 20px; display: grid; gap: 10px; align-content: start; }
.problem-grid h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.problem-grid p { color: var(--muted); }

/* ---------- 3. Layer ---------- */
.layer { background: var(--bg-2); }
.layer-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.layer-copy .h2 { margin-top: 20px; max-width: 13ch; }
.layer-steps { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 4px; counter-reset: step; }
.layer-steps li { position: relative; padding: 16px 0 16px 24px; border-left: 2px solid var(--line); display: grid; gap: 6px; opacity: .45; }
.layer-steps li::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, var(--blue), var(--violet)); }
.layer-steps li.is-active { opacity: 1; }
.layer-steps h3 { font-size: 1.3rem; letter-spacing: -0.015em; }
.layer-steps p { color: var(--muted); max-width: 30em; }

/* "Follow one page" scene. Fixed 720×620 coordinate system, scaled to fit by JS (--ks). */
.layer-follow { margin-top: 18px; color: var(--muted); font-size: 1.05rem; }
.ks { position: relative; width: min(100%, calc((100vh - 150px) * 1.1613)); aspect-ratio: 720 / 620; justify-self: center; }
.ks-scene {
  position: absolute; left: 0; top: 0; width: 720px; height: 620px;
  transform: scale(var(--ks, 1)); transform-origin: 0 0;
  font-family: var(--f-body); color: var(--ink);
}
.ks-scene::before { /* faint lab grid */
  content: ""; position: absolute; inset: 0; border-radius: 28px;
  background-image: radial-gradient(rgba(20, 32, 48, .13) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
}
.ks-status { position: absolute; left: 30px; top: 18px; height: 28px; display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ks-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 0 rgba(121, 13, 190, .5); animation: ks-pulse 1.8s infinite; flex: none; }
@keyframes ks-pulse { 70% { box-shadow: 0 0 0 8px rgba(121, 13, 190, 0); } 100% { box-shadow: 0 0 0 0 rgba(121, 13, 190, 0); } }
.ks-status-t { position: absolute; left: 18px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease); }
.ks-status-t.is-on { opacity: 1; transform: none; }

/* 1 · archive */
.ks-archive { position: absolute; left: 260px; top: 250px; width: 200px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.ks-archive strong { font-family: var(--f-display); font-weight: 500; font-size: 30px; letter-spacing: -0.035em; line-height: 1.1; }
.ks-archive > span:last-child { color: var(--muted); font-size: 13px; }
.ks-src, .ks-ghost { position: absolute; width: 230px; height: 118px; border-radius: 16px; background: var(--card); box-shadow: 0 1px 0 rgba(20, 32, 48, .04), 0 24px 44px -28px rgba(20, 32, 48, .45), 0 0 0 1px rgba(20, 32, 48, .06); }
.ks-src { padding: 16px 18px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-content: start; }
.ks-src-icon { grid-row: 1 / 4; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-2); display: grid; place-items: center; }
.ks-src-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ks-type { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ks-src strong { font-weight: 600; font-size: 14px; line-height: 1.3; margin-top: 3px; }
.ks-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.s-book { left: 58px; top: 88px; transform: rotate(-5deg); }
.s-journal { left: 432px; top: 70px; transform: rotate(4deg); }
.s-video { left: 70px; top: 404px; transform: rotate(3deg); }
.s-guide { left: 420px; top: 414px; transform: rotate(-4deg); }
.ks-ghost { opacity: .55; }
.g1 { left: 245px; top: 60px; transform: rotate(9deg) scale(.8); }
.g2 { left: 250px; top: 470px; transform: rotate(-8deg) scale(.8); }
.ks-flag { position: absolute; right: 12px; top: 12px; font-family: var(--f-mono); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: 999px; background: var(--violet); color: #fff; opacity: 0; }

/* 2 · the page */
.ks-page {
  position: absolute; left: 200px; top: 100px; width: 320px; height: 420px;
  background: #fffefb; border-radius: 6px; color: #2a2a2a;
  box-shadow: 0 1px 0 rgba(20, 32, 48, .05), 0 40px 70px -40px rgba(20, 32, 48, .55), 0 0 0 1px rgba(20, 32, 48, .07);
  font-family: var(--f-body); opacity: 0;
}
.pg-run { position: absolute; left: 22px; right: 22px; top: 16px; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a; }
.pg-b { position: absolute; left: 22px; right: 22px; margin: 0; }
.pg-h { top: 40px; font-size: 13.5px; font-weight: 700; color: #1d1d1d; letter-spacing: -0.005em; }
.pg-p1, .pg-p2, .pg-p3 { font-size: 9.6px; line-height: 14px; text-align: justify; hyphens: auto; }
.pg-p1 { top: 70px; }
.pg-p2 { top: 124px; }
.pg-t { top: 168px; display: grid; gap: 0; font-family: var(--f-body); font-size: 8.6px; }
.pg-cap { font-family: var(--f-body); font-size: 8.8px; color: #444; padding-bottom: 5px; }
.pg-tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr; padding: 3.5px 0; line-height: 12px; border-top: .5px solid #ddd; font-variant-numeric: tabular-nums; }
.pg-tr i { font-style: normal; }
.pg-tr i + i { text-align: right; }
.pg-th { font-weight: 600; border-top: 1px solid #555; }
.pg-tr:last-child { border-bottom: 1px solid #555; }
.pg-p3 { top: 276px; }
.pg-ref { top: 356px; font-size: 7.6px; line-height: 12px; color: #666; border-top: .5px solid #ccc; padding-top: 6px; }
.ks-page sup { font-size: .7em; line-height: 0; }
.pg-folio { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 8.5px; color: #999; }

.rg { position: absolute; left: 16px; width: 288px; border-radius: 5px; border: 1.2px dashed rgba(43, 111, 248, .7); background: rgba(43, 111, 248, .04); opacity: 0; }
.rg::before { content: attr(data-l); position: absolute; right: -1px; top: -9px; transform: translateY(-50%); font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--blue); padding: 2px 5px; border-radius: 3px; }
.rg-h { top: 35px; height: 26px; }
.rg-p1 { top: 65px; height: 52px; }
.rg-p2 { top: 120px; height: 36px; }
.rg-t { top: 163px; height: 102px; }
.rg-p3 { top: 271px; height: 48px; }
.rg-ref { top: 351px; height: 38px; }
.ks-scan { position: absolute; left: -8px; right: -8px; top: 0; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 18px 4px rgba(121, 13, 190, .35); opacity: 0; }

/* wires */
.ks-wires { position: absolute; inset: 0; width: 720px; height: 620px; overflow: visible; pointer-events: none; }
.w { stroke-width: 1.6; stroke-linecap: round; }
.w-c { stroke: var(--violet); fill: none; }
.w-e { stroke: var(--blue); fill: none; }
.w-m { stroke: #e0434f; fill: none; }
circle.w-c { fill: var(--violet); stroke: none; }
circle.w-e { fill: var(--blue); stroke: none; }
circle.w-m { fill: #e0434f; stroke: none; }
.w-page, .w-ans { opacity: 0; }

/* 3 · knowledge objects */
.ks-objs { position: absolute; left: 420px; top: 130px; width: 260px; height: 374px; }
.ko { position: absolute; left: 0; width: 260px; height: 110px; padding: 14px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 24px 40px -28px rgba(20, 32, 48, .5), 0 0 0 1px rgba(20, 32, 48, .06); display: grid; align-content: space-between; opacity: 0; }
.ko::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; }
.ko p { font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.ko-type { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.ko-src { font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }
.ko-c { top: 0; } .ko-c::before { background: var(--violet); } .ko-c .ko-type { color: var(--violet); }
.ko-e { top: 132px; } .ko-e::before { background: var(--blue); } .ko-e .ko-type { color: var(--blue); }
.ko-m { top: 264px; } .ko-m::before { background: #e0434f; } .ko-m .ko-type { color: #e0434f; }
.ko-rel { position: absolute; left: 30px; height: 22px; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); opacity: 0; }
.ko-rel::before { content: ""; width: 1.5px; height: 22px; background: repeating-linear-gradient(var(--muted) 0 3px, transparent 3px 6px); }
.r1 { top: 110px; }
.r2 { top: 242px; }

/* 4 · the answer */
.ks-chat { position: absolute; left: 360px; top: 150px; width: 340px; height: 310px; padding: 16px 18px; border-radius: 20px; background: var(--card); box-shadow: 0 40px 70px -40px rgba(20, 32, 48, .55), 0 0 0 1px rgba(20, 32, 48, .06); opacity: 0; }
.kc-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.kc-head em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.kc-head em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1fae6b; }
.kc-q { position: absolute; right: 18px; top: 52px; max-width: 250px; background: var(--ink); color: #fff; padding: 9px 13px; border-radius: 14px 14px 4px 14px; font-size: 13px; line-height: 1.4; }
.kc-a { position: absolute; left: 18px; right: 18px; top: 116px; font-size: 13.5px; line-height: 21px; color: var(--ink); }
.kc-cite { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin: 0 1px 0 3px; border-radius: 5px; font-family: var(--f-mono); font-size: 10px; font-weight: 500; vertical-align: 1px; line-height: 1; }
.kc-cite:nth-of-type(1), .kc-src li:nth-child(1) b { background: var(--tint-violet); color: var(--violet); }
.kc-cite:nth-of-type(2), .kc-src li:nth-child(2) b { background: var(--tint-blue); color: var(--blue); }
.kc-cite:nth-of-type(3), .kc-src li:nth-child(3) b { background: var(--tint-rose); color: #e0434f; }
.kc-src { position: absolute; left: 0; right: 0; top: 220px; padding: 0 18px; border-top: 1px dashed var(--line); padding-top: 4px; }
.kc-src li { height: 26px; display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); }
.kc-src b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; font-size: 10px; font-weight: 500; }
.ks-outs { position: absolute; left: 360px; top: 478px; display: flex; gap: 8px; opacity: 0; }
.ks-outs span { font-size: 12px; padding: 7px 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.ks-outs .is-on { background: var(--ink); color: #fff; box-shadow: none; }
.ks-loop { position: absolute; left: 30px; top: 522px; display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--violet); opacity: 0; }
.loop { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--violet); border-right-color: transparent; animation: spin 2.4s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Static (no-JS / reduced motion) end state: show the answer view */
html:not(.has-motion) .ks-src, html:not(.has-motion) .ks-ghost, html:not(.has-motion) .ks-archive { display: none; }
html:not(.has-motion) .ks-objs { transform: translateX(-390px); }
html:not(.has-motion) .ko, html:not(.has-motion) .ko-rel, html:not(.has-motion) .ks-chat, html:not(.has-motion) .ks-outs, html:not(.has-motion) .ks-loop, html:not(.has-motion) .w-ans { opacity: 1; }
html:not(.has-motion) .ks-status-t { opacity: 0; } html:not(.has-motion) .ks-status-t:last-child { opacity: 1; transform: none; }


/* ---------- 4. Stacked step cards ---------- */
.card-stack { display: grid; gap: 32px; }
.step-card {
  position: sticky; top: calc(var(--header-h) + 24px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px);
  min-height: min(620px, 78vh);
  padding: clamp(24px, 3.4vw, 48px);
  background: var(--card); border: 1px solid var(--line); border-radius: 32px;
  box-shadow: 0 -20px 60px -40px rgba(20, 32, 48, .25);
  transform-origin: 50% 0;
}
.step-card:nth-child(2) { top: calc(var(--header-h) + 44px); }
.step-card:nth-child(3) { top: calc(var(--header-h) + 64px); }
.step-text { display: grid; align-content: space-between; gap: 32px; padding-block: 8px; }
.step-text > div, .step-text { min-width: 0; }
.step-text .h3 { font-size: clamp(1.8rem, 3vw, 2.75rem); letter-spacing: -0.03em; margin-top: 16px; }
.step-text p { margin-top: 16px; color: var(--muted); max-width: 30em; font-size: 1.1rem; }
.step-media { border-radius: 20px; overflow: hidden; background: var(--bg-2); min-height: 280px; }
.step-media img { width: 100%; height: 100%; object-fit: cover; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-family: var(--f-mono); font-size: .78rem; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: var(--bg); }
.rules { display: grid; gap: 10px; }
.rules li { display: flex; align-items: center; gap: 12px; font-size: .95rem; color: var(--ink); }
.rules span { width: 34px; height: 20px; border-radius: 999px; position: relative; flex: none; background: #d5d9e2; }
.rules span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .3s; }
.rules span.on { background: var(--ink); }
.rules span.on::after { transform: translateX(14px); }
.rules li:has(.off) { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(107, 116, 137, .5); }
.channels { display: grid; gap: 0; border-top: 1px solid var(--line); }
.channels li { display: grid; grid-template-columns: 64px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .85rem; color: var(--ink); }
.channels span { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; align-self: center; }

/* ---------- 5. Proof (navy band) ---------- */
.proof { background: var(--ink); color: var(--on-ink); }
.proof .h2 { color: #fff; }
.proof .lead { color: var(--on-ink-muted); margin-top: 20px; }
.proof .mono-label { color: var(--on-ink-muted); }
.proof-head { display: grid; gap: 20px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 104px); border-top: 1px solid rgba(255, 255, 255, .14); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding: 28px 24px 0 0; }
.stats > div + div { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .14); }
.stats dd { font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 4.75rem); line-height: 1; letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; font-weight: 500; }
.stats dt { color: var(--on-ink-muted); font-size: .98rem; max-width: 18em; }
.stats > div:first-child dd { background: linear-gradient(100deg, #7ea3ff, #c58bf0 70%, #ff9a9a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footnote { margin-top: 48px; font-family: var(--f-mono); font-size: .72rem; color: #7d879c; letter-spacing: .02em; }

/* ---------- 6. Stories (horizontal) ---------- */
.stories { padding-block: var(--section); overflow: hidden; }
.stories-pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); }
.stories-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.stories-head .h2 { margin-top: 20px; }
.stories-track {
  display: flex; gap: 20px;
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  width: max-content;
}
.story { width: clamp(300px, 34vw, 520px); flex: none; display: grid; grid-template-rows: auto 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.story-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.story-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.story:hover .story-img img { transform: scale(1.04); }
.story-body { padding: 24px 26px 28px; display: grid; gap: 10px; align-content: start; }
.story-body h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.story-body p { color: var(--muted); }
.story-body .story-stat { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; }
.story-stat strong { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.035em; color: var(--ink); line-height: 1.1; }
.tag { justify-self: start; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.story-next { background: var(--ink); border-color: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 32px; min-height: 100%; }
.story-next .mono-label { color: var(--on-ink-muted); }
.story-next .h3 { color: #fff; font-size: clamp(2rem, 3vw, 2.75rem); font-family: var(--f-display); letter-spacing: -0.03em; }

/* ---------- 7. Voices ---------- */
.voices { padding-top: 0; }
.voice-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.voice { border-radius: 28px; padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 320px; }
.voice:nth-child(1) { grid-column: span 5; }
.voice:nth-child(2) { grid-column: span 7; }
.voice:nth-child(3) { grid-column: span 7; }
.voice:nth-child(4) { grid-column: span 5; }
.voice blockquote { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.18; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.voice-tall blockquote { font-size: clamp(1.6rem, 2.8vw, 2.7rem); }
.voice figcaption { display: flex; align-items: center; gap: 14px; font-size: .92rem; color: var(--ink-2); }
.voice figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: .8rem; font-weight: 500; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(20, 32, 48, .08); }
.v-blue { background: var(--tint-blue); }
.v-violet { background: var(--tint-violet); }
.v-rose { background: var(--tint-rose); }
.v-navy { background: var(--ink); }
.v-navy blockquote { color: #fff; }
.v-navy figcaption, .v-navy figcaption strong { color: var(--on-ink); }
.v-navy .avatar { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }

/* ---------- 8. Industries ---------- */
.industries { background: var(--bg-2); }
.ind-row { display: flex; gap: 16px; height: clamp(480px, 62vh, 640px); }
.ind { position: relative; flex: 1 1 0; min-width: 0; border-radius: 24px; overflow: hidden; color: #fff; transition: flex-grow .8s var(--ease); background: var(--ink); isolation: isolate; }
.ind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.ind::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 32, 48, .05) 30%, rgba(20, 32, 48, .82) 100%); }
.ind-body { position: absolute; inset: auto 0 0 0; padding: 28px; display: grid; gap: 10px; }
.ind-body .mono-label { color: rgba(255, 255, 255, .7); }
.ind-body h3 { color: #fff; font-size: clamp(1.6rem, 2.2vw, 2.1rem); letter-spacing: -0.03em; }
.ind-body p { max-width: 24em; color: rgba(255, 255, 255, .86); display: grid; grid-template-rows: 0fr; }
.ind-more { font-weight: 500; font-size: .95rem; }
.ind-body p, .ind-more { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease); max-height: 0; }
.ind:hover, .ind:focus-visible { flex-grow: 2.1; }
.ind:hover img { transform: scale(1.03); }
.ind:hover .ind-body p, .ind:hover .ind-more, .ind:focus-visible .ind-body p, .ind:focus-visible .ind-more { opacity: 1; transform: none; max-height: 200px; }
.ind-row:not(:hover) .ind:first-child { flex-grow: 2.1; }
.ind-row:not(:hover) .ind:first-child .ind-body p, .ind-row:not(:hover) .ind:first-child .ind-more { opacity: 1; transform: none; max-height: 200px; }

/* ---------- 9. Products ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.product { display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 3.4vw, 48px); border-radius: 32px; background: var(--card); border: 1px solid var(--line); }
.product-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product .h3 { font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -0.035em; }
.product-lede { font-size: 1.15rem; color: var(--ink-2); max-width: 30em; }
.product .cta-row { margin-top: auto; padding-top: 8px; }
.pill { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--bg-2); color: var(--ink); }
.pill-grad { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.ticks { display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 9px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg) scale(.8); transform-origin: 30% 60%; }
.product-plus { background: var(--ink); border-color: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; }
.product-plus .h3 { color: #fff; }
.product-plus .product-lede { color: var(--on-ink-muted); }
.product { position: relative; overflow: hidden; }
.product::before { content: ""; position: absolute; top: 0; left: 28px; width: min(144px, 40%); height: 2px; background: var(--master-gradient); }
.stages { display: grid; }
.stages li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.stages li > span { font-family: var(--f-mono); font-size: .8rem; color: #c58bf0; }
.stages li div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.stages strong { color: #fff; font-weight: 500; }
.stages em { font-style: normal; font-family: var(--f-mono); font-size: .75rem; color: var(--on-ink-muted); }

/* ---------- 10. Trust ---------- */
.trust { padding-bottom: 0; }
.trust-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.trust-grid .h2 { margin-top: 20px; }
.trust-grid .lead { margin-top: 24px; }
.badges { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; }
.badges li { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--ink-2); }
.badge-ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: .68rem; font-weight: 500; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -10px rgba(20, 32, 48, .35); text-align: center; line-height: 1.1; }
.sec-list { display: grid; }
.sec-list div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.sec-list div:last-child { border-bottom: 1px solid var(--line); }
.sec-list dt { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.sec-list dd { color: var(--ink); font-size: 1.05rem; }

.eth { position: relative; margin-top: var(--section); height: clamp(420px, 60vh, 620px); border-radius: var(--radius); overflow: hidden; background: var(--ink); isolation: isolate; }
.eth > img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; z-index: -2; }
.eth::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 32, 48, .78) 0%, rgba(20, 32, 48, .2) 60%, rgba(20, 32, 48, 0) 100%); }
.eth-body { position: absolute; left: clamp(24px, 4vw, 64px); bottom: clamp(24px, 4vw, 64px); max-width: 30em; color: rgba(255, 255, 255, .88); display: grid; gap: 16px; }
.eth-body .h3 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.75rem); letter-spacing: -0.03em; }
.eth-mark { width: 44px; height: auto; }

/* ---------- 11. Talk ---------- */
.talk-card { position: relative; border-radius: calc(var(--radius) + 8px); padding: clamp(20px, 3vw, 40px); background: #fff; box-shadow: 0 40px 80px -50px rgba(20,32,48,.35); }
.talk-card::before { content: ""; position: absolute; top: 0; left: clamp(24px, 3vw, 40px); width: min(200px, 40%); height: 2px; background: var(--master-gradient); pointer-events: none; }
.talk-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.talk-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2); }
.talk-media img { width: 100%; height: 100%; object-fit: cover; }
.talk-badge { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); }
.talk-copy { display: grid; gap: 24px; justify-items: start; }
.talk-copy .h2 { max-width: 12ch; }
.talk-team { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); display: grid; gap: 20px; }
.talk-team ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.talk-team li { border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-2); }
.talk-team img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); transition: filter .4s, transform .6s; }
.talk-team li:hover img { filter: none; transform: scale(1.04); }
.talk-team-link { justify-self: start; font-weight: 500; color: var(--ink); }
@media (max-width: 700px) { .talk-team ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.founders { display: grid; width: 100%; }
.founders li { display: grid; gap: 2px; padding: 16px 0; border-top: 1px solid var(--line); }
.founders li:last-child { border-bottom: 1px solid var(--line); }
.founders strong { color: var(--ink); font-weight: 600; }
.founders span { color: var(--muted); font-size: .95rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-muted); padding-block: clamp(80px, 10vw, 140px) 40px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.footer-top { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-claim { font-family: var(--f-display); font-weight: 500; color: #fff; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; max-width: 13ch; }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-block: 56px; }
.footer-cols img { width: 124px; margin-bottom: 16px; }
.footer-cols nav { display: grid; gap: 10px; align-content: start; }
.footer-cols nav .mono-label { color: #7d879c; margin-bottom: 6px; }
.footer-cols a { color: var(--on-ink); font-size: .95rem; transition: color .2s; }
.footer-cols a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; }
.footer-bottom .socials { display: flex; gap: 10px; margin: 0; }
.footer-bottom .socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: var(--on-ink); transition: color .2s, border-color .2s, transform .2s; }
.footer-bottom .socials a:hover { color: #fff; border-color: rgba(255, 255, 255, .45); transform: translateY(-2px); }
.footer-bottom .socials svg { display: block; }
.socials { display: flex; gap: 20px; }
.socials a:hover { color: #fff; }



/* Hero example switcher (one example per industry) */
.answer-a { min-height: calc(1.5em * 4); }
.hero-tabs { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 16px; margin: 0 var(--gutter) 16px; }
.hero-tabs .mono-label { color: var(--muted); }
.hero-tab-row { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.hero-tab-row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(100deg, rgba(43,111,248,.5), rgba(255,255,255,0) 50%, rgba(251,86,86,.4)); background-size: 300% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: heroBorder 14s linear infinite; pointer-events: none; }
.hero-tab-row button { position: relative; overflow: hidden; height: 34px; padding: 0 14px; border-radius: 999px; color: var(--muted); font-size: .88rem; transition: background-color .3s, color .3s; }
.hero-tab-row button:hover { color: var(--ink); }
.hero-tab-row button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20,32,48,.12); }
.hero-tab-row i { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }
.hero-tab-row button:not(.is-on) i { opacity: 0; }

/* Customer spotlight */
.spotlight { padding-bottom: 0; }
.spot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 660px; background: var(--card); border: 1px solid var(--line); border-radius: 32px; overflow: hidden; }
.spot-copy { padding: clamp(36px, 4.4vw, 72px); display: grid; gap: 28px; align-content: center; justify-items: start; }
.spot-copy .h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); max-width: 15ch; }
.spot-lede { font-size: 1.1rem; color: var(--muted); max-width: 32em; }
.spot-quote { padding-left: 20px; border-left: 2px solid var(--violet); display: grid; gap: 10px; }
.spot-quote p { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.spot-quote footer { font-size: .92rem; color: var(--muted); }
.spot-quote strong { color: var(--ink); font-weight: 600; margin-right: 4px; }
.spot-media { position: relative; overflow: hidden; background: var(--bg-2); }
.spot-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.answer.spot-answer { left: 32px; top: 32px; width: min(410px, calc(100% - 64px)); }
.voice:nth-child(n) { grid-column: span 4; }

/* ---------- Pinned scene states (set by JS on desktop) ---------- */
.layer.is-pinned { min-height: 100vh; display: grid; align-items: center; padding-block: calc(var(--header-h) + 16px) 40px; }
.layer.is-pinned .layer-steps li { grid-template-rows: auto auto 0fr; }
.layer.is-pinned .layer-steps li p { overflow: hidden; min-height: 0; transition: opacity .4s; opacity: 0; }
.layer.is-pinned .layer-steps li.is-active { grid-template-rows: auto auto 1fr; }
.layer.is-pinned .layer-steps li.is-active p { opacity: 1; }
.layer.is-pinned .h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); }
.layer.is-pinned .layer-steps { margin-top: clamp(24px, 4vh, 48px); }
@media (max-width: 900px) {
  .layer.is-pinned { padding-block: 20px; align-items: start; }
  .layer.is-pinned .layer-grid { gap: 12px; }
  .layer.is-pinned .h2 { font-size: 1.9rem; margin-top: 10px; }
  .layer.is-pinned .layer-follow { display: none; }
  .layer.is-pinned .layer-steps { margin-top: 14px; }
  .layer.is-pinned .layer-steps li:not(.is-active) { display: none; }
  .layer.is-pinned .layer-steps li { padding-block: 4px; }
  .ks { width: 100%; }
}
.layer-steps li { transition: border-color .4s, opacity .4s, grid-template-rows .5s var(--ease); }
.stories.is-pinned { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(24px, 6vh, 64px); }
.stories.is-pinned .story { width: clamp(300px, min(30vw, 52vh), 460px); }
.stories.is-pinned .story-img { aspect-ratio: 16 / 11; }
.stories.is-pinned .stories-pin { gap: clamp(28px, 4vh, 48px); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav, .signin { display: none; }
  .burger { display: inline-block; }
  .header-actions { margin-left: auto; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-cols > div:first-child { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats > div:nth-child(n+3) { margin-top: 32px; }
}
@media (max-width: 900px) {
  .hero-top, .section-head.split, .layer-grid, .trust-grid, .talk-grid, .product-grid { grid-template-columns: minmax(0, 1fr); }
  .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .step-card { grid-template-columns: minmax(0, 1fr); min-height: 0; position: relative; top: auto !important; }
  .step-media { aspect-ratio: 16 / 10; min-height: 0; }
  .voice-grid { grid-template-columns: minmax(0, 1fr); }
  .voice:nth-child(n) { grid-column: auto; min-height: 0; }
  .ind-row { flex-direction: column; height: auto; }
  .ind { flex: none; height: 360px; }
  .ind-body p, .ind-more { opacity: 1; transform: none; max-height: none; }
  .stories-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .stories-track::-webkit-scrollbar { display: none; }
  .story { scroll-snap-align: center; width: min(82vw, 420px); }
  .talk-media { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  :root { --radius: 20px; }
  .hero-frame { margin-inline: 12px; }
  .hero-tabs { margin-inline: 12px; justify-content: flex-start; }
  .hero-tab-row { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .hero-tab-row button { padding: 0 10px; font-size: .8rem; }
  .answer { left: 14px; right: 14px; top: 14px; width: auto; font-size: .88rem; }
  .hero-caption { left: 20px; right: 20px; font-size: .98rem; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats > div + div { padding-left: 0; border-left: 0; margin-top: 32px; }
  .sec-list div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .btn { height: 48px; padding: 0 22px; }
  .header-actions .btn-sm { display: none; }
  .badges { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-frame::before, .hero-tab-row::before, .talk-card::before { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .step-card { position: relative; top: auto !important; }
}

/* Real site header (mirrors the shared app header) */
.brand img { filter: invert(1) hue-rotate(180deg); }
.brand img { height: 34px; width: auto; }
.btn-signin { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: #4100be; color: #fff !important; font-size: .875rem; font-weight: 600; box-shadow: 0 10px 30px -8px rgba(65,0,190,.55); transition: transform .3s, background-color .3s; }
.btn-signin:hover { background: #350099; transform: translateY(-2px); }
.mobile-menu .btn-signin { margin-top: 20px; justify-content: center; font-family: inherit; font-size: .9rem; padding: 14px 24px; }

/* Real site footer content on the original dark footer */
.site-footer.rf { background: var(--ink); color: var(--on-ink-muted); padding-block: clamp(56px, 7vw, 88px) calc(32px + env(safe-area-inset-bottom, 0px)); }
.rf-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; }
.rf-brand img { height: 32px; width: auto; }
.rf-brand p { margin-top: 16px; max-width: 24em; font-size: .875rem; line-height: 1.6; }
.rf-socials { display: flex; gap: 12px; margin-top: 24px; padding: 0; list-style: none; }
.rf-socials a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: var(--on-ink); transition: color .3s, transform .3s, border-color .3s; }
.rf-socials a:hover { color: #fff; border-color: rgba(255,255,255,.45); transform: translateY(-2px); }
.rf-socials svg { display: block; }
.rf-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 32px 24px; }
.rf-cols nav { display: grid; gap: 10px; align-content: start; min-width: 0; }
.rf-cols p { font-size: .875rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
.rf-cols p.is-swiss { color: #ff6b6b; }
.rf-cols a { font-size: .875rem; color: var(--on-ink); overflow-wrap: anywhere; transition: color .2s; }
.rf-cols a:hover { color: #fff; }
.grad-text { background: linear-gradient(90deg, #eb6d67, #a83fb8, #2049c1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: .78rem; }
.rf-swiss { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,80,80,.4); background: rgba(255,0,0,.12); color: #fff; font-weight: 600; }
.rf-flag { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(#fff,#fff) center/4px 10px no-repeat, linear-gradient(#fff,#fff) center/10px 4px no-repeat, #f00; }
@media (max-width: 1100px) { .rf-grid { grid-template-columns: minmax(0, 1fr); } .rf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .talk-card { padding: 14px; } }
.btn-signin { white-space: nowrap; }
@media (max-width: 1080px) { .header-actions .btn-signin { display: none; } }
@media (max-width: 560px) { .talk-badge { left: 10px; bottom: 10px; padding: 6px 10px; font-size: .6rem; } }

/* Embedded as the live homepage: the site's own menu sits on top. */
.is-embed .site-header { display: none; }
.is-embed { --header-h: 84px; scroll-padding-top: var(--header-h); }
@media (min-width: 768px) { .is-embed { --header-h: 98px; } }
/* The frame fills the window behind the floating site menu, so its own
   scrollbar spans the full page height like every other page. */
.is-embed .stories.is-pinned { padding-top: calc(var(--header-h) + clamp(8px, 2vh, 24px)); }
.is-embed .stories.is-pinned .story { width: clamp(280px, min(30vw, calc(52vh - 64px)), 460px); }
@media (max-width: 900px) { .is-embed .layer.is-pinned { padding-top: calc(var(--header-h) + 20px); } }

/* Uthereal Tour */
.tour-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.tour-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tour-list:empty { display: none; }
.tour-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.tour-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.tour-card .tour-date { font-size: .8rem; letter-spacing: .04em; color: var(--muted); }
.tour-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; }
.tour-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.tour-card .tour-go { margin-top: auto; padding-top: 8px; font-weight: 500; font-size: .9rem; }

/* Homepage phone layout: readable cards, touch-sized controls and no clipped
   previews. Keep these scoped to the embedded live homepage. */
.is-embed .hero { padding-top: calc(var(--header-h) + 32px); }
@media (max-width: 900px) {
  .is-embed .spot { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .is-embed .spot-media { min-height: 520px; }
  .is-embed .stories-head { display: grid; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .is-embed { --section: 72px; --t-h2: 2rem; --t-display: 2.5rem; }
  .is-embed .hero-title { max-width: none; font-size: 2.5rem; line-height: 1.08; letter-spacing: 0; }
  .is-embed .hero-top { gap: 24px; }
  .is-embed .hero-eyebrow { gap: 8px; font-size: .65rem; margin-bottom: 20px; }
  .is-embed .hero-eyebrow .dot { flex-shrink: 0; }
  .is-embed .hero-sub { gap: 20px; }
  .is-embed .hero-sub .lead { font-size: 1rem; }
  .is-embed .hero-media { margin-top: 28px; }
  .is-embed .hero-tab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 12px; }
  .is-embed .hero-tab-row button { height: 44px; }
  .is-embed .hero-tab-row::before { border-radius: inherit; }
  .is-embed .hero-tabs { gap: 12px; }
  .is-embed .spot-copy { padding: 24px; }
  .is-embed .spot-media { min-height: 480px; }
  .is-embed .answer.spot-answer { left: 16px; top: 16px; width: calc(100% - 32px); padding: 16px; }
  .is-embed .answer-head { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .is-embed .answer-scope { grid-column: 2; margin-left: 0; }
  .is-embed .answer-src li { min-width: 0; overflow-wrap: anywhere; }
  .is-embed .product-top { display: grid; grid-template-columns: minmax(0, 1fr); }
  .is-embed .product-top .pill { justify-self: start; }
  .is-embed .product { padding: 24px; }
  .is-embed .tour-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 24px; }
  .is-embed .tour-list { grid-template-columns: minmax(0, 1fr); }
  .is-embed .btn { height: auto; min-height: 48px; white-space: normal; text-align: center; justify-content: center; padding-block: 12px; }
  .is-embed .cta-row { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px; }
  .is-embed .cta-row .btn { width: 100%; }
  .is-embed .talk-copy .cta-row { width: 100%; }
  .is-embed .talk-copy .btn { width: 100%; }
  .is-embed .rf-cols a { min-height: 32px; display: flex; align-items: center; }
}
@media (max-width: 374px) {
  .is-embed .hero-title { font-size: 2.125rem; }
  .is-embed .hero-sub .cta-row { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* Phones: native reading flow, not a scaled desktop presentation. */
@media (max-width: 900px) {
  .is-embed .section { padding-block: 64px; }
  .is-embed .voices { padding-top: 0; }
  .is-embed .spotlight, .is-embed .trust { padding-bottom: 0; }
  .is-embed .h2 { font-size: 2rem; line-height: 1.12; letter-spacing: 0; max-width: 22ch; }
  .is-embed .statement { font-size: 1.75rem; line-height: 1.25; letter-spacing: 0; max-width: none; }
  .is-embed .hero-live .hero-title { font-size: 2.125rem; }
  .is-embed .hero-live .hero-sub .lead { font-size: 1rem; line-height: 1.6; }
  .is-embed .hero-eyebrow { font-size: .6rem; }
  .is-embed .hero-top { gap: 8px; }
  .is-embed .backers { padding-top: 20px; gap: 16px; }
  .is-embed .backer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .is-embed .backer-list li { font-size: 1rem; }
  .is-embed .problem-grid { margin-top: 32px; }
  .is-embed .layer-grid { gap: 28px; }
  .is-embed .layer-steps { margin-top: 24px; gap: 12px; }
  .is-embed .layer-steps li { opacity: 1; padding: 12px 0 12px 18px; }
  .is-embed .layer-steps h3 { font-size: 1.125rem; }
  .is-embed .layer-steps p { font-size: 1rem; }
  .is-embed .ks { width: 100%; aspect-ratio: auto; }
  .is-embed .ks-scene { position: relative; width: 100%; height: auto; transform: none; display: grid; gap: 20px; }
  .is-embed .ks-scene::before, .is-embed .ks-status, .is-embed .ks-archive,
  .is-embed .ks-src, .is-embed .ks-ghost, .is-embed .ks-page, .is-embed .ks-wires,
  .is-embed .ko-rel, .is-embed .ks-outs, .is-embed .ks-loop { display: none; }
  .is-embed .ks-objs { position: static; width: 100%; height: auto; transform: none !important; display: grid; gap: 12px; }
  .is-embed .ko { position: relative; inset: auto; width: 100%; height: auto; min-height: 104px; gap: 10px; opacity: 1; border-radius: 8px; }
  .is-embed .ko p { font-size: 1rem; }
  .is-embed .ko-src, .is-embed .ko-type { font-size: .75rem; letter-spacing: 0; }
  .is-embed .ks-chat { position: relative; inset: auto; width: 100%; height: auto; padding: 18px; opacity: 1; border-radius: 8px; }
  .is-embed .kc-head { flex-wrap: wrap; font-size: .875rem; }
  .is-embed .kc-head em { margin-left: 0; font-size: .65rem; }
  .is-embed .kc-q, .is-embed .kc-a, .is-embed .kc-src { position: static; max-width: none; font-size: .875rem; }
  .is-embed .kc-q { margin-block: 16px; }
  .is-embed .kc-src { margin-top: 16px; padding: 12px 0 0; }
  .is-embed .kc-src li { height: auto; min-height: 26px; font-size: .75rem; }
  .is-embed .step-card { padding: 24px; gap: 24px; }
  .is-embed .step-text .h3 { font-size: 1.75rem; letter-spacing: 0; }
  .is-embed .step-text p { font-size: 1rem; }
  .is-embed .ind { height: 280px; }
  .is-embed .ind-body { padding: 24px; }
  .is-embed .eth { height: 380px; margin-top: 64px; }
  .is-embed .eth-body { inset: auto 24px 24px; }
  .is-embed .spot-copy .h2 { font-size: 2rem; }
  .is-embed .spot-media { min-height: 430px; }
  .is-embed .section-head { gap: 16px; margin-bottom: 32px; }
  .is-embed .stories { padding-block: 64px; }
  .is-embed .stories-track { touch-action: pan-x pan-y; }
  .is-embed .talk-copy { gap: 20px; }
  .is-embed .rf-cols a { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 374px) {
  .is-embed .hero-live .hero-title { font-size: 1.875rem; }
  .is-embed .hero-eyebrow { letter-spacing: 0; }
}