/* ==========================================================================
   Offliner: Ambient Glass for the web
   Port of LOCKIN/OfflinerDesignSystem.swift.

   Philosophy (read before adding anything):
     1. Ground -> bloom -> glass -> content. Never place content on the ground.
     2. One hero number per section. If you have two big numbers, one is wrong.
     3. Colour is state, not decoration. Grey until it needs to mean something.
     4. Semibold is the ceiling. Emphasis is bigger and airier, never bolder.
     5. Every panel uses .glass or .solid-glass. No bespoke card styling.

   No build step. No dependencies. One file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Grounds */
  --bg:          #0B0C12;
  --bg-deep:     #070810;
  --solid-card:  #2E3140;
  --solid-card2: #1C1E29;

  /* Text ramp. Pure white is reserved for the single hero figure. */
  --text-hi:    #FFFFFF;
  --text:       #E9E9ED;
  --text-mid:   #B2B6CA;
  --text-low:   #9397AB;
  --text-faint: #75798C;

  /* State accents */
  --focus:      #F0632B;
  --focus-deep: #C8391B;
  --distract:   #F16A5A;
  --limited:    #E8B44A;
  --allowed:    #34D399;
  --neutral:    #6E74A6;
  --neutral-hi: #8A90C0;

  /* Bloom hues */
  --bloom-warm: #F0632B;
  --bloom-cool: #786EDC;

  /* Radius */
  --r-hero:   26px;
  --r-card:   22px;
  --r-inner:  16px;
  --r-button: 18px;
  --r-pill:   999px;
  --r-chip:   8px;

  /* Rhythm. Denser than a typical marketing site, matching the app. */
  --pad-card:    22px;
  --gap-card:    16px;
  --gap-element: 12px;
  --inset:       24px;
  --max:         1180px;
  --max-prose:   720px;

  /* Section rhythm */
  --section-y:   clamp(72px, 11vw, 132px);

  /* Motion. Nothing fades slower than 0.35s. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.35s;

  /* Type */
  --font: "Avenir Next", "Avenir Next LT Pro", Avenir, -apple-system,
          BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
          Inter, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-mid);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection { background: rgba(240, 99, 43, 0.28); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 600;          /* Semibold is the ceiling. */
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.6vw, 4.5rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem);   letter-spacing: -0.028em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem);   line-height: 1.22; }
h4 { font-size: 1.03rem; line-height: 1.3; letter-spacing: -0.012em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--text); font-weight: 600; }

/* Section eyebrow. Always uppercase, always the smallest thing on screen. */
.label {
  display: block;
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 18px;
}
.label--focus { color: var(--focus); }

/* Standfirst under a heading. */
.lede {
  font-size: clamp(1.03rem, 1.5vw, 1.16rem);
  line-height: 1.68;
  color: var(--text-low);
  max-width: 60ch;
}

.prose { max-width: var(--max-prose); }
.prose p { color: var(--text-low); font-size: 1.03rem; line-height: 1.75; }
.prose h3 { margin: 2.4em 0 0.7em; color: var(--text); }
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.3em; padding-left: 1.15em; color: var(--text-low); }
.prose li { margin-bottom: 0.5em; }
.prose a { color: var(--focus); border-bottom: 1px solid rgba(240,99,43,0.35); }
.prose a:hover { border-bottom-color: var(--focus); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--inset);
}

section { position: relative; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(52px, 7vw, 84px); }

.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { margin-inline: auto; }
.section-head .lede { margin-top: 20px; }

/* Hairline divider between major bands. */
.rule {
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.09) 22%, rgba(255,255,255,0.09) 78%, transparent);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Ambient background: ground plus blooms
   Warm bloom is energy and sits near the hero. Cool bloom is the calm
   counterweight and sits opposite and lower.
   -------------------------------------------------------------------------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
  contain: strict;
}

.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.ambient::before {
  width: 78vw; height: 78vw;
  max-width: 1000px; max-height: 1000px;
  top: -34vw; right: -22vw;
  background: radial-gradient(circle,
    rgba(240,99,43,0.40) 0%, rgba(240,99,43,0.16) 42%, transparent 68%);
}

.ambient::after {
  width: 66vw; height: 66vw;
  max-width: 860px; max-height: 860px;
  bottom: -26vw; left: -20vw;
  background: radial-gradient(circle,
    rgba(120,110,220,0.24) 0%, rgba(120,110,220,0.09) 45%, transparent 70%);
}

/* A local bloom behind a single section, for pages that scroll past the fixed one. */
.bloom {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
}
.bloom--warm {
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(240,99,43,0.22), transparent 68%);
}
.bloom--cool {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(120,110,220,0.20), transparent 70%);
}

/* --------------------------------------------------------------------------
   6. Glass
   Three layers make it read as glass and not a grey box: a diagonal white
   sheen, the frosted material, and a lit top edge.

   .glass       real backdrop blur, for pinned or static panels
   .solid-glass solid twin, visually identical, for anything in a long scroll
   -------------------------------------------------------------------------- */

.glass,
.solid-glass {
  position: relative;
  border-radius: var(--r-card);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  isolation: isolate;
}

.glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    rgba(26, 28, 40, 0.55);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}

.solid-glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    linear-gradient(135deg, rgba(46,49,64,0.92), rgba(28,30,41,0.88));
}

/* Crisp lit top edge. */
.glass::before,
.solid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.20), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* Optional state tint. Never a large flat fill, only a wash. */
.tint-focus    { background-color: rgba(240, 99, 43, 0.07); }
.tint-allowed  { background-color: rgba(52, 211, 153, 0.06); }
.tint-neutral  { background-color: rgba(110, 116, 166, 0.07); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.card {
  padding: var(--pad-card);
  border-radius: var(--r-card);
}

.card--lg { padding: clamp(24px, 3.2vw, 38px); }

.card h3 { margin-bottom: 10px; }
.card p  { color: var(--text-low); font-size: 0.95rem; line-height: 1.62; }

.grid { display: grid; gap: var(--gap-card); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card--hover { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card--hover:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.18); }

/* Icon tile that sits at the top of a feature card. */
.tile {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--focus);
}
.tile svg { width: 21px; height: 21px; }
.tile--neutral { color: var(--neutral-hi); }
.tile--allowed { color: var(--allowed); }
.tile--limited { color: var(--limited); }

/* Icons are line only: 1.7 stroke, round caps and joins, 24 viewBox. */
.ico {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   8. Buttons
   The orange gradient CTA is the only place colour is allowed to flood.
   Buttons do not bounce. A small press scale is the whole feedback.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-button);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  white-space: nowrap;
  transition: transform 0.16s var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn:active { transform: scale(0.975); }
.btn svg { flex-shrink: 0; }

.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--focus), var(--focus-deep));
  box-shadow: 0 8px 26px rgba(240, 99, 43, 0.30), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.btn--primary:hover {
  box-shadow: 0 12px 34px rgba(240, 99, 43, 0.42), 0 1px 0 rgba(255,255,255,0.22) inset;
}

.btn--glass {
  color: var(--text);
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.13);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.btn--glass:hover { border-color: rgba(255,255,255,0.24); }

.btn--lg { padding: 18px 34px; font-size: 1.03rem; }
.btn--sm { padding: 11px 20px; font-size: 0.88rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.center .btn-row { justify-content: center; }

/* Microcopy that sits directly under a CTA. */
.btn-note {
  margin-top: 16px;
  font-size: 0.83rem;
  color: var(--text-faint);
  letter-spacing: 0.005em;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--focus);
  font-size: 0.92rem;
  font-weight: 600;
  transition: gap var(--dur) var(--ease);
}
.link-arrow:hover { gap: 11px; }

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  background: rgba(11, 12, 18, 0.72);
  border-bottom-color: rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--text-hi);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand__mark { width: 26px; height: 26px; border-radius: 7px; }

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav a {
  position: relative;
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--text-low);
  transition: color var(--dur) var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--focus);
}

.header__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.socials { display: flex; align-items: center; gap: 16px; }
.socials a {
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
  line-height: 0;
}
.socials a:hover { color: var(--focus); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

/* Mobile menu */
.burger {
  display: none;
  width: 26px; height: 18px;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.burger span {
  display: block;
  height: 1.5px;
  width: 26px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity 0.2s var(--ease);
  transform-origin: center;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 74px 0 0;
  z-index: 99;
  background: rgba(11, 12, 18, 0.97);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  padding: 34px var(--inset) 48px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur);
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a.mobile-link {
  display: block;
  padding: 18px 0;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mobile-menu .btn { width: 100%; margin-top: 30px; }
.mobile-menu .socials { margin-top: 34px; gap: 24px; }
.mobile-menu .socials svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(120px, 15vw, 168px);
  padding-bottom: clamp(52px, 7vw, 80px);
  text-align: center;
}

.hero h1 { color: var(--text-hi); margin-bottom: 24px; }
.hero .lede { margin-inline: auto; font-size: clamp(1.05rem, 1.7vw, 1.22rem); }

/* Rating pill. Social proof sits above the fold, next to the claim. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  margin-bottom: 26px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.11);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-mid);
  letter-spacing: 0.005em;
}
.pill .stars { display: inline-flex; gap: 1.5px; color: var(--limited); }
.pill .stars svg { width: 12px; height: 12px; fill: currentColor; }

.hero .btn-row { margin-top: 34px; }

/* --------------------------------------------------------------------------
   11. iPhone frame
   Pure CSS. Drop a 1290x2796 screenshot inside and it fills correctly.
   -------------------------------------------------------------------------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 288px;
  aspect-ratio: 1290 / 2796;
  margin-inline: auto;
  border-radius: 13.5%/6.2%;
  padding: 2.6%;
  background: linear-gradient(150deg, #4a4d5c 0%, #16171f 26%, #101119 62%, #434654 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 34px 70px rgba(0,0,0,0.62),
    0 0 90px rgba(240,99,43,0.10);
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 11.4%/5.4%;
  overflow: hidden;
  background: var(--bg-deep);
}

.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dynamic Island */
.phone__island {
  position: absolute;
  top: 2.1%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 3.6%;
  min-height: 18px;
  border-radius: var(--r-pill);
  background: #000;
  z-index: 2;
}

/* Placeholder shown until a real screenshot is dropped in. */
.phone__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(120% 60% at 70% 0%, rgba(240,99,43,0.20), transparent 62%),
    radial-gradient(100% 55% at 20% 100%, rgba(120,110,220,0.16), transparent 65%),
    var(--bg-deep);
}
.phone__placeholder span {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.7;
}
.phone__placeholder .ico { width: 26px; height: 26px; margin-inline: auto; color: var(--text-faint); }

.phone--sm { max-width: 216px; }
.phone--xs { max-width: 178px; }

/* A staggered trio of phones. */
.phone-trio {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 28px);
}
.phone-trio .phone { margin: 0; }
.phone-trio .phone:nth-child(2) { margin-bottom: clamp(20px, 3.4vw, 44px); }

/* --------------------------------------------------------------------------
   12. Logo marquee
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(38px, 6vw, 76px);
  align-items: center;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__item {
  display: flex;
  align-items: center;
  height: 30px;
  color: var(--text-faint);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.62;
  white-space: nowrap;
  transition: opacity var(--dur) var(--ease);
}
.marquee__item:hover { opacity: 1; }
.marquee__item img { max-height: 26px; width: auto; filter: grayscale(1) brightness(1.9); }

/* --------------------------------------------------------------------------
   13. Steps
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; }

.step {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
}
.step__n {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 1px solid rgba(240,99,43,0.42);
  background: rgba(240,99,43,0.10);
  color: var(--focus);
  font-size: 0.86rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   14. Stat blocks. One hero figure per band.
   -------------------------------------------------------------------------- */

.hero-number {
  display: block;
  font-size: clamp(3.6rem, 10vw, 7rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.hero-number sup,
.hero-number .unit {
  font-size: 0.34em;
  font-weight: 600;
  color: var(--text-low);
  letter-spacing: -0.01em;
  vertical-align: baseline;
  margin-left: 4px;
}

.stat { text-align: center; padding: clamp(22px, 2.6vw, 30px); }
.stat__n {
  display: block;
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 9px;
}
.stat__l {
  font-size: 0.79rem;
  color: var(--text-faint);
  letter-spacing: 0.045em;
  line-height: 1.45;
}

/* Small coloured state dot. */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--focus);
}
.dot--distract { background: var(--distract); }
.dot--limited  { background: var(--limited); }
.dot--allowed  { background: var(--allowed); }
.dot--neutral  { background: var(--neutral); }

/* Progress and split bars. State colour as a line, never a flood. */
.bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--focus), var(--focus-deep));
}
.bar--allowed > i { background: var(--allowed); }
.bar--distract > i { background: var(--distract); }

/* --------------------------------------------------------------------------
   15. Split section: text one side, media the other
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.split--media-first > *:first-child { order: 2; }
.split--media-first > *:last-child  { order: 1; }
.split--narrow { grid-template-columns: 1.15fr 0.85fr; }

/* --------------------------------------------------------------------------
   16. Accordion (symptoms). Native details, no JS needed.
   -------------------------------------------------------------------------- */

.acc { display: grid; gap: 10px; }

.acc details {
  border-radius: var(--r-inner);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.acc details[open] { border-color: rgba(255,255,255,0.18); }

.acc summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 22px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  transition: color var(--dur) var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--text-hi); }

.acc summary .chev {
  margin-left: auto;
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--text-faint);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc details[open] summary .chev { transform: rotate(180deg); color: var(--focus); }

.acc__body {
  padding: 0 22px 22px 50px;
  color: var(--text-low);
  font-size: 0.945rem;
  line-height: 1.72;
}
.acc__body .why {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.83rem;
  color: var(--text-faint);
}
.acc__body .why b { color: var(--focus); font-weight: 600; }

/* --------------------------------------------------------------------------
   17. Timeline
   -------------------------------------------------------------------------- */

.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    var(--focus), rgba(240,99,43,0.35) 42%, rgba(255,255,255,0.10));
}

.timeline__item { position: relative; padding-bottom: 34px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -30px; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--focus);
}
.timeline__when {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--focus);
  margin-bottom: 8px;
}
.timeline__item h4 { margin-bottom: 7px; }
.timeline__item p { color: var(--text-low); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   18. Quote / testimonial
   -------------------------------------------------------------------------- */

.quote { padding: clamp(24px, 3vw, 32px); }
.quote blockquote {
  margin: 0 0 20px;
  font-size: 1.03rem;
  line-height: 1.66;
  color: var(--text);
  letter-spacing: -0.008em;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--text-faint);
}
.quote .stars { display: inline-flex; gap: 2px; color: var(--limited); }
.quote .stars svg { width: 13px; height: 13px; fill: currentColor; }

/* Pull quote used as a full-width statement. */
.statement {
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.028em;
  color: var(--text);
  max-width: 20ch;
}
.statement em { font-style: normal; color: var(--focus); }

/* --------------------------------------------------------------------------
   19. Comparison table
   -------------------------------------------------------------------------- */

.compare { padding: 0; overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td {
  padding: 15px 20px;
  text-align: left;
  font-size: 0.92rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.compare thead th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(255,255,255,0.03);
}
.compare tbody th { color: var(--text); font-weight: 500; }
.compare td { color: var(--text-low); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--allowed); }
.compare .no  { color: var(--text-faint); }
.compare col.highlight { background: rgba(240, 99, 43, 0.05); }

/* --------------------------------------------------------------------------
   20. Form (suggestion box)
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-inner);
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: rgba(240,99,43,0.55);
  background: rgba(255,255,255,0.055);
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(7, 8, 16, 0.5);
  padding-block: clamp(52px, 6vw, 72px) 30px;
  margin-top: clamp(60px, 8vw, 100px);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 52px);
  margin-bottom: 46px;
}

.footer__brand p {
  margin-top: 16px;
  max-width: 34ch;
  font-size: 0.885rem;
  line-height: 1.68;
  color: var(--text-faint);
}
.footer__brand .socials { margin-top: 22px; gap: 18px; }
.footer__brand .socials svg { width: 18px; height: 18px; }

.footer__col h4 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 18px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__col a {
  font-size: 0.895rem;
  color: var(--text-low);
  transition: color var(--dur) var(--ease);
}
.footer__col a:hover { color: var(--focus); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   22. Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.07s; }
.reveal[data-d="2"] { transition-delay: 0.14s; }
.reveal[data-d="3"] { transition-delay: 0.21s; }
.reveal[data-d="4"] { transition-delay: 0.28s; }

/* --------------------------------------------------------------------------
   23. Sticky mobile CTA
   Sticky bottom CTA is the single highest-leverage conversion element on
   mobile, so it is the one the small screen gets.
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 90;
  display: none;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sticky-cta.is-in { opacity: 1; transform: none; }
.sticky-cta .btn { width: 100%; }

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */

.mt-0  { margin-top: 0 !important; }
.mt-s  { margin-top: 18px; }
.mt-m  { margin-top: 30px; }
.mt-l  { margin-top: 48px; }
.mb-m  { margin-bottom: 30px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   25. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__brand { grid-column: 1 / -1; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav, .header__right .socials, .header__right .btn { display: none; }
  .burger { display: flex; }
  .split, .split--narrow { grid-template-columns: 1fr; gap: 40px; }
  .split--media-first > *:first-child,
  .split--media-first > *:last-child { order: 0; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-cta { display: block; }
  body { padding-bottom: 0; }
}

@media (max-width: 620px) {
  :root { --inset: 20px; --pad-card: 20px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero { padding-top: 116px; }
  .btn-row .btn { width: 100%; }
  .phone-trio { gap: 8px; }
  .phone-trio .phone { max-width: 30vw; }
  .acc__body { padding-left: 22px; }
  .compare { overflow-x: auto; }
  .compare table { min-width: 520px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   26. Reduced motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .sticky-cta, .ambient, .phone { display: none; }
  body { background: #fff; color: #000; }
}