/* FRISTNOR shared styles: moved out of index.html so every page loads one
   cached file. Two mechanical passes on top of the original: every :hover
   rule sits inside @media (hover: hover), so taps on touch screens never
   leave a hover state stuck on; and text at 18px or under uses Inter's
   recommended tracking for its size. See css_polish.py in the build. */

/* A small inline SVG paints immediately, without waiting for a font or video. */
.site-loader{ display:none; }
html.is-loading, html.is-loading body{ overflow:hidden !important; }
html.is-loading .header, html.is-loading #smooth-wrapper{ visibility:hidden; }
html.is-loading .appear{ animation-play-state:paused !important; }
html.is-loading .site-loader, html.loader-exiting .site-loader{
  display:flex; position:fixed; inset:0; z-index:10000;
  align-items:center; justify-content:center; flex-direction:column;
  background:#080c10; color:#e8edf4;
  padding:32px; opacity:1;
  transition:opacity .25s ease, visibility .25s;
}
.loader-mark{ position:relative; width:clamp(120px, 22vw, 176px); }
.loader-mark::before{
  content:''; position:absolute; inset:-60%; border-radius:50%;
  background:radial-gradient(ellipse, rgba(186,208,255,.09), transparent 65%);
  animation:loader-glow 2.4s ease-in-out infinite;
}
.loader-eye{ position:relative; width:100%; overflow:visible; }
.loader-outline, .loader-iris{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:loader-draw .55s cubic-bezier(.22,1,.36,1) forwards;
}
.loader-iris{ animation-delay:.12s; }
.loader-pupil{
  transform-origin:22px 12px;
  animation:loader-pupil 2.4s ease-in-out infinite;
}
.loader-brand{
  margin-top:32px; padding-left:.38em; font:500 13px/1.4 system-ui,sans-serif;
  letter-spacing:.38em;
}
.loader-status{
  margin-top:14px; color:#929caa; font:400 11px/1.5 system-ui,sans-serif;
  letter-spacing:.06em;
}
.loader-line{ width:112px; height:1px; margin-top:25px; overflow:hidden; background:#242c37; }
.loader-line::after{
  content:''; display:block; width:45%; height:100%; background:#bad0ff;
  animation:loader-scan 1.45s ease-in-out infinite;
}
html.loader-exiting .site-loader{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes loader-draw{ to{ stroke-dashoffset:0; } }
@keyframes loader-pupil{ 0%,100%{ opacity:.55; transform:scale(.88); } 50%{ opacity:1; transform:scale(1); } }
@keyframes loader-glow{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@keyframes loader-scan{ from{ transform:translateX(-110%); } to{ transform:translateX(330%); } }
@media(prefers-reduced-motion:reduce){
  .site-loader *, .loader-mark::before, .loader-line::after{ animation:none !important; }
  .loader-outline, .loader-iris{ stroke-dashoffset:0; }
  html.is-loading .site-loader, html.loader-exiting .site-loader{ transition:none; }
}

/* self-hosted: no request leaves this origin for type */
/* Instrument Serif — latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif — latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- force dark immediately: never flash white ---- */
html, body { background: #080C10 !important; color: #ffffff; }

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

:root{
  --bg: #080C10;
  /* Text scale. The ground is blue-black, so the greys carry a little of the
     same temperature -- neutral grey on this ground is what reads as flat.
     Five steps, replacing 28 ad-hoc alpha values that had drifted apart. */
  --t1: #ffffff;   /* headings */
  --t2: #ccd2d9;   /* lifted body -- the copy that should feel present */
  --t3: #a2a8b2;   /* standard body */
  --t4: #8b929d;   /* secondary, labels, the dimmed side of a comparison */
  --t5: #6a717c;   /* faint -- eyebrows, fine print */
  /* the chat component's spring (450 stiffness / 28 damping) sampled as
     linear(). It overshoots to 1.0625, which is what makes an entrance read
     as a pop instead of a decelerating slide. */
  /* declared twice on purpose, the way --chat-spring is: a browser without
     linear() easing keeps the cubic-bezier and still animates. Without a
     fallback the whole custom property is invalid at computed-value time and
     every transition using it -- 28 cards, the stage, the toasts -- is
     dropped, so the cards snap instead of springing. */
  --pop: cubic-bezier(0.34, 1.32, 0.52, 1);
  --pop: linear(0, 0.0675, 0.2229, 0.4106, 0.594, 0.7522, 0.8759, 0.964, 1.0203, 1.0508, 1.0625, 1.0616, 1.0534, 1.042, 1.0301, 1.0193, 1.0106, 1.0042, 0.9999, 0.9974, 0.9962, 0.996, 0.9964, 0.997, 0.9978, 0.9985, 1);
  --text: #ffffff;
  --muted: var(--t3);   /* alias: pre-existing rules still resolve */
  --stat: #d8d8d8;
  --border: rgba(255,255,255,0.16);
  --border-soft: rgba(255,255,255,0.12);
  --accent: #bad0ff;   /* the page's working accent — matches the button-hover glow */

  --logo: 15.5px;
  --logo-mark: 22px;
  --nav: 14px;
  --nav-h: 40px;
  --btn: 13.5px;
  --btn-h: 40px;
  --hero-btn-h: 42px;
  --h1: 48px;
  --lede: 15.5px;
  --badge: 12.5px;
  --stat-size: 13.5px;
  --header-y: 22px;
  --header-x: 40px;
  --stats-x: 72px;
  --stats-y: 36px;
  --hero-gap: 85px;
  --copy-max: 860px;
  --lede-max: 470px;

  /* card headings, two tiers only. Was four ad-hoc values (16.5/18/18.5/21)
     where 18 vs 18.5 was drift rather than hierarchy. --h3 heads a card that
     owns a whole idea; --h3-dense heads a cell in a six-up grid. */
  --h3: 19px;
  --h3-dense: 16.5px;

  --section-y: 116px;
  --section-x: 40px;
  --h2: 50px;
}

html { scroll-behavior: smooth; }

html, body {
  background: #080C10;
  background: var(--bg, #080C10);
  color: #ffffff;
  color: var(--text, #ffffff);
}

body{
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

:focus-visible{
  outline: 2px solid rgba(210,226,255,0.85);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .nav a:focus-visible{ outline-offset: 4px; }
.faq summary:focus-visible{ outline-offset: 6px; }
img, svg, video { display: block; }

/* ---------- grain ---------- */
.grain{
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-drift 0.9s steps(5) infinite;
}
@keyframes grain-drift{
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-1.4%, 1%, 0); }
  40%  { transform: translate3d(1%, -1.4%, 0); }
  60%  { transform: translate3d(-1%, -0.9%, 0); }
  80%  { transform: translate3d(1.4%, 1.3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- background video ---------- */
.hero-photo{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* the first frame as a 30 KB webp, over a 64x36 inline thumbnail that paints
     before it arrives; under reduced motion this still is the whole hero */
  background-image: url("/hero-poster.webp"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAkAEADASIAAhEBAxEB/8QAGwAAAQUBAQAAAAAAAAAAAAAAAAEDBAUGAgf/xAAqEAACAgECBAUEAwAAAAAAAAABAgADEQQhBRIxQRNRYXGBBiKRoRSx0f/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDAR2mtrGCopZj0AjYUscAZMveCaNjcSMEkbekBmvgWvdAyUFxjcKwz+OpjlPAOJ2tyrorlZd/vUr/c0FzDQBTqdTXRnGAxy2N9+UZONjvJFX1CpQVLYbdN0zn7h/ntAx2p0N+jt8O+p636jII2kfkwWB8vmeh/y+D30eHrLEeo9rGwQfQ9pXXVfTtQUaWtNRau+WsLZ9wDj9QMO4G56eUalzximkubKq1rJOeVRgfAlMYHSNysDLLT8YfTqfDQCzGzZzj4lX6wgSrbnsfxLLGdm3LMck+/4ipa6Z5Wwc9jIoM65jiBJe1nOWcnyzOTYQeYNvnOfWMc8QsT1gS7dc1tYWwbjuO8hZzt2hCAdId4QgEUjAX1Gf3CEBIQhAIQhA//2Q==");
  background-size: cover, cover;
  background-position: center, center;
}
.hero-photo video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .5s ease;
  /* No filter here on purpose. This element is position:fixed and its video
     loops for the life of the page, so any filter is a full-viewport pass on
     every frame for all ~25,000px of scroll -- and an SVG convolution over a
     video source is not GPU-accelerated. The grade is baked into the encodes
     instead: sharpen 0.8 + contrast 1.06 on the desktop tiers, contrast 1.10
     on the phone tiers, which is what the two filter chains did at runtime.
     Re-encode rather than adding one back. */
}
.hero-photo video.ready{ opacity: 1; }
.video-control{position:relative;margin-top:18px;padding:10px 14px;border:1px solid #ffffff55;border-radius:999px;background:#10151dcc;color:#fff;font:inherit;font-size:12px;cursor:pointer;min-height:44px;}
.video-control[hidden]{display:none;}
.video-control:focus-visible{outline:2px solid white;outline-offset:4px;}
@media(prefers-reduced-motion:reduce){.hero-photo video{transition:none;}}
.hero-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Scene grading. Sits above the film and below the page, starts fully
   transparent and is only ever touched by the scroll timeline, so with no
   JS -- or under reduced motion -- it is invisible and costs nothing. */
.tint{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: transparent;
}


/* ---------- page shell ---------- */
.page{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- header ---------- */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--header-y) var(--header-x) 10px;
  transition: padding .4s ease;
}
/* the blur lives on a pseudo-element: a backdrop-filter on .header itself would
   make it the containing block for the fixed full-screen .nav on phones */
.header::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8,12,16,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.header.is-stuck::before{ opacity: 1; }
@media (min-width: 901px){
  .header.is-stuck{ padding-top: 12px; padding-bottom: 12px; }
}

.logo{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  font-size: var(--logo);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.logo svg{ width: auto; height: var(--logo-mark); flex: none; }

/* ---------- nav ---------- */
.nav{
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
}
.nav a{
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  padding: 0 18px;
  border-radius: 7px;
  border: 1px solid rgba(198,198,198,0.55);
  background: linear-gradient(105deg, #050505 0%, #2a2a2a 48%, #4a4a4a 100%);
  color: #f3f3f3;
  font-size: var(--nav);
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav a::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
@media (hover: hover){ .nav a:hover::before{ transform: translateX(120%); } }
@media (hover: hover){ .nav a:hover{
  border-color: rgba(235,235,235,0.9);
  background: linear-gradient(105deg, #111 0%, #3a3a3a 45%, #6a6a6a 100%);
  box-shadow: 0 0 18px rgba(200,210,230,0.18);
} }
.nav a.is-active{
  color: #fff;
  border-color: rgba(235,240,255,0.85);
  background: linear-gradient(105deg, #0e0e0e 0%, #343434 45%, #5c5c5c 100%);
  box-shadow: 0 0 16px rgba(186,208,255,0.16), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ---------- buttons ---------- */
.btn{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 16px;
  border-radius: 6px;
  font-size: var(--btn);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.45) 48%, transparent 76%);
  transform: translateX(-130%);
  transition: transform .65s ease;
  pointer-events: none;
}
@media (hover: hover){ .btn:hover::after{ transform: translateX(130%); } }

.btn-solid{
  background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 48%, #cfcfcf 100%);
  color: #111;
  border: 1px solid #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
@media (hover: hover){ .btn-solid:hover{
  background: linear-gradient(180deg, #fff 0%, #f3f6ff 42%, #d5def2 100%);
  border-color: #f2f6ff;
  box-shadow: inset 0 1px 0 #fff, 0 0 22px rgba(186,208,255,0.35), 0 8px 18px rgba(255,255,255,0.12);
} }

.btn-ghost{
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.45) 50%, rgba(160,175,200,0.08));
  color: #fff;
  border: 1px solid rgba(198,198,198,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
@media (hover: hover){ .btn-ghost:hover{
  background: linear-gradient(135deg, rgba(210,225,255,0.18), rgba(0,0,0,0.35) 48%, rgba(180,195,220,0.16));
  border-color: rgba(220,230,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px rgba(170,200,255,0.22);
} }

.header-cta{ justify-self: end; }

.hero-actions .btn{ height: var(--hero-btn-h); padding: 0 18px; }
@media (hover: hover){ .hero-actions .btn-solid:hover{
  box-shadow: inset 0 1px 0 #fff, 0 0 26px rgba(186,208,255,0.4), 0 8px 18px rgba(255,255,255,0.14);
} }
.hero-actions .btn-ghost{
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.5) 46%, rgba(150,170,200,0.1));
  border: 1px solid rgba(198,198,198,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@media (hover: hover){ .hero-actions .btn-ghost:hover{
  border-color: rgba(220,230,255,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 24px rgba(170,200,255,0.28);
} }

/* ---------- burger ---------- */
.burger{
  display: none;
  place-items: center;
  /* pack the three rows to their own height: a grid row stretches to fill a
     fixed-height box by default, which spread the lines ~16px apart and left
     the 6.5px close transform drawing a chevron instead of an X */
  place-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(8,12,16,0.55);
  cursor: pointer;
  z-index: 60;
  transition: border-color .25s ease, background .25s ease;
}
@media (hover: hover){ .burger:hover{ border-color: var(--t5); background: rgba(255,255,255,0.05); } }
.burger span{
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease;
}
body.menu-open .burger span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity: 0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- menu backdrop ---------- */
.menu-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8,12,16,0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease, backdrop-filter .28s ease;
}

/* ---------- hero ---------- */
.hero{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 24px var(--hero-gap);
  min-height: 0;
}
/* the vignette below is 165% of an 860px block: 1419px, which widens the page
   by ~100px at 1280 and puts a horizontal scrollbar on every desktop. clip
   (not hidden) makes no scroll container and leaves the vertical axis alone,
   so the entrance animations are untouched. */
@supports (overflow: clip){ .hero{ overflow-x: clip; } }
.hero-copy::before{
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 165%; height: 185%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
              rgba(8,12,16,0.74), rgba(8,12,16,0.44) 52%, transparent 78%);
}
.hero-copy{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: var(--copy-max);
  width: 100%;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 9px 15px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #7d7d7d 0%, #2a2a2a 52%, #0a0a0a 100%);
  color: #f2f2f2;
  font-size: var(--badge);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.badge-star{
  width: 18px;
  height: 20px;
  flex: none;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.45));
}

.hero h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--h1);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.12;
  color: #fff;
}
.headline-line{
  display: block;
  overflow: hidden;
  padding: 0.06em 0.15em 0.14em;
}
.hero h1 em{
  font-family: "Instrument Serif", "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: -0.03em;
  color: #f4f7ff;
  text-shadow: 0 0 32px rgba(186,208,255,0.38), 0 0 78px rgba(186,208,255,0.18);
}
/* liquid-metal fill with a sheen that sweeps across on a long loop */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .hero h1 em{
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 33%, #c6d8ff 45%, #ffffff 57%, #ffffff 100%);
    background-size: 260% 100%;
    background-position: -30% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
/* the glow needs to escape the mask box once the line has finished rising */
.headline-line.is-in{ overflow: visible; }

.lede{
  max-width: var(--lede-max);
  margin-top: 18px;
  color: #b4b4b4;
  font-size: var(--lede);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.015em;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

/* ---------- stats ---------- */
.stats{
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* the three stats are nowrap and need ~1026px side by side, which is wider
     than a 1024px laptop once the scrollbar is taken out. Allowed to wrap so
     the hero never widens the page; above ~1120px nothing wraps and this
     changes nothing. */
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 0 var(--stats-x) var(--stats-y);
  padding-bottom: max(var(--stats-y), env(safe-area-inset-bottom));
  color: #d8d8d8;
}
.stat{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--stat-size);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.stat-icon{ width: 20px; height: 20px; flex: none; }

/* ---------- entrance motion ---------- */
.appear{
  opacity: 1;
  animation-duration: 1.05s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-delay: var(--d, 0.08s);
}
.appear--scale{ animation-name: in-scale; }
.appear--soft{ animation-name: in-soft; }
.appear--mask{ animation-name: in-mask; }
.appear--pop{ animation-name: in-pop; }
.appear--btn{ animation-name: in-btn; }
.appear--side{ animation-name: in-side; }
.appear--stat{ animation-name: in-stat; }

.appear.is-in, .hero-photo.is-in{
  animation: none;
  opacity: 1;
  transform: none;
  clip-path: none;
  filter: none;
}

@keyframes in-scale{
  from { opacity: 0; transform: scale(0.84); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes in-soft{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes in-mask{
  from { opacity: 0; transform: translateY(40%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes in-pop{
  0%   { opacity: 0; transform: scale(0.9); }
  70%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes in-btn{
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes in-side{
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes in-stat{
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes in-star{
  0%   { opacity: 0; transform: scale(0.2) rotate(-50deg); }
  65%  { opacity: 1; transform: scale(1.2) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes in-em{
  from { opacity: 0.35; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}

.badge-star{
  animation: in-star 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}
.hero h1 em{
  animation: in-em 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both,
             em-sheen 7.5s ease-in-out 2.6s infinite;
}
@keyframes em-sheen{
  0%, 6%    { background-position: 130% 0; }
  40%, 100% { background-position: -30% 0; }
}
.lede.appear{ animation-duration: 1.25s; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition: none !important;
    animation: none !important;
  }
  .appear, .hero-photo, .hero h1 em, .badge-star, .reveal,
  .panel li, .feature .feature-icon, .calc-row, .eyebrow::before, .w-i{
    opacity: 1 !important;
    transform: none !important;
    scale: none !important;
    clip-path: none;
    filter: none;
  }
  .scroll-cue{ display: none; }
  /* the film is pinned at full opacity here, so the sheet must carry more weight */
  .content{ background: rgba(8,12,16,0.92); }
}


/* ================= scroll reveal ================= */
.reveal{
  opacity: 1;
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--rd, 0s);
}
.reveal--rise{ transition-duration: 1.15s; }
/* only hidden once JS is confirmed present, so a script failure never blanks the page */
.js .reveal{ opacity: 0; transform: translateY(38px); scale: 0.9; }
.js .reveal--scale{ transform: translateY(24px) scale(0.965); }
.js .reveal--left{ transform: translateX(-28px); }
.js .reveal--right{ transform: translateX(28px); }
.js .reveal--rise{ transform: translateY(38px); }
.reveal.in{ opacity: 1; transform: none; filter: blur(0); scale: 1; }

/* ---- secondary motion, driven by the parent's .in state (no extra JS) ---- */

/* eyebrow rule draws itself in */
.js .eyebrow::before{
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.16,1,0.3,1) .12s;
}
.eyebrow.in::before{ transform: scaleX(1); }

/* feature icons pop after their cell lands */
.js .feature .feature-icon{
  opacity: 0;
  transform: scale(0.78);
  transition: opacity .8s cubic-bezier(0.16,1,0.3,1) .18s,
              transform .8s cubic-bezier(0.16,1,0.3,1) .18s,
              border-color .4s ease, box-shadow .4s ease;
}
.feature.in .feature-icon{ opacity: 1; transform: none; }

/* --- inner stagger: heading, copy and the live strip arrive after the card,
       relative to the card's own --rd so nothing can beat its parent in. --- */
.js .feature h3, .js .feature > p, .js .feature .feature-live{
  opacity: 0; translate: 0 10px;
  transition: opacity .7s cubic-bezier(0.16,1,0.3,1), translate .7s cubic-bezier(0.16,1,0.3,1);
}
.js .feature h3{ transition-delay: calc(var(--rd, 0s) + .22s); }
.js .feature > p{ transition-delay: calc(var(--rd, 0s) + .30s); }
.js .feature .feature-live{ transition-delay: calc(var(--rd, 0s) + .40s); }
.feature.in h3, .feature.in > p, .feature.in .feature-live{ opacity: 1; translate: 0 0; }

/* --- the icon redraws itself on hover: every glyph is a stroke --- */
@media (hover: hover){ .feature:hover .feature-icon{ border-color: rgba(186,208,255,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 0 26px rgba(186,208,255,0.32); } }
.feature-icon svg *{ stroke-dasharray: 90; }
@media (hover: hover){ .feature:hover .feature-icon svg *{ animation: drawon 1s cubic-bezier(.4,0,.2,1) both; } }
@keyframes drawon{ from{ stroke-dashoffset: 90; } to{ stroke-dashoffset: 0; } }

/* --- a living detail in every box, each one the thing the card describes.
       Paused by default; JS runs them only while the card is on screen. --- */
.feature-live{ position: relative; margin-top: 16px; height: 22px; display: flex; align-items: flex-end; gap: 4px; }
.feature-live--bars i{ flex: 1; height: 100%; border-radius: 2px 2px 0 0; transform-origin: bottom;
  background: linear-gradient(180deg, rgba(186,208,255,0.85), rgba(186,208,255,0.22));
  animation: barwave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .17s); }
@keyframes barwave{ 0%,100%{ transform: scaleY(.3); } 50%{ transform: scaleY(1); } }
.feature-live--fill{ align-items: center; gap: 3px; }
.feature-live--fill span{ display: block; height: 6px; width: var(--w); border-radius: 3px; transform-origin: left;
  background: rgba(186,208,255,0.3); animation: rebalance 4.5s ease-in-out infinite alternate; }
.feature-live--fill span:first-child{ background: rgba(186,208,255,0.88); }
@keyframes rebalance{ to{ transform: scaleX(.72); } }
.feature-live--dots{ align-items: center; gap: 5px; }
.feature-live--dots i{ width: 7px; height: 7px; border-radius: 50%; background: rgba(186,208,255,0.9);
  animation: typing 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .16s); }
@keyframes typing{ 0%,60%,100%{ transform: translateY(0); opacity: .4; } 30%{ transform: translateY(-5px); opacity: 1; } }
.feature-live--line svg{ width: 100%; height: 100%; overflow: visible; }
.feature-live--line polyline{ fill: none; stroke: rgba(186,208,255,0.9); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 260; stroke-dashoffset: 260; animation: drawline 3.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes drawline{ 0%{ stroke-dashoffset: 260; opacity: 0; } 8%{ opacity: 1; } 62%{ stroke-dashoffset: 0; opacity: 1; } 86%{ opacity: 1; } 100%{ stroke-dashoffset: 0; opacity: 0; } }
.feature-live--pulse{ align-items: center; }
.feature-live--pulse i{ width: 10px; height: 10px; border-radius: 50%; background: rgba(186,208,255,0.9);
  animation: ringpulse 2.2s ease-out infinite; }
@keyframes ringpulse{ from{ box-shadow: 0 0 0 0 rgba(186,208,255,0.55); } to{ box-shadow: 0 0 0 16px rgba(186,208,255,0); } }
/* gating goes LAST and outranks every strip's `animation` shorthand, which
   would otherwise reset play-state to running: (0,3,0) beats (0,1,1). */
.feature:not(.is-live) .feature-live *{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .js .feature h3, .js .feature > p, .js .feature .feature-live{ opacity: 1; translate: none; transition: none; }
  .feature-live *{ animation: none !important; }
@media (hover: hover){ .feature:hover .feature-icon svg *{ animation: none !important; } }
  .feature-live--line polyline{ stroke-dashoffset: 0; }
}

/* comparison bullets cascade */
.js .panel li{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .75s cubic-bezier(0.16,1,0.3,1),
              transform .75s cubic-bezier(0.16,1,0.3,1);
}
.panel.in li{ opacity: 1; transform: none; }
.panel.in li:nth-child(1){ transition-delay: .16s; }
.panel.in li:nth-child(2){ transition-delay: .26s; }
.panel.in li:nth-child(3){ transition-delay: .36s; }
.panel.in li:nth-child(4){ transition-delay: .46s; }
.panel.in li:nth-child(5){ transition-delay: .56s; }
.panel.in li:nth-child(6){ transition-delay: .66s; }

/* calculator rows cascade in behind the headline figure */
.js .calc-out.in .calc-row{ animation: row-in .8s cubic-bezier(0.16,1,0.3,1) both; }
.js .calc-out.in .calc-row:nth-child(1){ animation-delay: .30s; }
.js .calc-out.in .calc-row:nth-child(2){ animation-delay: .40s; }
.js .calc-out.in .calc-row:nth-child(3){ animation-delay: .50s; }
.js .calc-out.in .calc-row:nth-child(4){ animation-delay: .60s; }
@keyframes row-in{
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ================= scroll progress ================= */
.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  z-index: 90;
  pointer-events: none;
}
.scroll-progress i{
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(186,208,255,0.55) 60%, #ffffff 100%);
  box-shadow: 0 0 10px rgba(186,208,255,0.35);
}

/* ================= scroll cue ================= */
.scroll-cue{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--t5);
}
.scroll-cue-rail{
  position: relative;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: rgba(255,255,255,0.13);
}
.scroll-cue-rail::after{
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #ffffff);
  animation: cue-fall 2.1s cubic-bezier(0.55,0,0.45,1) infinite;
}
@keyframes cue-fall{
  0%   { transform: translateY(-14px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* ================= content shell ================= */
/* ---- ambient light: its own fixed plane, behind the glass ---- */
.ambient{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;               /* stays out of the hero; JS raises it on scroll */
}
.ambient::before{
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(46% 42% at 18% 22%, rgba(186,208,255,0.30), transparent 64%),
    radial-gradient(42% 38% at 84% 62%, rgba(255,255,255,0.22), transparent 64%),
    radial-gradient(34% 34% at 55% 88%, rgba(150,180,255,0.20), transparent 66%);
  animation: aurora 48s ease-in-out infinite alternate;
}
.ambient::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 36% at 50% 104%, rgba(186,208,255,0.26), transparent 66%);
  transform: translate3d(0, calc(var(--sp, 0) * -46px), 0);
}

/* Opaque tonal ground: avoids a full-page blur pass during every scroll. */
.shell{ display: contents; }
.content{
  position: relative;
  z-index: 1;
  /* the neon border's glow reaches 160px past its host; clip (not hidden,
     which would kill the sticky section head) keeps it off the x-axis */
  overflow-x: clip;
  overflow-y: visible;
  background: linear-gradient(180deg, rgba(12,18,26,.96), #080c10 850px);
  /* the leading edge of the pane, catching light from the film behind it */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11);
}
/* without backdrop-filter there is no frost to carry the tint, so go opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .content{ background: var(--bg); }
}
@keyframes aurora{
  0%   { transform: translate3d(-6%, -4%, 0) scale(1); }
  50%  { transform: translate3d(6%, 4%, 0) scale(1.18); }
  100% { transform: translate3d(-4%, 6%, 0) scale(1.06); }
}
.section{
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--section-y) var(--section-x);
  scroll-margin-top: 86px;
}

/* ================= section rhythm =================
   Every section used to be padded 140/140 — perfectly consistent, and so
   perfectly flat: nothing on the page signalled which part mattered most.
   Three tiers now. #calculator is the peak (it is where the argument turns
   into a number), so it gets the most air and a ground of its own; the
   supporting sections breathe a little less. */
#calculator{ padding-top: calc(var(--section-y) * 1.34); padding-bottom: calc(var(--section-y) * 1.34); }
#product,
#zero-risk{ padding-top: calc(var(--section-y) * 1.08); padding-bottom: calc(var(--section-y) * 1.08); }
#how-it-works,
#faq{ padding-top: calc(var(--section-y) * 0.86); padding-bottom: calc(var(--section-y) * 0.86); }

/* the peak gets its own light. A wide, very soft pool behind the panels lifts
   this one section off the flat plateau without adding another border or box. */
#calculator::before{
  content: "";
  position: absolute;
  inset: 0 -18vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(186,208,255,0.085), transparent 68%),
    radial-gradient(90% 62% at 50% 50%, rgba(255,255,255,0.045), transparent 72%);
}
/* hairlines mark where the peak starts and ends, fading out at the edges */
#calculator::after{
  content: "";
  position: absolute;
  left: var(--section-x);
  right: var(--section-x);
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 22%, rgba(255,255,255,0.14) 78%, transparent);
}
#calculator > *{ position: relative; z-index: 1; }
/* hairline that fades at both ends — reads finer than a full-bleed border */
.section + .section::before,
.cta::before,
.site-foot::before{
  content: "";
  position: absolute;
  top: 0;
  left: var(--section-x);
  right: var(--section-x);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 20%, rgba(255,255,255,0.14) 80%, transparent);
}

.section-head--center{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
.section-head--center .eyebrow{ justify-content: center; }
.section-head--center .section-sub{ max-width: 560px; }
.section-head--stack{ grid-template-columns: 1fr; }
.section-head--stack .section-sub{ max-width: 600px; }
.section-head{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px 64px;
  align-items: end;
  margin-bottom: 58px;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--t4);
}
.eyebrow::before{
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.5));
}
.section h2{
  font-size: var(--h2);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: #fff;
}
.section h2 em{
  font-family: "Instrument Serif", "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.section-sub{
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.62;
  letter-spacing: -0.01em;
  padding-bottom: 6px;
}

/* ================= two-column split (how it works) ================= */
.split{
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 90px;
  align-items: start;
}
.split-head{
  position: sticky;
  top: 132px;
  align-self: start;
}
.split-head h2{
  font-size: var(--h2);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: #fff;
}
.split-head h2 em{
  font-family: "Instrument Serif", "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.split-head .section-sub{ margin-top: 20px; max-width: 400px; }

/* ================= steps ================= */
.steps{ position: relative; padding-left: 62px; }
.steps::before{
  content: "";
  position: absolute;
  left: 20px; top: 12px; bottom: 12px;
  width: 1px;
  background: rgba(255,255,255,0.11);
}
.steps-fill{
  position: absolute;
  left: 20px; top: 12px;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.12));
  box-shadow: 0 0 10px rgba(186,208,255,0.3);
}
.step{ position: relative; padding-bottom: 52px; }
.step:last-child{ padding-bottom: 0; }
.step-dot{
  position: absolute;
  left: -62px; top: -4px;
  display: grid;
  place-items: center;
  width: 41px; height: 41px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: linear-gradient(160deg, #14191f 0%, #0a0e13 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--t3);
  transition: border-color .6s ease, box-shadow .6s ease, color .6s ease;
}
.step.in .step-dot{
  border-color: rgba(235,240,255,0.7);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px rgba(186,208,255,0.2);
}

.step-day{
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t4);
}
.step h3{
  font-size: var(--h3);
  font-weight: 500;
  letter-spacing: -0.032em;
  color: #fff;
}
.step p{
  margin-top: 11px;
  max-width: 540px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.009em;
}

/* ================= feature grid (seamless, hairline dividers) ================= */
.grid-features{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.feature{
  position: relative;
  padding: 38px 34px 42px;

}
/* .feature used to own a radial + a diagonal sheen sweep of its own. Both are
   gone: every card family now shares the .lume lighting below, so the grid
   stops being the only block that reacts differently to a pointer. */
.feature-icon{
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 24px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.13);
  background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(255,255,255,0.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 0 20px rgba(186,208,255,0.13);
}
.feature-icon svg{ width: 21px; height: 21px; }
.feature h3{
  position: relative;
  font-size: var(--h3-dense);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: #fff;
}
.feature p{
  position: relative;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
  letter-spacing: -0.006em;
}


/* ================= customer voices ================= */
.voices{
  gap: 14px;
}
/* the quotes are real and unattributable; saying so beats letting them read
   as invented, which unlabelled pull-quotes always do */
.voices-note{
  margin-top: 16px;
  font-size: 13px;
  color: var(--t4);
}
.voice{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
  padding: 36px 34px 38px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  transition: background .5s ease;
}
.voice-label{
  padding-top: 7px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--t4);
}
.voice q{
  display: block;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.38;
  color: #fff;
}
.voice p{
  margin-top: 11px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: -0.008em;
}

/* ================= calculator ================= */
.calc{
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 16px;
  align-items: stretch;
}
.calc-panel{
  padding: 38px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}
.field + .field{ margin-top: 34px; }
.field-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}
.field-label{
  font-size: 13px;
  letter-spacing: -0.003em;
  color: var(--muted);
}
.field-value{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.range{
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 34px;            /* touch target — the visible track sits inside it */
  background: transparent;
  outline: none;
  cursor: pointer;
}
.range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6.5px;      /* centre the thumb on the 2px track */
  width: 15px; height: 15px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #dcdcdc 100%);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.07), 0 2px 8px rgba(0,0,0,0.6);
  transition: box-shadow .25s ease;
}
.range:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 6px rgba(186,208,255,0.14), 0 0 18px rgba(186,208,255,0.45);
}
@media (hover: hover){ .range:hover::-webkit-slider-thumb{
  box-shadow: 0 0 0 6px rgba(186,208,255,0.14), 0 0 18px rgba(186,208,255,0.45);
} }
.range::-moz-range-thumb{
  width: 15px; height: 15px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.07), 0 2px 8px rgba(0,0,0,0.6);
}
.field-hint{ color: var(--t4) !important;
  margin-top: 0;
  font-size: 12px;
  letter-spacing: 0em;
  color: var(--t5);
}

.calc-out{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.26);
  /* No backdrop-filter here on purpose. The neon border animates INSIDE this
     element, so a backdrop blur would be re-computed over the whole panel on
     every frame — the single biggest cost in this section. The gradient below
     is deepened to sit on its own instead of relying on the blur. */
  background:
    linear-gradient(165deg, rgba(255,255,255,0.105), rgba(255,255,255,0.022)),
    rgba(10, 14, 19, 0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 24px 60px rgba(0,0,0,0.55);
}
.calc-out-label{
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--t4);
}
.calc-big{
  margin-top: 16px;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.calc-rows{ margin-top: 32px; border-top: 1px solid rgba(255,255,255,0.12); }
.calc-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: var(--muted);
}
.calc-row b{
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.009em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.guide-links{ margin: 22px 0 0; font-size: 14px; line-height: 1.6; color: var(--t4); }
.guide-links a, .calc-note a{ color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.calc-note{
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--t5);
}

/* ================= the second path: have the model emailed =================
   A thirty-minute call is a large ask at 11pm on a phone. This posts the
   slider values with an address to /a.php on this origin, so the reply can
   be built on the visitor's own numbers. No third-party script, no list. */
.lead{
  margin-top: 16px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.11);
  background: linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 10px 28px;
  align-items: center;
}
.lead-copy b{ display: block; font-weight: 500; font-size: 15.5px; letter-spacing: -0.01em; color: #fff; margin-bottom: 4px; }
.lead-copy span{ font-size: 13.5px; line-height: 1.5; color: var(--t4); }
.lead-row{ display: flex; gap: 8px; }
.lead input{
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 14.5px; color: #fff;
  height: var(--btn-h); padding: 0 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  outline: none;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.lead input::placeholder{ color: var(--t5); }
.lead input:focus{ border-color: rgba(186,208,255,0.6); box-shadow: 0 0 0 4px rgba(186,208,255,0.13); background: rgba(255,255,255,0.07); }
.lead-note{ grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--t4); }
.lead-note:empty{ display: none; }
.lead.is-sent .lead-row, .lead.is-sent input, .lead.is-sent button{ opacity: .45; pointer-events: none; }
.lead.is-sent .lead-note{ color: var(--accent); }
/* in the closing block it sits beside the booking button, as one row */
.lead--cta{
  margin: 0; padding: 0; border: 0; background: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  flex: 0 1 380px; min-width: 0;
}
.lead--cta input{ flex: 1 1 180px; }
.lead--cta .lead-note{ flex-basis: 100%; text-align: left; }
.cta .lead--cta .lead-note{ text-align: center; }


/* ================= word-by-word heading reveal ================= */
/* the parent stays put; the words do the work */
.js .reveal--words{ opacity: 1; transform: none; filter: none; scale: 1; }
.w{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.08em 0.04em 0.18em;
  margin: -0.08em -0.04em -0.18em;
}
.js .w-i{
  display: inline-block;
  transform: translateY(108%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16,1,0.3,1) var(--wd, 0s),
              opacity .8s cubic-bezier(0.16,1,0.3,1) var(--wd, 0s);
}
.reveal--words.in .w-i{ transform: none; opacity: 1; }

/* ================= Scroll Text Highlight — Originkit =================
   Ported from the Framer component. Its behaviour is the spec: the paragraph
   is split by word, each word scrubs from dimColor to highlightColor, and
   progress is tied 1:1 to scroll position between the component's default
   trigger points — start "Top -> Center" (element top reaches viewport
   centre), end "Bottom -> Center" (element bottom reaches viewport centre).
   Shipped defaults kept: dim #FFFFFF26, highlight #FFFFFF, splitBy word,
   scrub on.

   Driven from the page's existing throttled scroll pass rather than
   animation-timeline: view(), for two reasons. This paragraph's ancestor
   .section-head already runs a scroll-driven translateY, and a view timeline
   measured through a transformed parent feeds back on itself. And GSAP's
   top/bottom-to-centre trigger points map exactly onto a scroll offset but
   only awkwardly onto a named view range. JS also means Safari and Firefox
   get the effect rather than the static fallback. */
:root{
  --sth-dim: rgba(255,255,255,0.15);   /* component default #FFFFFF26 */
  --sth-lit: #ffffff;                  /* component default #FFFFFF   */
}

/* --- the scrub, keyed off [data-sth] so it is independent of type size --- */
[data-sth] i{
  font-style: normal;
  color: var(--sth-dim);
}
[data-sth] em{ font-style: italic; }
/* --l is 0..1 per word, written by the scroll pass */
@supports (color: color-mix(in srgb, white 50%, black)){
  [data-sth] i{
    color: color-mix(in srgb,
      var(--sth-lit) calc(var(--l, 0) * 100%),
      var(--sth-dim));
  }
}
/* no scroll, no scrub: the paragraph is just a paragraph */
@media (prefers-reduced-motion: reduce){
  [data-sth] i{ color: var(--sth-lit); }
}

/* --- .sth is the display-sized variant: the statement that closes #problem --- */
.sth{
  margin: 70px 0 0;
  max-width: 32ch;
  font-size: 34px;
  line-height: 1.34;
  letter-spacing: -0.028em;
  font-weight: 400;
  text-wrap: balance;
}

/* --- on a section lede the scrub runs to the muted body colour, not to white,
       so the paragraph still lands where the design puts it --- */
.section-sub[data-sth]{
  /* brighter than the paragraph's own --muted: the lit end lands between
     --muted (#a6a6a6) and --stat (#d8d8d8), and the unlit end is lifted too so
     the tail of the sentence stays present rather than nearly vanishing */
  --sth-dim: rgba(255,255,255,0.17);
  --sth-lit: #c6c6c6;
}

/* ================= calculator feedback ================= */
.range::-webkit-slider-runnable-track{
  height: 2px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(190,200,215,0.6), rgba(255,255,255,0.92))
      0 / var(--fill, 35%) 100% no-repeat,
    rgba(255,255,255,0.16);
}
.range::-moz-range-track{
  height: 2px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(190,200,215,0.6), rgba(255,255,255,0.92))
      0 / var(--fill, 35%) 100% no-repeat,
    rgba(255,255,255,0.16);
}
.range::-webkit-slider-thumb{
  box-shadow: 0 0 0 4px rgba(255,255,255,0.07), 0 2px 8px rgba(0,0,0,0.6);
}
/* Keep controls and figures steady during continuous input. */
.calc-panel.in, .calc-out.in{transform:none;}
.calc-big{font-size:clamp(32px, 4vw, 60px);overflow-wrap:anywhere;}
.range:focus-visible{outline:2px solid #bacfff;outline-offset:4px;border-radius:6px;}

/* the 60/40 split, shown rather than asserted */
.split-bar{
  display: flex;
  height: 6px;
  margin-top: 28px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}
.split-bar span{
  display: block;
  height: 100%;
  width: 0;
  transition: width 1.3s cubic-bezier(0.16,1,0.3,1);
}
.split-you{
  background: linear-gradient(90deg, rgba(190,200,215,0.7), rgba(255,255,255,0.95));
  box-shadow: 0 0 14px rgba(186,208,255,0.35);
}
.split-us{ background: rgba(255,255,255,0.17); }
.calc-out.in .split-you{ width: 60%; transition-delay: .55s; }
.calc-out.in .split-us{ width: 40%; transition-delay: .68s; }
.split-key{
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--t4);
}
.split-key i{
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  vertical-align: baseline;
}
.split-key .k-you{ background: rgba(255,255,255,0.85); }
.split-key .k-us{ background: rgba(255,255,255,0.22); }

/* ================= card lighting =================
   The cards were four identical shells — 1px hairline, 16px radius, a 4.5%
   white gradient — and nothing happened when you touched them. Rather than
   giving each family its own effect, they share one: a light that follows the
   pointer across the surface, plus a rim that brightens on the edge nearest
   the cursor, so a card reads as a lit object rather than a filled rectangle.

   It lives in an injected <i class="lume"> instead of ::before/::after because
   several of these cards already spend their pseudo-elements (.panel--pulse on
   its top edge, .steps on its rail). One extra element per card costs nothing
   and collides with nothing.

   The light never touches `transform` — every one of these cards already owns
   one from the reveal/3D system, and a second would silently lose. */
.voice, .phase, .figure{ position: relative; }

.lume{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(circle 270px at var(--mx, 50%) var(--my, 50%),
    rgba(186,208,255,0.28), rgba(186,208,255,0.09) 40%, transparent 66%);
}
/* the rim: a 1px ring cut out of a radial, so only the edge near the pointer
   lights. mask-composite subtracts the inner box from the outer one. */
.lume::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(circle 210px at var(--mx, 50%) var(--my, 50%),
    rgba(206,224,255,0.85), transparent 58%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.is-lit > .lume{ opacity: 1; }

/* --- the cards themselves ---------------------------------------------------
   These used to be cells cut out of one flat box, divided by hairlines: no
   card had an edge, a corner, or a shadow of its own, so no amount of hover
   polish made them read as objects. Each is now a discrete surface — its own
   radius, its own rim, a top-lit gradient, and a shadow that puts it above the
   page rather than flush into it. The parent containers are plain grids now. */
.voice, .feature, .phase, .figure, .person, .vs, .rung{
  /* .person, .rung and .vs were static, so their .lume only anchored to the
     card by accident -- through the transform the reveal happens to leave on
     them. Anchor it on purpose; the entrance bloom below needs it too. */
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.085);
  background:
    linear-gradient(168deg,
      rgba(255,255,255,0.062) 0%,
      rgba(255,255,255,0.018) 42%,
      rgba(255,255,255,0.006) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),      /* the top edge catches light */
    0 2px 4px rgba(0,0,0,0.35),
    0 20px 42px -18px rgba(0,0,0,0.62);        /* sits above the page */
  /* This redeclares `transition`, so it must restate the reveal's properties as
     well -- at equal specificity the later rule wins outright, and for a long
     time that silently cost every card its entrance animation.
     Per-property delays keep hover instant while the reveal still staggers. */
  transition:
    border-color .45s ease,
    box-shadow   .45s ease,
    background   .45s ease,
    opacity   .95s cubic-bezier(0.16,1,0.3,1),
    transform .95s cubic-bezier(0.16,1,0.3,1),
    filter    .95s cubic-bezier(0.16,1,0.3,1),
    scale     .58s var(--pop);
  transition-delay: 0s, 0s, 0s, var(--rd,0s), var(--rd,0s), var(--rd,0s), var(--rd,0s);
}
@media (hover: hover){ .voice:hover,
.feature:hover,
.phase:hover,
.figure:hover,
.person:hover,
.vs:hover,
.rung:hover{
  border-color: rgba(186,208,255,0.30);
  background:
    linear-gradient(168deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 42%,
      rgba(255,255,255,0.01) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 2px 4px rgba(0,0,0,0.4),
    0 30px 60px -20px rgba(0,0,0,0.72),
    0 0 40px -12px rgba(186,208,255,0.22);
} }

/* ---- entrance bloom -------------------------------------------------------
   A ring of accent light that blooms as a card lands and fades away, so a box
   arrives the way a headline does instead of merely being there. It rides the
   same --rd the pop already staggers on, so a row lights left to right.

   ::before, not ::after: .voice, .feature and .phase already spend ::after on
   their "Read" affordance. Box-shadow only and no background, so the light
   sits on the card's edge and never washes over the copy. The global
   reduced-motion rule kills the animation, leaving opacity 0. */
.voice::before, .feature::before, .phase::before,
.figure::before, .person::before, .vs::before, .rung::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 1px rgba(186,208,255,0.55),
    0 0 32px 2px rgba(186,208,255,0.28),
    inset 0 0 26px rgba(186,208,255,0.09);
}
.voice.in::before, .feature.in::before, .phase.in::before,
.figure.in::before, .person.in::before, .vs.in::before, .rung.in::before{
  animation: card-bloom 1.3s ease-out var(--rd, 0s) both;
}
@keyframes card-bloom{
  0%   { opacity: 0; }
  28%  { opacity: 1; }
  100% { opacity: 0; }
}

/* The lift is folded into the transform each card already owns — a second
   transform would silently lose the cascade. --hz is 0 until hover. */
@media (prefers-reduced-motion: no-preference) and (hover: hover){
  .voice.in{ transform: perspective(1100px) rotateX(var(--vx, 0deg)) translateZ(var(--hz, 0px)); }
  /* .phase.in, not .phase: (0,1,0) loses to .reveal.in (0,2,0) and the lift
     would never render. Equal specificity + later source order wins. */
  .phase.in{ transform: translateZ(var(--hz, 0px)); }
  .person.in{ transform: translateZ(var(--hz, 0px)); }
  .vs.in{ transform: translateZ(var(--hz, 0px)); }
  .rung.in{ transform: translateZ(var(--hz, 0px)); }
  .figure.in{ transform: perspective(800px) rotateX(var(--gx, 0deg)) translateZ(var(--hz, 0px)); }
  .voice, .figure, .phase{ transition: transform .45s cubic-bezier(0.16,1,0.3,1),
                                       border-color .45s ease, box-shadow .45s ease, background .45s ease; }
  @media (hover: hover){ .voice:hover,
.figure:hover,
.phase:hover,
.person:hover,
.vs:hover,
.rung:hover{ --hz: 14px; } }
}

@media (prefers-reduced-motion: reduce){
  .lume{ display: none; }
}

/* ================= click to read =================
   The cards hold real copy at 14–15px inside a grid cell. Clicking one lifts
   its content into a centred reader at a comfortable size.

   The reader is its own element rather than the card scaled up, for two
   reasons: every one of these cards already owns a transform from the
   reveal/3D system and a second would silently lose, and growing a grid item
   in place reflows its neighbours. A separate layer owns nothing and moves
   nothing. */
/* extra copy: carried in the card markup but only ever shown in the reader, so
   the grid stays scannable and the expanded view has something to justify it */
.more{ display: none; }
.zoom-card .more{
  display: block;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.zoom-card .more p + p{ margin-top: 15px; }

/* a card with more behind it should say so */
.zoomable{ cursor: zoom-in; }
.zoomable::after{
  content: "Read";
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.zoomable:focus-visible::after{ opacity: 0.85; }
@media (hover: hover){ .zoomable:hover::after{ opacity: 0.85; } }
.zoom-card .zoomable::after{ content: none; }
.zoomable:focus-visible{ outline-offset: 6px; }

.zoom-veil{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  /* clamped rather than raw vw: on a phone 5vw is barely a gutter, and on a
     wide monitor it throws the reader needlessly narrow */
  padding: clamp(16px, 6vh, 64px) clamp(16px, 5vw, 56px);
  background: rgba(4, 6, 9, 0.72);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.zoom-veil.open{
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility 0s;
}

.zoom-card{
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 54px 56px 56px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(168deg,
      rgba(255,255,255,0.075) 0%,
      rgba(255,255,255,0.022) 44%,
      rgba(8,12,16,0.9) 100%),
    rgba(8,12,16,0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 40px 90px -20px rgba(0,0,0,0.8),
    0 0 70px -24px rgba(186,208,255,0.3);
  opacity: 0;
  transform: translateY(14px) scale(0.975);
  transition: opacity .34s cubic-bezier(0.16,1,0.3,1),
              transform .34s cubic-bezier(0.16,1,0.3,1);
  scrollbar-width: none;
}
.zoom-card::-webkit-scrollbar{ display: none; }
.zoom-veil.open .zoom-card{ opacity: 1; transform: none; }

/* the copy, at a size meant for reading rather than scanning */
.zoom-card q,
.zoom-card h3{
  display: block;
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.28;
  letter-spacing: -0.026em;
  font-weight: 500;
  color: #fff;
}
.zoom-card q{ font-weight: 400; }
.zoom-card p{
  margin: 0;
  max-width: 58ch;
  font-size: 17.5px;
  line-height: 1.68;
  letter-spacing: -0.008em;
  color: var(--t2);
}
.zoom-card p + p{ margin-top: 15px; }
/* the small caps label keeps its role, just with more air under it */
.zoom-card .voice-label,
.zoom-card .phase-days{
  display: block;
  margin-bottom: 20px;
  font-size: 11.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
.zoom-card .phase-n{
  font-size: 44px;
  line-height: 1;
  margin-bottom: 14px;
  color: var(--t5);
}
.zoom-card .feature-icon{
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 24px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
.zoom-card .feature-icon svg{ width: 21px; height: 21px; }
.zoom-card .lume{ display: none; }

.zoom-close{
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--t2);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
@media (hover: hover){ .zoom-close:hover{ color: #fff; border-color: rgba(186,208,255,0.5); background: rgba(186,208,255,0.12); } }

body.zoom-open{ overflow: hidden; }

@media (max-width: 900px){
  .zoom-card{ padding: 40px 26px 42px; border-radius: 16px; }
  .zoom-card q, .zoom-card h3{ font-size: 22px; }
  .zoom-card p{ font-size: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .zoom-veil, .zoom-card{ transition: none; }
}

/* ================= compare / figures ================= */
.compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.panel{
  position: relative;
  padding: 38px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

/* The two columns are an argument, not a fair comparison: the left one is the
   status quo being rejected, the right one is what FRISTNOR actually provides.
   So the left recedes and the right carries the page accent. No transform on
   the panel itself — .js .reveal--right (0,2,0) would beat .panel--pulse
   (0,1,0) and the lift would silently never render; the elevation is margin. */
.panel:not(.panel--pulse){
  border-color: rgba(255,255,255,0.07);
  background: linear-gradient(165deg, rgba(255,255,255,0.022), rgba(255,255,255,0.006));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.panel:not(.panel--pulse) h3{ color: var(--t2); }
.panel:not(.panel--pulse) .panel-tag{ color: var(--t5); }
.panel:not(.panel--pulse) li{ color: var(--t4); }
.panel:not(.panel--pulse) li svg{ stroke: rgba(255,255,255,0.18); }

.panel--pulse{
  margin-top: -14px;          /* sits above its row: elevation without transform */
  padding: 46px 38px 40px;
  border-color: rgba(186,208,255,0.4);
  background:
    linear-gradient(165deg, rgba(186,208,255,0.1), rgba(186,208,255,0.014) 48%),
    linear-gradient(165deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 30px 72px rgba(0,0,0,0.6),
    0 0 64px -14px rgba(186,208,255,0.34);
}
/* lit top edge, the way the highlighted column reads in the app UI */
.panel--pulse::before{
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(186,208,255,0.85), transparent);
}
.panel--pulse .panel-tag{
  display: inline-block;
  margin-bottom: 15px;
  padding: 5px 11px 4px;
  border-radius: 999px;
  border: 1px solid rgba(186,208,255,0.32);
  background: rgba(186,208,255,0.12);
  color: #cfe0ff;
}
.panel--pulse h3{ color: #fff; }
/* the ticks are the fastest read in the whole block, so they carry the accent.
   A presentation attribute (stroke="#e8e8e8") loses to any CSS rule. */
.panel--pulse li svg{
  stroke: var(--accent);
  filter: drop-shadow(0 0 6px rgba(186,208,255,0.45));
}
.panel h3{
  font-size: var(--h3);
  font-weight: 500;
  letter-spacing: -0.032em;
  color: #fff;
}
.panel-tag{
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--t5);
}
.panel--pulse .panel-tag{ color: var(--t3); }
.panel ul{ list-style: none; margin-top: 26px; display: grid; gap: 16px; }
.panel li{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--t4);
}
.panel li svg{ width: 15px; height: 15px; flex: none; margin-top: 3px; }
.panel--pulse li{ color: var(--t1); }

.figures{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  gap: 14px;
}

/* --- the team cards in #story. Same card floor as .figure, but a portrait
       column rather than a number, so it can hold a face when there is one. --- */
.people{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  gap: 14px;
}
/* while the team is one person, a third-width card stranded beside two
   empty columns reads as a loading state. Give it a deliberate width. */
.people--solo{ grid-template-columns: minmax(0, 430px); }

/* --- #versus. Three routes to the same app, priced three different ways.
       The third carries .vs--ours and is the only one that reads as lit. --- */
/* --- #stalled. A short narrative rather than a feature list: five beats,
       each one a wall, ending where #product picks up. Sized between body
       and .sth so it reads as prose without shouting. --- */
.beats{
  position: relative;
  max-width: 640px;
  margin-top: 40px;
  padding-left: 34px;
  display: grid;
  gap: 32px;
}
/* the unlit track: the whole descent, visible before you have made it */
.beats::before{
  content: "";
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 1px;
  background: rgba(255,255,255,0.085);
}
/* and the part of it you have travelled */
.beats-fill{
  position: absolute;
  left: 9px; top: 8px;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, rgba(232,238,255,0.85), rgba(186,208,255,0.30));
  box-shadow: 0 0 10px rgba(186,208,255,0.30);
}
.beat{ position: relative; }
.beat::before{
  content: "";
  position: absolute;
  left: -30px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.20);
  transition: border-color .45s ease, background .45s ease,
              box-shadow .45s ease, scale .5s var(--pop);
}
/* each wall lights only once the rail has reached it */
.beat.passed::before{
  border-color: rgba(198,216,255,0.8);
  background: var(--accent);
  box-shadow: 0 0 14px rgba(186,208,255,0.45);
  scale: 1.18;
}
.beat-label{ transition: color .5s ease; }
.beat.passed .beat-label{ color: var(--t3); }
@media (prefers-reduced-motion: reduce){
  .beats-fill{ display: none; }
  .beat::before{ border-color: rgba(198,216,255,0.5); }
}
.beat-label{
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--t5);
  margin-bottom: 11px;
}
.beat p{
  margin: 0;
  font-size: 19.5px;
  line-height: 1.52;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
@media (max-width: 560px){
  .beats{ gap: 32px; margin-top: 34px; padding-left: 28px; }
  .beats::before, .beats-fill{ left: 6px; }
  .beat::before{ left: -27px; }
  .beat p{ font-size: 17.5px; }
}


/* --- #ladder. Four subscription rungs plus the entry offer that feeds
       them. .rung--anchor is the tier the pricing is built around. --- */
.ladder{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.rung{ padding: 26px 24px 28px; display: flex; flex-direction: column; }
.rung--anchor{
  border-color: rgba(186,208,255,0.28);
  background:
    linear-gradient(168deg, rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 42%, rgba(255,255,255,0.012) 100%);
}
.rung-name{
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--t5); margin-bottom: 13px;
}
.rung--anchor .rung-name{ color: rgba(198,216,255,0.78); }
.rung-price{
  font-size: 30px; letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 3px; color: var(--t1);
}
.rung--anchor .rung-price{ color: #fff; }
.rung-per{ font-size: 13px; color: var(--t4); margin-bottom: 16px; }
.rung p{
  margin: 0; font-size: 14px; line-height: 1.55;
  color: var(--t3);
}
.rung--anchor p{ color: var(--t2); }
.rung-tag{
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,0.09);
  font-size: 12.5px; color: var(--t4);
}
.entry{
  margin-top: 18px; padding: 20px 24px;
  border: 1px dashed rgba(255,255,255,0.14); border-radius: 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.entry b{ font-weight: 500; font-size: 15.5px; }
.entry span{ font-size: 14px; color: var(--t3); }

.help{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 34px;
  margin-top: 34px;
}
.help > div{ display: flex; align-items: flex-start; gap: 13px; }
.help svg{ flex: none; width: 16px; height: 16px; margin-top: 3px; }
.help b{
  display: block;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.009em;
  margin-bottom: 4px;
  color: #fff;
}
.help p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--t3);
}
.help--proof{ max-width: 860px; margin-left: auto; margin-right: auto; margin-top: 40px; }

.versus{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  gap: 14px;
  align-items: start;
}
.vs{ padding: 30px 28px 32px; }
.vs--ours{
  border-color: rgba(186,208,255,0.28);
  background:
    linear-gradient(168deg, rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 42%, rgba(255,255,255,0.012) 100%);
}
.vs-tag{
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--t5);
  margin-bottom: 12px;
}
.vs--ours .vs-tag{ color: rgba(198,216,255,0.72); }
.vs-cost{
  margin: 0 0 4px;
  font-size: 25px;
  letter-spacing: -0.026em;
  color: var(--t3);
}
.vs--ours .vs-cost{ color: #fff; }
.vs-cost-sub{
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--t4);
}
.vs ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vs li{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t4);
}
.vs--ours li{ color: var(--t2); }
.vs li svg{ flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* --- the row-by-row matrix under the three cards. Wide content scrolls in
       its own container rather than pushing the page sideways on a phone. --- */
/* visually hidden, still read aloud - the matrix caption and its empty
   first header cell exist for screen readers only */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.vs-matrix-wrap{
  margin-top: 22px;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.075);
  background: linear-gradient(168deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008));
  -webkit-overflow-scrolling: touch;
}
.vs-matrix{
  width: 100%;
  min-width: 720px;          /* below this it scrolls instead of crushing */
  border-collapse: collapse;
  font-size: 13.5px;
}
.vs-matrix th, .vs-matrix td{
  text-align: left;
  padding: 14px 18px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.vs-matrix tr:last-child th, .vs-matrix tr:last-child td{ border-bottom: 0; }
.vs-matrix thead th{
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t5);
  padding-top: 17px;
  padding-bottom: 13px;
}
.vs-matrix tbody th{
  font-weight: 400;
  color: var(--t3);
  width: 25%;
}
.vs-matrix td{ color: var(--t4); width: 25%; }
/* the FRISTNOR column is the only lit one, in the header and every row */
.vs-matrix .col-ours{
  color: var(--t2);
  background: rgba(186,208,255,0.045);
}
.vs-matrix thead .col-ours{ color: rgba(198,216,255,0.75); }
.person{
  padding: 20px 20px 22px;
}
.person-face{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 14px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,0.14);
  /* the placeholder ground, visible until a real portrait replaces it */
  background:
    radial-gradient(circle at 50% 38%, rgba(186,208,255,0.20), rgba(255,255,255,0.03) 70%);
}
.person-name{
  font-size: var(--h3);
  letter-spacing: -0.018em;
  margin: 0 0 3px;
  font-weight: 500;
}
.person-role{
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 0 0 11px;
}
.person p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--t2);
}
.figure{
  padding: 40px 26px;
  text-align: center;
}
.figure-n{
  font-size: 62px;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.figure-l{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: var(--muted);
}

/* brushed-metal numerals, matching the solid button's gradient */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .calc-big, .figure-n{
    background: linear-gradient(180deg, #ffffff 0%, #dfe8ff 52%, #bad0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}


/* ================= pointer-reactive polish ================= */
/* the phones lean toward the cursor */
.device-frame{
  transition: transform .55s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}

/* primary buttons drift toward the pointer */
.btn{ transition: background .35s ease, border-color .35s ease, box-shadow .35s ease,
                  color .35s ease, filter .35s ease, transform .32s cubic-bezier(0.16,1,0.3,1); }

/* ================= product / stage =================
   Three screens as a fanned stack rather than a flat row: the active one
   forward and lit, the other two receding behind it. The rail on the left
   names each screen; a rail item or a receding phone brings that screen
   forward. Screen selection stays put while the page scrolls.

   Transform layering, outermost first, each on its own element so none of
   them can cancel another: .device (entrance) > .device-pos (selection).
   The inner wrappers stay still to keep phone movement predictable. */
.stage{
  --fan: 215px;
  display: grid;
  grid-template-columns: minmax(280px, 350px) 1fr;
  gap: 40px 64px;
  align-items: center;
  margin-top: 6px;
}
.stage-rail{ display: grid; gap: 30px; }
.stage-rail .brandify{ flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
.stage-rail .brandify input{ min-width: 0; width: 100%; }
.stage-rail .brandify-hint{ max-width: 36ch; }

.tour{ display: grid; gap: 4px; }
.tour-item{
  appearance: none; -webkit-appearance: none;
  position: relative;
  display: grid; gap: 4px;
  width: 100%; margin: 0; padding: 13px 16px 14px 22px;
  border: 0; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: background .35s ease;
}
.tour-item::before{
  content: "";
  position: absolute; left: 6px; top: 15px; bottom: 16px; width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.10);
  transition: background .35s ease, box-shadow .35s ease;
}
.tour-item b{ font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--t3); transition: color .3s ease; }
.tour-item span{ font-size: 13.5px; line-height: 1.5; color: var(--t5); transition: color .3s ease; }
@media (hover: hover){ .tour-item:hover{ background: rgba(255,255,255,0.025); } }
@media (hover: hover){ .tour-item:hover b{ color: var(--t2); } }
.tour-item.is-on{ background: rgba(255,255,255,0.04); }
.tour-item.is-on::before{ background: var(--accent); box-shadow: 0 0 12px rgba(186,208,255,0.55); }
.tour-item.is-on b{ color: var(--t1); }
.tour-item.is-on span{ color: var(--t3); }
.tour-item:focus-visible{ outline: 2px solid rgba(186,208,255,0.7); outline-offset: 2px; }

.stack{
  display: grid;
  place-items: center;
  min-height: 540px;
}
.stack .device{ grid-area: 1 / 1; width: 100%; }
.stack .device-caption{ display: none; }
.device{ margin: 0; }
.device-pos{
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  will-change: transform;
}
.device-par{
  transform: translate3d(0, calc(var(--lift, 0px) + var(--par, 0px)), 0);
  will-change: transform;
}
.stack .device[data-pos="0"]{ z-index: 3; }
.stack .device[data-pos="-1"],
.stack .device[data-pos="1"]{ z-index: 1; cursor: pointer; }
.stack .device[data-pos="-1"] .device-pos{
  transform: perspective(1200px) translateX(calc(var(--fan) * -1)) translateZ(-170px) rotateY(17deg);
  opacity: .65;
}
.stack .device[data-pos="1"] .device-pos{
  transform: perspective(1200px) translateX(var(--fan)) translateZ(-170px) rotateY(-17deg);
  opacity: .65;
}
@media (hover: hover){ .stack .device[data-pos="-1"]:hover .device-pos,
.stack .device[data-pos="1"]:hover .device-pos{ opacity: .85; } }

/* the brand bar: the one place on these screens the creator's name appears.
   It overlays the top of each screenshot, where every shot is empty. */
.app-bar{
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 36px;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px 0;
  background: linear-gradient(180deg, rgba(7,10,15,0.97) 70%, rgba(7,10,15,0.86));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11.5px; color: #e9edf4;
}
.app-mark{ flex: none; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(160deg, #d5e2ff, #9db4ee); box-shadow: 0 0 10px rgba(186,208,255,0.35); }
.app-bar b{ min-width: 0; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-screen{ flex: none; margin-left: auto; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t4); }

.device-frame{
  position: relative;
  max-width: 246px;
  margin: 0 auto;
  aspect-ratio: 9 / 19;
  padding: 8px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.24);
  background: linear-gradient(165deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 26px 64px rgba(0,0,0,0.55);
}
/* the speaker slot, so the frame reads as a device and not a card */
.device-frame::before{
  content: "";
  position: absolute;
  top: 15px; left: 50%;
  width: 46px; height: 4px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(255,255,255,0.16);
  z-index: 2;
}
.device-screen{
  position: relative;
  height: 100%;
  border-radius: 21px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
}
/* drop a real screenshot in as <img> and the placeholder steps aside */
.device-screen picture{ display: contents; }
.device-screen img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.device-screen:has(img.ok) .device-skeleton{ display: none; }
.device-skeleton{
  position: absolute;
  inset: 0;
  padding: 34px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.device-skeleton i{
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.10);
}
.device-skeleton i.w70{ width: 70%; }
.device-skeleton i.w45{ width: 45%; }
.device-skeleton i.w85{ width: 85%; }
.device-skeleton .blk{
  height: 88px;
  margin: 7px 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.065);
}
.device-skeleton .blk.sm{ height: 52px; }
.device-caption{
  margin-top: 18px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: -0.001em;
  color: var(--muted);
}

/* ================= Live Chat — Originkit (iOS Message List) =================
   Ported from the React/framer-motion component. Everything structural is the
   component's: 8px row gap, 16px container padding, 75% bubble max-width,
   10px/14px bubble padding, the 20px/4px tail radii, 11px timestamps with the
   12px tail-side inset, 7px typing dots, the 150ms appear stagger and the
   0.18s dot stagger.

   The entrance is the component's own spring — stiffness 450, damping 28,
   mass 1 — solved and sampled as linear(), so the 6.25% overshoot and 493ms
   settle are the real curve rather than an eyeballed bezier. Browsers without
   linear() keep the cubic-bezier declared above it.

   Only the four colour props carry site values: the defaults below are the
   component's iOS-light ones, and .chat--app overrides them the way the props
   would, because #007AFF on #E9E9EB would fight a #080C10 page and the three
   app screenshots beside it. */

.chat{
  /* the component's prop defaults */
  --sent-bubble: #007AFF;
  --sent-text: #FFFFFF;
  --received-bubble: #E9E9EB;
  --received-text: #000000;
  --dot-them: #8E8E93;
  --dot-me: rgba(255,255,255,0.85);
  --time-color: #8E8E93;
  --chat-stagger: 150ms;
  --chat-spring: cubic-bezier(0.34, 1.32, 0.52, 1);
  --chat-spring: linear(0, 0.0675, 0.2229, 0.4106, 0.594, 0.7522, 0.8759, 0.964,
    1.0203, 1.0508, 1.0625, 1.0616, 1.0534, 1.042, 1.0301, 1.0193, 1.0106,
    1.0042, 0.9999, 0.9974, 0.9962, 0.996, 0.9964, 0.997, 0.9978, 0.9985, 1);

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  min-width: 240px;
  min-height: 120px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35em;
  letter-spacing: 0em;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: none;
}
.chat::-webkit-scrollbar{ display: none; }

.chat-row{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.chat-row[data-me]{ align-items: flex-end; }

.chat .msg-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 75%;
  will-change: transform, opacity;
}
.chat-row[data-me] .msg-item{ align-items: flex-end; }

.chat-time{
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--time-color);
  margin-bottom: 4px;
  padding-left: 12px;
}
.chat-row[data-me] .chat-time{ padding-left: 0; padding-right: 12px; }

.chat-bubble{
  padding: 10px 14px;
  line-height: 1.35;
  color: var(--received-text);
  background-color: var(--received-bubble);
  border-radius: 20px 20px 20px 4px;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.chat-row[data-me] .chat-bubble{
  color: var(--sent-text);
  background-color: var(--sent-bubble);
  border-radius: 20px 20px 4px 20px;
}

/* typing bubble */
.chat-typing{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-top: 4px;
}
.chat-typing[data-me]{ justify-content: flex-end; }
.chat-typing .msg-item{ display: inline-flex; max-width: none; }
.typing{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background-color: var(--received-bubble);
  border-radius: 20px 20px 20px 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.chat-typing[data-me] .typing{
  background-color: var(--sent-bubble);
  border-radius: 20px 20px 4px 20px;
}
.typing-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--dot-them);
  display: inline-block;
  opacity: 0.5;
  will-change: transform, opacity;
}
.chat-typing[data-me] .typing-dot{ background-color: var(--dot-me); }

/* component: y [0,-5,0], opacity [.35,1,.35], .8s easeInOut, infinite, stagger .18s */
@keyframes chat-dot{
  0%, 100%{ transform: translateY(0);     opacity: 0.35; }
  50%     { transform: translateY(-5px);  opacity: 1; }
}
.typing-dot{ animation: chat-dot 0.8s ease-in-out infinite; }
.typing-dot:nth-child(2){ animation-delay: 0.18s; }
.typing-dot:nth-child(3){ animation-delay: 0.36s; }

/* entrance: HIDDEN {opacity 0, scale .85, y 10} -> SHOWN, staggered by index.
   Hidden only under .js, so a scripting failure leaves the thread readable. */
.js .chat .msg-item{
  opacity: 0;
  transform: translateY(10px) scale(0.85);
}
.js .chat.is-in .msg-item{
  opacity: 1;
  transform: none;
  transition: opacity 493ms var(--chat-spring), transform 493ms var(--chat-spring);
  transition-delay: calc(var(--i, 0) * var(--chat-stagger));
}

/* --- this instance: the app's own dark UI, matching the screenshots beside it --- */
.chat--app{
  --sent-bubble: #bad0ff;
  --sent-text: #0a0e14;
  --received-bubble: rgba(255,255,255,0.075);
  --received-text: #e9edf4;
  --dot-them: rgba(255,255,255,0.62);
  --dot-me: rgba(10,14,20,0.75);
  --time-color: var(--t4);
  font-size: 13.5px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(186,208,255,0.07), transparent 60%),
    #05080c;
}
.chat--app .chat-bubble{ box-shadow: 0 1px 2px rgba(0,0,0,0.28); }
.chat--app .chat-row:not([data-me]) .chat-bubble,
.chat--app .chat-typing:not([data-me]) .typing{
  border: 1px solid rgba(255,255,255,0.09);
}

/* --- the two-column block that hosts it --- */
/* A rule with a line on it, sitting in the gap between the three app screens
   and the coach thread. Empty space alone read as a dropout; this gives the
   eye a landmark and carries the argument from "here is the product" to
   "here is what happens when the week goes wrong". */
.seam{
  margin-top: 122px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.seam::before,
.seam::after{
  content: "";
  flex: 1 1 0;
  height: 1px;
}
.seam::before{ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.17)); }
.seam::after { background: linear-gradient(90deg, rgba(255,255,255,0.17), transparent); }
.seam p{
  margin: 0;
  flex: none;
  font-size: 19px;
  letter-spacing: -0.022em;
  color: var(--t3);
  white-space: nowrap;
}
.seam em{
  font-family: "Instrument Serif", "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 1.16em;
  letter-spacing: -0.03em;
  color: var(--t1);
}

.coach{
  /* the seam above already opens the gap; the phone is tall and
     align-items:center lifts it ~186px above its copy */
  margin-top: 112px;
  display: grid;
  grid-template-columns: 1fr minmax(268px, 336px);
  gap: 76px;
  align-items: center;
}
.coach-copy > p{
  margin: 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}
.coach-points{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}
.coach-points li{
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t2);
}
.coach-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(186,208,255,0.55);
}
/* the chips: four things a member actually sends, each replaying the thread */
.coach-try{ margin-top: 28px; }
.coach-try-label{
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--t4);
}
.coach-try-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 12.5px; letter-spacing: -0.001em;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: var(--t2); cursor: pointer;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
@media (hover: hover){ .chip:hover{ border-color: rgba(255,255,255,0.32); color: #fff; } }
.chip.is-on{ border-color: rgba(186,208,255,0.6); background: rgba(186,208,255,0.1); color: #fff; }
.chip:focus-visible{ outline: 2px solid rgba(186,208,255,0.7); outline-offset: 2px; }
.coach-device .device-frame{ max-width: 336px; }
.coach-device .device-screen{
  background: #05080c;
  display: flex;
  flex-direction: column;
}
/* the component sizes to its container; inside a 9/19 frame it needs to fill
   the leftover height and sit on the bottom the way a real thread does.
   margin-top on the first row rather than justify-content, so that if the
   thread ever outgrows the screen the top stays reachable by scrolling. */
.coach-device .chat{ flex: 1 1 auto; height: auto; min-height: 0; }
.chat--app > *:first-child{ margin-top: auto; }

/* app chrome, composed around the component rather than inside it */
.chat-appbar{
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,0.035);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.chat-avatar{
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #d5e2ff, #9db4ee);
  box-shadow: 0 0 14px rgba(186,208,255,0.34);
}
.chat-avatar svg{ width: 15px; height: 15px; display: block; }
.chat-who{ display: grid; gap: 1px; min-width: 0; }
.chat-who b{
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.001em;
  color: #e9edf4;
}
.chat-who span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--t4);
}
.chat-who span::before{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ee7a8;
  box-shadow: 0 0 8px rgba(110,231,168,0.7);
}

/* ================= launch phases ================= */
.phases{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.phase{
  padding: 34px 28px 36px;
}
.phase-days{
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--t4);
}
.phase-n{
  margin-top: 14px;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(255,255,255,0.15);
  font-variant-numeric: tabular-nums;
}
.phase h3{
  margin-top: 12px;
  font-size: var(--h3);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
}
.phase p{
  margin-top: 11px;
  font-size: 14.5px;
  line-height: 1.62;
  letter-spacing: -0.008em;
  color: var(--muted);
}

/* ================= faq ================= */
.faq{ border-top: 1px solid rgba(255,255,255,0.12); }
.faq details{ border-bottom: 1px solid rgba(255,255,255,0.1); }
.faq summary{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 25px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.013em;
  color: #fff;
  transition: color .3s ease;
}
.faq summary::-webkit-details-marker{ display: none; }
@media (hover: hover){ .faq summary:hover{ color: #fff; } }
.faq summary::after{
  content: "";
  width: 11px; height: 11px;
  flex: none;
  margin-top: 5px;
  border-right: 1.5px solid rgba(255,255,255,0.45);
  border-bottom: 1.5px solid rgba(255,255,255,0.45);
  transform: rotate(45deg);
  transition: transform .32s cubic-bezier(0.16,1,0.3,1);
}
.faq details[open] summary::after{ transform: rotate(-135deg); margin-top: 9px; }
.faq details p{
  max-width: 760px;
  padding-bottom: 28px;
  font-size: 15px;
  line-height: 1.68;
  letter-spacing: -0.009em;
  color: var(--muted);
}

/* the vortex canvas sits behind the CTA copy; .cta's children are all
   position:relative, so they stack above it without any z-index juggling */
.cta > .vortex{        /* beats the existing `.cta > *{position:relative}` */
  position: absolute;
  inset: -60px 0 -120px;   /* let the dust fall past the section edges */
  pointer-events: auto;    /* it has a hover reaction */
  opacity: 0.55;           /* was 0.4 — the whole effect was dimmed too far */
}
@media (prefers-reduced-motion: reduce){ .vortex{ display: none; } }

@media (prefers-reduced-motion: reduce){
  .typing-dot{ animation: none; opacity: 0.5; }
  .js .chat .msg-item{ opacity: 1; transform: none; }
  .js .chat.is-in .msg-item{ transition: none; }
}

/* ================= closing CTA ================= */
.cta{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 130px var(--section-x) 140px;
  scroll-margin-top: 86px;
  overflow: hidden;
}
.cta::after{
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 900px;
  height: 640px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(186,208,255,0.07), transparent 70%);
}
.cta > *{ position: relative; }
.cta h2{
  max-width: 800px;
  font-size: var(--h2);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.1;
  color: #fff;
}
.cta h2 em{
  font-family: "Instrument Serif", "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.cta p{
  margin-top: 20px;
  max-width: 460px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.58;
  letter-spacing: -0.01em;
}
.cta .hero-actions{ margin-top: 32px; }
.cta-fine{
  margin-top: 24px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--t5);
}

/* ================= site footer ================= */
.foot-legal a{ text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover){ .foot-legal a:hover{ color: rgba(198,216,255,0.95); } }
.site-foot{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px var(--section-x);
  padding-bottom: max(30px, env(safe-area-inset-bottom));
  font-size: 12px;
  letter-spacing: 0em;
  color: var(--t5);
}
.site-foot .logo{ font-size: 14px; color: var(--t2); }
.site-foot .logo svg{ width: auto; height: 16px; }

/* ---------- responsive ---------- */
@media (min-width: 1600px){
  :root{
    --logo: 17px; --logo-mark: 24px; --nav: 15px; --nav-h: 44px;
    --btn: 15px; --btn-h: 44px; --hero-btn-h: 48px;
    --h1: 64px; --lede: 18px; --badge: 13.5px; --stat-size: 15px;
    --header-y: 28px; --header-x: 64px; --stats-x: 96px; --stats-y: 44px;
    --copy-max: 980px; --lede-max: 540px;
  }
  .nav a{ padding: 0 20px; }
  .badge{ margin-bottom: 26px; }
  .lede{ margin-top: 22px; }
  .hero-actions{ margin-top: 30px; gap: 12px; }
  .stat-icon{ width: 22px; height: 22px; }
}

@media (min-width: 1920px){
  :root{
    --logo: 18px; --logo-mark: 26px; --nav: 16px; --nav-h: 48px;
    --btn: 16px; --btn-h: 48px; --hero-btn-h: 52px;
    --h1: 76px; --lede: 20px; --badge: 14.5px; --stat-size: 16px;
    --header-y: 32px; --header-x: 80px; --stats-x: 120px; --stats-y: 52px;
    --copy-max: 1120px; --lede-max: 620px;
  }
  .nav{ gap: 10px; }
  .nav a{ padding: 0 22px; }
  .btn{ padding: 0 22px; }
  .badge{ padding: 10px 15px; }
}

@media (min-width: 2560px){
  :root{
    --h1: 88px; --lede: 22px; --header-x: 120px; --stats-x: 160px;
    --copy-max: 1280px; --lede-max: 680px;
  }
}

@media (min-width: 1280px) and (max-width: 1599px){
  :root{
    --h1: 54px; --lede: 16px; --header-x: 48px; --stats-x: 80px; --copy-max: 900px;
  }
}

@media (min-width: 901px) and (max-width: 1279px){
  :root{
    --logo: 15px; --nav: 13px; --nav-h: 36px;
    --btn: 13px; --btn-h: 38px; --hero-btn-h: 40px;
    --h1: 42px; --lede: 15px; --badge: 12px; --stat-size: 12.5px;
    --header-y: 16px; --header-x: 28px; --stats-x: 36px; --stats-y: 28px;
    --hero-gap: 64px; --copy-max: 760px; --lede-max: 440px;
  }
  .nav a{ padding: 0 14px; }
  .badge{ margin-bottom: 16px; }
  .lede{ margin-top: 14px; }
  .hero-actions{ margin-top: 20px; }
}

@media (min-width: 901px) and (max-height: 850px){
  :root{ --header-y: 14px; --stats-y: 24px; --hero-gap: 48px; --h1: 40px; }
  .badge{ margin-bottom: 12px; }
  .lede{ margin-top: 12px; }
  .hero-actions{ margin-top: 16px; }
}

@media (min-width: 901px) and (max-height: 720px){
  :root{
    --h1: 34px; --lede: 14px; --hero-gap: 32px; --stats-y: 18px;
    --nav-h: 30px; --btn-h: 34px; --hero-btn-h: 36px;
  }
  .badge{ margin-bottom: 8px; }
}

/* ---------- phone ---------- */
@media (max-width: 900px){
  :root{
    --logo: 16px; --btn: 15px; --btn-h: 46px; --hero-btn-h: 48px;
    --h1: 36px; --lede: 16.5px; --badge: 13.5px; --stat-size: 15px;
    --header-y: 16px; --header-x: 18px; --stats-x: 20px; --stats-y: 28px;
    --hero-gap: 36px;
  }
  .header{
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    padding-top: max(var(--header-y), env(safe-area-inset-top));
    padding-left: max(var(--header-x), env(safe-area-inset-left));
    padding-right: max(var(--header-x), env(safe-area-inset-right));
  }
  .logo, .header-cta, .burger{ z-index: 80; }
  .burger{ display: grid; }
  .menu-backdrop{ display: block; }
  body.menu-open .menu-backdrop{
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  .nav{
    position: fixed;
    inset: 0;
    /* reset the desktop grid alignment: box alignment applies to abspos boxes,
       and `center` makes the nav shrink-to-fit instead of filling the viewport */
    justify-self: stretch;
    align-self: stretch;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 96px 22px 32px;
    padding-top: max(96px, calc(env(safe-area-inset-top) + 88px));
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }
  body.menu-open .nav{ opacity: 1; visibility: visible; }
  .nav a{
    width: 100%;
    height: 56px;
    font-size: 19px;
    border-radius: 10px;
  }

  .hero{ padding: 20px 20px 64px; align-items: flex-end; }
  .hero-copy, .lede{ max-width: 100%; }

  body.menu-open{ overflow: hidden; }

  /* convolution is too costly on phone GPUs — cheap punch only */

  /* Keep the same static content ground on phones. */
  .calc-out, .panel--pulse{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(165deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025));
  }
  .panel--pulse{   /* re-state the accent the line above just flattened */
    background:
      linear-gradient(165deg, rgba(186,208,255,0.12), rgba(186,208,255,0.02) 48%),
      linear-gradient(165deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025));
  }

  .stats{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .stat{ white-space: normal; }
}

/* Short viewports: a phone's browser chrome can leave under 700px of height,
   and the hero copy is ~480px plus the stats. Bottom-aligned in a box that
   small, the top of the copy slides under the fixed header -- the badge ended
   up behind "Book a call". Below this height the hero stops shrinking, starts
   below the header and simply scrolls, which is what the rest of the page
   already does. Declared after the max-width block above on purpose: both are
   (0,1,0), so the later one has to be this one. */
@media (max-height: 760px){
  .hero{
    align-items: flex-start;
    padding-top: 88px;
    min-height: max-content;
  }
}

/* the wrapped state only happens in this band, and reads as deliberate
   centred rather than a stray stat pushed to the left */
@media (min-width: 901px) and (max-width: 1120px){
  .stats{ justify-content: center; column-gap: 30px; }
}

@media (max-width: 360px){
  /* logo + CTA + burger need ~323px; drop the wordmark on the narrowest phones */
  .logo span{ display: none; }
}
@media (max-width: 560px){
  :root{ --h1: 34px; --lede: 16px; --header-x: 16px; }
  .hero-actions{ flex-direction: column; width: 100%; gap: 10px; }
  .hero-actions .btn{ width: 100%; }
  /* the secondary reads as secondary: no fill, quieter rim, so the primary
     is unmistakable instead of two matching slabs competing */
  .hero-actions .btn-ghost{
    background: rgba(255,255,255,0.03);
    border-color: var(--t5);
    color: var(--t1);
    box-shadow: none;
  }
}

/* ---------- responsive: new sections ---------- */
@media (min-width: 1600px){
  :root{ --section-y: 140px; --section-x: 64px; --h2: 60px; }
  .split{ gap: 110px; }
  .calc-big{ font-size: 70px; }
  .figure-n{ font-size: 56px; }
  .section-sub{ font-size: 17px; }
}
@media (min-width: 1920px){
  :root{ --section-y: 156px; --section-x: 80px; --h2: 70px; }
  .section, .site-foot{ max-width: 1480px; }
  .calc-big{ font-size: 82px; }
  .figure-n{ font-size: 64px; }
}
@media (max-width: 1279px){
  :root{ --section-y: 104px; --section-x: 28px; --h2: 38px; }
  .section-head{ grid-template-columns: 1fr; gap: 18px; margin-bottom: 52px; }
  .section-sub{ max-width: 620px; padding-bottom: 0; }
  .split{ grid-template-columns: 1fr; gap: 52px; }
  .split-head{ position: static; }
  .split-head .section-sub{ max-width: 620px; }
  .grid-features{ grid-template-columns: repeat(2, 1fr); }
  .versus{ grid-template-columns: 1fr; }
  .ladder{ grid-template-columns: repeat(2, 1fr); }
  .calc-big{ font-size: 50px; }
  .figure-n{ font-size: 40px; }
  .figure{ padding: 36px 22px; }
  .cta{ padding: 104px var(--section-x) 112px; }
}
@media (max-width: 900px){
  :root{ --section-y: 82px; --section-x: 20px; --h2: 31px; }
  .section-head{ margin-bottom: 40px; }
  .grid-features{ grid-template-columns: 1fr; }
  .voice{ grid-template-columns: 1fr; gap: 12px; padding: 26px 24px 28px; }
  .voice-label{ padding-top: 0; }
  .voice q{ font-size: 18px; }
  .feature{ padding: 30px 24px 32px; }
  .calc{ grid-template-columns: 1fr; }
  .calc-panel, .calc-out, .panel{ padding: 28px; }
  .panel--pulse{ margin-top: 0; padding: 28px; }   /* nothing to sit above once stacked */
  .calc-big{ font-size: 44px; }
  .compare{ grid-template-columns: 1fr; }
  .figures{ grid-template-columns: 1fr; }
  .people, .versus, .help, .ladder{ grid-template-columns: 1fr; }
  .figure{ padding: 32px 20px; }
  .figure-n{ font-size: 40px; }
  .steps{ padding-left: 46px; }
  .steps::before, .steps-fill{ left: 15px; }
  .step-dot{ left: -46px; width: 32px; height: 32px; font-size: 11px; top: -2px; }
  .step{ padding-bottom: 40px; }
  :root{ --h3: 17.5px; --h3-dense: 16px; }   /* both tiers step down together */
  .scroll-cue{ display: none; }
  .cta{ padding: 80px var(--section-x) 88px; }
  .cta .hero-actions{ width: 100%; }
  .site-foot{ justify-content: center; text-align: center; }
}
@media (min-width: 901px) and (max-height: 850px){
  .scroll-cue{ display: none; }
}

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

}
@media (max-width: 1279px){
  .sth{ font-size: 29px; margin-top: 76px; max-width: 30ch; }
}
@media (max-width: 900px){
  .sth{ font-size: 24px; margin-top: 60px; max-width: none; }
  .phase{ padding: 28px 24px 30px; }
  .phase-n{ font-size: 34px; }
  .faq summary{ font-size: 15.5px; gap: 18px; padding: 21px 0; }
  .faq details p{ font-size: 14.5px; padding-bottom: 24px; }
}

@media (max-width: 1279px){
  .stage{ --fan: 168px; grid-template-columns: minmax(250px, 300px) 1fr; gap: 40px; }
  .stack{ min-height: 450px; }
  .device-frame{ max-width: 200px; }
  .seam{ margin-top: 96px; gap: 24px; }
  .seam p{ font-size: 17.5px; }
  .coach{ gap: 48px; grid-template-columns: 1fr minmax(250px, 300px); margin-top: 88px; }
  .coach-device .device-frame{ max-width: 300px; }
}
@media (max-width: 900px){
  .stage{ grid-template-columns: 1fr; gap: 26px; }
  .tour{ display: none; }
  /* a swipe-through strip; the captions take over from the hidden rail */
  .stack{
    display: flex; gap: 16px;
    min-height: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 8px max(0px, calc((100% - 236px) / 2)) 60px;
    margin-bottom: -60px;
    scrollbar-width: none;
  }
  .stack::-webkit-scrollbar{ display: none; }
  .stack .device{ flex: 0 0 236px; grid-area: auto; scroll-snap-align: center; }
  /* Native horizontal swiping; no geometry reads or scaling while dragging. */
  .stack .device[data-pos] .device-pos{
    transform: none;
    filter: none;
    opacity: 1;
    scale: 1;
    transition: none;
  }
  .stack .device[data-pos]{ cursor: default; }
  .stack .device-caption{
    opacity: 1;
  }
  .stack .device-caption{ display: block; }
  .device-frame{ max-width: 236px; }
  .seam{ margin-top: 76px; gap: 16px; }
  .seam p{ font-size: 15.5px; white-space: normal; text-align: center; }
  .coach{ grid-template-columns: 1fr; gap: 46px; margin-top: 72px; }
  .coach-copy > p{ max-width: none; }
  .coach-device .device-frame{ max-width: 268px; }
}

/* Narrow phones (iPhone SE and similar). The header row is logo + CTA +
   burger; at its normal mobile sizing that needs ~315px, leaving only about
   5px of slack on a 320px viewport — one slightly wider font render and the
   CTA clips. Tightening the gutter and the button gives ~120px of headroom.

   Deliberately last in the stylesheet: the 560px block also sets --header-x,
   and at equal specificity the later rule wins. */
@media (max-width: 359px){
  :root{ --header-x: 12px; }
  .header-cta{ font-size: 12.5px; padding-left: 13px; padding-right: 13px; }
}


/* ============================================================================
   Motion package: ticker, brand personaliser, live earnings, launch feed,
   magnetic CTAs. Everything composes with the existing reveal/3D system by
   using `translate`/`scale` or pseudo-elements rather than `transform`.
   ============================================================================ */
.ticker{
  overflow: hidden; margin: 6px 0 0; padding: 15px 0;
  border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07);
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track{ display: flex; width: max-content; animation: ticker 44s linear infinite; will-change: transform; }
@media (hover: hover){ .ticker:hover .ticker-track{ animation-play-state: paused; } }
.ticker span{
  display: flex; align-items: center; gap: 40px; padding-right: 40px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--t4); white-space: nowrap;
}
.ticker i{ width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .75; }
@keyframes ticker{ to{ transform: translateX(-50%); } }

.brandify{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 4px 0 34px; }
.brandify label{ font-size: 11.5px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--t4); }
.brandify input{
  font: inherit; font-size: 15px; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px;
  padding: 10px 17px; min-width: 250px; outline: none;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.brandify input::placeholder{ color: var(--t5); }
.brandify input:focus{ border-color: rgba(186,208,255,0.6); box-shadow: 0 0 0 4px rgba(186,208,255,0.13); background: rgba(255,255,255,0.07); }
.brandify-hint{ font-size: 13px; color: var(--t5); }
.device-screen::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 30%, rgba(198,216,255,0.55), rgba(186,208,255,0.12) 60%, transparent 80%);
}
.device-screen.flash::after{ animation: screenflash .9s ease-out; }
@keyframes screenflash{ 0%{ opacity: 0; } 18%{ opacity: 1; } 100%{ opacity: 0; } }

/* the ramp: the calculator's own caveat ("a peak, not a steady state") drawn.
   Twelve bars, month one full height, redrawn on every slider move. */
.ramp{ margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
.ramp-head{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.02em; color: var(--t4); }
.ramp-head span{ text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }
.ramp-head b{ font-weight: 500; font-size: 13px; color: var(--t2); letter-spacing: -0.003em; font-variant-numeric: tabular-nums; }
.ramp-head b span{ color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 13px; }
.ramp-bars{ display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-top: 14px; }
.ramp-bars i{
  flex: 1 1 0; height: var(--h, 60%); border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(186,208,255,0.85), rgba(186,208,255,0.25));
  transition: height .5s cubic-bezier(0.16,1,0.3,1);
}
.ramp-bars i:first-child{ background: linear-gradient(180deg, #fff, rgba(255,255,255,0.45)); }
.ramp-axis{ display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t5); }
.ramp-note{ margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--t5); }
.ramp-note b{ color: var(--t3); font-weight: 500; font-variant-numeric: tabular-nums; }
.calc-live{ margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--t4); }

/* ================= #fit ================= */
.fit{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items: start; }
.fit-qs{
  padding: 34px 38px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}
.fit-q{ margin-bottom: 22px; }
.fit-q > b{ display: block; font-weight: 500; font-size: 14px; letter-spacing: -0.006em; color: var(--t2); margin-bottom: 10px; }
.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.fit-out{
  position: relative;
  padding: 38px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);
  background: linear-gradient(165deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)), rgba(10,14,19,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.fit-label{ display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--t4); }
.fit-verdict{ margin: 10px 0 20px; font-size: 30px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.15; color: #fff; }
.fit-rows{ border-top: 1px solid rgba(255,255,255,0.12); }
.fit-row{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.055);
  font-size: 13.5px; letter-spacing: -0.005em; color: var(--muted);
}
.fit-row b{ font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.fit-note{ margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--t4); }
.fit-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.fit-actions .btn[disabled]{ opacity: .45; cursor: default; }
/* below the definitions above on purpose: at equal specificity the later
   rule wins, so these must come after .lead and .fit, not in the shared
   900px block further up */
@media (max-width: 900px){
  .lead{ grid-template-columns: 1fr; padding: 20px 18px; }
  .fit{ grid-template-columns: 1fr; }
  .fit-qs{ padding: 24px 20px 8px; }
  .fit-out{ padding: 26px 22px; }
  .fit-verdict{ font-size: 26px; }
}
.calc-live b{ color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }

.cart-feed{ margin: 18px 0 6px; padding: 13px 13px 9px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); }
.cart-feed-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t5); }
.cart-feed-head b{ font-size: 17px; letter-spacing: -0.013em; color: var(--accent); font-variant-numeric: tabular-nums; }
.cart-toasts{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 154px; }
.cart-toasts li{
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 11px 8px 26px; border-radius: 9px;
  background: linear-gradient(90deg, rgba(186,208,255,0.14), rgba(186,208,255,0.04) 60%, rgba(255,255,255,0.03));
  border: 1px solid rgba(186,208,255,0.26);
  box-shadow: 0 0 18px -6px rgba(186,208,255,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  font-size: 13px; color: var(--t2); animation: toastin .55s var(--pop) both;
}
/* a live dot, so each row reads as an event rather than a table line */
.cart-toasts li::before{
  content: ""; position: absolute; left: 11px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #d6e4ff;
  box-shadow: 0 0 6px 1px rgba(186,208,255,0.9), 0 0 14px 3px rgba(186,208,255,0.45);
}
/* the flash as a member lands: opacity on a pseudo-element, so it stays on
   the compositor however many rows are animating */
.cart-toasts li::after{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(214,228,255,0.85), 0 0 28px 4px rgba(186,208,255,0.6), inset 0 0 18px rgba(186,208,255,0.22);
  opacity: 0; animation: toastglow 1.8s ease-out both;
}
@keyframes toastglow{ 0%{ opacity: 0; } 18%{ opacity: 1; } 100%{ opacity: 0; } }
/* the newest member stays lit brightest */
.cart-toasts li:first-child{
  border-color: rgba(214,228,255,0.5);
  box-shadow: 0 0 26px -4px rgba(186,208,255,0.6), 0 0 0 1px rgba(186,208,255,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
}
.cart-toasts li > b{ color: #e6eeff; text-shadow: 0 0 12px rgba(186,208,255,0.75); }
.cart-feed-head b{ text-shadow: 0 0 16px rgba(186,208,255,0.65); }
.cart-toasts li b{ color: #fff; font-weight: 500; }
.cart-toasts li em{ font-style: normal; color: var(--t4); font-size: 12px; }
.cart-toasts li.out{ animation: toastout .32s ease forwards; }
@keyframes toastin{ from{ opacity: 0; translate: 0 -12px; scale: .96; } to{ opacity: 1; translate: 0 0; scale: 1; } }
@keyframes toastout{ to{ opacity: 0; translate: 0 8px; } }

.btn-solid.is-near{ box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,0.4), 0 0 38px rgba(186,208,255,0.5), 0 10px 22px rgba(255,255,255,0.14); }

@media (max-width: 560px){
  .brandify input{ min-width: 0; width: 100%; }
  .lead-row{ flex-wrap: wrap; }
  .lead-row .btn, .lead--cta .btn{ width: 100%; }
  .lead--cta{ flex-basis: 100%; }
  .ticker span{ gap: 26px; padding-right: 26px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
  .cart-toasts li{ animation: none; }
  .device-screen.flash::after{ animation: none; }
  .device-pos{ transition: none; }
  /* the strip's proximity dimming is motion too: show every phone plainly */
  .stack .device[data-pos] .device-pos{ opacity: 1; scale: 1; }
  .stack .device-caption{ opacity: 1; }
}

/* ================= coarse pointers =================
   A finger is about 9mm across; these controls were 31-37px tall. The target
   grows through padding and min-height so nothing shifts position, and the
   hover-only layers are never promoted on a device that cannot hover. */
@media (pointer: coarse){
  .chip{
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding-top: 10px; padding-bottom: 10px;
  }
  .range{ height: 44px; }
  .burger{ width: 44px; height: 44px; }
  .brandify input, .lead input, .fit input{ min-height: 44px; }
  /* inline-flex rather than more padding, so the footer keeps its rhythm
     while each link still answers to a fingertip */
  .site-foot a, .foot-legal a, .logo{
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .zoom-close{ width: 44px; height: 44px; }
  .device-frame, .device-pos, .device-par{ will-change: auto; }
}

/* --- ambient: a slow radial drift on four grounds, so the page is never a
       static black corridor. transform only, so it lives on the compositor. --- */
#problem::before, #platform::before, #versus::before, #story::before{
  /* inset 10%: at scale 1.14 plus a 3% drift the box still stays inside the
     section, so it never widens the page. Transforms count toward overflow. */
  content: ""; position: absolute; inset: 10%; pointer-events: none;
  background: radial-gradient(ellipse 58% 50% at var(--gx, 28%) var(--gy, 22%), rgba(186,208,255,0.085), transparent 72%);
  animation: glowdrift var(--gd, 34s) ease-in-out infinite alternate;
  will-change: transform;
}
#platform::before{ --gx: 74%; --gy: 20%; --gd: 41s; }
#versus::before{   --gx: 22%; --gy: 72%; --gd: 37s; }
#story::before{    --gx: 68%; --gy: 58%; --gd: 45s; }
@keyframes glowdrift{ from{ transform: translate(-3%, -2%) scale(1); } to{ transform: translate(3%, 4%) scale(1.14); } }

/* --- typewriter caret on the three quotes --- */
.voice q.typing::after{ content: "\258D"; margin-left: 2px; color: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  #problem::before, #platform::before, #versus::before, #story::before{ animation: none; }
  .voice q.typing::after{ animation: none; }
}

/* --- accent, placed last: .rung--anchor is redeclared further up, and at
       equal specificity the later rule wins. The two big figure treatments
       are painted by a gradient under background-clip:text, so they are
       tinted at the gradient instead -- colour cannot reach them. --- */
.rung--anchor .rung-price{ color: var(--accent); }
/* Keep product motion confined to the selected phone, with no layered drift. */
.stage .device-par{ transform:none; will-change:auto; }
.stage .device-frame{ will-change:auto; }
.stack .device[data-pos="0"] .device-pos{ opacity:1; }
.scroll-progress i{ width:100%; transform:scaleX(0); transform-origin:left; }
@media (max-width:900px){
  .stack .device[data-pos] .device-pos{ opacity:1; }
}