/* ==========================================================================
   Custback — site styles
   One dark direction for every page: a near-black green base, raised
   surfaces in two steps, Custback lime kept for actions and one or two
   accents per composition. Product images sit on these surfaces as they
   are exported; nothing here recolours a wallet interface.

   Order: tokens · base · layout · components · page sections · secondary
   pages · motion. Each component is defined once.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
/* Arial standing in for Manrope until it loads, with its metrics pulled
   towards Manrope's so the swap does not move the hero. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial");
  size-adjust: 103%;
  ascent-override: 104%;
  descent-override: 29%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  --bg: #090E0C;
  --surface: #111A15;
  --surface-2: #18231C;
  --surface-3: #1F2C24;
  --text: #F3F7F1;
  --text-2: #A7B5AB;
  --text-3: #7F8E84;
  --lime: #B2EA43;
  --lime-hover: #C3F25E;
  --lime-ink: #0B1205;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --font: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono-nums: tabular-nums lining-nums;

  /* spacing scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;

  --content: 1200px;
  --gutter: 24px;
  --measure: 38rem;

  --shadow-product: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t: 200ms;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

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

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

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

@media (max-width: 640px) { body { font-size: 17px; } }

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

h1, h2, h3, h4 { text-wrap: balance; margin: 0; color: var(--text); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--text); }

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

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

::selection { background: rgba(178, 234, 67, 0.3); color: var(--text); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s2); top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--lime); color: var(--lime-ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s2); }

.text-lime { color: var(--lime); }

/* ------------------------------------------------------------------ layout */
.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--s7) 0; position: relative; }
.section--tight { padding: var(--s6) 0; }
.section + .section { border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .section--tight { padding: var(--s5) 0; }
}

.section__head { max-width: 46rem; margin-bottom: var(--s5); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  margin-bottom: var(--s2);
  color: var(--lime);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section__title {
  font-size: clamp(32px, 2.2rem + 1.4vw, 52px);
  letter-spacing: -0.03em;
}
.section__sub {
  margin-top: var(--s2);
  max-width: var(--measure);
  font-size: 18px;
  color: var(--text-2);
}
.section__sub + .section__sub { margin-top: var(--s1); }

.note { font-size: 15px; color: var(--text-3); }

.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s4);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.text-link:hover { color: var(--lime); border-color: var(--lime); }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 52px; padding: 14px 24px; font-size: 16px; }

.btn--primary { background: var(--lime); color: var(--lime-ink); }
.btn--primary:hover { background: var(--lime-hover); color: var(--lime-ink); }

.btn--outline { border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.02); }
.btn--outline:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.06); color: var(--text); }

.btn--ghost { color: var(--text-2); padding-inline: 12px; }
.btn--ghost:hover { color: var(--text); }

.arrow { transition: transform var(--t) var(--ease); }
.btn:hover .arrow, .text-link:hover .arrow { transform: translateX(3px); }

@media (max-width: 420px) {
  .btn--lg { white-space: normal; text-align: center; }
}

/* -------------------------------------------------------------- navigation */
/* The translucent, blurred surface is a layer behind the bar rather than
   the bar itself. A backdrop-filter on the header would make it the
   containing block of the fixed mobile menu inside it, and squeeze that
   menu into the header's own height once the page has scrolled. */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(9, 14, 12, 0);
  transition: background-color var(--t) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav.is-scrolled::before {
  background: rgba(9, 14, 12, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
.nav__inner { display: flex; align-items: center; gap: var(--s4); height: 68px; }

.wordmark { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.wordmark img { width: 132px; height: auto; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: var(--s2); }
.nav__links > a {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.nav__links > a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav__links > a.is-active { color: var(--text); }
.nav__links-cta { display: none; }

.nav__actions { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav__toggle span {
  position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px;
  background: var(--text);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), top var(--t) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .nav__actions { display: none; }
  .nav__toggle { display: block; }
  .nav__inner { height: 64px; }
  .nav__links {
    position: fixed; inset: 64px 0 0 0;
    overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0;
    padding: var(--s2) var(--gutter) var(--s3);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
  }
  .nav__links.is-open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .nav__links > a { padding: 14px 4px; font-size: 17px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav__links > a:hover { background: none; }
  .nav__links-cta { display: grid; gap: 10px; margin-top: var(--s3); }
  .nav__links-cta .btn { width: 100%; min-height: 48px; }
  .nav::before { background: rgba(9, 14, 12, 0.92); }
  /* Locked on body, not html: with html locked, body's own overflow-x stops
     passing to the viewport, body becomes the scroller and the sticky bar
     is left behind at the top of the page. */
  .menu-open body { overflow: hidden; }
}

/* -------------------------------------------------------- product stage */
/* The one way product images are presented: on a raised surface, a faint
   lime halo behind, the export itself untouched. Phones are cut where the
   wallet screen runs out of content, with a fade rather than a hard edge. */
.halo {
  position: absolute; inset: 10% 5% 0; z-index: 0;
  background: radial-gradient(closest-side, rgba(178, 234, 67, 0.16), rgba(178, 234, 67, 0.04) 55%, transparent 75%);
  pointer-events: none;
}
.phone-crop {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 620 / 790;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 89%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 89%, transparent 100%);
}
.phone-crop img { width: 100%; height: auto; }

/* =================================================================== HERO */
.hero { position: relative; overflow: hidden; padding: 56px 0 0; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 30%, rgba(178, 234, 67, 0.10), transparent 70%),
    radial-gradient(40% 40% at 10% 0%, rgba(255, 255, 255, 0.04), transparent 70%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: var(--s5);
}
.hero__copy { padding-bottom: var(--s6); }
.hero__title {
  font-size: clamp(42px, 1.6rem + 3.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.hero__title span { display: block; }
.hero__sub {
  margin-top: var(--s3);
  max-width: 33rem;
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-2);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero__assurance {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: var(--s3);
  font-size: 15px;
  color: var(--text-2);
}
.hero__assurance li { position: relative; padding-left: 22px; }
.hero__assurance li::before {
  content: ""; position: absolute; left: 0; top: 0.32em; width: 14px; height: 14px;
  background: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B2EA43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
}
.hero__assurance a { color: var(--text); white-space: nowrap; }

.hero__stage { position: relative; align-self: end; max-width: 440px; width: 100%; justify-self: center; }

@media (max-width: 900px) {
  .hero { padding-top: 40px; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s4); }
  .hero__copy { padding-bottom: 0; }
  .hero__stage { max-width: 320px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 28px; }
  .hero__inner { gap: var(--s3); }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero__sub { margin-top: var(--s2); font-size: 17px; line-height: 1.55; }
  .hero__cta { margin-top: var(--s3); gap: 10px; }
  .hero__cta .btn { flex: 1 1 100%; min-height: 50px; }
  /* Four reassurances at full weight pushed the card below the first
     screen. On a phone they run as one quieter line group. */
  .hero__assurance { margin-top: var(--s2); gap: 4px 14px; font-size: 14px; line-height: 1.45; }
  .hero__assurance li { padding-left: 18px; }
  .hero__assurance li::before { width: 12px; height: 12px; background-size: 12px 12px; top: 0.25em; }
}
@media (max-width: 420px) {
  .hero__stage { max-width: 280px; }
}

/* ------------------------------------------------------------ trades strip */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trust__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 76px;
  padding-block: 18px;
}
.trust__label { font-size: 15px; color: var(--text-2); max-width: 22rem; }
.trust__row { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.trust__row li { color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 900px) {
  .trust__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .trust__row { gap: 6px 18px; }
  .trust__row li { font-size: 16px; }
}

/* ---------------------------------------------------------------- benefits */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.benefit {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.benefit__shot {
  display: flex; align-items: center; justify-content: center;
  height: 220px;
  padding: var(--s3);
  background: radial-gradient(70% 80% at 50% 100%, rgba(178, 234, 67, 0.10), transparent 70%), var(--surface-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.benefit__shot img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}
.benefit__body { padding: var(--s3); }
.benefit h3 { font-size: 21px; letter-spacing: -0.02em; }
.benefit p { margin-top: 10px; font-size: 16px; line-height: 1.6; }
@media (max-width: 900px) {
  .benefits { grid-template-columns: 1fr; max-width: 520px; }
  .benefit__shot { height: 200px; }
}

/* ============================================================ HOW IT WORKS */
.wp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
}
.wp__steps-list { display: grid; gap: 8px; align-content: start; }
.wp__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: var(--s2);
  width: 100%;
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.wp__step:hover { background: rgba(255, 255, 255, 0.03); }
.wp__step.is-active { background: var(--surface); border-color: var(--line-strong); }
.wp__step-bullet { display: none; }
.wp__step-label {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: var(--mono-nums);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.wp__step.is-active .wp__step-label { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.wp__step-title { color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; align-self: center; }
.wp__step-body { display: none; margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.wp__step.is-active .wp__step-body { display: block; }

.wp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.wp__assurance { margin-top: 12px; font-size: 14px; color: var(--text-3); }

.wp__device {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s5) var(--s5) 0;
  overflow: hidden;
}
.wp__screen { position: relative; width: min(100%, 340px); margin: 0 auto; aspect-ratio: 620 / 790; }
.wp__panel { position: absolute; inset: 0; }
.wp__panel[hidden] { display: none; }
.wp__panel:focus-visible { outline-offset: -2px; }
.wp__panel .phone-crop { height: 100%; aspect-ratio: auto; }
.wp__shot--poster {
  width: 100%; height: 100%;
  object-fit: contain; object-position: top center;
  border-radius: var(--r-md);
}
.wp__callout {
  position: absolute; z-index: 2; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px dashed rgba(178, 234, 67, 0.5);
  border-radius: 999px;
  background: rgba(9, 14, 12, 0.9);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.wp__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.wp__foot {
  margin: 0 calc(-1 * var(--s5));
  padding: 18px var(--s5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}
.wp__foot p + p { margin-top: 6px; }
.wp__foot b { font-weight: 600; }

@media (max-width: 900px) {
  .wp { grid-template-columns: 1fr; gap: var(--s3); }
  .wp__device { order: -1; padding: var(--s3) var(--s3) 0; }
  .wp__screen { width: min(100%, 260px); }
  .wp__foot { margin: 0 calc(-1 * var(--s3)); padding: 14px var(--s3); font-size: 14px; }
  .wp__step { padding: 14px 16px; grid-template-columns: 36px 1fr; }
  .wp__step-label { width: 36px; height: 36px; font-size: 13px; }
  .wp__step-title { font-size: 16px; }
  .wp__step-body { font-size: 15px; }
  .wp__actions .btn { width: 100%; }
}

/* =========================================================== CARD GALLERY */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
}
.gallery__card { margin: 0; display: flex; flex-direction: column; }
/* The generated markup wraps each card in device-stage > device > screen.
   The images are cards, not phones, so those wrappers become one stage and
   no handset is drawn around them. */
.device-stage {
  container-type: inline-size;
  display: grid; place-items: center;
  aspect-ratio: 3 / 4;
  padding: 20px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(80% 60% at 50% 60%, rgba(178, 234, 67, 0.07), transparent 70%), var(--surface);
}
.device, .device__screen { display: contents; }
.device__camera { display: none; }
.device-stage img {
  width: auto;
  max-width: 100%;
  max-height: calc(133.33cqi + 13px);
  border-radius: 14px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.gallery__caption { display: grid; gap: 2px; padding: var(--s2) 4px 0; }
.gallery__trade { color: var(--lime); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.gallery__reward { color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.gallery__meta { color: var(--text-3); font-size: 14px; }

.gallery__hint { display: none; }

@media (max-width: 1080px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 6px;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery__card { scroll-snap-align: start; }
  .gallery__hint {
    display: flex; align-items: center; gap: 8px;
    margin-top: var(--s2);
    font-size: 14px; color: var(--text-3);
  }
  .gallery__hint span { display: inline-flex; gap: 4px; }
  .gallery__hint i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
  .gallery__hint i:first-child { background: var(--lime); width: 18px; border-radius: 3px; }
}

/* ------------------------------------------------------------------- demo */
.trydemo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
  margin-top: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(50% 120% at 0% 50%, rgba(178, 234, 67, 0.10), transparent 70%),
    var(--surface-2);
}
.trydemo__code {
  display: grid; place-items: center; gap: 10px;
  padding: 18px;
  border-radius: var(--r-md);
  background: #fff;
}
.trydemo__code img { width: 168px; height: 168px; }
.trydemo__code span { color: #2b3330; font-size: 13px; font-weight: 700; }
.trydemo__title { font-size: clamp(26px, 1.2rem + 1.2vw, 36px); letter-spacing: -0.03em; }
.trydemo__copy > p { margin-top: 12px; max-width: 40rem; font-size: 17px; }
.trydemo__facts { display: grid; gap: 8px; margin-top: var(--s2); max-width: 42rem; }
.trydemo__facts li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.trydemo__facts li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.trydemo__btn { margin-top: var(--s3); }

@media (max-width: 760px) {
  .trydemo { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3); margin-top: var(--s5); }
  .trydemo__code { order: 2; justify-self: start; grid-auto-flow: column; padding: 12px 16px 12px 12px; }
  .trydemo__code img { width: 88px; height: 88px; }
  .trydemo__code span { max-width: 9rem; }
  .trydemo__btn { width: 100%; }
}

/* ================================================================ REPORTS */
.rp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.rp__board {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.rp__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.rp__bar-title { color: var(--text); font-size: 15px; font-weight: 700; }
.rp__caption {
  padding: 4px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.rp__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.rp__stats div { padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rp__stats div:nth-child(3n) { border-right: 0; }
.rp__stats div:nth-last-child(-n+3) { border-bottom: 0; }
.rp__stats dt { font-size: 14px; color: var(--text-2); }
.rp__stats dd { margin: 6px 0 0; color: var(--text); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: var(--mono-nums); line-height: 1.1; }
.rp__stats div:last-child dd { color: var(--lime); }
.rp__list { display: grid; gap: 0; }
.rp__list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; }
.rp__list li:first-child { padding-top: 0; }
.rp__list li:last-child { border-bottom: 0; }
.rp__list b { display: block; font-size: 16px; margin-bottom: 2px; }
@media (max-width: 900px) {
  .rp { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 520px) {
  .rp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp__stats div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; padding: 18px 16px; }
  .rp__stats div:nth-child(2n) { border-right: 0 !important; }
  .rp__stats div:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .rp__stats dd { font-size: 28px; }
}

/* ------------------------------------------------------------------ setup */
.setup__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3) var(--s5);
  align-items: center;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.setup__title { font-size: clamp(24px, 1rem + 1vw, 30px); letter-spacing: -0.025em; }
.setup__body { margin-top: 10px; max-width: 40rem; font-size: 16px; }
.setup__side { display: grid; gap: 12px; justify-items: start; }
.setup__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.setup__chip {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.setup .text-link { margin-top: 0; }
@media (max-width: 860px) {
  .setup__inner { grid-template-columns: 1fr; padding: var(--s3); }
}

/* ============================================================= COMPARISON */
.comparison__scroll {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.comparison__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.comparison__table th, .comparison__table td { padding: 15px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.comparison__table tbody tr:last-child > * { border-bottom: 0; }
.comparison__table thead th {
  padding-block: 18px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
}
.comparison__table tbody th { width: 22%; color: var(--text); font-weight: 600; }
.comparison__table td { color: var(--text-2); }
.comparison__table .comparison__custback { background: rgba(178, 234, 67, 0.05); color: var(--text); font-weight: 600; }
.comparison__table thead .comparison__custback { color: var(--lime); background: rgba(178, 234, 67, 0.08); }
.comparison__positive { color: var(--lime); margin-right: 6px; }
.comparison__note { margin-top: var(--s3); max-width: 50rem; font-size: 14px; color: var(--text-3); }

@media (max-width: 760px) {
  .comparison__scroll { overflow: hidden; }
  .comparison__positive { display: none; }
  .comparison__table, .comparison__table tbody, .comparison__table tr, .comparison__table th, .comparison__table td { display: block; width: auto; }
  .comparison__table thead { display: none; }
  .comparison__table tr { border-bottom: 1px solid var(--line); padding: 4px 0 6px; }
  .comparison__table tbody tr:last-child { border-bottom: 0; }
  .comparison__table tbody th { width: auto; padding: 14px 16px 6px; border: 0; font-size: 13px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
  .comparison__table td { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; padding: 3px 16px; border: 0; font-size: 14px; }
  .comparison__table td::before { content: attr(data-label); color: var(--text-3); font-size: 13px; font-weight: 600; }
  .comparison__table td.comparison__custback { background: none; font-size: 15px; padding-block: 4px 6px; }
  .comparison__table td.comparison__custback::before { color: var(--lime); }
  .comparison__table td:last-child { padding-bottom: 10px; }
}

/* ================================================================ PRICING */
.pr__aux { margin-top: var(--s2); }
.pr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.pr__plan {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.pr__name { font-size: 20px; letter-spacing: -0.015em; }
.pr__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: var(--s2); }
.pr__price b { color: var(--text); font-size: clamp(44px, 2rem + 1.6vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: var(--mono-nums); }
.pr__price span { color: var(--text-2); font-size: 16px; }
.pr__for { margin-top: var(--s2); min-height: 3.2em; font-size: 16px; }
.pr__list { display: grid; gap: 10px; margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.pr__list li { position: relative; padding-left: 28px; font-size: 16px; color: var(--text); line-height: 1.5; }
.pr__list li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B2EA43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
}
.pr__fine { margin-top: var(--s3); font-size: 14px; color: var(--text-3); flex-grow: 1; }
.pr__btn { margin-top: var(--s3); width: 100%; }

.addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  margin-top: var(--s3);
  padding: var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.pr__tag, .tag {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.addon__name { margin-top: 12px; font-size: 22px; letter-spacing: -0.02em; }
.addon__price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.addon__price b { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: var(--mono-nums); }
.addon__price span { font-size: 15px; color: var(--text-2); }
.addon__for { margin-top: 8px; font-size: 16px; }
.addon__gate { margin-top: 12px; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.addon__list { margin-top: 0; padding-top: 0; border-top: 0; }
.addon__link { margin-top: var(--s3); }
@media (max-width: 860px) {
  .pr { grid-template-columns: 1fr; }
  .pr__for { min-height: 0; }
  .addon { grid-template-columns: 1fr; padding: var(--s3); }
  .pr__plan { padding: var(--s3); }
}

/* ------------------------------------------------------------- calculator */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.calc__controls { padding: var(--s4); display: grid; gap: var(--s3); align-content: start; }
.calc__title { font-size: 22px; letter-spacing: -0.02em; }
.calc__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc__field[hidden] { display: none; }
.calc__label { display: block; margin-bottom: 10px; padding: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.calc__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); }
.calc__seg-opt { position: relative; cursor: pointer; }
.calc__seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc__seg-opt span {
  display: grid; place-items: center;
  min-height: 42px;
  border-radius: 9px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 700;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.calc__seg-opt input:checked + span { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.calc__seg-opt input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.calc__input {
  width: 100%; max-width: 160px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: var(--mono-nums);
  transition: border-color var(--t) var(--ease);
}
.calc__input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(178, 234, 67, 0.2); }
.calc__check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; cursor: pointer; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.45; }
.calc__check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lime); cursor: pointer; }
.calc__later { display: block; margin-top: 4px; color: var(--text-2); font-size: 14px; font-style: normal; font-weight: 400; }
.calc__note { font-size: 14px; color: var(--text-2); }

.calc__out { padding: var(--s4); background: var(--surface-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: 14px 0; border-bottom: 1px solid var(--line); }
.calc__row-label { color: var(--text); font-size: 15px; font-weight: 600; }
.calc__row-label em { display: block; color: var(--text-2); font-size: 14px; font-style: normal; font-weight: 400; }
.calc__row-value { color: var(--text); font-size: 17px; font-weight: 700; font-variant-numeric: var(--mono-nums); white-space: nowrap; }
.calc__row--step .calc__row-value { color: var(--lime); }
.calc__row--total { border-bottom: 0; padding-top: 18px; }
.calc__row--total .calc__row-label { font-size: 16px; }
.calc__row--total .calc__row-value { font-size: clamp(26px, 1.2rem + 1vw, 34px); font-weight: 800; letter-spacing: -0.03em; }
.calc__later-block { margin-top: 8px; padding: 14px 16px 4px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.calc__later-block[hidden] { display: none; }
.calc__later-head { color: var(--text-2); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.calc__later-block .calc__row--total .calc__row-value { font-size: 22px; }
.calc__btn { margin-top: auto; width: 100%; }
.calc__out > .calc__row--total + .calc__btn, .calc__later-block + .calc__btn { margin-top: var(--s3); }
.calc__fine { margin-top: 12px; text-align: center; font-size: 13px; color: var(--text-3); }
@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; }
  .calc__controls, .calc__out { padding: var(--s3); }
  .calc__out { border-left: 0; border-top: 1px solid var(--line); }
}

.pr__never {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: var(--s5);
}
.pr__never li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--text-2); }
.pr__never .pr__never-head { padding-left: 0; border: 0; color: var(--text); font-weight: 700; }
.pr__rule { margin-top: var(--s2); color: var(--text); font-size: 16px; font-weight: 600; }
.pr__gst { margin-top: 6px; max-width: 46rem; font-size: 14px; color: var(--text-3); }

/* ================================================================= ENGAGE */
.nv__engage {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.cmp__notice {
  padding: 16px var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

.cmp { padding: var(--s4); }
.cmp__tabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.cmp__tab {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.cmp__tab:hover { color: var(--text); }
.cmp__tab.is-active { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

.cmp__panel { margin-top: var(--s4); }
.cmp__panel[hidden] { display: none; }
.cmp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; }

.cmp__console {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.cmp__example, .tag-example {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cmp__console-title { font-size: 22px; letter-spacing: -0.02em; }
.cmp__fields { display: grid; margin: var(--s2) 0 0; }
.cmp__fields div { display: grid; grid-template-columns: 6rem 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cmp__fields dt { color: var(--text-3); font-size: 14px; font-weight: 600; }
.cmp__fields dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }

/* The campaign card is drawn here, in Google Wallet's own neutral layout,
   because the offer text it shows is the product's wording and only exists
   on a live pass. Kept plain: no landing colours inside the wallet. */
.cmp__device {
  display: grid; place-items: center;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: radial-gradient(70% 70% at 50% 60%, rgba(178, 234, 67, 0.08), transparent 70%), var(--bg);
}
.cmp__phone {
  width: min(100%, 300px);
  padding: 14px 12px 16px;
  border-radius: 22px;
  background: #F1F3F4;
  color: #1F1F1F;
  box-shadow: 0 0 0 6px #0c0f0e, 0 0 0 7px rgba(255, 255, 255, 0.12), var(--shadow-product);
}
.cmp__notch { display: none; }
.cmp__bar { display: flex; align-items: center; gap: 8px; padding: 0 4px 12px; font-size: 14px; font-weight: 600; color: #3c4043; }
.cmp__gmark { width: 14px; height: 14px; border-radius: 3px; background: conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0); }
.cmp__card { padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.cmp__card-brand { font-size: 16px; font-weight: 700; color: #1F1F1F; }
.cmp__card-type { font-size: 13px; color: #5f6368; }
.cmp__shout { margin-top: 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #1F1F1F; }
.cmp__card-note { margin-top: 4px; font-size: 13px; line-height: 1.45; color: #3c4043; }
.cmp__stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.cmp__stamps i { aspect-ratio: 1; border-radius: 9px; border: 1.5px solid #d7d9dc; }
.cmp__stamps i.on { border-color: #9a5b3c; background: #f6e9df; }
.cmp__card-count { margin-top: 10px; font-size: 13px; color: #3c4043; }

.cmp__flow {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: var(--s3);
  counter-reset: flow;
}
.cmp__flow li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-2);
  counter-increment: flow;
}
.cmp__flow li::before { content: counter(flow); color: var(--lime); font-weight: 700; font-variant-numeric: var(--mono-nums); }

.cmp__benefits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.cmp__benefits li { padding: var(--s3) var(--s4); border-right: 1px solid var(--line); }
.cmp__benefits li:last-child { border-right: 0; }
.cmp__benefits h4 { font-size: 16px; letter-spacing: -0.01em; }
.cmp__benefits p { margin-top: 6px; font-size: 15px; line-height: 1.55; }

@media (max-width: 900px) {
  .cmp__notice { padding: 14px var(--s3); font-size: 14px; }
  .cmp { padding: var(--s3); }
  .cmp__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp__tab { padding: 8px 6px; font-size: 13px; line-height: 1.25; }
  .cmp__grid { grid-template-columns: 1fr; gap: var(--s2); }
  .cmp__device { order: -1; }
  .cmp__benefits { grid-template-columns: 1fr; }
  .cmp__benefits li { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s2) var(--s3); }
  .cmp__benefits li:last-child { border-bottom: 0; }
}

/* =============================================================== SECURITY */
.security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.security-grid li {
  display: grid; gap: 8px; align-content: start;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.security-grid strong { font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; }
.security-grid span { font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) { .security-grid { grid-template-columns: 1fr; } }

/* ==================================================================== FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--s5); align-items: start; }
.faq-wrap .section__head { margin-bottom: 0; position: sticky; top: 100px; }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .faq-wrap .section__head { position: static; }
}
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 20px 4px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23F3F7F1' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 1.5v9M1.5 6h9'/%3E%3C/svg%3E");
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.faq-list summary:hover { color: var(--lime); }
.faq-list details[open] summary::after {
  background-color: var(--lime);
  border-color: var(--lime);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230B1205' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1.5 6h9'/%3E%3C/svg%3E");
}
.faq-list details > :not(summary) { margin: 0 0 20px; padding-right: 44px; padding-left: 4px; font-size: 16px; line-height: 1.65; max-width: 46rem; }
.faq-list details > p + p { margin-top: -8px; }
@media (max-width: 640px) {
  .faq-list summary { font-size: 16px; padding: 18px 0; }
  .faq-list details > :not(summary) { padding: 0; }
}

/* ============================================================ CLOSING CTA */
.cta { position: relative; overflow: hidden; padding: var(--s7) 0; border-top: 1px solid var(--line); }
.cta__inner {
  position: relative;
  padding: var(--s6) var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(178, 234, 67, 0.14), transparent 70%),
    var(--surface);
  text-align: center;
}
.cta__title { font-size: clamp(32px, 1.6rem + 2vw, 56px); letter-spacing: -0.035em; font-weight: 800; }
.cta__title span { display: block; }
.cta__sub { margin: var(--s2) auto 0; max-width: 32rem; font-size: 18px; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s4); }
.cta__assurance { margin-top: var(--s2); font-size: 14px; color: var(--text-3); }
@media (max-width: 640px) {
  .cta { padding: 72px 0; }
  .cta__inner { padding: var(--s5) var(--s3); }
  .cta__actions .btn { width: 100%; }
}

/* ================================================================= FOOTER */
.footer { border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s4); font-size: 15px; }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s5); }
.footer__brand .wordmark { color: var(--text); font-size: 24px; font-weight: 800; letter-spacing: -0.04em; }
.footer__brand .wordmark__accent { color: var(--lime); }
.footer__brand p { margin-top: 8px; color: var(--text-3); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.footer__cols h2 { margin-bottom: 12px; color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.footer__cols ul { display: grid; gap: 6px; }
.footer__cols a { color: var(--text-2); text-decoration: none; transition: color var(--t) var(--ease); }
.footer__cols a:hover { color: var(--text); }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px var(--s3);
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-3);
}
@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--s4); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================= SECONDARY PAGES */
/* Secondary pages open on their own heading, so the first section sits
   closer to the navigation than a landing section would. */
.page-body { padding-top: var(--s6); }
.page-body .section__title { font-size: clamp(36px, 1.6rem + 2.4vw, 60px); font-weight: 800; letter-spacing: -0.04em; }
.page-body .faq-list { max-width: 52rem; }
.page-body > .container > .text-link { margin-top: var(--s4); }

.sec-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.sec-block {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.sec-block h3 { font-size: 20px; letter-spacing: -0.02em; }
.sec-block p { margin-top: 12px; font-size: 16px; line-height: 1.65; }
.sec-block a { color: var(--text); text-decoration-color: rgba(178, 234, 67, 0.6); }
.sec-block a:hover { color: var(--lime); }
.sec-block ul { margin-top: 12px; display: grid; gap: 6px; }
.sec-block li { position: relative; padding-left: 18px; font-size: 16px; }
.sec-block li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
@media (max-width: 760px) {
  .sec-blocks { grid-template-columns: 1fr; }
  .sec-block { padding: var(--s3); }
}

/* ================================================================= MOTION */
/* Content is visible without JavaScript and without the observer firing;
   the entrance is a short lift on top of a page that already reads. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .hero .reveal { opacity: 1; transform: none; transition: none; }

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

/* Secondary pages open on their own heading, so the first section sits
   closer to the navigation than a landing section would. */
.page-body { padding-top: var(--s6); }
.page-body .section__title { font-size: clamp(36px, 1.6rem + 2.4vw, 60px); font-weight: 800; letter-spacing: -0.04em; }
.page-body .faq-list { max-width: 52rem; }
.page-body > .container > .text-link { margin-top: var(--s4); }