/* NIVOR site: minimal white hyperglass. Same standard as the films (lab/references/nivor-ad-playbook.md):
   glass is chrome, never content; glass needs light behind it; one hero element; springs, never linear;
   one line at a time; sentence case; ink on white. */
@font-face { font-family: 'Inter Tight'; src: url(fonts/InterTight.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/JetBrainsMono.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #FFFFFF;
  --bg-2: #F5F8FB;
  --ink: #0E1621;
  --ink-2: #445163;
  --ink-3: #7A8696;
  --water: #1C9BD8;
  --sky: #9CC0F5;
  --line: rgba(14, 22, 33, 0.08);
  --radius: 28px;
  --spring: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances (EASE_OUT in the films) */
  --spring-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
  --sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* glass: solid-ish by default; real glass layered on where the browser supports it */
  --glass-bg: rgba(255, 255, 255, 0.86);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 255, 255, 0.52); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; border-radius: 8px; }

/* ---------------------------------------------------------------- the water behind the glass */
.caustics { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.caustics i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: 0.55; will-change: transform; }
.caustics i:nth-child(1) { background: radial-gradient(circle, #CFE6FF 0%, transparent 65%); left: -20vmax; top: -25vmax; animation: drift1 38s ease-in-out infinite alternate; }
.caustics i:nth-child(2) { background: radial-gradient(circle, #D8F6FB 0%, transparent 65%); right: -25vmax; top: 30vh; animation: drift2 46s ease-in-out infinite alternate; }
.caustics i:nth-child(3) { background: radial-gradient(circle, #FFEBD9 0%, transparent 60%); left: 10vw; bottom: -40vmax; opacity: 0.4; animation: drift1 52s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(12vw, 8vh, 0) scale(1.1); } }
@keyframes drift2 { to { transform: translate3d(-10vw, -6vh, 0) scale(0.92); } }

/* ---------------------------------------------------------------- glass (chrome only) */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),       /* top rim: the sun is top-left, like the films */
    inset 0 -1px 0 rgba(14, 22, 33, 0.04),
    0 1px 2px rgba(14, 22, 33, 0.04),
    0 18px 50px rgba(30, 70, 130, 0.10);
}
@media (prefers-contrast: more) { .glass { --glass-bg: #FFFFFF; border: 2px solid currentColor; } }
@media (prefers-reduced-transparency: reduce) { .glass { --glass-bg: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---------------------------------------------------------------- type */
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }
.eyebrow { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); }
h1 { font-weight: 700; font-size: clamp(52px, 9vw, 120px); line-height: 0.98; letter-spacing: -0.045em; }
h2 { font-weight: 700; font-size: clamp(34px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-weight: 700; font-size: 22px; letter-spacing: -0.015em; }
p { color: var(--ink-2); font-size: 18px; text-wrap: pretty; }
h1, h2, .lede { text-wrap: balance; }
.lede { font-size: clamp(18px, 1.6vw, 21px); max-width: 600px; }
.fine { font-size: 14px; color: var(--ink-3); }
.center { text-align: center; }
.water { color: var(--water); }
section { padding-block: clamp(64px, 8vw, 112px); }
section h2 + p, section h2 + .steps, section h2 + .plan-grid { margin-top: 22px; }

/* ---------------------------------------------------------------- buttons (glass pills, water ripple on press) */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px;
  border-radius: 999px; font: 600 16px/1 var(--sans); letter-spacing: -0.005em; cursor: pointer; border: 0;
  transition: transform 0.5s var(--spring-bounce), box-shadow 0.4s var(--spring), background 0.3s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); transition-duration: 0.12s; }
.btn-ink { background: var(--ink); color: #FFF; box-shadow: 0 10px 30px rgba(14, 22, 33, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-ink:hover { box-shadow: 0 16px 40px rgba(14, 22, 33, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn-glass { background: var(--glass-bg); color: var(--ink); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: inset 0 1.5px 0 #FFF, 0 0 0 1px var(--line), 0 10px 30px rgba(30, 70, 130, 0.10); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 58px; padding: 0 32px; font-size: 17px; }
.btn .ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0);
  width: 12px; height: 12px; background: radial-gradient(circle, rgba(160, 225, 255, 0.55) 0%, rgba(160, 225, 255, 0) 70%);
  animation: ripple 0.8s var(--spring) forwards; }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(40); opacity: 0; } }

/* ---------------------------------------------------------------- nav */
.nav { --glass-bg: rgba(255, 255, 255, 0.64); position: fixed; z-index: 10; top: 14px; left: 50%; transform: translateX(-50%); width: min(760px, 100% - 24px); height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 10px 0 22px; border-radius: 999px; }
.nav nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav nav a:hover { color: var(--ink); }
.wordmark { font-weight: 700; font-size: 15px; letter-spacing: 0.42em; }
@media (max-width: 640px) { .nav nav { display: none; } }

/* ---------------------------------------------------------------- hero */
.hero { padding-top: 150px; padding-bottom: 60px; text-align: center; width: min(1240px, 100% - 32px); margin-inline: auto; }
.hero .eyebrow { margin-bottom: 22px; }
.hero .lede { margin: 26px auto 0; }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.stage { position: relative; margin-top: 64px; height: clamp(440px, 62vw, 700px); border-radius: clamp(24px, 3vw, 40px); overflow: hidden; background: var(--sky);
  box-shadow: 0 40px 100px rgba(30, 80, 160, 0.20), 0 0 0 1px rgba(14, 22, 33, 0.04); cursor: pointer; isolation: isolate; }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.stage-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s var(--spring); }
.stage.live .stage-poster { opacity: 0; }
.stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.stage-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; font: 700 11px var(--mono);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); --glass-bg: rgba(255, 255, 255, 0.45); }
.truth { margin-top: 28px; font-size: 15px; color: var(--ink-3); }

/* ---------------------------------------------------------------- clones */
.clones { padding-top: 40px; overflow: hidden; }
.clone-rail { mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); margin-bottom: 70px; }
.clone-track { display: flex; gap: 20px; width: max-content; animation: rail 40s linear infinite; }
.clone { flex: none; width: 220px; height: 280px; padding: 16px; border-radius: 22px; background: #ECEEF1; display: flex; flex-direction: column; gap: 10px; }
.clone b { height: 100px; border-radius: 12px; background: linear-gradient(135deg, #D6D9DE, #C6CAD1); }
.clone span { font-weight: 700; font-size: 17px; line-height: 1.15; color: #A0A7B1; }
.clone em { height: 9px; border-radius: 5px; background: #DADDE2; width: 80%; }
.clone em + em { width: 55%; }
.clone u { text-decoration: none; margin-top: auto; align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: #C3C8CF; color: #F3F4F6; font-weight: 700; font-size: 13px; }
.clone.odd { background: linear-gradient(160deg, #BFE0FF 0%, #E8F7FF 55%, #FFFFFF 100%); box-shadow: inset 0 1.5px 0 #FFF, 0 20px 50px rgba(28, 155, 216, 0.25); transform: translateY(-8px) rotate(-1.5deg); }
.clone.odd b { background: radial-gradient(circle at 35% 30%, #FFF 0%, #9ED8F7 50%, #2F8FE0 100%); }
.clone.odd span { color: var(--ink); }
.clone.odd u { background: var(--ink); }
@keyframes rail { to { transform: translateX(-50%); } }
.clones h2 { text-align: center; }
.clones p { text-align: center; margin: 24px auto 0; max-width: 620px; }

/* ---------------------------------------------------------------- work */
.work-grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(40px, 7vw, 110px); align-items: center; }
.work-copy p { margin-top: 22px; max-width: 470px; }
.work-copy .fine { margin-top: 16px; }
.phone { position: relative; padding: 10px; border-radius: 48px; justify-self: center; width: min(380px, 100%); }
.phone video { width: 100%; aspect-ratio: 9 / 16; border-radius: 38px; background: #DDE8F5; object-fit: cover; }
.sound { position: absolute; right: 24px; bottom: 24px; height: 36px; padding: 0 14px; border-radius: 999px; font: 700 11px var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink); cursor: pointer; --glass-bg: rgba(255, 255, 255, 0.6); }
@media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- process */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.card { border-radius: var(--radius); padding: 28px 26px 30px; }
.card .n { font: 700 12px var(--mono); letter-spacing: 0.2em; color: var(--water); }
.card h3 { margin-top: 44px; }
.card p { margin-top: 10px; font-size: 16px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .card h3 { margin-top: 20px; } }

/* ---------------------------------------------------------------- plans */
.plans .wrap > h2, .plans .eyebrow, .process .eyebrow, .process h2 { text-align: left; }
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; align-items: stretch; }
.plan { position: relative; border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column; }
.plan .price { margin-top: 14px; font-size: 15px; color: var(--ink-3); }
.plan .price span { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.plan .founding { margin-top: 8px; font-size: 14px; color: var(--water); font-weight: 600; }
.plan ul { list-style: none; margin: 22px 0 28px; display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.plan li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--water); margin-right: 10px; vertical-align: 2px; }
.plan .btn { margin-top: auto; width: 100%; }
.plan-alt { margin-top: 12px; text-align: center; font-size: 14px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.plan-alt:hover { color: var(--ink); }
.plan.feature { background: linear-gradient(165deg, rgba(214, 236, 255, 0.85) 0%, rgba(255, 255, 255, 0.7) 60%); box-shadow: inset 0 1.5px 0 #FFF, 0 0 0 1px rgba(28, 155, 216, 0.25), 0 30px 70px rgba(28, 120, 200, 0.18); }
.plan .tag { position: absolute; top: 18px; right: 18px; font: 700 10px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--water); }
.plans .fine { margin-top: 28px; }
@media (max-width: 1060px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- promise */
.promise { background: linear-gradient(180deg, transparent, var(--bg-2) 30%, var(--bg-2) 70%, transparent); }
.promise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.promise h2 { font-size: clamp(28px, 3.4vw, 44px); }
.ticks, .crosses { list-style: none; margin-top: 24px; display: grid; gap: 14px; font-size: 18px; color: var(--ink-2); }
.ticks li::before { content: '✓'; color: var(--water); font-weight: 700; margin-right: 12px; }
.crosses li::before { content: '×'; color: var(--ink-3); font-weight: 700; margin-right: 12px; }
@media (max-width: 720px) { .promise-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------------------------------------------------------------- sample form */
.sample-card { border-radius: 36px; padding: clamp(28px, 5vw, 56px); }
.sample-card h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 14px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 34px 0 28px; }
.fields .wide { grid-column: 1 / -1; }
.fields label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fields input { height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.8); font: 400 16px var(--sans); color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(14, 22, 33, 0.04); transition: border-color 0.2s, box-shadow 0.3s var(--spring); }
.fields input:focus { outline: none; border-color: var(--water); box-shadow: 0 0 0 4px rgba(28, 155, 216, 0.15); }
.sample-card .fine { margin-top: 14px; }
@media (max-width: 600px) { .fields { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer */
.foot { padding: 40px 0 50px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.foot-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.foot-row .wordmark { color: var(--ink); margin-right: auto; }

/* ---------------------------------------------------------------- reveal: one thing at a time, springy, no pop from zero */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 0.9s var(--spring), transform 1s var(--spring), filter 0.9s var(--spring); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.no-js .reveal { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .caustics i, .clone-track { animation: none; }
  .btn .ripple { display: none; }
}

/* Chromium only: the nav refracts what scrolls under it (true liquid glass); others keep frosted */
.refract .nav { -webkit-backdrop-filter: url(#lens) blur(14px) saturate(170%); backdrop-filter: url(#lens) blur(14px) saturate(170%); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ================================================================ CRYSTAL v3 (2026-10-14)
   The site lives in the films' world: the same defocused real sky (media/sky-*.jpg, baked from sky_4k.hdr with the
   CrystalHero view + grade) and the same thick clear crystal. Owner rule: "if it has an edge, the glass is there".
   Recipe per edge, matching the v3 frames: clear body (the sky shows through, a touch brighter and bluer), a thick
   bevel (bright top rim, bright inner bottom lip from refraction, darker inner depth), a thin rainbow dispersion rim
   strongest where the light hits, and a soft contact shadow. Text is white on sky, like the outro. */
:root {
  --ink-on: #FFFFFF;
  --ink-on-2: rgba(255, 255, 255, 0.86);
  --ink-on-3: rgba(255, 255, 255, 0.68);
  --water: #BFE6FF;
  --crystal-body: linear-gradient(165deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 42%, rgba(190, 215, 255, 0.14) 100%);
  --crystal-bevel:
    inset 0 2px 1px rgba(255, 255, 255, 0.95),
    inset 2px 0 1px rgba(255, 255, 255, 0.40),
    inset -1px 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -2px 1px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    inset 0 14px 22px -14px rgba(255, 255, 255, 0.60),
    inset 0 -18px 30px -16px rgba(12, 40, 110, 0.30);
  --crystal-shadow: 0 2px 6px rgba(8, 30, 80, 0.10), 0 34px 60px -26px rgba(8, 30, 80, 0.50);
  --crystal-blur: blur(12px) saturate(165%) brightness(1.06);
}
body { background: #3D68B5; color: var(--ink-on); }
.caustics { background: #3D68B5 url(media/sky-wide.jpg) center 30% / cover no-repeat; animation: skydrift 70s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.caustics::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 28, 80, 0.10) 0%, rgba(8, 28, 80, 0.06) 40%, rgba(8, 28, 80, 0.30) 100%); }
.caustics i { display: none; }
@media (max-aspect-ratio: 1/1) { .caustics { background-image: url(media/sky-tall.jpg); } }
@keyframes skydrift { from { transform: scale(1.06) translate3d(-1.2%, 0, 0); } to { transform: scale(1.06) translate3d(1.2%, -1%, 0); } }

/* type on sky */
h1, h2, h3, .wordmark, .price span { color: var(--ink-on); }
h1, h2 { text-shadow: 0 2px 34px rgba(5, 22, 70, 0.32); }
p, .lede, .plan ul, .ticks, .crosses, .fields label, .nav nav { color: var(--ink-on-2); }
.eyebrow, .fine, .truth, .plan .price, .foot { color: var(--ink-on-3); }
.nav nav a:hover { color: #FFF; }
.water, .plan .founding, .plan .tag, .card .n { color: var(--water); }
.ticks li::before { color: #FFF; }
.crosses li::before { color: var(--ink-on-3); }
.plan li::before { background: #FFF; box-shadow: 0 0 8px rgba(190, 230, 255, 0.9); }
.promise { background: none; }
.foot { border-top-color: rgba(255, 255, 255, 0.22); }
.foot-row .wordmark { color: #FFF; }
:focus-visible { outline-color: #FFF; }

/* every edge = crystal */
.glass, .btn-glass, .fields input, .clone.odd {
  position: relative;
  background: var(--crystal-body);
  -webkit-backdrop-filter: var(--crystal-blur);
  backdrop-filter: var(--crystal-blur);
  border: 0;
  box-shadow: var(--crystal-bevel), var(--crystal-shadow);
}
.nav { position: fixed; }
.stage-hint, .sound { position: absolute; }
/* the dispersion rim: a thin rainbow on the lit edges (top-left → top-right), like light splitting in thick glass */
.glass::before, .btn-glass::before, .clone.odd::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from 215deg at 50% 50%,
    rgba(255, 255, 255, 0) 0deg, rgba(255, 120, 150, 0.75) 22deg, rgba(255, 220, 120, 0.8) 40deg, rgba(140, 255, 200, 0.75) 58deg,
    rgba(120, 190, 255, 0.8) 76deg, rgba(200, 150, 255, 0.7) 94deg, rgba(255, 255, 255, 0) 120deg,
    rgba(255, 255, 255, 0) 200deg, rgba(150, 210, 255, 0.45) 235deg, rgba(255, 190, 220, 0.35) 255deg, rgba(255, 255, 255, 0) 280deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mix-blend-mode: screen; opacity: 0.85;
}
.btn-glass { color: #FFF; }
.btn-glass:hover, .glass.card:hover, .plan:hover { box-shadow: var(--crystal-bevel), 0 2px 6px rgba(8, 30, 80, 0.10), 0 44px 70px -26px rgba(8, 30, 80, 0.55); }
.card, .plan { transition: transform 0.6s var(--spring-bounce), box-shadow 0.5s var(--spring); }
.card:hover, .plan:hover { transform: translateY(-4px); }

/* the one solid thing: the primary button is milk crystal, so the action always reads */
.btn-ink { background: linear-gradient(180deg, #FFFFFF 0%, #EAF3FF 100%); color: #0E1621;
  box-shadow: inset 0 2px 1px #FFF, inset 0 -2px 2px rgba(120, 160, 220, 0.35), 0 2px 6px rgba(8, 30, 80, 0.12), 0 22px 44px -18px rgba(8, 30, 80, 0.55); }
.btn-ink:hover { box-shadow: inset 0 2px 1px #FFF, inset 0 -2px 2px rgba(120, 160, 220, 0.35), 0 2px 6px rgba(8, 30, 80, 0.12), 0 30px 54px -18px rgba(8, 30, 80, 0.6); }
.btn .ripple { background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(160, 225, 255, 0) 70%); }

/* form wells: crystal you type into */
.fields input { height: 54px; border-radius: 16px; color: #FFF; }
.fields input::placeholder { color: rgba(255, 255, 255, 0.55); }
.fields input:focus { box-shadow: var(--crystal-bevel), 0 0 0 3px rgba(255, 255, 255, 0.55), var(--crystal-shadow); }

/* plans: the featured one catches the sun */
.plan.feature { background: linear-gradient(165deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.14) 45%, rgba(190, 215, 255, 0.18) 100%);
  box-shadow: var(--crystal-bevel), 0 2px 6px rgba(8, 30, 80, 0.10), 0 44px 80px -28px rgba(8, 30, 80, 0.6); }
.glint { position: absolute; z-index: 3; width: 44px; height: 44px; pointer-events: none; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, #FFF 0 2.5px, rgba(255, 255, 255, 0.85) 3.5px, rgba(255, 255, 255, 0) 12px),
    linear-gradient(90deg, transparent 0 46%, rgba(255, 255, 255, 0.9) 50%, transparent 54%) center / 100% 2px no-repeat,
    linear-gradient(0deg, transparent 0 46%, rgba(255, 255, 255, 0.9) 50%, transparent 54%) center / 2px 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); animation: glint 3.2s ease-in-out infinite; }
@keyframes glint { 0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.85) rotate(0deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(12deg); } }
.plan.feature .glint, .sample-card .glint { top: 6px; right: -16px; }
.phone .glint { top: 14px; right: -10px; }

/* the clones stay flat and opaque (that's the point); the refreshing one is crystal */
.clone.odd { background: var(--crystal-body); transform: translateY(-10px) rotate(-1.5deg); }
.clone.odd span { color: #FFF; }
.clone.odd b { background: radial-gradient(circle at 35% 30%, #FFF 0%, #CFEAFF 45%, rgba(120, 180, 255, 0.6) 100%); }
.clone.odd u { background: #FFF; color: #0E1621; }

/* hero: the real rendered crystal (outro footage, cropped above the baked-in words) in a crystal frame */
.hero { display: grid; grid-template-columns: 1fr minmax(300px, 440px); gap: clamp(30px, 5vw, 80px); align-items: center; text-align: left; padding-top: 130px; }
.hero .lede { margin: 26px 0 0; }
.hero .ctas { justify-content: flex-start; }
.hero .truth { grid-column: 1 / -1; text-align: center; }
.stage { margin: 0; height: auto; aspect-ratio: 1080 / 1240; border-radius: 34px; background: #4D78C2; padding: 10px; overflow: visible;
  box-shadow: var(--crystal-bevel), var(--crystal-shadow); cursor: default; }

.stage video, .stage .stage-poster { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; border-radius: 26px; }
.stage .stage-poster { z-index: 0; }
.stage video { z-index: 1; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 110px; }
  .hero .lede { margin-inline: auto; }
  .hero .ctas { justify-content: center; }
  .stage { width: min(440px, 100%); justify-self: center; }
}

@media (prefers-reduced-motion: reduce) { .caustics, .glint { animation: none; } }
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn-glass, .fields input, .clone.odd, .stage { background: rgba(30, 60, 120, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) { .glass, .btn-glass, .fields input { background: rgba(10, 25, 60, 0.92); outline: 2px solid #FFF; } }
.hero h1 { font-size: clamp(44px, 6.2vw, 92px); }
.plan .price span { color: #FFF; }
.stage { background: var(--crystal-body); -webkit-backdrop-filter: var(--crystal-blur); backdrop-filter: var(--crystal-blur); }

/* CRYSTAL v3 pass 2: the THICK bevel band (pillowSlab). Every glass edge gets a band of --bev px: lit at the top-left
   (the sun), clear in the middle, a bright refracted lip at the bottom, with the rainbow riding the band, and a second
   bright rim where the band meets the face. --r must match the element's radius. */
.glass, .btn-glass, .clone.odd { --bev: 12px; --r: var(--radius); }
.nav, .btn-glass, .stage-hint, .sound { --r: 999px; }
.nav { --bev: 7px; }
.btn-glass, .stage-hint, .sound { --bev: 5px; }
.phone { --r: 48px; --bev: 10px; }
.stage { --r: 34px; --bev: 10px; }
.sample-card { --r: 36px; --bev: 14px; }
.clone.odd { --r: 22px; --bev: 8px; }
.glass::before, .btn-glass::before, .clone.odd::before {
  padding: var(--bev);
  background:
    conic-gradient(from 215deg at 50% 50%, rgba(255, 255, 255, 0) 0deg, rgba(255, 120, 150, 0.34) 22deg, rgba(255, 220, 120, 0.36) 40deg,
      rgba(140, 255, 200, 0.32) 58deg, rgba(120, 190, 255, 0.36) 76deg, rgba(200, 150, 255, 0.30) 94deg, rgba(255, 255, 255, 0) 120deg,
      rgba(255, 255, 255, 0) 200deg, rgba(150, 210, 255, 0.35) 235deg, rgba(255, 190, 220, 0.3) 255deg, rgba(255, 255, 255, 0) 280deg),
    linear-gradient(162deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.20) 22%, rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.10) 80%, rgba(255, 255, 255, 0.42) 100%);
  opacity: 1; mix-blend-mode: normal;
}
.glass::after, .btn-glass::after, .clone.odd::after {
  content: ''; position: absolute; inset: var(--bev); border-radius: max(0px, calc(var(--r) - var(--bev))); pointer-events: none; z-index: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 1.5px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.35),
    0 1px 3px rgba(10, 35, 100, 0.22), inset 0 -10px 20px -14px rgba(10, 35, 100, 0.25);
}
.stage::after { display: block; }
.fields input { box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.10), inset 0 0 0 6px rgba(255, 255, 255, 0.32), var(--crystal-bevel), var(--crystal-shadow); }
.work-grid > * { min-width: 0; }
@media (max-width: 860px) { .work-grid { grid-template-columns: minmax(0, 1fr); } }
.plan .founding { color: #FFF; font-weight: 700; text-shadow: 0 0 14px rgba(190, 230, 255, 0.8); }

/* ---------------------------------------------------------------- 2026-10-15: teardowns, founder, FAQ */
.teardowns h2 + p { max-width: 640px; }
.slides { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 300px); gap: 16px; margin-top: 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.5) transparent; }
.slides li { scroll-snap-align: start; }
.slides img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 24px 50px -24px rgba(8, 30, 80, 0.6); }
.teardowns .fine { margin-top: 12px; }

.founder-card { --r: 36px; --bev: 14px; border-radius: 36px; padding: clamp(28px, 5vw, 52px); display: grid; grid-template-columns: 180px 1fr; gap: clamp(24px, 4vw, 44px); align-items: center; }
.founder-card > * { position: relative; z-index: 2; }
.founder-photo { position: relative; width: 180px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFF 0%, #CFEAFF 45%, rgba(120, 180, 255, 0.6) 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55), 0 24px 50px -24px rgba(8, 30, 80, 0.6); }
.founder-photo span { font-weight: 700; font-size: 72px; color: #2A5BA8; }
.founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 12px; }
.founder p:not(.eyebrow) { margin-top: 14px; }
.founder .btn { margin-top: 26px; }
@media (max-width: 640px) { .founder-card { grid-template-columns: 1fr; text-align: center; } .founder-photo { width: 140px; margin-inline: auto; } }

.qa { display: grid; gap: 12px; margin-top: 36px; }
.qa details { --r: 22px; --bev: 6px; border-radius: 22px; padding: 0; }
.qa summary { position: relative; z-index: 2; list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 600; font-size: 18px; color: #FFF; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; transition: transform 0.4s var(--spring); }
.qa details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa details p { position: relative; z-index: 2; padding: 0 24px 22px; font-size: 16px; }

/* 2026-10-15: clones loop seamlessly (two identical sets, the track slides exactly one set; margin not gap so the
   period is exact), and each clone reads as a whole landing page: nav row, hero image, headline, copy, button. */
.clone-track { gap: 0; }
.clone { margin-right: 20px; }
.clone i { display: block; height: 8px; border-radius: 4px; width: 100%;
  background: linear-gradient(90deg, #C9CDD3 0 18px, transparent 18px 46px, #DADDE2 46px 70px, transparent 70px 80px, #DADDE2 80px 104px, transparent 104px 114px, #DADDE2 114px 138px, transparent 138px); }
.clone.odd i { background: linear-gradient(90deg, #FFF 0 18px, transparent 18px 46px, rgba(255, 255, 255, 0.6) 46px 70px, transparent 70px 80px, rgba(255, 255, 255, 0.6) 80px 104px, transparent 104px); }
.clone b { height: 88px; }

/* 2026-10-15: the brief box is crystal like every other field (it was an unstyled white box), and autofill keeps
   white text on glass instead of Chrome's pale fill */
.fields textarea { width: 100%; min-height: 112px; padding: 14px 16px; border: 0; border-radius: 16px; resize: vertical; font: 400 16px/1.45 var(--sans); color: #FFF;
  background: var(--crystal-body); -webkit-backdrop-filter: var(--crystal-blur); backdrop-filter: var(--crystal-blur);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.10), inset 0 0 0 6px rgba(255, 255, 255, 0.32), var(--crystal-bevel), var(--crystal-shadow); }
.fields textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.fields textarea:focus { outline: none; box-shadow: var(--crystal-bevel), 0 0 0 3px rgba(255, 255, 255, 0.55), var(--crystal-shadow); }
.fields input, .fields textarea { color-scheme: dark; caret-color: #FFF; }
.fields input:-webkit-autofill, .fields input:-webkit-autofill:hover, .fields input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFF; -webkit-box-shadow: inset 0 0 0 1000px rgba(52, 92, 170, 0.92); transition: background-color 9999s ease-out; }

/* TRUSTED BY — client wordmarks set as monochrome type on the sky; real clients only */
.trusted { width: min(1180px, 100% - 32px); margin: 10px auto 0; padding: 26px 0 10px; text-align: center; }
.trusted .eyebrow { margin-bottom: 18px; }
.trusted-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 56px; }
.trusted-logo { display: inline-flex; align-items: flex-end; gap: 1px; color: #fff; opacity: 0.86; text-decoration: none;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.01em; white-space: nowrap;
  transition: opacity 0.4s var(--spring), transform 0.6s var(--spring); }
.trusted-logo svg { width: 0.72em; height: 0.9em; margin: 0 0.04em 0.06em; }
.trusted-logo:hover, .trusted-logo:focus-visible { opacity: 1; transform: translateY(-2px); }

/* INTAKE FORM legibility (owner 2026-10-15): a very soft black outline on every word in the sample card (heading, copy,
   labels, typed text, placeholders) so the white type stands off the bright glass/sky. Four tight 1px offsets make the
   outline, and one wide blur makes the soft halo. The button keeps its own styling. */
/* v2 (owner: "push the outline … easier to read for an older crowd"): darker 1px edge + a 2px soft ring + a wider halo,
   and the small type is a little bigger and heavier. */
.sample-card { --soft-outline: -1px -1px 0 rgba(0, 0, 0, 0.62), 1px -1px 0 rgba(0, 0, 0, 0.62), -1px 1px 0 rgba(0, 0, 0, 0.62), 1px 1px 0 rgba(0, 0, 0, 0.62),
  0 -2px 1px rgba(0, 0, 0, 0.30), 0 2px 1px rgba(0, 0, 0, 0.30), -2px 0 1px rgba(0, 0, 0, 0.30), 2px 0 1px rgba(0, 0, 0, 0.30), 0 0 10px rgba(0, 0, 0, 0.45); }
.sample-card .fields label { font-size: 16px; font-weight: 700; }
.sample-card .fields input, .sample-card .fields textarea { font-size: 17px; font-weight: 500; }
.sample-card .fields input::placeholder, .sample-card .fields textarea::placeholder { color: rgba(255, 255, 255, 0.75); }
.sample-card > p:not(.eyebrow) { font-size: 17px; }
.sample-card .eyebrow, .sample-card h2, .sample-card p, .sample-card .fields label,
.sample-card .fields input, .sample-card .fields textarea { text-shadow: var(--soft-outline); }
.sample-card .fields input::placeholder, .sample-card .fields textarea::placeholder { text-shadow: var(--soft-outline); }
.sample-card .btn { text-shadow: none; }