/* ============================================================
   ExpenseZero — the simple page
   Fewer words, bigger screens. App palette (#0f0f11 / #02d091).
   ============================================================ */

:root {
  --bg:     #0f0f11;   /* app shell  */
  --bg-2:   #161618;   /* app sheet  */
  --surf:   #1a1a1d;   /* app card   */
  --surf-2: #212125;
  --surf-3: #2b2b30;   /* app hover  */
  --line:   rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);

  --ink:   #ffffff;
  --ink-2: #a6a6ad;
  --ink-3: #71717a;

  --accent:     #02d091;
  --accent-hi:  #23e7ab;   /* hover lift for accent fills */
  --accent-ink: #04241a;
  --accent-tint: rgba(2, 208, 145, .12);
  --accent-glow: rgba(2, 208, 145, .26);

  --maxw: 1160px;
  --pad:  clamp(20px, 5vw, 40px);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 999;
  background: var(--accent); color: var(--accent-ink); padding: 10px 18px;
  border-radius: 99px; font-weight: 700; }
.skip:focus { left: 16px; }

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

h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -.032em; line-height: 1.06; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.accent { color: var(--accent); }

/* ---------- nav ---------- */

/* floating glass pill, detached from the top edge */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 14px var(--pad) 0;
  pointer-events: none;   /* only the pill itself is clickable */
  transition: padding-top .32s var(--ease);
}
.nav.is-stuck { padding-top: 8px; }
.nav__in {
  position: relative;
  pointer-events: auto;
  width: fit-content;
  margin-inline: auto;
  display: flex; align-items: center;
  gap: clamp(14px, 2.6vw, 30px);
  height: 60px;
  padding: 0 clamp(18px, 2.4vw, 28px);
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(32, 32, 36, .55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
  transition: background .32s var(--ease), border-color .32s var(--ease),
              box-shadow .32s var(--ease), height .32s var(--ease),
              padding .32s var(--ease), gap .32s var(--ease);
}
/* on scroll the pill tightens: shorter, closer set, and more opaque */
.nav.is-stuck .nav__in {
  height: 50px;
  gap: clamp(12px, 2.2vw, 24px);
  padding: 0 clamp(14px, 2vw, 22px);
  background: rgba(32, 32, 36, .82);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .52);
}
.brand img, .nav__links a { transition: all .32s var(--ease); }
.nav.is-stuck .brand img { width: 26px; height: 26px; border-radius: 8px; }
.nav.is-stuck .brand { font-size: .96rem; }
.nav.is-stuck .nav__links a { font-size: .87rem; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.02rem; letter-spacing: -.03em; }
.brand img { width: 30px; height: 30px; border-radius: 9px; }
/* align-items matters here: the Download pill is 38px tall, so without it
   the plain links stretch to match and their text rides up to the top */
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.nav__links a { font-size: .92rem; font-weight: 500; color: var(--ink-2); transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--accent); }

/* the Download item is the header's one CTA */
.nav__dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;                 /* fixed, so it lines up with the pill's centre */
  padding: 0 20px;
  margin-left: 6px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-ink) !important;
  font-weight: 650;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.nav__dl svg { width: 16px; height: 16px; flex: none; }
.nav__dl:hover { background: var(--accent-hi); color: var(--accent-ink) !important; transform: translateY(-1px); }
/* the CTA is taller than the plain links, so give the pill room on the right */
.nav__in:has(.nav__dl) { padding-right: 9px; }

/* hamburger: desktop hides it, mobile swaps it in for the link row */
.nav__play {
  display: none;
  place-items: center;
  width: 38px; height: 38px;
  margin-left: auto;
  border-radius: 50%;
  /* just the glyph: a filled disc reads as heavy in an all-glass header */
  background: none;
  border: 0;
  color: var(--accent);
  transition: opacity .2s var(--ease);
}
.nav__play:hover { opacity: .7; }

/* visually hidden, still read out by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.nav__burger {
  display: none;
  position: relative;            /* bars are placed exactly, not by grid gap */
  width: 40px; height: 40px;
  margin-left: 4px;
  border: 0; border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.nav__burger span {
  position: absolute;
  left: 50%;
  width: 19px; height: 2px;
  margin-left: -9.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: top .3s var(--ease), transform .3s var(--ease), opacity .18s var(--ease);
}
.nav__burger span:nth-child(1) { top: calc(50% - 7px); }
.nav__burger span:nth-child(2) { top: calc(50% - 1px); }
.nav__burger span:nth-child(3) { top: calc(50% + 5px); }

/* both outer bars slide to the centre line, then cross */
.nav.is-open .nav__burger span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* ---------- hero ---------- */

.hero { position: relative; margin-top: -74px; padding: clamp(120px, 14vw, 176px) 0 0; overflow: hidden; text-align: center; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(100% 60% at 50% 0%, rgba(2,208,145,.15) 0%, transparent 60%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 1; }

.hero__mark { width: 54px; height: 54px; margin: 0 auto 26px; border-radius: 16px; }

.hero h1 {
  font-size: clamp(2.5rem, 6.6vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -.038em;
}
.hero h1 span { display: block; }

.hero__sub {
  margin: 22px auto 0;
  /* wide enough for the whole sentence to sit on one line on desktop;
     it still wraps naturally once the screen gets narrow */
  max-width: 80ch;
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  color: var(--ink-2);
  line-height: 1.6;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; align-items: center; margin-top: 32px; }

/* store buttons — big and friendly, like the reference */
.store {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 32px;
  border-radius: 99px;
  background: var(--accent); color: var(--accent-ink);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), border-color .22s var(--ease);
  box-shadow: 0 12px 32px var(--accent-glow);
}
.store:hover {
  background: var(--accent-hi);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px var(--accent-glow);
}
/* the mark inherits the pill's own ink, so icon and label always match:
   dark on the green pill, light on the dark one */
.store svg { flex: none; }
.store--alt svg { color: var(--ink); }
.store b { display: block; font-size: 1.12rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.12; }
.store span { display: block; font-size: .73rem; font-weight: 600; opacity: .72; letter-spacing: .04em; line-height: 1.3; }

.store--alt {
  background: var(--surf-2); color: var(--ink);
  border: 1px solid var(--line-2); box-shadow: none;
}
.store--alt:hover { background: var(--surf-3); box-shadow: none; }
.store--soon { opacity: .5; pointer-events: none; }

/* ---------- the scrolling wall of screens ---------- */

.wall {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(38px, 5vw, 64px);
  height: clamp(430px, 62vh, 720px);
  overflow: hidden;
  pointer-events: none;
  /* fades in at the top and dissolves into the page at the bottom */
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 66%, transparent 99%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 66%, transparent 99%);
}

.wall__col { flex: none; width: clamp(118px, 14.5vw, 196px); }

/* each track holds its screens twice, so -50% lands exactly on a repeat */
.wall__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  animation: wallUp var(--dur, 46s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.wall__col--down .wall__track { animation-name: wallDown; }

/* margin, not gap — gap would break the exact 50% loop point */
.wall__p {
  margin-bottom: clamp(10px, 1.4vw, 18px);
  aspect-ratio: 400 / 838;
  border-radius: 13.5%/6.4%;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.wall__p img { width: 100%; height: 100%; object-fit: cover; }

@keyframes wallUp   { from { transform: translateY(0); }     to { transform: translateY(-50%); } }
@keyframes wallDown { from { transform: translateY(-50%); }  to { transform: translateY(0); } }

/* the middle column carries the eye; the outer pairs recede in steps */
.wall__col:nth-child(1), .wall__col:nth-child(5) { opacity: .34; }
.wall__col:nth-child(2), .wall__col:nth-child(4) { opacity: .68; }
.wall__col:nth-child(3)                          { opacity: 1; }

/* ---------- pocket: 3D deck of screens ---------- */

.pocket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.pocket__art {
  display: grid;
  place-items: center;
  min-height: clamp(360px, 46vw, 580px);
  perspective: 1600px;
  /* the offset layers lean past the box on narrow screens; keep that out of
     the document width rather than letting the page scroll sideways */
  overflow: hidden;
}

.deck {
  position: relative;
  width: clamp(180px, 22vw, 258px);
  aspect-ratio: 400 / 838;
  transform-style: preserve-3d;
  /* one isometric rotation for the group; layers differ only in depth */
  transform: rotateX(46deg) rotateZ(-34deg);
}
.deck__p {
  position: absolute;
  inset: 0;
  border-radius: 13.5%/6.4%;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: -34px 44px 70px rgba(0, 0, 0, .6);
}
.deck__p img { width: 100%; height: 100%; object-fit: cover; }

.deck__p--1 { transform: translateZ(0px); }
.deck__p--2 { transform: translateZ(58px)  translate(30px, -30px); }
.deck__p--3 { transform: translateZ(116px) translate(60px, -60px); }

.pocket__h { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; }
.pocket__p { margin-top: 20px; color: var(--ink-2); max-width: 50ch; line-height: 1.65; }

.ticks { list-style: none; margin: clamp(24px, 3vw, 32px) 0 0; padding: 0; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 32px; font-size: 1rem; color: var(--ink); }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .18em;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.ticks li::after {
  content: "";
  position: absolute; left: 6px; top: .48em;
  width: 8px; height: 4.5px;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}

.pocket__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.5vw, 36px); }

/* same tick list, tighter, for the download block */
.ticks--tight { margin-top: clamp(22px, 3vw, 30px); gap: 11px; }
.ticks--tight li { font-size: .96rem; color: var(--ink-2); }

/* ---------- versus ---------- */

.pill-kick {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: var(--surf);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}

.vs { display: grid; gap: 16px; }
.vs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.12fr);
  gap: 0;
  align-items: stretch;
}
.vs__arrow { display: grid; place-items: center; color: var(--ink-3); }
.vs__arrow svg { width: 20px; height: 20px; }

.vs__card {
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surf);
}
.vs__card--old { background: linear-gradient(180deg, var(--bg-2), var(--surf)); }
.vs__card--new { border-color: rgba(2, 208, 145, .3); }

.vs__label {
  display: flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase;
}
.vs__label svg { width: 15px; height: 15px; flex: none; }
/* the ExpenseZero side is badged with the app icon, not a tick */
.vs__logo { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.vs__card--old .vs__label { color: #ff6b6b; }
.vs__card--new .vs__label { color: var(--accent); }

.vs__card p { margin-top: 14px; font-size: .97rem; line-height: 1.55; }
.vs__card--old p { color: var(--ink-2); }

/* ---------- sections ---------- */

.sec { padding: clamp(56px, 8vw, 104px) 0; }

.sec__title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.sec__head { margin-bottom: clamp(28px, 4vw, 44px); }
.sec__head p { margin-top: 14px; color: var(--ink-2); max-width: 56ch; }
.sec__head--centre { text-align: center; }
.sec__head--centre p { margin-inline: auto; }

/* two-line standfirst under a section heading.
   Needs to out-specify `.sec__head p`, which caps width at 56ch. */
.sec__head p.sec__lead,
.sec__lead {
  margin: 18px auto 0;
  max-width: 96ch;
  color: var(--ink-2);
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  line-height: 1.65;
}

/* ---------- bento ---------- */

/* one tall card on the left, two stacked on the right */
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.bcard--tall { grid-row: span 2; }

.bcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surf);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.bcard:hover { border-color: var(--line-2); transform: translateY(-3px); }

.bcard__t { padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px) 0; }
.bcard__label {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.bcard__t h3 { margin-top: 11px; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.bcard__t p { margin-top: 10px; font-size: .93rem; color: var(--ink-2); line-height: 1.55; }

/* Devices bleed off the bottom edge. The tall card's media fills whatever
   height is left and pins the phones to the bottom, so extra height reads as
   padding above the devices instead of dead space below them. */
.bcard__media {
  flex: 1;
  margin-top: clamp(20px, 3vw, 30px);
  padding: 0 clamp(22px, 3vw, 32px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  overflow: hidden;
}
.bcard__media .ph { margin-bottom: -34px; }
.bcard__media .ph {
  flex: none;
  width: clamp(138px, 17vw, 190px);
  aspect-ratio: 400 / 838;
  border-radius: 13.5%/6.4%;
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
}
.bcard__media .ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* the tall card's devices sit straight under the copy and bleed off the
   bottom, so no gap opens up between the text and the artwork */
.bcard--tall .bcard__media { align-items: flex-start; }
.bcard--tall .bcard__media .ph {
  width: clamp(158px, 20vw, 224px);
  margin-bottom: 0;
}
.bcard--tall .bcard__media .ph:nth-child(2) { transform: translateY(30px); opacity: .84; }

/* the short cards get a fixed window, so the device peeks rather than
   stretching the row and dragging the tall card out with it */
.bcard__media--wide {
  flex: none;
  height: clamp(148px, 15.5vw, 178px);   /* shorter rows keep the tall card from ballooning */
  align-items: flex-start;
}
.bcard__media--wide .ph { width: clamp(150px, 19vw, 210px); margin-bottom: 0; }


/* ---------- faq ---------- */

.faq { max-width: 760px; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 4px; cursor: pointer;
  font-size: 1.04rem; font-weight: 600; letter-spacing: -.015em;
  list-style: none;
  transition: color .2s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary span { flex: 1; }
.qa__sign { position: relative; width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.6px;
  background: currentColor; border-radius: 2px; transition: transform .3s var(--ease);
}
.qa__sign::after { transform: rotate(90deg); }
.qa[open] .qa__sign::after { transform: rotate(0); }
.qa[open] .qa__sign { color: var(--accent); }
/* height is driven by JS so the panel can animate open and shut;
   the inner block slides and fades so the motion is actually visible */
.qa__a { padding: 0 40px 24px 4px; color: var(--ink-2); font-size: .96rem; overflow: hidden; }
.qa__inner p + p { margin-top: 12px; }
.qa__inner a { color: var(--accent); }
.qa__inner { transform: translateY(-10px); opacity: 0; }
.qa[open] .qa__inner { transform: none; opacity: 1; }
.qa summary { user-select: none; }

/* ---------- closing: philosophy + QR ---------- */

.closer2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(30px, 5vw, 70px);
  /* the QR card is the taller column, so centre the copy against it */
  align-items: center;
}

.closer2__h {
  margin-top: 16px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  /* let the grid column set the measure; balance evens out the last line */
  text-wrap: balance;
}
.closer2__p { margin-top: 18px; color: var(--ink-2); max-width: 46ch; font-size: 1.02rem; }

.beliefs { list-style: none; margin: clamp(28px, 4vw, 42px) 0 0; padding: 0; display: grid; gap: 22px; }
.beliefs li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.beliefs__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surf); border: 1px solid var(--line-2);
  color: var(--accent);
}
.beliefs__ico svg { width: 20px; height: 20px; }
.beliefs b { display: block; font-size: 1rem; font-weight: 620; letter-spacing: -.015em; color: var(--ink); }
.beliefs span > b + * { margin-top: 0; }
.beliefs li > span:last-child { color: var(--ink-2); font-size: .93rem; line-height: 1.55; }

/* the QR panel */
.qrcard {
  position: relative;
  text-align: center;
  padding: clamp(26px, 3.4vw, 34px);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(2,208,145,.12) 0%, transparent 60%),
    var(--surf);
}
.qrcard__h { font-size: 1.2rem; letter-spacing: -.025em; }
.qrcard__p { margin-top: 8px; font-size: .88rem; color: var(--ink-3); }

.qrcard__code {
  margin: 22px auto 0;
  width: fit-content;
  padding: 12px;
  border-radius: 16px;
  background: #fff;          /* scanners want the light quiet zone */
  line-height: 0;
}
.qrcard__code img { width: 180px; height: 180px; }

.qrcard .store { margin-top: 22px; width: 100%; justify-content: center; }
.qrcard__soon { margin-top: 14px; font-size: .78rem; color: var(--ink-3);
  letter-spacing: .06em; text-transform: uppercase; }

/* ---------- download modal ---------- */

.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }

.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(4, 6, 8, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .26s var(--ease);
}
.modal.is-in .modal__scrim { opacity: 1; }

.modal__card {
  position: relative;
  width: min(360px, 100%);
  padding: clamp(26px, 4vw, 34px);
  text-align: center;
  border: 1px solid var(--line-2);
  border-radius: 26px;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(2,208,145,.14) 0%, transparent 60%),
    var(--surf);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.modal.is-in .modal__card { opacity: 1; transform: none; }

.modal__x {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surf-2); color: var(--ink-2);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.modal__x:hover { background: var(--surf-3); color: var(--ink); }
.modal__x svg { width: 15px; height: 15px; }

.modal__card .store { margin-top: 22px; width: 100%; justify-content: center; }

/* ---------- contact ---------- */

.ccards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(34px, 5vw, 52px);
}
.ccard {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surf);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.ccard:hover { border-color: var(--line-2); transform: translateY(-3px); }

.ccard__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--surf-2);
  color: var(--accent);
  margin-bottom: 20px;
}
.ccard__ico svg { width: 21px; height: 21px; }

.ccard h3 { font-size: 1.12rem; letter-spacing: -.02em; }
.ccard p  { margin-top: 8px; font-size: .93rem; color: var(--ink-2); }

.ccard__link {
  margin-top: auto;
  padding-top: 20px;
  font-size: .97rem;
  font-weight: 620;
  color: var(--accent);
  word-break: break-word;
  transition: opacity .2s var(--ease);
}
.ccard__link:hover { opacity: .74; }

/* the third card is the CTA, so it carries the accent wash */
.ccard--cta {
  border-color: rgba(2, 208, 145, .32);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(2,208,145,.15) 0%, transparent 62%),
    var(--surf);
}
.ccard--cta .ccard__ico { background: var(--accent-tint); }
/* margin-top:auto on the button collapses to 0 in the tallest card, so the
   gap has to come from the paragraph itself */
.ccard--cta p { margin-bottom: 16px; }

.ccard__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: auto;
  height: 46px;
  padding: 0 20px;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .92rem; font-weight: 650; letter-spacing: -.01em;
  transition: background .22s var(--ease);
}
.ccard__btn:hover { background: var(--accent-hi); }

.ccard__socials { display: flex; gap: 10px; margin-top: 16px; }
.ccard__socials a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--ink-2);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.ccard__socials a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.ccard__socials svg { width: 16px; height: 16px; }

.creassure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: clamp(22px, 3vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.creassure li { display: flex; gap: 13px; align-items: flex-start; }
.creassure__ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
}
.creassure__ico svg { width: 16px; height: 16px; }
.creassure b { display: block; font-size: .94rem; font-weight: 620; color: var(--ink); }
.creassure li > span:last-child { font-size: .89rem; color: var(--ink-3); line-height: 1.5; }
.creassure a { color: var(--accent); }

/* footer social row */
.foot__social { display: flex; gap: 10px; }
.foot__social a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot__social a:hover { color: var(--accent); border-color: var(--accent); }
.foot__social svg { width: 15px; height: 15px; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--line); padding: 44px 0 34px; }
.foot__in { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot__links a { font-size: .9rem; color: var(--ink-2); transition: color .2s var(--ease); }
.foot__links a:hover { color: var(--accent); }
.foot__bot a { color: var(--ink-3); transition: color .2s var(--ease); }
.foot__bot a:hover { color: var(--accent); }
.foot__bot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  font-size: .82rem; color: var(--ink-3); }

/* ---------- reveal ---------- */

.rv { opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rv.is-in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .07s; }
.rv[data-d="2"] { transition-delay: .14s; }
.rv[data-d="3"] { transition-delay: .21s; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  /* five no longer fits — drop the faintest pair, leaving three */
  .wall__col:nth-child(1), .wall__col:nth-child(5) { display: none; }
}

@media (max-width: 900px) {
  .ccards { grid-template-columns: 1fr; }
  .creassure { grid-template-columns: 1fr; gap: 14px; }
  /* smaller deck and shorter offsets so the lean still fits */
  .deck { width: clamp(140px, 38vw, 200px); }
  .deck__p--2 { transform: translateZ(40px) translate(20px, -20px); }
  .deck__p--3 { transform: translateZ(80px) translate(40px, -40px); }
  .bento { grid-template-columns: 1fr; }
  .bcard--tall { grid-row: auto; }
  .pocket { grid-template-columns: 1fr; }
  .pocket__art { min-height: 340px; order: -1; }
  .closer2 { grid-template-columns: 1fr; }
  .qrcard { max-width: 420px; margin-inline: auto; }
  .vs__row { grid-template-columns: 1fr; gap: 10px; }
  .vs__arrow { transform: rotate(90deg); height: 26px; }
  .bcard--wide, .bcard--slim { grid-column: span 12; }
}

@media (max-width: 720px) {
  /* the pill spans the screen instead of hugging the wordmark */
  .nav__in { width: 100%; }
  /* brand->icon spacing comes from margin-left:auto, so tightening the flex
     gap only pulls the burger closer to the download glyph */
  .nav__in { gap: 4px; }
  .nav__play { display: grid; }
  .nav__burger { display: grid; margin-left: 0; }

  /* the link row becomes a glass panel hanging under the pill */
  .nav__links {
    display: grid;
    gap: 2px;
    position: absolute;
    top: calc(100% + 12px);
    left: 0; right: 0;          /* matches the pill's own width */
    padding: 10px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(32, 32, 36, .92);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* inside the dropdown it stays the filled CTA, just fully rounded.
     Needs to out-specify `.nav__links a`, which sets a 13px radius. */
  .nav__links a.nav__dl {
    height: 50px;
    margin: 6px 0 0;
    gap: 9px;
    justify-content: center;
    border-radius: 99px;
    background: var(--accent);
    color: var(--accent-ink) !important;
    font-weight: 650;
  }
  .nav__links a.nav__dl:hover { background: var(--accent-hi); transform: none; }
  .nav__in:has(.nav__dl) { padding-right: clamp(18px, 2.4vw, 28px); }

  .nav__links a {
    padding: 13px 16px;
    border-radius: 13px;
    font-size: 15px;
    color: var(--ink);
    transition: background .2s var(--ease), color .2s var(--ease);
  }
  .nav__links a:hover { background: rgba(255, 255, 255, .07); }
  /* two columns that actually fill the width, instead of a narrow
     fixed-width pair floating in the middle of the screen */
  .wall {
    height: clamp(360px, 52vh, 460px);
    gap: 12px;
    padding-inline: 14px;
  }
  .wall__col:nth-child(4) { display: none; }   /* down to two */
  .wall__col { width: calc((100% - 12px) / 2); }
  .wall__p { margin-bottom: 12px; }
}

@media (max-width: 520px) {
  .store { width: 100%; justify-content: center; }
  .bcard__media { min-height: 150px; }
  .bcard--wide .bcard__media .ph:nth-child(2) { display: none; }
}

/* ---------- mobile type scale ----------
   Tuned to sit at the same weight as galaxysites.ca on a phone:
   heading ~24-30px, body 16px, secondary 14px. The desktop clamps
   were leaving 40px headlines on a 390px screen. */
@media (max-width: 600px) {
  .hero h1        { font-size: 30px; line-height: 1.12; letter-spacing: -.03em; }
  .hero__sub      { font-size: 16px; line-height: 1.6; }
  .hero__sub br   { display: none; }

  .sec__title     { font-size: 24px; line-height: 1.18; }
  .sec__head p    { font-size: 15px; }
  .sec__head p.sec__lead { font-size: 15px; }

  .bcard__t h3    { font-size: 18px; }
  .bcard__t p     { font-size: 14px; }

  .pocket__h      { font-size: 24px; line-height: 1.18; }
  .pocket__p      { font-size: 15px; }
  .ticks li       { font-size: 15px; }

  .closer2__h     { font-size: 24px; line-height: 1.18; }
  .closer2__p     { font-size: 15px; }

  .vs__card p     { font-size: 15px; }
  .vs__label      { font-size: .68rem; }

  .qa summary     { font-size: 16px; }
  .qa__a          { font-size: 15px; }

  .qrcard__h      { font-size: 17px; }
  .beliefs b      { font-size: 15px; }
  .beliefs li > span:last-child { font-size: 14px; }

  .pill-kick      { font-size: .68rem; padding: 8px 16px; }

  /* 50px still clears the 44px tap-target floor, but sits better against
     30px headings; the small label goes up so it stays readable */
  .store   { height: 52px; gap: 12px; padding: 0 26px; }
  .store b { font-size: 16.5px; }
  .store span { font-size: 12px; opacity: .78; }

  /* auto side margins make a grid item shrink to its content, so reset them
     as well as the cap, otherwise the card never fills the column */
  .qrcard { max-width: none; margin-inline: 0; padding: 26px 20px; }

  /* footer stacks, so centre it rather than leaving it ragged left */
  .foot__in { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .foot__links { justify-content: center; }
  .foot__bot { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  /* a continuously moving wall is exactly what this preference is about */
  .wall__track { animation: none !important; }
}