/* ==========================================================================
   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:            #1E3661;
  --bg-alt:        #26426F;
  --header-bg:     #101F38;
  --surface:       rgba(96, 129, 190, 0.34);
  /* Elevation reads as "lighter and glassier", not "more saturated" — a flat
     opaque fill this close in lightness to the page ground just looks like a
     slab. A translucent lift + blur keeps the ground visible through it. */
  --surface-solid: rgba(210, 226, 250, 0.07);
  --surface-2:     #3D5A89;

  --border:        rgba(163, 186, 214, 0.20);
  --border-strong: rgba(163, 186, 214, 0.34);

  /* A genuine multi-hue accent set — the page ground and panels stay navy,
     but feature colour now separates by temperature as well as lightness,
     so the grid doesn't read as one blue family repeated six times. */
  --accent:        #9EBAD9;   /* structural blue — links, focus rings, UI */
  --logo-blue:     #138AEC;
  --coral:         #6FC4F0;   /* sky blue */
  --amber:         #E8A845;
  --teal:          #5FBFAE;
  --rose:          #E8829E;
  --violet:        #A98CE8;

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

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

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

  /* Used only by the hero phone mockup, which keeps its depth. */
  --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; }

/* Every flat panel on the page (feature cards, steps, stats, FAQ, store
   buttons, doc sidebars, the deletion form) shares one glass treatment: a
   translucent lift over the dark ground plus a blur, so they read as
   elevated surfaces rather than a same-lightness slab pasted on top. */
.card, .step, .stat, details, .cta-panel, .toc, .form-panel, .store-btn {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

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.
   Three large, softly blurred colour fields sit under the vertical tone
   shift — an aurora-mesh backdrop built from the page's own accent hues
   (blue, violet, teal) rather than new colours, kept far enough below full
   opacity that it reads as ambient light, not the old corner-glow blobs. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 780px at 12% -8%,  rgba(111, 196, 240, 0.22), transparent 60%),
    radial-gradient(950px 720px at 108% 18%,  rgba(169, 140, 232, 0.16), transparent 58%),
    radial-gradient(1000px 820px at 22% 108%, rgba(95, 191, 174, 0.14), transparent 58%),
    linear-gradient(180deg, #294872 0%, #1E3661 46%, #182C50 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(16, 31, 56, 0.82);
  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(16, 31, 56, 0.96);
}

.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: #6FC4F0;
  /* 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);
}

.btn-primary:hover {
  background: #85CFF3;
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(111, 196, 240, 0.45);
}

.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;
  /* Top padding carries the absolutely-positioned .soon-tag badge, with
     clear space above it and between it and the label below. */
  padding: 40px 18px 14px;
  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 {
  /* Centred inside the button's top edge and taken out of flow, so the badge
     costs the button no width — that is what kept the two store buttons from
     sharing a line. The button is position:relative. */
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  /* Sits inside the button, on its black surface, so no page gradient
     needs matching behind it. */
  background: rgba(111, 179, 170, 0.18);
  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-stage { overflow-x: clip; }
  .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;
}

/* ── 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(--surface-solid);
  border: 1px solid var(--border);
  position: relative;
  transition: border-color 0.2s ease;
}

/* Each card's hover border matches its own icon's colour exactly — six
   distinct hues in sequence, not a 4-cycle that repeats out of step with
   the icons sitting inside them. */
.card:nth-child(1) { --tint: 111, 196, 240; }  /* blue */
.card:nth-child(2) { --tint: 95, 191, 174; }   /* teal */
.card:nth-child(3) { --tint: 169, 140, 232; }  /* violet */
.card:nth-child(4) { --tint: 232, 168, 69; }   /* gold */
.card:nth-child(5) { --tint: 232, 130, 158; }  /* rose */
.card:nth-child(6) { --tint: 95, 191, 174; }   /* teal */

.card:hover { border-color: rgba(var(--tint), 0.5); }

.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 and ring together, so a colour variant only has to
     override this one value. */
  --tint: 138, 169, 207;
  background: rgba(var(--tint), 0.14);
  border: 1px solid rgba(var(--tint), 0.35);
  color: rgb(var(--tint));
  transition: transform 0.2s ease, background 0.2s ease;
}

/* A small, flat pop — no rotation, no 3D — so the chip feels responsive
   without bringing back the old tilt/glow treatment. */
.card:hover .icon-box {
  transform: translateY(-2px) scale(1.05);
  background: rgba(var(--tint), 0.22);
}

.icon-box.teal   { --tint: 95, 191, 174; }
.icon-box.purple { --tint: 169, 140, 232; }   /* violet */
.icon-box.gold   { --tint: 232, 168, 69; }    /* amber */
.icon-box.rose   { --tint: 232, 130, 158; }
.icon-box.blue   { --tint: 111, 196, 240; }   /* sky blue, used sparingly now */

.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(--surface-solid);
  position: relative;
  transition: border-color 0.2s ease;
}

.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
   through four different hues rather than near-identical blues. */
.step:nth-child(1) { --tint: 111, 196, 240; }  /* blue */
.step:nth-child(2) { --tint: 169, 140, 232; }  /* violet */
.step:nth-child(3) { --tint: 232, 168, 69; }   /* gold */
.step:nth-child(4) { --tint: 95, 191, 174; }   /* teal */

.step:hover { border-color: rgba(var(--tint), 0.5); }

.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: rgba(111, 179, 170, 0.08);
  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(--surface-solid);
}

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

/* Cycle four different hues across the row so the stats read as a set,
   not a repeated blue. */
.stat:nth-child(1) b { color: #6FC4F0; }  /* blue */
.stat:nth-child(2) b { color: #A98CE8; }  /* violet */
.stat:nth-child(3) b { color: #E8A845; }  /* gold */
.stat:nth-child(4) b { color: #5FBFAE; }  /* teal */

.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(--surface-solid);
  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;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  max-width: 840px;
  margin-inline: auto;
}

.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(16, 31, 56, 0.88);
}

.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(--surface-solid);
}

.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(--surface-solid);
  border: 1px solid var(--border-strong);
  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 > *,
.doc-layout > *, .delete-layout > * { 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(16, 31, 56, 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; }