/* ==========================================================================
   Routio — Signature components
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  /* var(--border) alone reads as almost invisible against the page
     background in daylight/mobile — a visible-weight border is what makes
     this read as a button rather than plain text. */
  border: 1.5px solid var(--text-tertiary);
}
.btn--ghost:hover { border-color: var(--text-secondary); }

.btn--light {
  background: #FFFFFF;
  color: #111827;
}
.btn--light:hover { background: #F1F5F9; }

.btn--sm { padding: 9px 16px; font-size: 14px; min-height: 40px; }

/* ---- Icon tile ---- */
.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--r-tile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 20px; height: 20px; }
.icon-tile--primary { background: var(--primary-soft); color: var(--primary); }
.icon-tile--accent { background: var(--accent-soft); color: var(--accent); }
.icon-tile--amber { background: var(--amber-soft); color: var(--amber); }
.icon-tile--violet { background: var(--violet-soft); color: var(--violet); }
.icon-tile--lg { width: 56px; height: 56px; border-radius: 14px; }
.icon-tile--lg svg { width: 28px; height: 28px; }
.icon-tile--sm { width: 32px; height: 32px; border-radius: 10px; }
.icon-tile--sm svg { width: 18px; height: 18px; }

/* ---- Metric pill ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pill--accent { background: var(--accent-soft); color: var(--accent-hover); }
.pill--primary { background: var(--primary-soft); color: var(--primary); }
.pill--amber { background: var(--amber-soft); color: var(--amber); }
.pill--violet { background: var(--violet-soft); color: var(--violet); }

/* ---- Left accent bar list rows ---- */
.accent-row {
  position: relative;
  padding: 16px 16px 16px 24px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
}
.accent-row::before {
  content: "";
  position: absolute;
  left: 8px; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.accent-row:nth-of-type(4n+1)::before { background: var(--accent); }
.accent-row:nth-of-type(4n+2)::before { background: var(--primary); }
.accent-row:nth-of-type(4n+3)::before { background: var(--amber); }
.accent-row:nth-of-type(4n+4)::before { background: var(--violet); }

/* ---- Segmented control ---- */
.segmented {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  gap: 2px;
}
.segmented button {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.segmented button[aria-checked="true"] {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ---- Stat trio row ---- */
.stats-band { padding-block: 24px; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 28px;
}
@media (min-width: 768px) { .stat-row { gap: 0; } }
.stat-cell {
  text-align: center;
  padding-inline: 12px;
  position: relative;
  min-width: 0;
}
@media (min-width: 768px) {
  .stat-cell:not(:first-child) { border-left: 1px solid var(--border); }
}
.stat-cell .metric { color: var(--text-primary); }
/* Turkish labels run 2-4x longer than the English strings this row was
   sized for, and at 2 columns with no wrap they collided edge to edge.
   Let them wrap (up to 2 lines) and reserve enough height that both rows
   stay aligned whether or not a given label actually wraps. */
@media (max-width: 767px) {
  .stat-cell .label {
    white-space: normal;
    text-wrap: balance;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.04em;
    min-height: 2.7em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}
.stat-cell .label { margin-top: 6px; display: block; }
@media (min-width: 768px) { .stat-cell .label { white-space: nowrap; } }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.card--hover:hover { transform: translateY(-2px); }

.section-card {
  border-radius: var(--r-section);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ---- Device bezel ---- */
.bezel {
  position: relative;
  border-radius: 24px;
  background: #0B0E14;
  padding: 12px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
}
.bezel--standard { aspect-ratio: 5 / 3; }
.bezel--omoda { aspect-ratio: 8 / 3; }
.bezel img, .bezel picture {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 13px;
  overflow: hidden;
  object-fit: cover;
}
.bezel picture img { width: 100%; height: 100%; object-fit: cover; }
/* A dark screenshot that failed to load falls back to the light one; mark
   the chrome around it so the swap isn't silently invisible in dark theme. */
.bezel:has(.is-dark-fallback) { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }

/* ---- Chips (languages) ---- */
.chip {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard),
              height 200ms var(--ease-standard),
              background-color var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { border-bottom-color: var(--border); height: 64px; }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.primary-nav { display: none; }
@media (min-width: 900px) {
  .primary-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .primary-nav a { padding-block: 8px; border-bottom: 2px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
  .primary-nav a:hover, .primary-nav a[aria-current="true"] {
    color: var(--text-primary);
    border-color: var(--accent);
  }
}

/* Promoted Omoda nav item (§1.1): the only pill in the nav. */
.nav-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  border: 1px solid transparent;
  border-bottom: none !important;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-pill:hover { background: color-mix(in srgb, var(--primary-soft) 80%, var(--text-primary) 8%); }
.nav-pill svg { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; }

/* Two-zone header (§1.2) */
.header-divider {
  display: none;
}
@media (min-width: 900px) {
  .header-divider {
    display: block;
    width: 1px;
    height: 20px;
    background: var(--border);
    margin-inline: 4px;
    flex-shrink: 0;
    transition: background-color var(--dur-base) var(--ease-standard);
  }
}

/* Theme toggle in the header utility group (§1.3) */
.theme-toggle {
  display: inline-flex;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.theme-toggle:hover { background: var(--surface-muted); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }
/* On small screens the header shows only the brand + hamburger, per §3.1;
   language switch and Download move into the mobile sheet. */
@media (max-width: 639px) {
  .header-actions .lang-switch,
  .header-actions > .btn { display: none; }
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
}
.lang-switch button {
  padding: 8px 12px;
  color: var(--text-secondary);
}
.lang-switch button[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--canvas);
}

.nav-toggle {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: var(--r-tile);
  border: 1px solid var(--border);
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-sheet {
  position: fixed;
  inset: 0;
  /* Belt-and-suspenders on top of inset:0 — on some mobile browsers a
     position:fixed element with left/right:0 can size against a wider
     containing block than the actual visual viewport, leaving a strip of
     this panel's own edge poking out past the screen. 100vw always ties to
     the real viewport regardless of that. */
  width: 100vw;
  max-width: 100vw;
  background: var(--canvas);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 24px var(--container-pad);
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.mobile-sheet.is-open { transform: translateY(0); }
.mobile-sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
#mobile-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}
.mobile-sheet .lang-switch button { padding: 12px 16px; }
.mobile-sheet nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-sheet nav a {
  padding: 16px 4px;
  font-size: 20px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

/* ---- Fixed mobile bottom CTA bar ---- */
.mobile-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100vw;
  max-width: 100vw;
  z-index: 90;
  padding: 12px var(--container-pad);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.mobile-cta-bar.is-visible { transform: translateY(0); }
.mobile-cta-bar .btn { width: 100%; }
@media (min-width: 900px) { .mobile-cta-bar { display: none; } }

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 40px;
}
@media (min-width: 768px) { .hero { padding-block: 52px; } }
.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background: var(--brand-gradient);
  opacity: 0.12;
  filter: blur(90px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: drift 18s ease-in-out infinite alternate; }
}
@keyframes drift {
  from { transform: translate(0, 0); }
  to { transform: translate(20px, 30px); }
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 5fr 7fr; gap: 32px; }
  .hero.is-omoda-visual .hero-grid { grid-template-columns: 4.5fr 7.5fr; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-trust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}
/* Align to the first line's cap-height, not centred against the whole
   (often two-line) paragraph — centring made it float between the lines. */
.hero-trust svg { flex-shrink: 0; margin-top: 3px; }
/* Six lines of copy on a phone pushed the CTA well below the fold; three
   lines keeps the download button reachable without a second scroll.
   Desktop (>=768px) keeps the full paragraph, unclamped. */
@media (max-width: 767px) {
  .hero-content .lead {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.hero-visual {
  transform: perspective(1400px) rotateY(-6deg);
}
@media (max-width: 1023px) { .hero-visual { transform: none; } }
.hero-scroll-cue {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.hero-scroll-cue .chevron {
  width: 18px; height: 18px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: bob 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue .chevron { animation: none; } }
@keyframes bob { 0%,100% { transform: rotate(45deg) translate(0,0);} 50% { transform: rotate(45deg) translate(4px,4px);} }
.hero.is-transitioning .hero-scroll-cue { opacity: 0; transition: opacity 150ms var(--ease-standard); }

/* ---- Omoda Hero Mode ---- */
/* Everything visual — dark palette, bezel shape/crossfade — is driven by one
   flag, .is-omoda-visual, kept in sync with the target mode at all times
   (including rest). data-mode itself only flips at the very end of a run
   (see omoda-hero.js) since it also controls which content block is
   display:none — flipping that early would kill the outgoing block's fade
   mid-transition. The two are deliberately decoupled. */
.hero.is-omoda-visual {
  --canvas-deep: #0B111B;
  --surface: #141C2B;
  --surface-muted: #182235;
  --border: #223046;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary: #6B7A90;
  --accent: #38CFA2;
  --accent-hover: #3CEBB7;
  --accent-soft: #0F2A22;
  --accent-contrast: #063D2C;
  background: var(--canvas-deep);
  color: var(--text-primary);
}
.hero.is-transitioning[data-direction="forward"] { transition: background-color 600ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; }
.hero.is-transitioning[data-direction="reverse"] { transition: background-color 450ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; }

.hero-copy { position: relative; }
.hero.is-transitioning .hero-copy { overflow: hidden; }
.hero.is-transitioning .hero-content { position: absolute; inset: 0; }
.hero-content--omoda { display: none; }
.hero[data-mode="omoda"] .hero-content--standard { display: none; }
.hero[data-mode="omoda"] .hero-content--omoda { display: block; }
.hero.is-transitioning .hero-content--standard,
.hero.is-transitioning .hero-content--omoda { display: block; }

/* Step 1/3 — text out: fade only, no movement, no stagger. */
.hero-content { opacity: 1; transform: translateY(0); }
.hero-content.is-leaving { opacity: 0; pointer-events: none; }
.hero.is-transitioning[data-direction="forward"] .hero-content.is-leaving {
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero.is-transitioning[data-direction="reverse"] .hero-content.is-leaving {
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step 3/3 — text in: fade + 10px rise together, no stagger. CTA colour
   (from the dark-palette flip above) rides the same curve/window. */
.hero-content.is-entering { opacity: 0; transform: translateY(10px); }
.hero-content.is-entering.is-revealed { opacity: 1; transform: translateY(0); }
.hero.is-transitioning[data-direction="forward"] .hero-content.is-entering.is-revealed {
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 600ms,
              transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 600ms;
}
.hero.is-transitioning[data-direction="reverse"] .hero-content.is-entering.is-revealed {
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 450ms,
              transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.hero.is-transitioning[data-direction="forward"] .hero-content .btn {
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 600ms,
              color 300ms cubic-bezier(0.4, 0, 0.2, 1) 600ms,
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 600ms;
}
.hero.is-transitioning[data-direction="reverse"] .hero-content .btn {
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 450ms,
              color 250ms cubic-bezier(0.4, 0, 0.2, 1) 450ms,
              border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
@media (prefers-reduced-motion: reduce) {
  .hero-content, .hero-content .btn { transition: none !important; }
  .hero-content.is-entering,
  .hero-content.is-entering.is-revealed { transform: none !important; }
}

.hero-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.hero-back-link:hover { background: color-mix(in srgb, var(--surface-muted) 70%, var(--text-primary) 10%); border-color: var(--text-secondary); }
.hero-back-link svg { width: 16px; height: 16px; }

/* Step 2/3 — crossfade + frame: the two screenshots dissolve into each
   other while the bezel eases from 5:3 to a wider ratio, in the same window.
   Nothing else — no overlay, no mask, no glow. Both fill the same outer box
   (same position/size), so the crossfade never has a seam or a size jump. */
.hero-bezel-wrap { position: relative; width: 100%; aspect-ratio: 5 / 3; border-radius: 24px; overflow: hidden; }
.hero-bezel { position: absolute; inset: 0; opacity: 0; }
/* The standard screenshot keeps the same dark device-frame padding used
   elsewhere on the page (see .bezel in the shared components below); the
   Omoda photo is a real interior shot and stays full-bleed, no padding. */
.hero-bezel--standard {
  opacity: 1;
  background: #0B0E14;
  padding: 12px;
  border-radius: 24px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hero-bezel--standard img { border-radius: 13px; }
.hero-bezel--omoda {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.hero-bezel img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 300ms var(--ease-standard); }
/* Click-to-enlarge affordance, mouse-only: the wrapper stays aria-hidden
   (it's a decorative photo, not the section's actual content, which lives
   in the text column), so this only gates pointer-events — no
   role/tabindex is added, unlike the keyboard-accessible bento triggers. */
.hero.is-omoda-visual .hero-bezel--omoda {
  pointer-events: auto;
  cursor: zoom-in;
}
.hero.is-omoda-visual .hero-bezel--omoda:hover img { transform: scale(1.02); }

.hero.is-omoda-visual .hero-bezel-wrap { aspect-ratio: 8 / 5; }
.hero.is-omoda-visual .hero-bezel--standard { opacity: 0; }
.hero.is-omoda-visual .hero-bezel--omoda { opacity: 1; }

.hero.is-transitioning[data-direction="forward"] .hero-bezel-wrap {
  transition: aspect-ratio 600ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
}
.hero.is-transitioning[data-direction="forward"] .hero-bezel {
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
}
.hero.is-transitioning[data-direction="reverse"] .hero-bezel-wrap {
  transition: aspect-ratio 450ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
.hero.is-transitioning[data-direction="reverse"] .hero-bezel {
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bezel-wrap, .hero-bezel { transition: none !important; }
}

/* ---- Anti-confusion strip ---- */
.strip {
  background: var(--canvas-deep);
  padding-block: 28px;
  text-align: center;
}
.strip p { color: var(--text-secondary); font-size: 15px; }

/* ---- Feature split layouts ---- */
.split { display: grid; gap: 32px; align-items: center; }
/* A grid item's default min-width is auto (its own min-content), so a wide
   child (e.g. the calculator's slider row) can force the whole track — and
   with it the page — wider than the viewport instead of shrinking to fit. */
.split > * { min-width: 0; }
@media (min-width: 1024px) {
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--6-6 { grid-template-columns: 6fr 6fr; }
}
/* Paired cards (§2.1): equal top edge, equal height, tighter gap */
.split--pair { align-items: stretch; gap: 20px; }
/* Settings split (§1.3): top-align so column height is driven by content,
   not centered padding around the shorter side. */
.split--top { align-items: start; }
.pair-card { padding: 24px; display: flex; flex-direction: column; }
@media (max-width: 767px) { .pair-card { padding: 20px; } }
.pair-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pair-card .caption { margin-top: auto; padding-top: 12px; }

/* ---- Hotspots ---- */
.hotspot-figure { position: relative; }
.hotspot {
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent-hover);
  font-weight: 800;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transform: translate(-50%, -50%);
}
.hotspot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: .5;
  animation: pulse-ring 2.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hotspot::after { animation: none; } }
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hotspot-tip {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  max-width: 240px;
  padding: 12px 14px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.hotspot-tip.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* This is a real <ol> for semantics, but the number is hand-set via each
   item's own <strong> — base.css only resets `ul`'s marker, not `ol`'s, so
   without this the browser's own native "1." doubled up with that <strong>. */
.hotspot-list { display: none; list-style: none; padding-left: 0; margin: 0; }
@media (max-width: 767px) {
  .hotspot-figure .hotspot, .hotspot-figure .hotspot-tip { display: none; }
  .hotspot-list { display: grid; gap: 10px; margin-top: 20px; }
}

/* ---- Timeline (feature #2) ---- */
.timeline {
  display: grid;
  gap: 20px;
  margin-top: 36px;
  position: relative;
}
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(3, 1fr); }
}
.timeline-step { position: relative; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-num {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---- Calculator ---- */
.calc-card { padding: 24px; display: grid; gap: 18px; }
@media (max-width: 767px) { .calc-card { padding: 20px; } }
/* Every level here is itself a grid (.calc-card > .calc-field > .calc-input-
   row), and a grid item's default min-width is auto (its min-content) —
   each nesting level needs its own override or the innermost row's content
   pushes every ancestor wider than the card, and the card wider than the
   phone. */
.calc-card > * { min-width: 0; }
.calc-field { display: grid; gap: 8px; min-width: 0; }
.calc-field > * { min-width: 0; }
.calc-field label { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.calc-input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.calc-input-row input[type="number"] {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--r-tile);
  border: 1px solid var(--border);
  background: var(--canvas);
  color: var(--text-primary);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
/* Range inputs default to min-width:auto in a flex row, which resolves to
   the browser's own intrinsic slider width — flex-shrink + min-width:0
   fixes this in desktop-engine rendering, but real Android Chrome's native
   slider widget has its own minimum touch-target width that can still
   paint wider than its shrunk flex box, overflowing the row regardless of
   the CSS box model (a real-device-only quirk, invisible in desktop
   emulation). flex-wrap below is the actual fix: on narrow phones the
   slider gets a full row to itself (plenty of room, no native-width
   conflict possible), and the number+currency pair wraps to the next line
   together instead of everything fighting for space in one row. */
.calc-input-row input[type="range"] { flex: 2; min-width: 0; accent-color: var(--accent); }
@media (max-width: 480px) {
  .calc-input-row input[type="range"] { flex-basis: 100%; }
}
.calc-result {
  margin-top: 4px;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--accent-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.calc-result .metric { color: var(--accent-hover); }
.currency-select {
  flex-shrink: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 6px 10px;
  font-weight: 700;
}
.calc-price-status {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.calc-price-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.calc-price-status.is-fallback::before { background: var(--amber); }
.calc-formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ---- Bento grid (reports) ---- */
.bento {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .bento-large { grid-column: span 6; }
  .bento-tall { grid-column: span 6; }
  .bento-wide { grid-column: span 12; }
}
/* Bento cards: the card itself is a fixed dark panel (not var(--surface)),
   so there's no light-theme seam anywhere behind the image, and the caption
   is a gradient label sitting directly on top of the picture instead of
   living in its own white strip below it. A thin inset (the card's own dark
   background showing through) reads as a frame around the screenshot,
   consistent with the bezel look used elsewhere on the page — thinner on
   mobile, where a heavy frame eats too much of an already-small image. */
.bento-cell {
  position: relative;
  overflow: hidden;
  background: #0B0E14;
  border-color: transparent;
}
.bento-cell .bezel {
  padding: 12px;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
.bento-cell .bezel img,
.bento-cell .bezel picture { border-radius: 8px; }
@media (max-width: 767px) {
  .bento-cell .bezel { padding: 8px; border-radius: 14px; }
  .bento-cell .bezel img,
  .bento-cell .bezel picture { border-radius: 7px; }
}
/* The large and tall cells are equal-width columns (see the grid-column
   spans above), so at the same 5:3 aspect ratio their natural heights
   already match — no stretching or cropping needed to line up their
   bottoms. (Forcing the tall cell to fill a taller row used to require
   either cropping into the screenshot's text or leaving a dead gap above
   it; equal widths sidesteps the trade-off entirely.) */
.bento-tall .bezel { aspect-ratio: 5 / 3; }
/* The wide cell runs the full section width with a wider crop so a 5:3
   screenshot doesn't balloon the row height. */
.bento-wide .bezel { aspect-ratio: 3 / 1; }
.bento-cell figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 22px;
  padding-top: 56px;
  background: linear-gradient(to top, rgba(4, 6, 10, .97) 0%, rgba(4, 6, 10, .97) 30%, rgba(4, 6, 10, 0) 85%);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}
@media (max-width: 639px) {
  #reports .container { padding-inline: 16px; }
  .bento-cell figcaption { padding: 16px; padding-top: 48px; font-size: 15px; }
}
/* Click-to-enlarge affordance */
.bento-cell .bezel { cursor: zoom-in; }
.bento-cell .bezel:hover img,
.bento-cell .bezel:focus-visible img { transform: scale(1.03); }
.bento-cell .bezel img { transition: transform 300ms var(--ease-standard); }

/* ---- Widget gallery grid ---- */
.widget-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 768px) { .widget-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .widget-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .widget-grid { grid-template-columns: repeat(6, 1fr); } }
.widget-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: default;
}
.widget-card .name { font-weight: 700; font-size: 14px; }
.widget-card .desc {
  font-size: 12px;
  color: var(--text-secondary);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.widget-card:hover .desc,
.widget-card:focus-within .desc { max-height: 80px; opacity: 1; }

/* ---- Launcher section ---- */
.launcher-section {
  position: relative;
  background: var(--canvas-deep);
  overflow: hidden;
  text-align: center;
}
.launcher-glow {
  position: absolute;
  inset: -20% 10% auto 10%;
  height: 90%;
  background: var(--brand-gradient);
  opacity: 0.18;
  filter: blur(100px);
  border-radius: 50%;
}
.launcher-section .container { position: relative; z-index: 1; }
.launcher-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* ---- Omoda section (dark island, regardless of page theme) ---- */
.omoda-section {
  background: var(--canvas);
  color: var(--text-primary);
  padding-block: 48px;
}
@media (min-width: 768px) { .omoda-section { padding-block: 64px; } }
/* When the page-wide theme is also dark, the section's own fixed-dark canvas
   is nearly identical to the surrounding page background, so the boundary
   between them disappears. Swap to the slightly-lighter --surface-teal token
   (already defined on .omoda-section itself) only in that combination. */
:root[data-theme="dark"] .omoda-section { background: var(--surface-teal); }
.omoda-facts {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;
}

/* ---- Omoda slider (§2.3): one slide fully visible, auto-advance,
   native scroll-snap swipe under 768px, JS-driven slide transform above it. ---- */
.omoda-slider {
  position: relative;
  margin-top: 36px;
  max-width: 1100px;
  margin-inline: auto;
}
.slider-viewport {
  overflow: hidden;
  border-radius: 24px;
}
.slider-track {
  display: flex;
}
.slider-track .bezel--omoda {
  flex: 0 0 100%;
  min-width: 0;
}
@media (max-width: 767px) {
  .slider-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .slider-viewport::-webkit-scrollbar { display: none; }
  .slider-track .bezel--omoda { scroll-snap-align: start; }
}
@media (min-width: 768px) {
  .slider-track { transition: transform var(--dur-slow) var(--ease-standard); }
}
@media (prefers-reduced-motion: reduce) {
  .slider-track { transition: none; }
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: var(--text-primary);
}
@media (min-width: 900px) {
  .slider-arrow { display: flex; }
  .slider-arrow--prev { left: -56px; }
  .slider-arrow--next { right: -56px; }
}
@media (min-width: 768px) and (max-width: 1219px) {
  .slider-arrow { display: flex; }
  .slider-arrow--prev { left: 8px; }
  .slider-arrow--next { right: 8px; }
}
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.slider-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--border);
  transition: width var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.slider-dot[aria-selected="true"] { background: var(--accent); width: 22px; }

/* ---- Wide-image mobile scroller (generic) ---- */
.scan-wrap { position: relative; }
@media (max-width: 767px) {
  .scan-wrap.is-wide {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .scan-wrap.is-wide .bezel { width: 150%; max-width: none; }
  .scan-wrap.is-wide::before, .scan-wrap.is-wide::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 24px;
    z-index: 2;
    pointer-events: none;
  }
  .scan-wrap.is-wide::before { left: 0; background: linear-gradient(90deg, var(--canvas), transparent); }
  .scan-wrap.is-wide::after { right: 0; background: linear-gradient(270deg, var(--canvas), transparent); }
}
.scan-hint {
  display: none;
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: 8px;
  text-align: center;
}
@media (max-width: 767px) { .scan-hint.is-wide { display: block; } }

/* ---- Privacy strip ---- */
.privacy-strip { display: grid; gap: 12px; }
.privacy-strip .h3 { display: flex; align-items: center; gap: 12px; }

/* ---- Single-line bands (§1.2 / §1.4 optional merge) ---- */
.section--band { padding-block: 28px; }
@media (min-width: 768px) { .section--band { padding-block: 56px; } }
.combo-band { display: grid; gap: 32px; align-items: center; }
@media (min-width: 768px) { .combo-band { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* ---- FAQ accordion ---- */
.faq-item {
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 12px;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  font-weight: 700;
  position: relative;
  padding-left: 28px;
}
.faq-q::before {
  content: "";
  position: absolute;
  left: 8px; top: 14px; bottom: 14px;
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.faq-q .plus {
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
}
.faq-q .plus::before, .faq-q .plus::after {
  content: "";
  position: absolute;
  background: var(--text-secondary);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.faq-q .plus::before { width: 14px; height: 2px; }
.faq-q .plus::after { width: 2px; height: 14px; }
.faq-item[data-open="true"] .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a {
  height: 0;
  overflow: hidden;
  transition: height var(--dur-base) var(--ease-standard);
}
.faq-a-inner { padding: 0 20px 18px 28px; color: var(--text-secondary); }

/* ---- Final CTA band ---- */
.final-cta {
  position: relative;
  background: var(--brand-gradient);
  color: #FFFFFF;
  text-align: center;
  overflow: hidden;
  padding-block: 56px;
}
@media (min-width: 768px) { .final-cta { padding-block: 80px; } }
.final-cta::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta p.caption { color: rgba(255,255,255,.75); margin-top: 16px; }

/* ---- Footer ---- */
.site-footer { padding-block: 56px 32px; border-top: 1px solid var(--border); }
.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-grid h4 { font-size: 13px; margin-bottom: 14px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.footer-grid ul { display: grid; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.footer-grid ul a:hover { color: var(--text-primary); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ---- Plans ---- */
.plan-card { padding: 24px; }
@media (max-width: 767px) { .plan-card { padding: 20px; } }
.plan-options { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 640px) { .plan-options { grid-template-columns: repeat(3, 1fr); } }
.plan-option {
  padding: 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  text-align: center;
}
.plan-option .price { font-family: var(--font-display); font-weight: 800; font-size: 28px; margin-block: 8px; }
/* Placeholder tokens: unmistakably not a real price until the client fills them in */
.plan-option .price--placeholder {
  color: var(--text-tertiary);
  font-size: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r-tile);
  padding: 6px 10px;
  display: inline-block;
}
.plan-steps { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 768px) { .plan-steps { grid-template-columns: repeat(3, 1fr); } }
.trial-badge { display: none; }
.trial-badge.is-active { display: inline-flex; }

/* ---- Lightbox (bento screenshot zoom) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 9, 14, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--ease-standard), visibility 0s linear 280ms;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms var(--ease-standard), visibility 0s linear;
}
.lightbox-frame {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  transform: scale(0.94) translateY(8px);
  opacity: 0;
  transition: transform 320ms var(--ease-standard), opacity 320ms var(--ease-standard);
}
.lightbox.is-open .lightbox-frame { transform: scale(1) translateY(0); opacity: 1; }
.lightbox-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #F1F5F9;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.lightbox-close:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 639px) {
  .lightbox { padding: 16px; }
  .lightbox-close { top: -48px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-frame { transition: opacity 150ms linear !important; transform: none !important; }
}