/* ==========================================================================
   CollecSync — site stylesheet
   Palette is taken directly from the app's lib/app_colors.dart so the site
   and the product read as one thing.
   ========================================================================== */

:root {
  /* Lifted another step: still clearly a dark navy page, but the ground is
     raised enough that surfaces, borders and the phone frames separate from
     it instead of all sinking into one flat mass. */
  --bg:            #16294A;
  --bg-alt:        #1C3157;
  --surface:       rgba(96, 129, 190, 0.34);
  --surface-solid: #2A4268;
  --surface-2:     #334B73;

  /* Every card, step, stat and panel shares this one fill, so the whole
     surface layer can be lightened or darkened from here. */
  --panel:      linear-gradient(168deg, #27436C, #1B2E4E);
  --border:        rgba(163, 186, 214, 0.20);
  --border-strong: rgba(163, 186, 214, 0.34);

  /* Four accents that separate from the navy ground by lightness rather than
     by temperature: a bright sky blue, a gold, and a teal, plus the structural
     blue used for links and UI. Amber is the one warm note, kept because it is
     the only colour here that reads clearly against blue at small sizes.
     The blues are lifted well above the ground so they stay legible on the
     lighter panels — #8AA9CF and #96A7C6 previously fell under 4.5:1 there. */
  --accent:        #9EBAD9;   /* structural blue — links, focus rings, UI */
  --logo-blue:     #138AEC;
  --coral:         #6FC4F0;   /* light blue (name kept so refs still resolve) */
  --amber:         #E8A845;
  --teal:          #5FBFAE;
  --rose:          #E27A9B;

  /* Kept as aliases so existing .purple/.gold class names keep working. */
  --purple:        var(--coral);
  --gold:          var(--amber);

  --text:          #F4F8FF;
  --text-muted:    #C9D6EC;
  --text-dim:      #A6B6D2;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* Shadows lighten with the ground, or they read as black holes on it. */
  --shadow:    0 18px 50px -20px rgba(6, 16, 33, 0.55);
  --shadow-lg: 0 40px 90px -30px rgba(6, 16, 33, 0.62);

  --maxw: 1140px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Backdrop: structure instead of glow. The corner radial "lights" were the
   most dated thing on the page — soft coloured blobs that smear across the
   corners and wash the blue out. In their place: a fine engineering grid that
   fades out toward the bottom, plus a vertical tone shift. It keeps the page
   blue and dark but gives it a surface you can actually see. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    /* 1px grid, two axes. Bright enough to read as deliberate structure. */
    linear-gradient(to right,  rgba(165, 200, 240, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(165, 200, 240, 0.13) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  /* The grid is a texture, not a feature — fade it out before it reaches the
     lower half so it never competes with the content sitting on it. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 72%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 38%, transparent 72%);
}

/* A second fixed layer carries the base colour under the masked grid, so the
   fade reveals solid page colour rather than the browser's default white. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #1B3159 0%, #16294A 46%, #12213C 100%);
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: #A6BFDC; }

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; color: var(--text-muted); }

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

.section { padding-block: clamp(72px, 10vw, 128px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

.lead {
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  color: var(--text-muted);
  max-width: 62ch;
}

.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(22, 41, 74, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--border);
  background: rgba(22, 41, 74, 0.90);
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--text);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--border-strong);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.18s ease;
}

.nav-links a:hover { color: var(--text); }

/* The nav's own colour rule is more specific than .btn-primary, so the button
   inside the nav needs its ink restated or it inherits the muted link grey. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--bg); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--text);
  padding: 8px;
  cursor: pointer;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.94rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  /* Bright sky blue against the deep navy ground — separated by lightness,
     not hue, so it stays the clear focal point of the page. */
  background: linear-gradient(135deg, #5BB8E8, #7FD0F5);
  /* Ink is the page's own navy rather than black — it reads as the background
     punched through the button instead of a foreign colour. */
  color: var(--bg);
  box-shadow: 0 8px 22px -10px rgba(91, 184, 232, 0.55);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #6FC4F0, #93DBFA);
  color: var(--bg);
  box-shadow: 0 14px 30px -10px rgba(91, 184, 232, 0.7);
}

.btn-ghost {
  background: rgba(138, 169, 207, 0.08);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-ghost:hover {
  background: rgba(138, 169, 207, 0.16);
  color: var(--text);
  transform: translateY(-2px);
}

.btn-block { width: 100%; }

/* ── Store buttons ──────────────────────────────────────────────────── */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text);
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.store-btn:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  color: var(--text);
}

.store-btn svg { width: 26px; height: 26px; flex-shrink: 0; }

.store-btn .store-txt { display: flex; flex-direction: column; line-height: 1.2; }
.store-btn .store-small { font-size: 0.68rem; color: var(--text-dim); }
.store-btn .store-big { font-size: 1.02rem; font-weight: 600; }

/* Official store-badge look: black button, white text/logo.
   The Play triangle keeps its four brand colours. */
.store-btn.app-store,
.store-btn.play-store {
  background: #000;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.store-btn.app-store:hover,
.store-btn.play-store:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.store-btn.app-store .store-small,
.store-btn.play-store .store-small { color: rgba(255, 255, 255, 0.72); }

.store-btn.app-store[aria-disabled="true"],
.store-btn.play-store[aria-disabled="true"] { opacity: 0.75; }

.store-btn[aria-disabled="true"] { opacity: 0.62; cursor: default; }
.store-btn[aria-disabled="true"]:hover { transform: none; border-color: var(--border); }

.soon-tag {
  /* order:1 pushes it past the icon and label regardless of markup order;
     margin-left:auto pins it to the trailing edge. No overlap is possible
     because flex gives it real space rather than painting it on top. */
  order: 1;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(111, 179, 170, 0.16);
  color: var(--teal);
  border: 1px solid rgba(111, 179, 170, 0.35);
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(60px, 9vw, 50px) clamp(60px, 8vw, 60px); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}

/* Rotating game name in the hero headline — fades/slides smoothly
   between games. It owns its line so varying name lengths never push
   "of" or "cards." onto orphan lines and the alignment stays intact. */
#gameRotate {
  display: inline-block;
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.35s ease;
}

#gameRotate.is-switching {
  opacity: 0;
  transform: translateY(10px);
}

/* Hero headline runs smaller than section titles so the three lines
   ("Scan hundreds of" / game / "cards. In seconds.") always fit. */
.hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }

/* The rotating game name must never wrap mid-name, whatever the viewport. */
.hero h1 .grad { white-space: nowrap; }

.hero h1 .grad { color: #A8C4E4; }

.hero-note {
  margin-top: 18px;
  font-size: 0.84rem;
  color: var(--text-dim);
}

/* ── Phone carousel (real app screenshots) ──────────────────────────────
   Three devices on one stage. Each has a .pos-0 / .pos-1 / .pos-2 class
   that JS rotates on a timer, so every screen takes a turn in front. The
   positions are fixed; only which phone wears which class changes. */

.phone-stage {
  position: relative;
  /* Not flex: the phones are absolutely positioned and centred by their own
     transforms, so a flex context here would fight them. The stage just
     reserves the space. */
  min-height: 660px;
  perspective: 1700px;
}

.phone-stage::after {
  content: "";
  position: absolute;
  inset: 6% 4% 2%;
  background: radial-gradient(ellipse at center, rgba(138, 169, 207, 0.30), transparent 70%);
  filter: blur(62px);
  z-index: 0;
}

/* Device body. Slightly wider than the 405x900 screenshots so the frame reads
   as a real handset rather than a strip; object-fit:cover on the image takes up
   the small difference by cropping a sliver of top and bottom. */
.phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(300px, 72vw);
  aspect-ratio: 387 / 835;
  border-radius: 42px;
  padding: 10px;
  background: linear-gradient(165deg, #33465F, #131E30);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.9s cubic-bezier(.4, 0, .2, 1),
              opacity 0.9s ease,
              filter 0.9s ease;
  will-change: transform, opacity;
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 33px;
  display: block;
}

/* All three share one origin (the stage centre) and differ only by the
   offset in their transform, so a rotation is a pure slide between slots. */
.phone { top: 50%; left: 50%; margin: 0; }

/* Front and centre. */
.phone.pos-0 {
  z-index: 3;
  transform: translate(-50%, -50%) rotateY(-11deg) rotateX(3deg) scale(1);
  opacity: 1;
  filter: none;
}

/* Behind, offset left. */
.phone.pos-1 {
  z-index: 2;
  transform: translate(-92%, -50%) rotateY(-16deg) rotateX(3deg) scale(0.84);
  opacity: 0.7;
  filter: saturate(0.85) brightness(0.85);
}

/* Behind, offset right. */
.phone.pos-2 {
  z-index: 1;
  transform: translate(-8%, -50%) rotateY(-6deg) rotateX(3deg) scale(0.84);
  opacity: 0.7;
  filter: saturate(0.85) brightness(0.85);
}

/* Narrow screens: only the front phone, centred and barely tilted. */
@media (max-width: 1080px) {
  .phone.pos-1, .phone.pos-2 { opacity: 0; pointer-events: none; }
  .phone.pos-0 { transform: translate(-50%, -50%) rotateY(-7deg) rotateX(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .phone { transition: none; }
  .phone.pos-1, .phone.pos-2 { opacity: 0; }
  .phone.pos-0 { transform: translate(-50%, -50%); }
}

/* Alternating section band — a shade darker than the page ground, which is
   what gives the long page its rhythm. Was an inline style on each section;
   moved here so it follows the palette tokens like everything else. */
.section-alt {
  background: rgba(9, 19, 36, 0.22);
  border-block: 1px solid var(--border);
}



/* Scroll-reveal start state. A class, not an inline style, so the hover tilt's
   transform isn't permanently overridden by a leftover inline `transform`. */
.pre-reveal {
  opacity: 0;
  transform: translateY(16px);
}

.card, .step, .stat, details {
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* ── Corner tilt ────────────────────────────────────────────────────────
   JS writes --rx/--ry from the pointer's position within the element; the
   corner under the cursor rotates away from the viewer. Defaults are 0deg
   so the element is flat until JS says otherwise, and any device that never
   gets the class simply keeps the old flat hover. */
.tiltable {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  --pop: 1;
  /* A short perspective makes the same angle read as a much stronger push,
     because the near corner foreshortens harder. */
  transform: perspective(620px) rotateX(var(--rx)) rotateY(var(--ry))
             translateY(var(--lift)) scale(var(--pop));
  transform-style: preserve-3d;
  /* Short enough to track the cursor closely; the snap back on leave uses
     the same curve. */
  transition: transform 0.18s cubic-bezier(.22, 1, .36, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

.tiltable:hover {
  --lift: -8px;
  --pop: 1.035;
  z-index: 2;      /* lift above neighbours so the raised edge isn't clipped */
}

/* The CTA panel is much larger, so the same angle would look like a slab
   flapping; ease the rotation off and drop the scale. */
.cta-panel.tiltable {
  transform: perspective(1900px) rotateX(calc(var(--rx) * 0.4))
             rotateY(calc(var(--ry) * 0.4)) translateY(var(--lift));
}
.cta-panel.tiltable:hover { --lift: -3px; --pop: 1; }

@media (prefers-reduced-motion: reduce) {
  .tiltable { transition: none; transform: none; }
}

/* ── Logo strip ─────────────────────────────────────────────────────── */

.strip {
  border-block: 1px solid var(--border);
  padding-block: 26px;
  background: rgba(11, 23, 43, 0.40);
}

.strip-label {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.marquee-track img {
  height: 64px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img:hover { transform: scale(1.08); }

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .vf-scanline,
  .vf-card::after { animation: none; }
}

/* ── Feature grid ───────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 52px;
}

.card {
  padding: 30px 26px;
  z-index: 0;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(200, 214, 232, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease;
}

/* Each card carries the tint of its own icon, so the grid reads as four
   colour families rather than six identical slabs. */
.card:nth-child(4n+1) { --tint: 156, 187, 222; }
.card:nth-child(4n+2) { --tint: 111, 196, 240; }
.card:nth-child(4n+3) { --tint: 232, 168, 69; }
.card:nth-child(4n+4) { --tint: 95, 191, 174; }

/* Colour bar across the top edge, drawn out from the centre on hover. */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--tint)), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.3s ease,
              transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.card:hover::after { opacity: 1; transform: scaleX(1); }

.card:hover {
  border-color: var(--border-strong);
  /* Second shadow is tinted, so each card glows in its own colour. */
  box-shadow: 0 30px 60px -22px rgba(6, 16, 33, 0.75),
              0 0 40px -12px rgba(var(--tint), 0.55),
              inset 0 1px 0 rgba(200, 214, 232, 0.16);
}

.card h3 { margin-bottom: 8px; }
.card p  { margin: 0; font-size: 0.94rem; }

.icon-box {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  /* --tint drives fill, ring and glow together, so a colour variant only has
     to override this one value. */
  --tint: 138, 169, 207;
  background:
    linear-gradient(150deg, rgba(var(--tint), 0.30), rgba(var(--tint), 0.10));
  border: 1px solid rgba(var(--tint), 0.42);
  box-shadow: 0 6px 18px -8px rgba(var(--tint), 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: rgb(var(--tint));
  transition: transform 0.28s cubic-bezier(.34, 1.4, .5, 1),
              box-shadow 0.28s ease, background 0.28s ease;
}

.icon-box.teal   { --tint: 95, 191, 174; }
.icon-box.purple { --tint: 111, 196, 240; }   /* light blue */
.icon-box.gold   { --tint: 232, 168, 69; }    /* amber */

/* The tile reacts to the whole card, not just itself — a bigger target and a
   livelier result than hovering the 46px square alone. */
.card:hover .icon-box {
  transform: translateY(-2px) scale(1.08) rotate(-3deg);
  background:
    linear-gradient(150deg, rgba(var(--tint), 0.46), rgba(var(--tint), 0.18));
  box-shadow: 0 12px 26px -8px rgba(var(--tint), 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.icon-box svg { width: 23px; height: 23px; }

/* ── Steps ──────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 52px;
  counter-reset: step;
}

.step {
  padding: 30px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  position: relative;
}

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgb(var(--tint, 156, 187, 222));
  margin-bottom: 14px;
}

/* Each step owns a colour from the set, so the row reads as a progression
   rather than four identical blue numerals. */
.step:nth-child(1) { --tint: 156, 187, 222; }
.step:nth-child(2) { --tint: 111, 196, 240; }
.step:nth-child(3) { --tint: 232, 168, 69; }
.step:nth-child(4) { --tint: 95, 191, 174; }

/* Colour bleeds in along the bottom edge on hover. */
.step::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--tint)), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.step:hover::after { opacity: 0.9; }

.step h3 { margin-bottom: 7px; }
.step p  { margin: 0; font-size: 0.93rem; }

/* ── Split / highlight ──────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}

.privacy-panel {
  padding: 34px 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(111, 179, 170, 0.10), #162743);
  border: 1px solid rgba(111, 179, 170, 0.22);
}

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }

.check-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.check-list svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--teal);
}

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

/* ── Stats ──────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.stat {
  text-align: center;
  padding: 26px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
}

.stat b {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: #9CBBDE;
}

/* Cycle the four brand colours across the row so the stats read as a set. */
.stat:nth-child(1) b { color: #9CBBDE; }
.stat:nth-child(2) b { color: #6FC4F0; }
.stat:nth-child(3) b { color: #E8A845; }
.stat:nth-child(4) b { color: #5FBFAE; }

.stat span { font-size: 0.84rem; color: var(--text-dim); }

/* ── FAQ ────────────────────────────────────────────────────────────── */

.faq { margin-top: 44px; display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }

details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

details[open] { border-color: var(--border-strong); }

summary {
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

details[open] summary::after { transform: rotate(45deg); }

details p { padding: 0 22px 18px; margin: 0; font-size: 0.94rem; }

/* ── CTA ────────────────────────────────────────────────────────────── */

.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 60px) clamp(24px, 5vw, 52px);
  text-align: center;
  /* A darker well than the page, not a lighter slab on top of it. The old
     grey-blue gradient sat almost exactly at the page's own value, so the
     panel read as a washed-out rectangle instead of a deliberate block. */
  background:
    radial-gradient(760px 320px at 50% -10%, rgba(111, 196, 240, 0.16), transparent 68%),
    linear-gradient(168deg, #26406A, #1A2E4E);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(200, 214, 232, 0.10);
  max-width: 840px;
  margin-inline: auto;
}

/* Hairline of accent along the top edge, so the block has a defined start. */
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--coral), transparent);
  opacity: 0.6;
}

.cta-panel .eyebrow { margin-bottom: 14px; }
.cta-panel h2 { margin-bottom: 12px; }
.cta-panel .lead { max-width: 48ch; }

/* Separate the store buttons from the form rather than leaving them adrift. */
.cta-panel .stores {
  justify-content: center;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

/* ── Waitlist form ──────────────────────────────────────────────────── */

.waitlist {
  display: flex;
  gap: 10px;
  max-width: 470px;
  margin: 26px auto 0;
  flex-wrap: wrap;
}

/* Inside the darker CTA well the shared input background disappears, so the
   field gets a lighter fill of its own here. */
.cta-panel .waitlist input[type="email"] {
  background: rgba(163, 186, 214, 0.10);
  border-color: var(--border-strong);
}
.cta-panel .waitlist .btn-primary { flex: 0 0 auto; }

input[type="email"],
input[type="text"],
textarea,
select {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(20, 38, 68, 0.60);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 0.94rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder, textarea::placeholder { color: var(--text-dim); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(138, 169, 207, 0.20);
}

textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

.form-msg {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--teal);
  min-height: 1.2em;
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 54px 34px;
  background: rgba(22, 40, 70, 0.60);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}

.footer-grid p { font-size: 0.9rem; max-width: 34ch; }

.footer-col h4 {
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
  font-weight: 600;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--text-muted); font-size: 0.92rem; }
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--text-dim);
}

/* ── Legal / document pages ─────────────────────────────────────────── */

.doc-hero {
  padding-block: clamp(54px, 7vw, 86px) 34px;
  border-bottom: 1px solid var(--border);
}

.doc-hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 12px; }

.updated {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(138, 169, 207, 0.12);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.doc-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  padding-block: 54px 90px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 92px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
}

.toc h4 {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
  font-weight: 600;
}

.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; display: grid; gap: 9px; }

.toc a {
  counter-increment: toc;
  font-size: 0.87rem;
  color: var(--text-muted);
  display: block;
}

.toc a::before { content: counter(toc) ". "; color: var(--text-dim); }
.toc a:hover { color: var(--accent); }

.doc-body { max-width: 760px; }

.doc-body h2 {
  font-size: 1.4rem;
  margin-top: 46px;
  padding-top: 6px;
  scroll-margin-top: 92px;
}

.doc-body h2:first-child { margin-top: 0; }

.doc-body h3 { font-size: 1.06rem; margin-top: 28px; }

.doc-body p, .doc-body li { color: var(--text-muted); font-size: 0.97rem; }

.doc-body ul { padding-left: 20px; display: grid; gap: 9px; margin-bottom: 1rem; }

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

.doc-body a { text-decoration: underline; text-underline-offset: 3px; }

.callout {
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  background: rgba(111, 179, 170, 0.07);
  border: 1px solid rgba(111, 179, 170, 0.24);
  border-left: 3px solid var(--teal);
  margin: 26px 0;
}

.callout p:last-child { margin-bottom: 0; }

.callout.warn {
  background: rgba(217, 184, 113, 0.07);
  border-color: rgba(217, 184, 113, 0.24);
  border-left-color: var(--gold);
}

.table-wrap { overflow-x: auto; margin: 22px 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 440px;
}

th, td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { color: var(--text); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; }
td { color: var(--text-muted); }

/* ── Deletion page ──────────────────────────────────────────────────── */

.delete-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  padding-block: 54px 90px;
  align-items: start;
}

.form-panel {
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  position: sticky;
  top: 92px;
}

.field { margin-bottom: 17px; }

.field label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--text);
}

.field input, .field textarea, .field select { width: 100%; flex: none; }

.field .hint { font-size: 0.78rem; color: var(--text-dim); margin: 6px 0 0; }

.checkbox-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.checkbox-row input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }

.timeline { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 0; }

.timeline li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  padding-bottom: 24px;
  position: relative;
}

.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
}

.timeline .tl-dot {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(138, 169, 207, 0.16);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.timeline h3 { font-size: 1rem; margin-bottom: 4px; }
.timeline p  { margin: 0; font-size: 0.92rem; }

/* ── Responsive ─────────────────────────────────────────────────────── */

/* Grid and flex children default to min-width:auto, which lets long words
   and wide children push a track past the viewport instead of wrapping.
   Everything here is allowed to shrink to its container instead. */
.grid > *, .steps > *, .stats > *, .split > *,
.hero-grid > *, .footer-grid > *, .faq > * { min-width: 0; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .phone-stage { order: -1; margin-bottom: 10px; }
  .split, .footer-grid, .doc-layout, .delete-layout { grid-template-columns: 1fr; }
  .toc, .form-panel { position: static; }
  .doc-layout, .delete-layout { gap: 34px; }
}

@media (max-width: 720px) {
  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 18px;
    background: rgba(22, 41, 74, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
  }

  .nav-links:not(.open) { display: none; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--border); }
  .nav-links .btn { margin-top: 14px; border-bottom: 0; }
  .nav-toggle { display: block; }
  .stores { justify-content: flex-start; }
  .store-btn { flex: 1 1 200px; }
  .privacy-panel, .form-panel { padding: 26px 20px; }
  .card, .step { padding: 26px 22px; }
  summary { padding: 16px 18px; }
  details p { padding: 0 18px 16px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* Carousel phones are clickable (JS brings the tapped one to the front);
   the flat gallery frames are not. */
#phoneStage .phone { cursor: pointer; }