/* ============================================================
   FLANGU LANDING PAGE — VANILLA CSS
   Self-contained. No Tailwind dependency.
   ============================================================ */

/* ── 1. FONT FACES ──────────────────────────────────────── */

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
    url('../fonts/Satoshi-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
    url('../fonts/Satoshi-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
    url('../fonts/Satoshi-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
    url('../fonts/Satoshi-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
    url('../fonts/Satoshi-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
    url('../fonts/Satoshi-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Indie Flower';
  src: url('../fonts/IndieFlower-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ── 2. DESIGN TOKENS ───────────────────────────────────── */

:root {
  /* --- Colors (from tailwind.config.js + design_language_brief) --- */
  --c-navy: #1A3262;
  /* mainblack — primary text */
  --c-whitesmoke: #F5F5F5;
  /* page background */
  --c-white: #FFFFFF;
  /* card / surface background */
  --c-mainblue: #5687E8;
  /* primary brand / CTA colour */
  --c-secblue: #8FBEFF;
  /* secondary blue accent */
  --c-orange: #FCC934;
  /* warm accent (sparingly) */
  --c-navy-06: rgba(26, 50, 98, 0.06);
  /* ultra-soft shadow */
  --c-navy-08: rgba(26, 50, 98, 0.08);
  /* border at rest */
  --c-navy-12: rgba(26, 50, 98, 0.12);
  /* border on hover */
  --c-mainblue-08: rgba(86, 135, 232, 0.08);
  --c-mainblue-04: rgba(86, 135, 232, 0.04);
  --c-mainblue-00: rgba(86, 135, 232, 0);

  --c-white-08: rgba(255, 255, 255, 0.08);
  --c-white-04: rgba(255, 255, 255, 0.04);
  --c-white-00: rgba(255, 255, 255, 0);
  /* feature-focus wash */
  --c-white-72: rgba(255, 255, 255, 0.72);
  /* frosted-glass bg */
  --c-white-92: rgba(255, 255, 255, 0.92);
  /* fallback bg */
  --c-mainblue-deep: #4776D4;
  /* mainblue hover/active state */
  --c-gray-100: #F3F4F6;
  /* app-mockup neutrals (Tailwind grays used by RN app) */
  --c-gray-200: #E5E7EB;
  --c-gray-400: #9CA3AF;
  --c-gray-500: #6B7280;
  --c-success: #2DCC70;

  /* --- Typography --- */
  --font-primary: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-accent: 'Indie Flower', cursive;

  /* --- Spacing ("airy and breathable") --- */
  --sp-2xs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 48px;
  --sp-2xl: 96px;
  --sp-3xl: 128px;

  /* --- Border radii ("generous, 15–24px, full pills for buttons") --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-card: 20px;
  --r-pill: 9999px;

  /* --- Shadows ("6% opacity, diffused, soft float") --- */
  --shadow-soft: 0 2px 20px rgba(26, 50, 98, 0.06);
  --shadow-header: 0 4px 32px rgba(26, 50, 98, 0.08);
  --shadow-deck: 12px 12px 0 #5687E8;
  /* neo-brutalist, for landing graphics */

  /* --- Transitions --- */
  --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-header: 0.42s var(--ease-expo);
  --t-fast: 0.18s;
  --t-medium: 0.28s;
}


/* ── 3. BASE RESET & GLOBAL STYLES ─────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;

  /* Safety net only — the actual overflow sources are fixed at their
     source (see `.lp-feat__copy` and `.lp-feat__mockup` below). `clip`
     rather than `hidden`: it suppresses horizontal panning without
     turning the root into a scroll container, so `scroll-behavior:
     smooth`, momentum scrolling and vertical scrolling are untouched.
     Declared on <html> as well as <body> because iOS Safari keeps
     letting the user pan a page horizontally when the guard sits on
     <body> alone (the propagated value clips paint but not the touch
     pan), which is what made this page swipeable on iPhone. */
  overflow-x: clip;
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-navy);
  background-color: var(--c-whitesmoke);
  /* `hidden` first as the fallback for engines without `overflow: clip`
     (iOS Safari < 16); `clip` overrides it wherever it is supported and
     avoids creating a scroll container. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul,
ol {
  list-style: none;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}


/* ── 4. HEADER COMPONENT ────────────────────────────────── */

/* ─ Outer wrapper (full-width fixed band) ─ */
.lp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  /* top padding creates space between pill and viewport top */
  padding: 14px 16px 0;
  pointer-events: none;
  /* let clicks pass through the gap between pill and viewport edge */
}

/* ─ The floating pill ─ */
.lp-header__pill {
  pointer-events: all;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  padding: 10px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  /* All visual properties transition on scroll */
  transition:
    max-width var(--t-header),
    padding var(--t-header),
    background var(--t-header),
    border-color var(--t-header),
    box-shadow var(--t-header);
  will-change: max-width, padding, background;
}

/* Scrolled state — frosted glass */
.lp-header.is-scrolled .lp-header__pill {
  max-width: 720px;
  padding: 8px 22px;
  background: var(--c-white-92);
  /* solid fallback */
  border-color: var(--c-navy-08);
  box-shadow: var(--shadow-header);
}

@supports (backdrop-filter: blur(1px)) {
  .lp-header.is-scrolled .lp-header__pill {
    background: var(--c-white-72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
}

/* ─ Logo link ─ */
.lp-header__logo-link {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 40px;
  /* reserve enough width for the logotype at all times */
  width: 130px;
}

.lp-header__logo-link:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/* Logotype (full wordmark) — visible at top */
.lp-header__logotype {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  width: auto;
  opacity: 1;
  transition:
    opacity var(--t-header),
    transform var(--t-header);
  will-change: opacity;
}

/* Logomark (icon only) — hidden at top */
.lp-header__logomark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  height: 36px;
  width: auto;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--t-header),
    transform var(--t-header);
  will-change: opacity, transform;
}

/* Swap: logotype out, logomark in */
.lp-header.is-scrolled .lp-header__logotype {
  opacity: 0;
  transform: translateY(-50%) scale(0.9);
  pointer-events: none;
}

.lp-header.is-scrolled .lp-header__logomark {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: all;
}

/* Reduce logo-link width once it's icon-only */
.lp-header.is-scrolled .lp-header__logo-link {
  width: 36px;
}

/* ─ Desktop navigation links ─ */
.lp-header__nav {
  display: flex;
  align-items: center;
  gap: 36px;
  flex: 1;
  justify-content: center;
}

.lp-header__nav a {
  font-size: 15px;
  font-weight: 400;
  color: var(--c-navy);
  opacity: 0.75;
  letter-spacing: 0.01em;
  position: relative;
  padding: 4px 0;
  transition: opacity var(--t-fast), color var(--t-fast);
}

/* Underline reveal on hover */
.lp-header__nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--c-mainblue);
  border-radius: var(--r-pill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-medium) var(--ease-expo);
}

.lp-header__nav a:hover {
  opacity: 1;
  color: var(--c-mainblue);
}

.lp-header__nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.lp-header__nav a:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ─ Actions zone ─ */
.lp-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ─ CTA button (desktop & mobile) ─ */
.lp-header__cta {
  display: flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-navy-12);
  background: transparent;
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition:
    background var(--t-header),
    border-color var(--t-header),
    color var(--t-header),
    box-shadow var(--t-header),
    transform var(--t-fast);
  will-change: background, color;
}

.lp-header__cta:hover {
  background: rgba(86, 135, 232, 0.06);
  border-color: var(--c-mainblue);
  color: var(--c-mainblue);
}

.lp-header__cta:active {
  transform: scale(0.96);
}

.lp-header__cta:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 3px;
}

/* CTA icon — hidden at top of page */
.lp-header__cta-icon {
  flex-shrink: 0;
  width: 0;
  height: 15px;
  opacity: 0;
  margin-right: 0;
  transform: scale(0.7);
  transition:
    width var(--t-header),
    margin var(--t-header),
    opacity var(--t-header),
    transform var(--t-header);
  will-change: width, margin, opacity, transform;
}

/* Scrolled CTA: solid mainblue fill, icon appears */
.lp-header.is-scrolled .lp-header__cta {
  background: var(--c-mainblue);
  border-color: var(--c-mainblue);
  color: var(--c-white);
  box-shadow: 0 2px 12px rgba(86, 135, 232, 0.32);
}

.lp-header.is-scrolled .lp-header__cta:hover {
  background: var(--c-mainblue-deep);
  /* slightly darker mainblue */
  border-color: var(--c-mainblue-deep);
  box-shadow: 0 4px 20px rgba(86, 135, 232, 0.45);
}

.lp-header.is-scrolled .lp-header__cta-icon {
  width: 15px;
  margin-right: 7px;
  opacity: 1;
  transform: scale(1);
}



/* ─ Burger button ─ */
.lp-header__burger {
  display: none;
  /* shown via media query below */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}

.lp-header__burger:hover {
  background: rgba(26, 50, 98, 0.06);
}

.lp-header__burger:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 2px;
}

.lp-header__burger-line {
  display: block;
  width: 22px;
  height: 1.75px;
  background: var(--c-navy);
  border-radius: var(--r-pill);
  transform-origin: center;
  transition:
    transform 0.3s var(--ease-expo),
    opacity 0.2s ease,
    background var(--t-fast);
}

/* Burger → X animation */
.lp-header.is-menu-open .lp-header__burger-line:nth-child(1) {
  transform: translateY(6.75px) rotate(45deg);
}

.lp-header.is-menu-open .lp-header__burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.3);
}

.lp-header.is-menu-open .lp-header__burger-line:nth-child(3) {
  transform: translateY(-6.75px) rotate(-45deg);
}

/* ─ Mobile navigation panel ─ */
.lp-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  /* behind header pill (z:100) */
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  /* Slide-in from top */
  transform: translateY(-100%);
  opacity: 0;
  transition:
    transform 0.38s var(--ease-expo),
    opacity 0.25s ease;
  /* When panel is open (.is-open added by JS removing [hidden] + adding class) */
}

.lp-mobile-nav[hidden] {
  display: flex !important;
  /* keep in flow for animation; visibility toggled via opacity/transform */
  pointer-events: none;
}

.lp-mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.lp-mobile-nav__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* push links down past the header height */
  padding: 100px var(--sp-lg) var(--sp-xl);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lp-mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Stagger-in on open — each link rises and fades in slightly after the last */
.lp-mobile-nav__links li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.35s var(--ease-expo);
}

.lp-mobile-nav.is-open .lp-mobile-nav__links li {
  opacity: 1;
  transform: none;
}

.lp-mobile-nav__links li:nth-child(1) {
  transition-delay: 60ms;
}

.lp-mobile-nav__links li:nth-child(2) {
  transition-delay: 120ms;
}

.lp-mobile-nav__links li:nth-child(3) {
  transition-delay: 180ms;
}

.lp-mobile-nav__links li:nth-child(4) {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {

  .lp-mobile-nav__links li,
  .lp-mobile-nav__cta {
    transition: none !important;
    transition-delay: 0s !important;
    opacity: 1;
    transform: none;
  }
}

.lp-mobile-nav__links a {
  display: block;
  padding: 14px var(--sp-md);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-navy);
  border-radius: var(--r-md);
  letter-spacing: -0.01em;
  transition: background var(--t-fast), color var(--t-fast);
}

.lp-mobile-nav__links a:hover,
.lp-mobile-nav__links a:focus-visible {
  background: rgba(86, 135, 232, 0.07);
  color: var(--c-mainblue);
  outline: none;
}

/* Decorative border below links */
.lp-mobile-nav__divider {
  height: 1px;
  background: var(--c-navy-08);
  margin: var(--sp-lg) 0;
  border: none;
}

/* Mobile CTA inside panel */
.lp-mobile-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px var(--sp-lg);
  border-radius: var(--r-pill);
  background: var(--c-mainblue);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(86, 135, 232, 0.30);
  /* Entrance state — fades/rises in after the last nav link (see stagger above) */
  opacity: 0;
  transform: translateY(8px);
  transition:
    background var(--t-fast),
    transform 0.35s var(--ease-expo),
    box-shadow var(--t-fast),
    opacity 0.3s ease;
  transition-delay: 300ms;
}

.lp-mobile-nav.is-open .lp-mobile-nav__cta {
  opacity: 1;
  transform: none;
}

.lp-mobile-nav__cta:hover {
  background: var(--c-mainblue-deep);
  box-shadow: 0 6px 24px rgba(86, 135, 232, 0.40);
}

.lp-mobile-nav__cta:active {
  transform: scale(0.97);
  transition-delay: 0s;
}

.lp-mobile-nav__cta:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 3px;
}

.lp-mobile-nav__cta svg {
  width: 18px;
  height: 18px;
}


/* ── 5. RESPONSIVE — HEADER ──────────────────────────── */

/* Desktop (≥768px): show nav + text CTA, hide mobile controls */
@media (min-width: 768px) {
  .lp-header__burger {
    display: none !important;
  }

  .lp-header__nav {
    display: flex;
  }

  .lp-header__cta {
    display: flex;
  }
}

/* Mobile (<768px): hide nav, show burger menu */
@media (max-width: 767px) {
  .lp-header {
    padding: 10px 12px 0;
  }

  .lp-header__pill {
    max-width: 100%;
    padding: 9px 16px;
    justify-content: space-between;
  }

  .lp-header.is-scrolled .lp-header__pill {
    max-width: 100%;
    padding: 7px 14px;
  }

  .lp-header__nav {
    display: none;
  }

  .lp-header__burger {
    display: flex;
  }
}


/* ── 6. SCROLL SENTINEL ──────────────────────────────── */

/* Invisible 1px sentinel observed by IntersectionObserver */
.lp-scroll-sentinel {
  position: absolute;
  top: 72px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}


/* ── 7. PAGE CONTENT (PLACEHOLDER SECTIONS) ────────────── */


.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 32px;
  border-radius: var(--r-pill);
  background: var(--c-mainblue);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(86, 135, 232, 0.30);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.lp-btn-primary:hover {
  background: var(--c-mainblue-deep);
  box-shadow: 0 8px 32px rgba(86, 135, 232, 0.42);
}

.lp-btn-primary:active {
  transform: scale(0.96);
}

.lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 28px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-navy-12);
  color: var(--c-navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.lp-btn-ghost:hover {
  border-color: var(--c-mainblue);
  color: var(--c-mainblue);
}

.lp-btn-ghost:active {
  transform: scale(0.96);
}

/* Placeholder content sections (future: replace with real sections) */
.lp-placeholder-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2xl) var(--sp-lg);
  border-top: 1px dashed rgba(26, 50, 98, 0.10);
}

.lp-placeholder-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-navy);
  opacity: 0.3;
  margin-bottom: 12px;
}

.lp-placeholder-section__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  opacity: 0.12;
  text-align: center;
}


/* ── 8. UTILITIES ─────────────────────────────────────── */

/* Screen-reader-only 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;
}

/* Focus ring reset (custom per-element) */
:focus {
  outline: none;
}

/* Skip-to-content link for keyboard users */
.lp-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--c-mainblue);
  color: var(--c-white);
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  z-index: 200;
  transition: top 0.2s ease;
}

.lp-skip-link:focus {
  top: 0;
}

/* Anchor offset — keeps in-page nav links (#features, #download) clear of the fixed header */
section[id] {
  scroll-margin-top: 96px;
}

/* Selection color */
::selection {
  background: rgba(86, 135, 232, 0.20);
  color: var(--c-navy);
}

/* ── 9. HERO SECTION ─────────────────────────────────── */

/* ─ Outer section ─ */
.lp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* Part 2 (twin-card peek) may intentionally overflow on small viewports */
}

/* ─ Part 1 wrapper — headline, subtext, trust, badges ─ */
.lp-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1100px;
  /* Match header max-width */
  padding: calc(var(--sp-2xl) + 80px) var(--sp-lg) 48px;
  /* Top: clears fixed header (80px) + 96px whitespace (--sp-2xl). Bottom: 48px into Part 2 */
}

/* ─ Headline ─ */
.lp-hero__headline {
  font-size: clamp(40px, 6.5vw, 64px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--c-navy);
  max-width: 720px;
  margin-bottom: 24px;
  text-wrap: balance;
}

/* ─ "forever." accent ─ */
.lp-hero__headline-accent {
  font-style: italic;
  font-weight: 700 !important;
  /* Inherited, stated explicitly for clarity */
  color: var(--c-mainblue);
  /* Prevent browser from synthesising a fake oblique if the italic file fails */
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

/* ─ Subtext ─ */
.lp-hero__subtext {
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-navy);
  opacity: 0.68;
  max-width: 520px;
  margin-bottom: 28px;
  text-wrap: pretty;
}

/* ─ Trust microcopy row ─ */
.lp-hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 28px;
  padding: 0;
}

.lp-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-navy);
  opacity: 0.55;
  white-space: nowrap;
}

.lp-hero__trust-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--c-mainblue);
  opacity: 0.85;
}

/* ─ Badge + QR row ─ */
.lp-hero__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lp-hero__badge {
  display: block;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  transition:
    opacity var(--t-fast),
    filter var(--t-fast),
    transform var(--t-fast);
  will-change: opacity;
}

.lp-hero__badge:hover {
  transform: translateY(-2px);
}

.lp-hero__badge:active {
  transform: scale(0.97);
}

.lp-hero__badge:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 4px;
}

.lp-hero__badge img {
  display: block;
  height: auto;
}

.lp-hero__badge--ios img {
  width: 152px;
}

.lp-hero__badge--android img {
  /* Google Play badge has a wider native ratio — slightly larger to match visual weight */
  width: 170px;
}

/* Secondary badge (set by landing_hero.js on device detection) */
.lp-hero__badge--secondary {
  opacity: 0.4;
  filter: grayscale(25%);
  order: 1;
  /* Push to second position in flex row without changing DOM order */
}

.lp-hero__badge--secondary:hover {
  opacity: 0.82;
  filter: grayscale(0%);
  transform: translateY(-2px);
}

/* ─ QR code placeholder ─ */
.lp-hero__qr-slot {
  /* Hidden when empty (default state). No space reserved until a child element is injected. */
  display: none;
  flex-shrink: 0;
}

/* Desktop: reveal slot only when populated — content injected in a future task */
@media (min-width: 1024px) {
  .lp-hero__qr-slot:not(:empty) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-navy-08);
    background: var(--c-white);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }
}


/* ── 9a. HERO RESPONSIVE ────────────────────────────────── */

@media (max-width: 767px) {
  .lp-hero__intro {
    /* Reduce top padding on mobile — header is smaller, viewport is shorter */
    padding-top: calc(var(--sp-2xl) + 80px);
    /* 96 + 80 = 176px — same as desktop; mobile has no Part 2 visibility goal */
    padding-bottom: 48px;
  }

  .lp-hero__trust {
    /* On narrow screens allow tighter wrapping to 2×2 grid */
    gap: 10px 18px;
    max-width: 300px;
    /* nudges the 4 items into a natural 2-column layout */
  }

  .lp-hero__badges {
    /* Stack badges vertically on mobile */
    flex-direction: column;
    gap: 12px;
  }

  .lp-hero__badge--ios img,
  .lp-hero__badge--android img {
    /* Equal width on mobile — stacked, so visual weight balance is automatic */
    width: 185px;
  }

  .lp-hero__badge--secondary {
    /* Remove flex order on mobile — stacked, so DOM order already conveys priority */
    order: 0;
  }
}


/* ── 9b. HERO DESKTOP — SIDE-BY-SIDE LAYOUT (≥1024px) ──── */
/* Intro (headline/copy/badges) and Part 2 (twin-card peek) become two   */
/* columns in a single row so both are visible together on load, with   */
/* no scroll required. Below 1024px the hero keeps its default stacked, */
/* centered flow (see 9a) — tablet width is too tight for two columns   */
/* of meaningful content side by side.                                  */
@media (min-width: 1024px) {
  .lp-hero {
    width: 100%;
    /* Fill the viewport below the fixed header so the row's own vertical  */
    /* centering (align-items: center) splits leftover space evenly above  */
    /* and below the content, and so the next section never peeks above    */
    /* the fold on load — see the header-clearance note on padding below.  */
    min-height: 100vh;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xl);
    /* Wider than the site's usual 1100px content width — a side-by-side  */
    /* hero needs the extra room, and it avoids leaving large dead        */
    /* margins on wide viewports (1440px+) that a 1100px cap would leave. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px var(--sp-lg) 0;
    /* Top: clears the fixed header only (no extra fixed breathing room —  */
    /* align-items: center supplies that proportionally via min-height).   */
  }

  /* ─ Left column: headline, copy, trust row, badges ─ */
  /* flex-basis is a fixed px value (not "auto") on both columns so the   */
  /* browser never has to fall back to content-based sizing — with an     */
  /* "auto" basis, the aspect-ratio peek scene was hypothetically sizing  */
  /* itself far too large and squeezing the intro column down to ~280px,  */
  /* which was the real cause of the badges/headline wrapping badly.      */
  .lp-hero__intro {
    width: auto;
    flex: 1 1 380px;
    max-width: 460px;
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }

  /* Narrower column needs its own scale, not the centered-stack sizing.  */
  /* Tuned so "Remember forever." (the longer line) stays on one line     */
  /* even at the column's narrowest (~424px, at a 1024px viewport).       */
  .lp-hero__headline {
    font-size: clamp(36px, 3.2vw, 46px);
    max-width: none;
  }

  .lp-hero__subtext {
    /* Was clamp(15px, 1.2vw, 17px) — that let desktop render smaller than */
    /* mobile's 16–19px range, which read thin/underweight next to the     */
    /* headline once the trust row lightened up. Raised to match mobile's  */
    /* floor and read with more confidence at this breakpoint.             */
    font-size: clamp(16px, 1.3vw, 19px);
    max-width: none;
  }

  .lp-hero__trust {
    justify-content: flex-start;
  }

  /* 4 items in one row felt crowded at this column width and forced the  */
  /* column wider than the copy wanted — drop the least essential one.    */
  /* Still shown on mobile/tablet's roomier centered stack.                */
  .lp-hero__trust-item--hide-row {
    display: none;
  }

  .lp-hero__badges {
    justify-content: flex-start;
  }

  /* .lp-hero__peek's row-layout sizing lives in section 10a (below) —     */
  /* its unmedia'd base rule (padding, width) is declared in section 10,   */
  /* which comes AFTER this block in the file, so an override placed here  */
  /* would lose the cascade despite the media query. See 10a for the fix.  */
}


/* ── 10. HERO PART 2 — CONTENT PEEK ────────────────────── */

/* ─ Outer wrapper ─ */
.lp-hero__peek {
  width: 100%;
  display: flex;
  justify-content: center;
  /* Compact top gap — Part 1 and Part 2 read as a single continuous hero */
  padding: 16px var(--sp-lg) 80px;
}

/* ─ Scene container — fixed-aspect canvas for absolute positioning ─ */
.lp-hero__peek-scene {
  position: relative;
  width: 100%;
  max-width: 680px;
  /* Lock the composition to a stable aspect ratio on all desktops */
  aspect-ratio: 17 / 12;
}

/* Background blob treatment to separate white cards from page background */
.lp-hero__peek-scene::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%);
  /* Soft, unregular mesh gradient using brand colors */
  background:
    radial-gradient(ellipse closest-side at 40% 35%, rgba(86, 135, 232, 0.08) 0%, rgba(86, 135, 232, 0) 100%),
    radial-gradient(ellipse closest-side at 65% 60%, rgba(143, 190, 255, 0.06) 0%, rgba(143, 190, 255, 0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ─ Card shared base ─ */
.lp-hero__peek-card {
  position: absolute;
  width: 260px;
  height: 360px;
  border-radius: 24px;
  /* matches CardSide rounded-3xl */
  overflow: hidden;
  /* Stable stacking context per card */
  isolation: isolate;
}

/* ─ Front card (white, image + text, slightly left-forward) ─ */
.lp-hero__peek-card--front {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  /* colors.palette.gray100 */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    /* CardSide StyleSheet shadow */
    0 8px 24px rgba(0, 0, 0, 0.04);
  /* ambient lift */
  transform: rotate(-3deg);
  /* Position: centre-left of the scene, slightly above baseline */
  top: 8%;
  left: 10%;
  z-index: 2;
}

/* ─ Back card (white, centred text, right-recessed) ─ */
.lp-hero__peek-card--back {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.04);
  transform: rotate(4deg);
  /* Position: centre-right, pushed down slightly for stagger effect */
  top: 14%;
  left: 38%;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* ─ Card image area (front only) — 65% of card height ─ */
.lp-hero__peek-card-image-wrap {
  position: relative;
  width: 100%;
  height: 65%;
  /* Tall portrait images need more vertical space */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 23px 23px 0 0;
  overflow: hidden;
}

.lp-hero__peek-card-img {
  width: 85%;
  height: 95%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* ─ Card body (text area below image / full height on back) ─ */
.lp-hero__peek-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 20px 16px;
}

/* Back card body: takes remaining space to center content */
.lp-hero__peek-card-body--back-split {
  flex: 1;
  justify-content: center;
  padding: 0;
}

/* Feature zone: positioned at bottom with natural padding */
.lp-hero__peek-card-feature-zone {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 20px 20px 20px;
}

/* Subtle separator line */
.lp-hero__peek-card-separator {
  width: 100%;
  height: 1px;
  background-color: #F3F4F6;
  margin: 0 0 8px 0;
}

.lp-hero__peek-card-example-title {
  font-family: var(--font-primary);
  font-size: 14px;
  color: #9CA3AF;
  margin-bottom: 8px;
  display: block;
}

/* Example container matching native Carousel */
.lp-hero__peek-card-example {
  background-color: #F5F5F5;
  border-radius: 12px;
  padding: 12px 14px;
}

.lp-hero__peek-card-example-text {
  font-family: var(--font-primary);
  font-size: 13px;
  line-height: 1.5;
  color: #4B5563;
  margin: 0;
}

.lp-hero__peek-card-example-highlight {
  font-weight: 700;
  color: #5687E8;
}

/* ─ Card typography ─ */

/* Main word text — front and back card */
.lp-hero__peek-card-word {
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #1A3262;
  /* cardColors.front.text */
  text-align: center;
  letter-spacing: 0.3px;
}

/* Part-of-speech label — front card */
.lp-hero__peek-card-pos {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  /* cardColors.front.secondaryText */
  text-transform: lowercase;
  margin-top: 4px;
  text-align: center;
}


/* ─ Floating element base ─ */
.lp-hero__peek-float {
  position: absolute;
  z-index: 3;
  /* Animation starts paused; activated by .lp-hero__peek--visible */
  animation-play-state: paused;
  /* Each float element preserves its own base rotation via CSS custom property */
  will-change: transform;
}


/* ─ Float: Synonym pills ─ */
.lp-hero__peek-float--synonyms {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 210px;
  /* Upper-left: above and left of the front card's top corner */
  top: 0%;
  left: 0%;
  transform: rotate(var(--base-rotation, 0deg));
  animation-name: float-gentle;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.lp-hero__peek-pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 20px;
  /* matches rounded-[20px] in CardSide */
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  color: #6B7280;
  /* text-gray-500 */
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}


/* ─ Float: Alternative translation chips ─ */
.lp-hero__peek-float--alts {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-end;
  /* Lower-right: below the back card's right edge */
  bottom: 2%;
  right: 14%;
  transform: rotate(var(--base-rotation, 0deg));
  animation-name: float-gentle;
  animation-duration: 6.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}

.lp-hero__peek-alt {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(86, 135, 232, 0.10);
  /* bg-mainblue/10 */
  border: 1px solid rgba(86, 135, 232, 0.12);
  color: #5687E8;
  /* text-mainblue */
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.lp-hero__peek-alt-pos {
  opacity: 0.65;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 400;
}


/* ─ Float: Definition fragment ─ */
.lp-hero__peek-float--definition {
  background: #F5F5F5;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 12px 16px;
  max-width: 230px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  /* Lower-left: below front card, bleeding slightly outside scene */
  bottom: 4%;
  left: -2%;
  transform: rotate(var(--base-rotation, 0deg));
  animation-name: float-subtle;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

.lp-hero__peek-def-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  color: #9CA3AF;
  /* textTertiary */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.lp-hero__peek-def-text {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.55;
  color: #1A3262;
  margin: 0;
}


/* ─ Float: Flashcard created snackbar ─ */
.lp-hero__peek-float--snackbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #5687E8;
  /* mainblue — inverted palette */
  border-radius: 14px;
  padding: 10px 18px 10px 12px;
  box-shadow: 0 4px 20px rgba(86, 135, 232, 0.28);
  /* Bottom-centre: slightly overlapping the lower card edges */
  bottom: -4%;
  left: 50%;
  transform: translateX(-50%) rotate(var(--base-rotation, 0deg));
  animation-name: float-subtle;
  animation-duration: 7.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 1.5s;
  white-space: nowrap;
}

.lp-hero__peek-snackbar-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(74, 222, 128, 0.18);
  /* success green tint */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-hero__peek-snackbar-text {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #FFFFFF;
}


/* ─ Float: Language flags ─ */
.lp-hero__peek-float--flags {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F5F5F5;
  border: 1px solid #E5E7EB;
  border-radius: 22px;
  padding: 6px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* Upper-right: near the back card's top edge */
  top: 2%;
  right: 12%;
  transform: rotate(var(--base-rotation, 0deg));
  /* No animation: too small, would look jittery */
}

.lp-hero__peek-flag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.lp-hero__peek-flag-arrow {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
  line-height: 1;
}


/* ─ Float: TTS icon ─ */
.lp-hero__peek-float--tts {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F5;
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* Right-mid: alongside the front card's upper-right area */
  top: 28%;
  right: 16%;
  transform: rotate(var(--base-rotation, 0deg));
  animation-name: float-gentle;
  animation-duration: 5.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 3s;
}


/* ─ Animation keyframes ─ */

/* Base rotation is preserved as the offset; only translateY changes */
@keyframes float-gentle {

  0%,
  100% {
    transform: translateY(0px) rotate(var(--base-rotation, 0deg));
  }

  50% {
    transform: translateY(-6px) rotate(var(--base-rotation, 0deg));
  }
}

@keyframes float-subtle {

  0%,
  100% {
    transform: translateY(0px) rotate(var(--base-rotation, 0deg));
  }

  50% {
    transform: translateY(-4px) rotate(var(--base-rotation, 0deg));
  }
}

/* Snackbar has its own translate-X centering, so its keyframe composes both */
@keyframes float-subtle-centre {

  0%,
  100% {
    transform: translateX(-50%) translateY(0px) rotate(var(--base-rotation, 0deg));
  }

  50% {
    transform: translateX(-50%) translateY(-4px) rotate(var(--base-rotation, 0deg));
  }
}

/* Apply the composite keyframe to the snackbar */
.lp-hero__peek-float--snackbar {
  animation-name: float-subtle-centre;
}


/* ─ Animation activation via IntersectionObserver ─ */
/* JS adds .lp-hero__peek--visible when scene enters viewport.            */
/* Changing play-state is layout-free (no CLS). Floats were already       */
/* positioned from first paint; only transform: translateY begins moving. */
.lp-hero__peek--visible .lp-hero__peek-float {
  animation-play-state: running;
}


/* ─ Accessibility: respect reduced-motion preference ─ */
@media (prefers-reduced-motion: reduce) {
  .lp-hero__peek-float {
    animation: none !important;
  }
}


/* ── 10a. CONTENT PEEK RESPONSIVE ───────────────────────── */

/* ─ Desktop side-by-side (≥1024px): the scene now shares the hero row  */
/* with the intro column (peek column ranges ~424–600px, see 9b)        */
/* instead of owning the full centered width, so it's scaled down from  */
/* the legacy 680px / 260×360-card values — sized to the narrow end of  */
/* that range so the cards never overflow the scene.                    */
@media (min-width: 1024px) {

  /* Right column sizing (moved here, not section 9b, so it wins the      */
  /* cascade against .lp-hero__peek's unmedia'd base rule above).         */
  .lp-hero__peek {
    width: auto;
    flex: 1 1 460px;
    max-width: 600px;
    min-width: 0;
    padding: 0;
  }

  .lp-hero__peek-scene {
    max-width: 600px;
  }

  .lp-hero__peek-card {
    width: 216px;
    height: 300px;
  }
}

/* ─ Tablet (768px – 1023px): hide two small floats, shrink scene ─ */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-hero__peek-float--hide-tablet {
    display: none;
  }

  .lp-hero__peek-scene {
    max-width: 520px;
  }

  .lp-hero__peek-card {
    width: 210px;
    height: 290px;
  }
}

/* ─ Mobile (<768px): near-level card pair, full float set (minus TTS) ─ */
/* Cards keep the desktop's portrait 18:25 ratio and absolute positioning,  */
/* sitting side by side at a slight vertical offset (front higher, back     */
/* lower) with a modest overlap — the same relationship as desktop, just    */
/* scaled down. The pockets above/right/below the pair carry five float     */
/* groups; the TTS button is hidden at this size (no megaphone icon).       */
@media (max-width: 767px) {

  /* --- Scene: fixed-aspect canvas, same architecture as desktop --- */
  .lp-hero__peek {
    padding: 0 var(--sp-md) var(--sp-xl);
    /* --sp-md (16px) sides — tighter than --sp-lg so the deck can use     */
    /* more of the viewport width without cramping the scene               */
  }

  .lp-hero__peek-scene {
    display: block;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4 / 5;
    padding-bottom: 0;
    /* Keep position: relative from base for float anchoring */
  }

  .lp-hero__peek-scene::before {
    /* Stretch the background blob for the taller portrait composition */
    width: 145%;
    height: 112%;
  }

  /* --- Cards: near-level pair, portrait 18:25 (desktop ratio) --- */
  .lp-hero__peek-card {
    width: 55%;
    height: auto;
    aspect-ratio: 18 / 25;
    border-radius: var(--r-card);
  }

  .lp-hero__peek-card-image-wrap {
    border-radius: 19px 19px 0 0;
  }

  .lp-hero__peek-card--front {
    top: 6%;
    left: 0;
    right: auto;
    transform: rotate(-3deg);
  }

  .lp-hero__peek-card--back {
    top: 15%;
    left: auto;
    right: 1%;
    margin-top: 0;
    transform: rotate(3.5deg);
  }

  /* --- Card internal padding — trimmed for the smaller portrait card --- */
  .lp-hero__peek-card-body {
    padding: 0 12px 12px;
  }

  .lp-hero__peek-card-feature-zone {
    padding: 0 12px 12px;
  }

  .lp-hero__peek-card-separator {
    margin: 0 0 7px;
  }

  .lp-hero__peek-card-example-title {
    font-size: 12px;
    margin-bottom: 5px;
  }

  .lp-hero__peek-card-example {
    padding: 7px 9px;
    border-radius: 10px;
  }

  .lp-hero__peek-card-example-text {
    font-size: 11px;
    line-height: 1.45;
  }

  .lp-hero__peek-card-word {
    font-size: clamp(21px, 6vw, 25px);
  }

  /* --- Floats: five groups (synonyms, flags, alts, definition, snackbar) --- */

  /* synonyms — band above the front card, one row, two pills */
  .lp-hero__peek-float--synonyms {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    transform: rotate(var(--base-rotation, 0deg));
    max-width: none;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .lp-hero__peek-float--synonyms .lp-hero__peek-pill:nth-child(3) {
    display: none;
  }

  .lp-hero__peek-pill {
    padding: 4px 10px;
    font-size: 12px;
  }

  /* flags — right of the front card's top, above the alts column */
  .lp-hero__peek-float--flags {
    top: 2%;
    right: 20%;
    left: auto;
    bottom: auto;
    transform: rotate(var(--base-rotation, 0deg));
    padding: 5px 10px;
    border-radius: 18px;
    gap: 6px;
  }

  .lp-hero__peek-flag {
    width: 22px;
    height: 22px;
  }

  .lp-hero__peek-flag-arrow {
    font-size: 11px;
  }

  /* alts — right of the back card's upper edge, three chips stacked */
  .lp-hero__peek-float--alts {
    top: 10%;
    right: -1%;
    left: auto;
    bottom: auto;
    gap: 5px;
  }

  .lp-hero__peek-alt {
    padding: 4px 9px;
    font-size: 12px;
  }

  .lp-hero__peek-alt-pos {
    font-size: 10px;
    margin-left: 4px;
  }

  /* tts — hidden at mobile scale: no megaphone icon in this composition */
  .lp-hero__peek-float--tts {
    display: none;
  }

  /* definition — bottom-left pocket, shortened to its first clause */
  .lp-hero__peek-float--definition {
    bottom: 8%;
    left: -1%;
    top: auto;
    right: auto;
    width: 52%;
    max-width: 168px;
    padding: 10px 14px;
    border-radius: 14px;
  }

  .lp-hero__peek-def-label {
    font-size: 9px;
    margin-bottom: 4px;
  }

  .lp-hero__peek-def-text {
    font-size: 11px;
    line-height: 1.5;
  }

  .lp-hero__peek-def-tail {
    display: none;
  }

  /* snackbar — band below the back card, right-anchored */
  .lp-hero__peek-float--snackbar {
    bottom: 6%;
    right: 0;
    left: auto;
    top: auto;
    transform: rotate(var(--base-rotation, 0deg));
    padding: 8px 14px 8px 10px;
    border-radius: 12px;
  }

  .lp-hero__peek-snackbar-icon {
    width: 22px;
    height: 22px;
  }

  .lp-hero__peek-snackbar-text {
    font-size: 12px;
  }

  /* --- Mobile-specific animation keyframes (reduced amplitude) --- */
  @keyframes float-gentle-m {

    0%,
    100% {
      transform: translateY(0px) rotate(var(--base-rotation, 0deg));
    }

    50% {
      transform: translateY(-4px) rotate(var(--base-rotation, 0deg));
    }
  }

  @keyframes float-subtle-m {

    0%,
    100% {
      transform: translateY(0px) rotate(var(--base-rotation, 0deg));
    }

    50% {
      transform: translateY(-3px) rotate(var(--base-rotation, 0deg));
    }
  }

  .lp-hero__peek-float--synonyms {
    animation-name: float-gentle-m;
  }

  .lp-hero__peek-float--alts {
    animation-name: float-gentle-m;
  }

  .lp-hero__peek-float--definition {
    animation-name: float-subtle-m;
  }

  .lp-hero__peek-float--snackbar {
    animation-name: float-subtle-m;
  }

  /* flags: no animation — too small, would look jittery */
}


/* ── 11. HOW IT WORKS SECTION ──────────────────────────── */

/* ─ Section wrapper ─ */
.lp-hiw {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-2xl);
  /* 96px top / 96px bottom — uniform inter-section rhythm */
}

/* ─ Section headline ─ */
.lp-hiw__heading {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  text-align: center;
  max-width: 600px;
  margin-bottom: var(--sp-xl);
  text-wrap: balance;
  /* 48px between headline and card grid */
}

/* ─ Three-column grid + two arrow tracks ─ */
.lp-hiw__grid {
  --hiw-arrow-track: 44px;
  --hiw-badge-center: 50px;
  /* 6px card border + 28px body padding-top + 16px half-badge */
  position: relative;
  display: grid;
  grid-template-columns:
    1fr var(--hiw-arrow-track) 1fr var(--hiw-arrow-track) 1fr;
  gap: 0;
  /* the arrow tracks are the gaps now */
  width: 100%;
}

/* ─ Dashed connector arrow — sits in its own track, centred on the badge row ─ */
.lp-hiw__arrow {
  align-self: start;
  height: calc(var(--hiw-badge-center) * 2);
  /* centre of the box == centre of the badge */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-mainblue);
  /* #5687E8 — same blue as the step badge */
  pointer-events: none;
}

.lp-hiw__arrow svg {
  display: block;
  width: 40px;
  height: auto;
}

/* ─ Individual step card ─ */
.lp-hiw__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 6px solid var(--c-white);
  border-radius: var(--r-card);
  /* 20px — "The Deck Card Container" from design brief §4 */
  box-shadow: var(--shadow-soft);
  /* 0 2px 20px rgba(26,50,98,0.06) — ultra-soft float */
  overflow: hidden;
  padding-bottom: 28px;
}

/* ─ Card text block — badge column + copy column ─ */
.lp-hiw__card-body {
  display: flex;
  align-items: flex-start;
  /* badge top-anchored: its centre stays at a fixed offset no matter
     how many lines the title takes */
  gap: 12px;
  padding: 28px 28px var(--sp-lg);
  /* 28px top/sides, 24px before image */
  flex-grow: 1;
}

.lp-hiw__card-copy {
  flex: 1 1 auto;
  min-width: 0;
  /* lets the copy column shrink instead of overflowing */
}

/* ─ Step indicator — numeral badge ─ */
.lp-hiw__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-mainblue);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(86, 135, 232, 0.32);
}

/* ─ Card title ─ */
.lp-hiw__title {
  font-size: clamp(16px, 1.55vw, 18px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  padding-top: 6px;
  /* optically centres the first line on the 32px badge */
  margin-bottom: var(--sp-xs);
  text-wrap: balance;
  /* 8px — tight coupling to subtext below */
}

/* ─ Card subtext ─ */
.lp-hiw__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-navy);
  opacity: 0.68;
  margin: 0;
  text-wrap: pretty;
}

/* ─ Phone stage — soft ambient shadow, light source from above ─ */
.lp-hiw__phone-stage {
  position: relative;
  margin-top: 4px;
}

/* ─ iPhone screenshot ─
   Shadow uses box-shadow, not filter: drop-shadow(). The two are not
   interchangeable here: drop-shadow rasterizes the element and derives
   the shadow's silhouette from its actual pixel alpha, which Safari
   handles inconsistently for scaled-down alpha PNGs — stacking two
   drop-shadow() layers on this image renders jagged and re-blurs (and
   re-flickers) on every repaint while scrolling. box-shadow instead
   derives its shape from the element's own border-radius, ignoring
   pixel content entirely, so it's cheap to composite and renders
   identically (and flicker-free) in Safari, Chrome, Firefox, Edge and
   Opera. Blur/offset values carry over 1:1 from the old drop-shadow()
   calls — both use the same blur-radius definition. */
.lp-hiw__phone-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 232px;
  height: auto;
  margin: 0 auto;
  /* Preserve native 710×1399 aspect ratio */
  object-fit: contain;
  border-radius: 40px;
  box-shadow:
    /* contact shadow — near-zero offset so it hugs every edge and
       closes the gap the two offset layers below leave on the side
       facing away from the light (their blur doesn't reach back to
       the box edge there, most visibly in Safari's tighter blur curve) */
    0 4px 14px rgba(26, 50, 98, 0.14),
    20px 30px 20px rgba(0, 0, 0, 0.2),
    40px 60px 40px rgba(0, 0, 0, 0.12);
}


/* ── 11a. HOW IT WORKS RESPONSIVE ───────────────────────── */

/* ─ Tablet (768px–1023px): tighten gap, preserve 3-column row ─ */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-hiw__grid {
    --hiw-arrow-track: 36px;
    --hiw-badge-center: 44px;
    /* 6 + 22 + 16 */
    gap: 0;
  }

  .lp-hiw__arrow svg {
    width: 32px;
    /* stroke scales to 2.0px */
  }

  .lp-hiw__card {
    padding-bottom: 22px;
  }

  .lp-hiw__card-body {
    padding: 22px 22px var(--sp-md);
  }
}

/* ─ Mobile (<768px): single column, centred cards ─ */
@media (max-width: 767px) {
  .lp-hiw {
    padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
    /* 48px top / 96px bottom — more compact on mobile */
  }

  .lp-hiw__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
  }

  .lp-hiw__arrow {
    display: none;
  }

  .lp-hiw__card {
    width: 100%;
    max-width: 340px;
    /* Prevent cards stretching to full viewport on large phones */
  }
}

/* ─ Accessibility: respect reduced-motion preference ─ */
/* No animations in this section — declaration is a safety net for future additions */
@media (prefers-reduced-motion: reduce) {
  .lp-hiw__card {
    transition: none;
  }
}


/* ── 12. FEATURES SECTION ──────────────────────────────── */

/* ─ Section wrapper ─ */
.lp-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-2xl);
  /* 96px top / 96px bottom — matches lp-hiw inter-section rhythm */
}

/* ─ Feature row ─ */
.lp-feat__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  width: 100%;
  align-items: center;
}

.lp-feat__row+.lp-feat__row {
  margin-top: var(--sp-3xl);
  /* 128px between feature rows */
}

/* Reversed row: copy moves visually to the right, mockup to the left.
   DOM order stays copy-first (SEO-friendly). */
.lp-feat__row--reversed .lp-feat__copy {
  order: 2;
}

.lp-feat__row--reversed .lp-feat__mockup {
  order: 1;
}

.lp-feat__row--top {
  align-items: flex-start;
}

/* ─ Copy block ─ */
.lp-feat__copy {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  /* 12px between title and subtext */

  /* Grid item: without this, `min-width: auto` floors the column at the
     mockup's min-content width (the stat chart's bar layer is ~252px,
     ~326px once the card padding is added), which pushes both columns
     past the section's own box on viewports narrower than ~374px. */
  min-width: 0;

  /* Contains `::before` — the radial wash below is deliberately wider
     than this box (148% desktop / 130% mobile, centred), so it hangs
     ~24%/15% past each edge. On mobile this column spans nearly the
     whole viewport, so that spill landed outside the viewport and made
     the page horizontally scrollable. Clipping it here keeps the
     overflow from ever reaching the page's scrollable area.
     `overflow-x` only, so the wash still bleeds vertically as designed;
     `clip` (not `hidden`) so no scroll container is created on either
     axis. The clip margin is wider than the wash's *visible* extent —
     the gradient's last stop is fully transparent at 78% of the
     closest side, i.e. ≤38px past this box at the widest desktop
     column — so nothing that actually renders is cut. */
  overflow-x: clip;
  overflow-clip-margin: 48px;
}

/* Feature number label */
.lp-feat__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-mainblue);
  margin-bottom: 4px;
}

/* Feature headline */
.lp-feat__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  margin: 0;
  text-wrap: balance;
  transition: opacity 460ms var(--ease-expo);
}

/* Feature subtext */
.lp-feat__text {
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-navy);
  opacity: 0.68;
  max-width: 420px;
  margin: 0;
  text-wrap: pretty;
}

/* ─ Documentation shortcut link ─ */
.lp-feat__shortcut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-navy);
  opacity: 0.55;
  align-self: flex-start;
  transition: color var(--t-fast), opacity var(--t-fast);
}

.lp-feat__shortcut:hover {
  color: var(--c-mainblue);
  opacity: 1;
}

.lp-feat__shortcut-arrow {
  display: inline-block;
  font-family: var(--font-primary);
  transition: transform var(--t-medium) var(--ease-expo);
}

.lp-feat__shortcut:hover .lp-feat__shortcut-arrow {
  transform: translateX(3px);
}

.lp-feat__shortcut:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ─ Mockup column ─ */
.lp-feat__mockup {
  display: flex;
  justify-content: center;
  align-items: center;

  /* See `.lp-feat__copy` — releases the grid item's automatic
     min-content floor so the stat mockup shrinks with the column
     instead of widening the row past the viewport on narrow phones.
     The chart's own card already carries `overflow: hidden`, so the
     bar layer clips cleanly at the card edge. */
  min-width: 0;
}

/* ─ Phone frame shell — wraps both mockup UIs ─ */
.lp-feat__phone {
  position: relative;
  width: 100%;
  max-width: 380px;
  /* opacity is animated by JS (container fade loop) */
}


/* ── 12a. FEATURES — TRANSLATOR MOCKUP ────────────────── */

/* ─ Individual card (English / Japanese) ─ */
/* Inherits CardSide visual identity: rounded-3xl, border, shadow, padding */
.lp-feat-trans__card {
  border-radius: 24px;
  border: 1px solid #F3F4F6;
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 10px 14px 12px;
  min-height: 100px;
}

.lp-feat-trans__card+.lp-feat-trans__card {
  margin-top: 10px;
}

/* ─ Language label row (flag + language name) ─ */
.lp-feat-trans__lang-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.lp-feat-trans__flag {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.lp-feat-trans__lang-label {
  font-size: 11px;
  font-weight: 400;
  font-family: var(--font-primary);
  letter-spacing: 0.1px;
  color: #9CA3AF;
  /* gray-400 — matches langLabelColor in RN */
}

/* ─ Card body (typed text + translate button) ─ */
.lp-feat-trans__card-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

/* ─ Typed text (left side of card body) ─ */
.lp-feat-trans__typed-text {
  font-size: 20px;
  font-weight: 500;
  font-family: var(--font-primary);
  line-height: 28px;
  color: var(--c-navy);
  flex: 1;
  min-width: 0;
  /* Blinking cursor pseudo-element — active only while cursor class is present */
}

/* Blinking cursor — shown while typing is in progress */
.lp-feat-trans__typed-text--cursor::after {
  content: '|';
  color: var(--c-mainblue);
  animation: feat-blink 0.65s step-end infinite;
  margin-left: 1px;
  font-weight: 400;
}

@keyframes feat-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* ─ Translate button mockup ─ */
/* Proportionally reduced from TranslateButton: height 52→34, radius 26→17, px 24→14 */
.lp-feat-trans__btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  background: var(--c-mainblue);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-primary);
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform animated by JS */
  will-change: transform;
}

/* ─ Bottom card content area ─ */
.lp-feat-trans__bottom-content {
  min-height: 28px;
  display: grid;
  align-items: center;
}

/* ─ Shimmer loading bars ─ */
.lp-feat-trans__shimmer-wrap {
  display: none;
  /* shown by JS */
  flex-direction: column;
  gap: 8px;
  grid-area: 1 / 1;
}

.lp-feat-trans__shimmer-bar {
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg,
      #f0f0f0 25%,
      #e0e0e0 50%,
      #f0f0f0 75%);
  background-size: 200% 100%;
  animation: feat-shimmer 1.4s ease-in-out infinite;
}

.lp-feat-trans__shimmer-bar:first-child {
  width: 85%;
}

.lp-feat-trans__shimmer-bar:last-child {
  width: 55%;
}

@keyframes feat-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ─ Translation text (hidden until revealed by JS) ─ */
.lp-feat-trans__translation-text {
  font-size: 20px;
  font-weight: 500;
  font-family: var(--font-primary);
  line-height: 28px;
  color: var(--c-navy);
  display: none;
  /* shown + opacity animated by JS */
  will-change: opacity;
  grid-area: 1 / 1;
}

/* ─ Snackbar slot — fixed height prevents layout shift ─ */
.lp-feat-trans__snackbar-slot {
  margin-top: 12px;
  height: 44px;
  display: flex;
  align-items: center;
  width: 100%;
  /* Snackbar is a child; slot reserves the space */
}

/* ─ Snackbar ─ */
/* Inherits FlashcardCreatedSnackbar's bg, border-radius, shadow, icon treatment */
.lp-feat-trans__snackbar {
  border-radius: 16px;
  background: var(--c-mainblue);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  width: 100%;
  /* opacity + transform animated by JS */
  will-change: opacity, transform;
}

.lp-feat-trans__snackbar-icon {
  width: 24px;
  height: 24px;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-feat-trans__snackbar-text {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #FFFFFF;
}


/* ── 12b. FEATURES — REVIEW MOCKUP ────────────────────── */

/* ─ Front card / answer card — matches TranslatorMockup card exactly ─ */
.lp-feat-rev__card {
  border-radius: 24px;
  border: 1px solid #F3F4F6;
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 20px 14px;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lp-feat-rev__card-text {
  font-size: 20px;
  font-weight: 500;
  font-family: var(--font-primary);
  text-align: center;
  line-height: 28px;
  color: var(--c-navy);
}

/* ─ Zone 2: Fixed-height container — prevents layout jumps during swap ─ */
/* ZONE2_HEIGHT = 180, marginTop = 10 — taken verbatim from ReviewMockup.jsx */
.lp-feat-rev__zone2 {
  height: 180px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

/* ─ State A: ShowBackPanel — absolutely positioned, vertically centred ─ */
/* STATE_A_HEIGHT ≈ 130, STATE_A_TOP = (180 - 130) / 2 = 25px */
.lp-feat-rev__panel {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  /* opacity animated by JS */
  will-change: opacity;
}

/* Language direction rect (simplified ShowBackPanel upper panel) */
.lp-feat-rev__panel-rect {
  border-radius: 15px;
  background: var(--c-whitesmoke);
  padding: 22px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lp-feat-rev__flag-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lp-feat-rev__flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  opacity: 0.5;
}

.lp-feat-rev__flag-arrow {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-navy);
  opacity: 0.35;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* "Tap to show the answer" row */
.lp-feat-rev__tap-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  /* opacity animated by JS (starts at 0.6) */
  will-change: opacity;
}

/* Tapping-hand icon */
.lp-feat-rev__tap-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #9CA3AF;
  position: relative;
  /* transform animated by JS */
  will-change: transform;
}

/* Keep the icon glyph above the ping ring */
.lp-feat-rev__tap-icon svg {
  position: relative;
  z-index: 1;
}

/* Expanding "ping" ring anchored on the tap icon — signals that this is
   the interactive/tappable element being demonstrated. Sized and anchored
   to the icon (not the row) and positioned absolutely so it can bloom
   outward freely without being clipped by the row's tight 42px height.
   Same gray as the icon itself (--c-gray-400 === the icon's #9CA3AF), so
   the ring reads as part of the icon rather than an unrelated accent.
   Idle by default — JS fires a single run via the --active modifier,
   timed to the instant the icon bottoms out in its press animation. */
.lp-feat-rev__tap-ping {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-gray-400);
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

.lp-feat-rev__tap-ping--active {
  animation: lp-feat-rev-tap-ping 0.6s ease-out;
}

.lp-feat-rev__tap-text {
  font-size: 13px;
  font-style: italic;
  font-family: var(--font-primary);
  color: #9CA3AF;
}

@keyframes lp-feat-rev-tap-ping {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 0.55;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}

/* ─ State B: Answer card + Rating buttons ─ */
.lp-feat-rev__state-b {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  /* shown by JS when phase === 'revealed' */
}

/* Answer card inside State B — same styling as front card */
.lp-feat-rev__card2 {
  border-radius: 24px;
  border: 1px solid #F3F4F6;
  background: var(--c-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 20px 14px;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* opacity + transform animated by JS */
  will-change: opacity, transform;
}

/* ─ Rating buttons row ─ */
.lp-feat-rev__buttons-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
  /* opacity + transform animated by JS */
  will-change: opacity, transform;
}

.lp-feat-rev__btn-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Interval text above each button (e.g. "<1m", "2d") */
.lp-feat-rev__interval {
  font-size: 8px;
  font-family: var(--font-primary);
  font-weight: 400;
  text-align: center;
  color: #9CA3AF;
  margin-bottom: 3px;
}

/* The rating button itself */
/* Proportionally reduced from RatingButton (p-[18px] → p-[10px]) */
.lp-feat-rev__rating-btn {
  width: 100%;
  padding: 10px 0;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background set inline per button */
}

.lp-feat-rev__rating-label {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-primary);
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

/* "Good" button container — transform + opacity animated by JS */
.lp-feat-rev__good-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform, opacity;
}


/* ── 12c. FEATURES — RICH CARD MOCKUP ───────────────────── */

.lp-feat-rich__card {
  border-radius: 24px;
  border: 1px solid var(--c-navy-08);
  background: var(--c-white);
  box-shadow: var(--shadow-soft);
  padding: 9px 18px;
  width: 100%;
  height: 232px;
  overflow: hidden;
  /* Parent mockup opacity animated by JS */
}

/* ─ Zone B: Main Word ─ */
.lp-feat-rich__word-wrap {
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: relative;
  /* height animated by JS (transition) */
  transition: height 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-feat-rich__word {
  font-family: var(--font-primary);
  font-size: 27px;
  font-weight: 500;
  color: var(--c-navy);
  /* transform (translateY, scale) animated by JS */
  will-change: transform;
}

/* ─ Zone C: Feature Content Zone ─ */
.lp-feat-rich__content-zone {
  width: 100%;
  height: 100px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  /* height + opacity animated by JS */
  transition: height 250ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, height;
}

.lp-feat-rich__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  /* Bottom-anchored (not centered): keeps the gap to the icon row fixed
     at content-zone's margin-bottom (8px) + icon-row's own padding (4px)
     = 12px, regardless of how tall the content block is. */
  justify-content: flex-end;
  /* opacity + transform (translateY) animated by JS */
  opacity: 0;
  will-change: opacity, transform;
}

.lp-feat-rich__label {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: #9CA3AF;
  margin-bottom: 6px;
}

/* Synonyms Pills */
.lp-feat-rich__pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-feat-rich__pill {
  background: #F3F4F6;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  color: #9CA3AF;
}

/* Definition & Example Block */
.lp-feat-rich__block {
  background: #F3F4F6;
  padding: 8px 14px;
  border-radius: 15px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--c-navy);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-feat-rich__bold {
  font-weight: 700;
  color: var(--c-mainblue);
}

/* Image Panel */
.lp-feat-rich__image {
  width: 270px;
  height: 100%;
  margin: 0 auto;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  /* Source PNG is 716x400 with asymmetric transparent padding (ink
     y=35..343, centre y=189). 33.3% derived so the ink centres inside
     the 270x126 cover window instead of the canvas. Recompute if the
     box dimensions above ever change:
       scale = width/716; O = 400*scale - height;
       P = (189*scale - height/2) / O */
  object-position: 50% 33.3%;
}

/* ─ Zone D: Icons Row ─ */
.lp-feat-rich__icon-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 0;
}

.lp-feat-rich__icon-wrap {
  position: relative;
  width: 24px;
  height: 24px;
  /* transform (scale) animated by JS */
  will-change: transform;
}

.lp-feat-rich__icon-static {
  color: #E5E7EB;
}

.lp-feat-rich__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  /* opacity animated by JS */
  will-change: opacity;
}

.lp-feat-rich__icon--line {
  color: #E5E7EB;
  opacity: 1;
  /* Default inactive */
}

.lp-feat-rich__icon--fill {
  color: #1A3262;
  opacity: 0;
  /* Default inactive */
}


/* ── 12d. FEATURES — STATS CARD MOCKUP ───────────────────── */

.lp-feat-stat__card {
  border-radius: 20px;
  border: 1px solid var(--c-gray-100);
  background: var(--c-white);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  width: 100%;
  overflow: hidden;
  /* Parent mockup opacity & scale animated by JS */
  will-change: transform, opacity;
}

.lp-feat-stat__title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 16px;
}

.lp-feat-stat__metric-box {
  background: rgba(26, 50, 98, 0.05);
  /* matches mainblue/5 */
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 24px;
  /* opacity & transform animated by JS */
  will-change: transform, opacity;
}

.lp-feat-stat__metric-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.lp-feat-stat__counter {
  display: block;
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-mainblue);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.lp-feat-stat__chart-area {
  position: relative;
  height: 130px;
  display: flex;
  margin-bottom: 8px;
}

.lp-feat-stat__grid-layer {
  position: absolute;
  inset: 0;
}

.lp-feat-stat__grid-line {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 14px;
  margin-bottom: -7px;
}

.lp-feat-stat__y-label {
  width: 24px;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  text-align: right;
  margin-right: 8px;
}

.lp-feat-stat__dashed-line {
  flex: 1;
  height: 1px;
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

.lp-feat-stat__bars-layer {
  flex: 1;
  margin-left: 32px;
  /* Offset for Y labels */
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.lp-feat-stat__bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  margin-right: 14px;
}

.lp-feat-stat__bar-col:last-child {
  margin-right: 0;
}

.lp-feat-stat__bar-wrap {
  position: relative;
  width: 24px;
  /* height set inline dynamically */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.lp-feat-stat__top-label {
  position: absolute;
  top: -18px;
  left: -10px;
  right: -10px;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 9px;
  font-weight: 500;
  color: #9CA3AF;
  /* opacity animated by JS */
  opacity: 0;
  will-change: opacity, transform;
}

.lp-feat-stat__bar {
  width: 100%;
  background-color: #FCC934;
  /* Amber */
  border-radius: 6px;
  /* height scale animated by JS */
  height: 0;
  transform-origin: bottom;
  will-change: height;
}

.lp-feat-stat__x-axis {
  display: flex;
  margin-left: 32px;
  /* same offset as bars */
  margin-top: 8px;
}

.lp-feat-stat__x-label {
  flex: 1;
  text-align: center;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  margin-right: 14px;
}

.lp-feat-stat__x-label:last-child {
  margin-right: 0;
}

.lp-feat-stat__footer {
  font-family: var(--font-primary);
  font-size: 11px;
  color: #9CA3AF;
  text-align: center;
  margin-top: 10px;
}


/* ── 12e. FEATURES — FSRS MOCKUP ───────────────────────── */

.lp-feat-fsrs__brain-wrap {
  z-index: 20;
  display: flex;
  justify-content: center;
  position: relative;
}

.lp-feat-fsrs__brain {
  color: var(--c-mainblue);
}

.lp-feat-fsrs__card-zone {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.lp-feat-fsrs__card-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* animated by JS: transform, opacity */
  will-change: transform, opacity;
}

.lp-feat-fsrs__card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--c-white);
  border: 1px solid var(--c-gray-100);
  min-width: 130px;
  box-shadow: var(--shadow-soft);
}

.lp-feat-fsrs__flag {
  display: block;
}

.lp-feat-fsrs__card-text {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-navy);
  margin-left: 6px;
  white-space: nowrap;
}

.lp-feat-fsrs__badge {
  position: absolute;
  top: 100%;
  margin-top: -4px;
  z-index: 10;
  /* animated by JS: transform, opacity */
  opacity: 0;
  transform: scale(0.5);
  will-change: transform, opacity;
}

.lp-feat-fsrs__badge-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(45, 204, 112, 0.15);
  /* var(--c-success) at 15% opacity */
  border: 1px solid rgba(45, 204, 112, 0.3);
}

.lp-feat-fsrs__check {
  color: var(--c-success);
}

.lp-feat-fsrs__badge-text {
  font-family: var(--font-primary);
  font-size: 11px;
  color: var(--c-success);
  margin-left: 4px;
}


/* ── 12f. FEATURES — ASSISTANT MOCKUP ────────────────────── */

.lp-feat-assist__container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 16px;
}

.lp-feat-assist__input-inner {
  width: 100%;
  min-height: 64px;
  background-color: var(--c-white);
  border-radius: 32px;
  border: 1px solid rgba(26, 50, 98, 0.08);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.lp-feat-assist__text-box {
  flex: 1;
  padding-right: 8px;
  /* Text and cursor are inline siblings (not flex items) so the cursor
     wraps as part of the text flow and always sits right after the
     last character — including across the single-line/two-line
     wrap boundary. A flex row here would lay the cursor out as its
     own item, detached from wherever the text actually wraps. */
  min-height: 28px;
}

.lp-feat-assist__text {
  font-family: var(--font-primary);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-navy);
  line-height: 1.4;
  word-wrap: break-word;
}

.lp-feat-assist__cursor {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-navy);
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.lp-feat-assist__send-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--c-mainblue);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

/* ── 12g. FEATURES — FOCUS INDICATOR ────────────────── */
/* Latched per-row indicator: JS adds `.lp-feat__row--focused` to the
   currently-active row and never removes it on exit — the class only
   ever transfers to the next active row. This keeps a visual anchor
   alive through the IntersectionObserver's dead zones and through
   each mockup's opacity-0 crossfade frames. See landing_features.js
   `setFocusedRow()`. Base rules live here, ahead of 12h's responsive
   overrides, so the cascade lets those overrides win at narrower
   widths (equal specificity — source order decides).

   A soft radial wash behind the copy block — not the mockup. Nothing
   opaque ever covers the copy column, so the wash always reads
   cleanly (the mockup column holds opaque cards, some filled with
   the exact page background colour, which occluded/punched holes in
   an earlier version anchored there). closest-side + a fully
   transparent final stop means the element's box edge is never
   rendered — there is no boundary to read as a hard line. */
.lp-feat__copy::before {
  content: '';
  position: absolute;
  top: 46%;
  left: 50%;
  width: 148%;
  height: 320px;
  transform: translate(-50%, -50%) scale(0.96);
  background: radial-gradient(ellipse closest-side,
      var(--c-white-08) 0%,
      var(--c-white-04) 42%,
      var(--c-white-00) 78%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 460ms var(--ease-expo),
    transform 460ms var(--ease-expo);
}

/* ─ Focused state — enter is slower than exit so the incoming wash is
     already rising while the outgoing one fades; no bare frame. ─ */
.lp-feat__row--focused .lp-feat__copy::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 620ms var(--ease-expo),
    transform 900ms var(--ease-expo);
}

/* ─ Inactive-row headline dim — scoped to `.js-feat-ready`, a class JS
     only adds once every mockup element was found (landing_features.js
     `init()`). Without that gate, a JS failure would leave every title
     permanently dimmed with no way to un-dim. Only the headline dims:
     the label (--c-mainblue on whitesmoke, ~3.2:1) and body text
     (already at 0.68 opacity) sit too close to the WCAG AA floor to
     compound further — dimming them would push contrast below 3:1.
     The navy headline has the most headroom (~11.6:1 full-strength),
     so 0.6 still clears the 3:1 floor required for large/bold text. */
.lp-feat.js-feat-ready .lp-feat__row:not(.lp-feat__row--focused) .lp-feat__title {
  opacity: 0.6;
}

.lp-feat__row--focused .lp-feat__title {
  opacity: 1;
  transition: opacity 620ms var(--ease-expo);
}


/* ── 12h. FEATURES RESPONSIVE ────────────────────────── */

/* ─ Tablet (768px–1023px): tighter column gap ─ */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-feat__row {
    gap: 48px;
  }

  .lp-feat__phone {
    max-width: 340px;
  }

  /* Copy blocks run taller here — narrower column forces more line wraps */
  .lp-feat__copy::before {
    height: 340px;
  }
}

/* ─ Mobile (<768px): single column — copy above, mockup below ─ */
@media (max-width: 767px) {
  .lp-feat {
    padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
    /* 48px top / 96px bottom — more compact on mobile */
  }

  .lp-feat__row {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
    /* 48px between copy and mockup when stacked */
  }

  .lp-feat__row+.lp-feat__row {
    margin-top: var(--sp-2xl);
    /* 96px between rows on mobile */
  }

  /* FSRS row's card-zone overflows below its own box by design (cards
     drift past the phone frame toward the brain) — on desktop's
     two-column layout the row is tall enough that the 128px inter-row
     gap absorbs it, but the mobile single-column stack has no such
     slack, so the drifted cards land in the next row's copy. Flex
     items don't collapse margins, so this adds on top of the
     margin-top above rather than replacing it. See FSRS_DRIFT_Y_MOBILE
     in landing_features.js, which shortens the drift itself in tandem. */
  .lp-feat__row--fsrs {
    margin-bottom: var(--sp-2xl);
  }

  /* Reset visual ordering — DOM order (copy first) is the natural mobile order */
  .lp-feat__row--reversed .lp-feat__copy {
    order: 0;
  }

  .lp-feat__row--reversed .lp-feat__mockup {
    order: 0;
  }

  .lp-feat__text {
    max-width: 100%;
  }

  .lp-feat__phone {
    max-width: 360px;
  }

  /* Scaled down for the full-width single-column layout. Kept (not
     hidden) — the crossfade hole is proportionally larger on a narrow
     viewport, so the wash matters more here, not less. */
  .lp-feat__copy::before {
    width: 130%;
    height: 280px;
  }
}


/* ── 12i. FEATURES — ACCESSIBILITY ──────────────────── */

@media (prefers-reduced-motion: reduce) {

  /* JS reads this via matchMedia and skips animation loops entirely.
     These CSS rules are a belt-and-suspenders fallback for any
     transition that might slip through. */
  .lp-feat__phone,
  .lp-feat-trans__btn,
  .lp-feat-trans__shimmer-bar,
  .lp-feat-trans__translation-text,
  .lp-feat-trans__snackbar,
  .lp-feat-rev__panel,
  .lp-feat-rev__tap-row,
  .lp-feat-rev__tap-ping,
  .lp-feat-rev__tap-icon,
  .lp-feat-rev__card2,
  .lp-feat-rev__buttons-row,
  .lp-feat-rev__good-btn,
  .lp-feat-rich__word-wrap,
  .lp-feat-rich__word,
  .lp-feat-rich__content-zone,
  .lp-feat-rich__panel,
  .lp-feat-rich__icon-wrap,
  .lp-feat-rich__icon,
  .lp-feat-stat__card,
  .lp-feat-stat__metric-box,
  .lp-feat-stat__bar,
  .lp-feat-stat__top-label,
  .lp-feat-fsrs__card-wrap,
  .lp-feat-fsrs__badge,
  .lp-feat-assist__cursor,
  .lp-feat__copy::before,
  .lp-feat__title {
    animation: none !important;
    transition: none !important;
  }

  /* Ensure shimmer bars show a flat, non-animated colour */
  .lp-feat-trans__shimmer-bar {
    background: #f0f0f0;
  }
}


/* ── 13. CTA / DOWNLOAD SECTION ─────────────────────────── */

/* ─ Section wrapper ─ */
.lp-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg);
}

/* ─ Pill-shaped inner container ─ */
.lp-cta__inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  background: var(--c-mainblue);
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(143, 190, 255, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 70%, rgba(26, 50, 98, 0.15) 0%, transparent 55%);
  border-radius: 48px;
  padding: 80px var(--sp-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 48px rgba(86, 135, 232, 0.25);
}

/* Subtle grain — separates the flat brand panel from a plain coloured div */
.lp-cta__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.055;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ─ Deck-of-cards motif — echoes the hero's twin-card peek ─ */
.lp-cta__motif {
  position: absolute;
  z-index: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  pointer-events: none;
}

.lp-cta__motif::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  transform: translate(11px, 11px);
}

.lp-cta__motif--left {
  width: 186px;
  height: 258px;
  left: -64px;
  top: 50%;
  transform: translateY(-50%) rotate(-13deg);
}

.lp-cta__motif--right {
  width: 152px;
  height: 210px;
  right: -50px;
  top: 44%;
  transform: translateY(-50%) rotate(10deg);
}

/* ─ Heading ─ */
.lp-cta__heading {
  position: relative;
  z-index: 1;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--c-white);
  margin-bottom: 0;
  /* the subline now owns the gap to the badges */
  text-wrap: balance;
}

/* ─ "free." accent ─ */
.lp-cta__heading-accent {
  position: relative;
  font-style: italic;
  font-weight: 700;
  color: var(--c-white);
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

.lp-cta__heading-accent::after {
  content: '';
  position: absolute;
  left: -2px;
  right: 2px;
  /* asymmetric: compensates the italic lean */
  bottom: 0.06em;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

/* ─ Supporting subline ─ */
.lp-cta__subline {
  position: relative;
  z-index: 1;
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 440px;
  margin: 14px 0 0;
  text-wrap: pretty;
}

/* ─ Badge row ─ */
.lp-cta__badges {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* ─ Individual badge link ─ */
.lp-cta__badge {
  display: block;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  transition:
    opacity var(--t-fast),
    filter var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
  will-change: opacity;
}

.lp-cta__badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 40, 90, 0.22);
}

.lp-cta__badge:active {
  transform: scale(0.97);
}

.lp-cta__badge:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
}

.lp-cta__badge img {
  display: block;
  height: auto;
}

.lp-cta__badge--ios img {
  width: 152px;
}

.lp-cta__badge--android img {
  width: 170px;
}

/* ─ Secondary badge (applied by JS on device detection) ─ */
.lp-cta__badge--secondary {
  opacity: 0.55;
  filter: grayscale(15%) brightness(0.9);
  order: 1;
  /* Push to second position in flex row without changing DOM order */
}

.lp-cta__badge--secondary:hover {
  opacity: 0.9;
  filter: none;
  transform: translateY(-2px);
}

/* ─ Reassurance strip ─ */
.lp-cta__reassure {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.74);
}

.lp-cta__reassure li {
  display: inline-flex;
  align-items: center;
}

.lp-cta__reassure li+li::before {
  content: '·';
  margin-right: 10px;
  opacity: 0.5;
}


/* ── 13a. CTA RESPONSIVE ─────────────────────────────────── */

/* Motifs are sized for the ≥1024px panel width — below that they'd crowd the copy */
@media (max-width: 1023px) {
  .lp-cta__motif {
    display: none;
  }
}

/* ─ Tablet (768px–1023px) ─ */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-cta__inner {
    border-radius: 40px;
    padding: 72px var(--sp-lg);
  }
}

/* ─ Mobile (<768px): stacked badges, compact padding ─ */
@media (max-width: 767px) {
  .lp-cta {
    padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
  }

  .lp-cta__inner {
    border-radius: 32px;
    padding: 56px var(--sp-md);
  }

  .lp-cta__badges {
    flex-direction: column;
    gap: 12px;
  }

  .lp-cta__badge--ios img,
  .lp-cta__badge--android img {
    /* Equal width on mobile — stacked, so visual weight balance is automatic */
    width: 185px;
  }

  .lp-cta__badge--secondary {
    /* Remove flex order on mobile — stacked, so DOM order already conveys priority */
    order: 0;
  }
}


/* ── 13b. CTA ACCESSIBILITY ──────────────────────────────── */

/* No animations in this section by design — declaration is a safety net */
@media (prefers-reduced-motion: reduce) {
  .lp-cta__badge {
    transition: none !important;
  }
}


/* ── 14. MORE REASONS SECTION ───────────────────────────── */

/* ─ Section wrapper ─ */
.lp-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-2xl);
  /* 96px top / 96px bottom — matches inter-section rhythm */
}

/* ─ Section headline ─ */
.lp-more__heading {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  text-align: center;
  max-width: 600px;
  margin-bottom: var(--sp-xl);
  text-wrap: balance;
  /* 48px between headline and grid — matches lp-hiw */
}

/* ─ Grid container ─ */
.lp-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  /* align-items: stretch (default) — all cards in a row share the height
     of the tallest card, preventing uneven bottom edges */
}

/* ─ Feature card ─ */
/* Matches "The Deck Card Container" from the design brief:
   white surface, 20px radius, ultra-soft 6% opacity shadow */
.lp-more__item {
  color: inherit;
  text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--c-navy-08);
  border-radius: var(--r-card);
  /* 20px */
  box-shadow: var(--shadow-soft);
  /* 0 2px 20px rgba(26,50,98,0.06) */
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  /* Smooth elevation on hover — matches lp-hiw__card convention */
  transition:
    box-shadow var(--t-medium),
    border-color var(--t-medium),
    transform var(--t-medium);
}

.lp-more__item:hover {
  box-shadow: 0 8px 34px rgba(26, 50, 98, 0.11);
  border-color: rgba(86, 135, 232, 0.22);
  transform: translateY(-3px);
}

.lp-more__item:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 4px;
  border-radius: var(--r-card);
  border-color: rgba(86, 135, 232, 0.22);
  box-shadow: 0 8px 34px rgba(26, 50, 98, 0.11);
}

/* ─ Icon tile ─ */
.lp-more__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  /* card is flex-column; without this the tile stretches full width */
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(86, 135, 232, 0.08);
  margin-bottom: 18px;
  transition: background var(--t-medium);
}

.lp-more__item:hover .lp-more__icon-wrap,
.lp-more__item:focus-visible .lp-more__icon-wrap {
  background: rgba(86, 135, 232, 0.14);
}

.lp-more__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--c-mainblue);
  display: block;
  margin: 0;
  /* the wrap owns spacing now */
  transition: transform var(--t-medium) var(--ease-expo);
}

.lp-more__item:hover .lp-more__icon,
.lp-more__item:focus-visible .lp-more__icon {
  transform: scale(1.08);
}

/* ─ Feature title ─ */
.lp-more__title {
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-navy);
  margin-bottom: var(--sp-xs);
  text-wrap: balance;
  /* 8px — tight coupling to subtext */
}

/* ─ Feature subtext ─ */
.lp-more__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-navy);
  opacity: 0.68;
  margin: 0;
  text-wrap: pretty;
  /* flex-grow pushes link to the bottom of the card */
  flex-grow: 1;
  padding-bottom: var(--sp-sm);
  /* 12px gap between last text line and link */
}

/* ─ Documentation shortcut link ─ */
/* Matches lp-feat__shortcut: arrow + colour + hover slide animation */
.lp-more__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-navy);
  opacity: 0.55;
  align-self: flex-start;
  /* Pin to left edge of card */
  margin-top: auto;
  /* Floats link to bottom when card stretches via align-items: stretch */
  transition: color var(--t-fast), opacity var(--t-fast);
}

/* Propagate hover and focus states from the parent card container */
.lp-more__item:hover .lp-more__link,
.lp-more__item:focus-visible .lp-more__link {
  color: var(--c-mainblue);
  opacity: 1;
}

/* Arrow nudge on hover */
.lp-more__link-arrow {
  display: inline-block;
  transition: transform var(--t-medium) var(--ease-expo);
}

.lp-more__item:hover .lp-more__link-arrow,
.lp-more__item:focus-visible .lp-more__link-arrow {
  transform: translateX(3px);
}

/* Underline reveal on the link label — matches header nav / footer idiom */
.lp-more__link-text {
  position: relative;
}


/* ── 14a. MORE REASONS — RESPONSIVE ────────────────────── */

/* ─ Tablet (768px–1023px): 2-column grid ─ */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-more__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .lp-more__item {
    padding: 28px 24px;
  }
}

/* ─ Mobile (<768px): single column, centred ─ */
@media (max-width: 767px) {
  .lp-more {
    padding: var(--sp-xl) var(--sp-lg) var(--sp-2xl);
    /* 48px top / 96px bottom — more compact on mobile */
  }

  .lp-more__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
  }

  .lp-more__item {
    width: 100%;
    max-width: 420px;
    /* Prevents cards stretching to full viewport on large phones */
  }
}


/* ── 14b. MORE REASONS — ACCESSIBILITY ────────────────── */

@media (prefers-reduced-motion: reduce) {

  .lp-more__item,
  .lp-more__link-arrow,
  .lp-more__icon-wrap,
  .lp-more__icon {
    transition: none !important;
  }
}

/* ── 15. FAQ SECTION ───────────────────────────────────── */

.lp-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-2xl) var(--sp-lg);
  background-color: var(--c-whitesmoke);
}

.lp-faq__inner {
  width: 100%;
  max-width: 800px;
  /* Constrain width for optimal reading length */
}

.lp-faq__heading {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--c-navy);
  text-align: center;
  margin-bottom: var(--sp-xl);
  text-wrap: balance;
}

.lp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─ Individual FAQ Item (The Card) ─ */
.lp-faq__item {
  background: var(--c-white);
  border: 1px solid var(--c-navy-08);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow var(--t-medium), border-color var(--t-medium);
  /* Clips the answer when height is 0 */
}

.lp-faq__item:hover {
  border-color: var(--c-navy-12);
}

.lp-faq__item.is-open {
  border-color: rgba(86, 135, 232, 0.24);
  box-shadow: 0 6px 32px rgba(26, 50, 98, 0.10);
}

/* ─ Question Button ─ */
.lp-faq__question-wrapper {
  margin: 0;
}

.lp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 22px 24px;
  background: transparent;
  color: var(--c-navy);
  text-align: left;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast);
}

.lp-faq__question:hover {
  background: rgba(26, 50, 98, 0.02);
  /* Very subtle hover state */
}

.lp-faq__question:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: -2px;
  border-radius: var(--r-card);
  /* Matches card on first focus */
}

/* Rounded corners adjust when open because the card splits */
.lp-faq__item.is-open .lp-faq__question {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.lp-faq__item.is-open .lp-faq__question:focus-visible {
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.lp-faq__question-text {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  padding-right: var(--sp-md);
}

/* ─ Chevron Icon ─ */
.lp-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--c-navy);
  opacity: 0.6;
  transition: transform var(--t-medium) var(--ease-spring), opacity var(--t-fast), color var(--t-fast);
}

.lp-faq__item.is-open .lp-faq__icon {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--c-mainblue);
}

.lp-faq__question:hover .lp-faq__icon {
  opacity: 0.9;
}

.lp-faq__item.is-open .lp-faq__question:hover .lp-faq__icon {
  opacity: 1;
}

/* ─ Answer Container (CSS Grid Animation) ─ */
.lp-faq__answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-medium) var(--ease-expo);
  visibility: hidden;
  /* Prevent focus inside collapsed area */
}

.lp-faq__item.is-open .lp-faq__answer-wrapper {
  grid-template-rows: 1fr;
  visibility: visible;
}

.lp-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--t-medium) var(--ease-expo);
  /* Required for the grid-template-rows trick */
}

.lp-faq__item.is-open .lp-faq__answer-inner {
  opacity: 1;
}

/* Hairline divider marking the boundary between question and answer */
.lp-faq__answer-inner::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0 24px 18px;
  background: var(--c-navy-08);
}

.lp-faq__answer-text {
  padding: 0 24px 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-navy);
  opacity: 0.8;
  text-wrap: pretty;
}

/* ─ Documentation Link ─ */
.lp-faq__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-mainblue);
  letter-spacing: 0.01em;
  transition: opacity var(--t-fast);
}

.lp-faq__link:hover {
  opacity: 0.85;
}

.lp-faq__link:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 4px;
  border-radius: 4px;
}

.lp-faq__link-arrow {
  display: inline-block;
  transition: transform var(--t-medium) var(--ease-expo);
}

.lp-faq__link:hover .lp-faq__link-arrow {
  transform: translateX(3px);
}

/* Underline reveal on the link label — matches header nav / footer idiom */
.lp-faq__link-text {
  position: relative;
}

/* ─ Closer ─ */
.lp-faq__closer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--c-navy-08);
}

.lp-faq__closer-text {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--c-navy);
  opacity: 0.6;
}

/* Row of lightweight icon + text links — deliberately lighter than a
   bordered button. With three items sitting on one line, pill buttons
   would compete with each other for attention; the header-nav underline
   idiom (muted navy, blue on hover, underline reveal on the label) reads
   as a calm utility row instead, which fits better this close to the
   footer. */
.lp-faq__closer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  row-gap: 10px;
  max-width: 100%;
}

.lp-faq__closer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--c-navy);
  opacity: 0.75;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity var(--t-fast), color var(--t-fast);
}

.lp-faq__closer-link:hover {
  opacity: 1;
  color: var(--c-mainblue);
}

.lp-faq__closer-link:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 4px;
  border-radius: 4px;
}

.lp-faq__closer-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}

/* Underline reveal on the label only — matches header nav / footer idiom */
.lp-faq__closer-link-text {
  position: relative;
  display: inline-block;
}

.lp-faq__closer-link-text::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--r-pill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-medium) var(--ease-expo);
}

.lp-faq__closer-link:hover .lp-faq__closer-link-text::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.lp-faq__closer-sep {
  color: var(--c-navy);
  opacity: 0.25;
  font-size: 15px;
  line-height: 1;
  user-select: none;
}

/* ─ Responsive ─ */
@media (max-width: 767px) {
  .lp-faq {
    padding: var(--sp-xl) var(--sp-md) var(--sp-2xl);
  }

  .lp-faq__question {
    padding: 20px;
  }

  .lp-faq__question-text {
    font-size: 16px;
  }

  .lp-faq__answer-inner::before {
    margin: 0 20px 16px;
  }

  .lp-faq__answer-text {
    padding: 0 20px 20px;
    font-size: 15px;
  }

  .lp-faq__link {
    padding: 0 20px 20px;
  }

  .lp-faq__closer {
    margin-top: 32px;
    padding-top: 26px;
  }

  .lp-faq__closer-links {
    column-gap: 14px;
  }

  .lp-faq__closer-link {
    font-size: 14px;
  }
}

/* ─ Accessibility ─ */
@media (prefers-reduced-motion: reduce) {

  .lp-faq__item,
  .lp-faq__icon,
  .lp-faq__answer-wrapper,
  .lp-faq__answer-inner,
  .lp-faq__link-arrow,
  .lp-faq__closer-link,
  .lp-faq__closer-link-text::after {
    transition: none !important;
  }
}

/* ── 16. FOOTER ────────────────────────────────────────── */

.lp-footer {
  background-color: var(--c-mainblue);
  color: var(--c-white);
  padding: var(--sp-3xl) var(--sp-lg) 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-footer__grid {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-2xl);
}

/* ─ Column 1: Brand ─ */
.lp-footer__brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lp-footer__logo-link {
  display: inline-block;
  margin-bottom: var(--sp-md);
  transition: opacity var(--t-fast);
}

.lp-footer__logo-link:hover {
  opacity: 0.85;
}

.lp-footer__logo-link:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
  border-radius: 4px;
}

.lp-footer__tagline {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--sp-xl);
  max-width: 280px;
  line-height: 1.5;
}

.lp-footer__badges {
  display: flex;
  gap: 8px;
}

.lp-footer__badge {
  display: block;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.lp-footer__badge--appstore img {
  /* Apple's badge asset has extra internal padding — compensate to align with the Google Play badge */
  margin-left: -8px;
}

.lp-footer__badge:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.lp-footer__badge:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ─ Link Columns ─ */
.lp-footer__nav-col {
  display: flex;
  flex-direction: column;
}

.lp-footer__nav-title {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-white);
  margin-bottom: var(--sp-md);
  opacity: 0.9;
}

.lp-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-footer__link {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--t-fast);
  display: inline-block;
  position: relative;
  padding: 4px 0;
}

.lp-footer__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--c-white);
  border-radius: var(--r-pill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-medium) var(--ease-expo);
}

.lp-footer__link:hover {
  color: var(--c-white);
}

.lp-footer__link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.lp-footer__link:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
  border-radius: 2px;
}

.lp-footer__link--icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Discord and EU Icons styling */
.lp-footer__discord-icon {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--t-fast);
}

.lp-footer__link:hover .lp-footer__discord-icon {
  color: var(--c-white);
  /* Discord's brand blurple is near-invisible on the mainblue footer background */
}

.lp-footer__eu-icon {
  flex-shrink: 0;
  display: block;
}

/* ─ Sub-footer Bar ─ */
.lp-footer__sub {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-footer__legal {
  display: flex;
  gap: var(--sp-lg);
}

.lp-footer__link--sub {
  font-size: 14px;
}

.lp-footer__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}

.lp-footer__badge-europe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: 0.02em;
}

.lp-footer__copyright {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* ─ Responsive ─ */

/* Tablet (768px–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .lp-footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-2xl);
  }

  .lp-footer__brand-col {
    grid-column: 1 / -1;
    /* Spans full width on top */
  }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
  .lp-footer {
    padding: var(--sp-2xl) var(--sp-lg) var(--sp-xl);
  }

  .lp-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
    margin-bottom: var(--sp-xl);
  }

  .lp-footer__brand-col {
    align-items: center;
    text-align: center;
  }

  .lp-footer__tagline {
    margin-bottom: var(--sp-lg);
  }

  /* Keep badges side-by-side or stacked cleanly */
  .lp-footer__badges {
    flex-direction: row;
    gap: 12px;
  }

  .lp-footer__nav-col {
    align-items: center;
    text-align: center;
  }

  .lp-footer__sub {
    flex-direction: column;
    gap: var(--sp-lg);
    justify-content: center;
  }

  .lp-footer__meta {
    flex-direction: column;
    gap: 12px;
  }

  .lp-footer__legal {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* ─ Accessibility ─ */
@media (prefers-reduced-motion: reduce) {

  .lp-footer__badge,
  .lp-footer__link,
  .lp-footer__link::after,
  .lp-footer__discord-icon {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   ══════════════════════════════════════════════════════════ */

.cc-banner[hidden] {
  display: none;
}

.cc-banner {
  position: fixed;
  left: var(--sp-md);
  right: var(--sp-md);
  bottom: var(--sp-md);
  z-index: 1000;
  max-width: 640px;
  margin-inline: auto;
  background: var(--c-white);
  color: var(--c-navy);
  border: 1px solid var(--c-navy-08);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-header);
  font-family: var(--font-primary);
  padding: var(--sp-lg);
  animation: cc-banner-in var(--t-medium) var(--ease-expo);
}

@keyframes cc-banner-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-banner {
    animation: none;
  }
}

.cc-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}

.cc-banner__text {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.cc-banner__link {
  color: var(--c-mainblue);
  text-decoration: underline;
}

.cc-banner__link:hover {
  color: var(--c-mainblue-deep);
}

.cc-banner__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--sp-sm);
}

.cc-banner__btn {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  padding: var(--sp-xs) var(--sp-lg);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}

.cc-banner__btn--accept {
  background: var(--c-mainblue);
  color: var(--c-white);
  border: 1px solid var(--c-mainblue);
}

.cc-banner__btn--accept:hover {
  background: var(--c-mainblue-deep);
  border-color: var(--c-mainblue-deep);
}

.cc-banner__btn--reject {
  background: transparent;
  color: var(--c-navy);
  border: 1px solid var(--c-navy-08);
}

.cc-banner__btn--reject:hover {
  border-color: var(--c-navy-12);
}

.cc-banner__btn:focus-visible,
.cc-banner__link:focus-visible {
  outline: 2px solid var(--c-mainblue);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .cc-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-md);
  }

  .cc-banner__actions {
    justify-content: stretch;
  }

  .cc-banner__btn {
    flex: 1;
  }
}