/* =====================================================================
   site.css — shared stylesheet for cberk.dev
   ---------------------------------------------------------------------
   All structural + component rules live here and are driven entirely by
   CSS custom properties. Each page declares ONLY its own color block in
   an inline :root { … } and links this file. That keeps every page on
   one identical layout — change a component here and it changes
   everywhere. vercel.json serves this file must-revalidate, so the
   link stays /assets/site.css with no cache-bust query.

   Color contract each page must define in its inline :root:
     --bg              page background
     --surface         card / panel background
     --text            primary text (headings)
     --text-muted      secondary text
     --border          hairline border color
     --accent          brand accent
     --accent-2        lighter accent (hero gradient end)
     --accent-dark     accent hover
     --accent-tint     translucent accent (badges, icon chips)
     --accent-border   border for accent chips
     --on-accent       text color placed on top of --accent fills
     --accent-shadow         soft accent glow (buttons/hero at rest)
     --accent-shadow-strong  stronger accent glow (hover)
   Optional:
     --positive        secondary status color (e.g. RealROI green dot)
     --card-bg         fill for card surfaces; defaults to --surface
     --card-border     hairline for card surfaces; defaults to --border
   A page sets --card-bg/--card-border when its cards should be tinted by
   the accent rather than sitting on a flat panel colour — the way the iOS
   apps paint their cells. Pages that leave them unset are unaffected.
   ===================================================================== */

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

/* No scrollbar and no reserved gutter. The gutter held a strip on the
   trailing edge at all times, so the footer rule stopped short of the
   window. It also flashed the canvas color on a theme change until the
   next scroll. Hiding the bar keeps centred layout from jumping between
   short pages and long ones, which is what the gutter was there to do.
   The bare pseudo is what Safari uses for the viewport bar. */
html {
  background-color: var(--bg);
  scrollbar-width: none;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Short pages pin the footer to the viewport bottom. min-height (not
     height) lets a long page grow and scroll the footer away with it. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

/* Dark-mode icon swap helper (used by adaptive pages; harmless elsewhere) */
.icon-light { display: block; }
.icon-dark  { display: none; }
@media (prefers-color-scheme: dark) {
  .icon-light { display: none; }
  .icon-dark  { display: block; }
}

/* ------------------------------------------------------------------ Nav */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.nav-logo span {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

.nav-cta {
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s, transform 0.1s;
}

.nav-cta:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.nav-back {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-back:hover { color: var(--accent); }

/* --------------------------------------------- Glass tab bar (site nav)
   Shared by the SPA shell (/, where a JS-driven .glass-indicator
   slides between tabs) and the standalone app pages (plain links, with
   the current one marked aria-current="page"). Keeping one definition
   means both entry points show the same navigation. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 40px;
  max-width: 1100px;
  margin: 0 auto;
  pointer-events: none; /* individual children re-enable */
}

.site-nav > * { pointer-events: auto; }

/* The site logo lives at the top of the home hero, not in the nav —
   the nav is the tab bar and nothing else. */

/* Equal side columns keep the bar centred no matter what sits beside it
   (or whether anything does). Placement is explicit rather than
   auto-flow, so the right-hand item stays right once the bar docks to
   the bottom on narrow screens and vacates the middle column. */
.site-nav > .nav-logo   { grid-column: 1; justify-self: start; }
.site-nav > .glass-tabbar { grid-column: 2; }
.site-nav > .nav-cta,
.site-nav > .nav-back   { grid-column: 3; justify-self: end; }

.glass-tabbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  /* Holds the hairline's place. The plate below draws it. */
  border: 1px solid transparent;
  border-radius: 100px;
  isolation: isolate;
}

/* The glass itself, on a plate behind the tabs instead of the bar's own
   box. The shell stretches the plate past either end when the pill is
   dragged there, and nothing in the bar's layout moves with it.
   The glass is thin on purpose, a light tint and a small blur: the
   shell's light trails pass behind the bar and should read through it.
   It is the same thin glass at rest and on every page. */
.glass-tabbar::before {
  content: '';
  position: absolute;
  inset: -1px; /* out to the bar's border box */
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 26%, transparent);
  -webkit-backdrop-filter: blur(4px) saturate(1.8);
  backdrop-filter: blur(4px) saturate(1.8);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  transition: border-color 0.5s ease;
}

.glass-tab {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  position: relative;
  z-index: 1;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease, transform 0.15s ease;
}

/* Only where the pointer can hover. On a touchscreen hover sticks to the
   last tab touched, so that tab stayed lit after the selection moved on. */
@media (hover: hover) {
  .glass-tab:hover { color: var(--text); }
}
.glass-tab:active { transform: scale(0.94); }

/* aria-current="page" on an app's own page, "true" on its sub-pages
   (support), so a support page still shows which section you're in. */
.glass-tab[aria-selected="true"],
.glass-tab[aria-current] { color: var(--text); }

/* The floating glass "lens" that indicates the current page. The shell
   animates the element; static pages paint it onto the current tab. */
.glass-indicator,
.glass-tab[aria-current] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface) 92%, transparent) 0%,
    color-mix(in srgb, var(--surface) 74%, transparent) 100%
  );
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}

.glass-indicator {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  width: 0;
  border-radius: 100px;
  z-index: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.5s ease;
  will-change: transform, width;
}

.glass-indicator.no-anim { transition: none; }

/* Dock the pill to the bottom, iOS-style. A centred bar needs room for
   two equal side columns, so it runs out of top-row space well before a
   phone — every page docks at the same width. */
@media (max-width: 860px) {
  .glass-tabbar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
  }

  .glass-tabbar::before {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.12),
      0 1px 3px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  }

  /* keep page content clear of the docked bar */
  body:has(.glass-tabbar) { padding-bottom: 90px; }

  /* Once the bar docks, a nav holding nothing else is an empty sticky
     strip — collapse it to zero height. Not display:none, which would
     take the docked bar down with it. Pages with a logo or back link
     keep their row. */
  .site-nav:not(:has(.nav-logo, .nav-cta, .nav-back)) { padding: 0; }
}

@media (max-width: 700px) {
  .site-nav { padding: 12px 20px; }
  .glass-tab { padding: 9px 13px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-indicator { transition: none; }
}

/* ----------------------------------------------------------------- Hero */
.hero {
  text-align: center;
  padding: 80px 24px 60px;
  max-width: 720px;
  margin: 0 auto;
}

/* App icon, first thing in the hero. Sources are 1024px square, so this
   stays crisp well past 3x. */
/* The iOS dark-variant icons ship with a transparent background, meant to
   be composited over a system backdrop. Without one, whatever sits behind
   them shows through — on a tinted card that means the icon picks up the
   accent. --bg gives them their own opaque tile. The light variants are
   opaque, so this is invisible there. */
.hero-icon,
.app-card-head img {
  background-color: var(--bg);
}

/* The tile is --bg, so on the hero it is the page colour and the squircle
   would read as nothing — the dark variants' art just floats. .hero-plate
   puts the silhouette back by wearing the same glass the tab bar does:
   a bright 1px lip along the top, a hairline ring, and a dark seat at the
   bottom, over a drop shadow.

   The glass has to live on a wrapper, not the image. Inset shadows on a
   replaced element paint *under* its content, so an inset lip on the <img>
   itself is invisible the moment the artwork is opaque — which the light
   variants are. The app pages already wrap the icon in <picture> for the
   dark-mode source; home wraps the avatar in a <span> to match. */
.hero-plate {
  position: relative;
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto 30px;
  border-radius: 30px;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Sized in px rather than 100%, and still self-centring, so that an icon
   that somehow renders without its plate — a browser on cached markup
   whose cached CSS has expired — falls back to the old bare tile instead
   of inflating to the hero's full width. Inside the plate the two are the
   same 128px, so the margin never applies. */
.hero-icon,
.hero-avatar {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border-radius: inherit;
}

.hero-avatar { object-fit: cover; }

/* The glass film. Kept gentle — this sits *over* the icon artwork, unlike
   the tab bar's, which sits over the page — so the wash fades out by the
   top third and only the lip is at full strength. */
.hero-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.05) 34%,
    rgba(255, 255, 255, 0) 55%,
    rgba(0, 0, 0, 0.07) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}

.hero h1 {
  font-size: clamp(38px, 7vw, 62px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 20px;
  color: var(--text);
}

.hero h1 span {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* App pages lead with the app's own name under the icon rather than a
   marketing headline, in that page's accent. Tracking is looser than the
   headline default — -2px closes up a two-word name uncomfortably. */
.hero h1.app-name {
  color: var(--accent);
  letter-spacing: -1.5px;
  margin-bottom: 10px;
}

/* The line that used to head the features section. It sits between the
   app name and the description, and outranks the description — bigger,
   heavier, full-strength text colour against the description's muted. */
.hero .app-tagline {
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--text);
  max-width: 560px;
  margin: 0 auto 16px;
  text-wrap: balance;
}

.hero p {
  font-size: 19px;
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------- Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.2s;
  box-shadow: 0 4px 24px var(--accent-shadow);
}

/* Hover darkens and nothing else — no lift, no swelling glow. */
.btn-primary:hover {
  background: var(--accent-dark);
}

.btn-primary svg { width: 20px; height: 20px; }

.btn-secondary {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 4px;
  transition: color 0.2s;
}

.btn-secondary:hover { color: var(--accent); }

/* Apple's "Download on the App Store" badge. Used unmodified per Apple's
   marketing guidelines — only scaled, never recoloured or re-typeset.
   Two variants ship: .badge-light shows on light backgrounds, .badge-dark on
   dark. Pages whose palette is dark in both schemes use the dark one alone. */
.app-store-badge {
  display: inline-block;
  line-height: 0;
}

.app-store-badge img {
  height: 52px;
  width: auto;
  display: block;
}

.app-store-badge .badge-dark { display: none; }

@media (prefers-color-scheme: dark) {
  .app-store-badge .badge-light { display: none; }
  .app-store-badge .badge-dark { display: block; }
}

/* ------------------------------------------------------- Section headers */
/* Now that the sections have no headings, this label is the only thing
   marking them — sized up to carry that on its own, but kept uppercase
   and tracked out so it still reads as a label rather than a title. */
.section-label {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 12px;
}

.section-title {
  text-align: center;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 48px;
  color: var(--text);
}

/* Sections that dropped their title leave the label sitting on the grid —
   the label's 12px gap was sized to sit under a heading, not on content. */
.section-label:has(+ .features-grid),
.section-label:has(+ .apps-grid),
.section-label:has(+ .faq-list) { margin-bottom: 32px; }

/* ------------------------------------------------------------- Features */
/* Top padding carries the gap the stat strip used to hold between the
   hero and the first section heading — the hero's own bottom padding
   alone leaves the label sitting on the download badge. */
.features {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px 100px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

/* Emoji and title share the first line; the description spans both
   columns underneath. */
.feature-card {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--card-border, var(--border));
  border-radius: 16px;
  padding: 32px;
  /* Leaving-hover curve. The arriving one lives on :hover — a rule's
     transition governs the change *into* the state it describes, so
     splitting them is what lets the glow ease out on and in off. */
  transition: background-color 0.3s ease-in, box-shadow 0.3s ease-in;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
}

/* Hover lifts the tint rather than the card. Both the fill and the glow
   are mixed from --accent, so each card glows in its own app's colour
   wherever it appears — no per-page hover rules needed.

   The glow is centred (no y offset): the card doesn't rise on hover, so a
   downward offset read as the light source drifting rather than the card
   glowing. Arriving curve is ease-out; the leaving one sits on the base
   rule. */
.feature-card:hover,
.app-card:hover {
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
  background: var(--card-bg-hover, color-mix(in srgb, var(--accent) 20%, transparent));
  box-shadow: 0 0 36px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Bare glyph — no chip, no plate. */
.feature-icon {
  font-size: 22px;
  line-height: 1;
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--card-title, var(--text));
}

.feature-card p {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 15px;
  color: var(--card-text, var(--text-muted));
  line-height: 1.65;
}

/* ------------------------------------------------------ App cards (home) */
.apps {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.apps-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Flex rather than grid so a short last row centres too. Cards aim for
   400px, give a little when a row is nearly full, and wrap below 300px;
   min() keeps a lone card from overflowing a phone narrower than that. */
.apps-grid > .app-card {
  flex: 0 1 400px;
  min-width: min(300px, 100%);
}

.app-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--card-border, var(--border));
  border-radius: 24px;
  padding: 32px;
  text-decoration: none;
  /* Leaving-hover curve. The arriving one lives on :hover — a rule's
     transition governs the change *into* the state it describes, so
     splitting them is what lets the glow ease out on and in off. */
  transition: background-color 0.3s ease-in, box-shadow 0.3s ease-in;
}

.app-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

/* Cards that are just icon + name have nothing under the head, so the
   gap meant to separate it from body copy becomes dead space. */
.app-card-head:last-child { margin-bottom: 0; }

/* Same glass plate as the app-page hero icon, scaled to the card. */
.app-card-head .hero-plate {
  width: 60px;
  height: 60px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 15px;
  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

.app-card-head .hero-icon {
  width: 60px;
  height: 60px;
  margin: 0;
}

.app-card-head h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}

.app-card-head .app-card-tag {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.app-card > p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}

.app-card-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
}

.app-card-links .go {
  color: var(--accent);
}

/* --------------------------------------------------------------- Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 32px 24px;
  text-align: center;
  /* Free space on a short page opens above the rule, not below it. */
  margin-top: auto;
}

footer p {
  font-size: 14px;
  color: var(--text-muted);
}

/* Bottom row: copyright hugs the left edge, legal links the right. Wraps
   to a centred stack when the two would collide. */
.footer-bar {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  text-align: left;
}

@media (max-width: 600px) {
  .footer-bar {
    justify-content: center;
    text-align: center;
  }
}

/* Review ask — lives at the very bottom so it never competes with the
   download CTA above it. */
.footer-review {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 18px;
}

.footer-review a { font-weight: 600; }

footer a {
  color: var(--accent);
  text-decoration: none;
}

footer a:hover { text-decoration: underline; }

/* ------------------------------------------------- Long-form doc (legal) */
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 96px;
}

.doc-header { margin-bottom: 40px; }

.doc-header h1 {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -1.2px;
  margin-bottom: 10px;
  color: var(--text);
}

.doc-header .updated {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.doc h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 40px 0 14px;
  color: var(--text);
}

.doc h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 10px;
  color: var(--text);
}

.doc p,
.doc li {
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.75;
}

.doc p { margin-bottom: 14px; }

.doc ul { margin: 0 0 16px 22px; }
.doc li { margin-bottom: 8px; }

.doc a { color: var(--accent); text-decoration: none; }
.doc a:hover { text-decoration: underline; }

.doc strong { color: var(--text); font-weight: 700; }

/* Per-app callout block inside a shared legal doc */
.app-block {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--card-border, var(--border));
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 18px 0 24px;
}

.app-block h3 { margin-top: 0; }
.app-block :last-child { margin-bottom: 0; }

/* ----------------------------------------------------- Support / FAQ page */
main.support {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px 100px;
}

.page-header { margin-bottom: 48px; }

.page-header h1 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 10px;
  color: var(--text);
}

.page-header p {
  font-size: 17px;
  color: var(--text-muted);
}

.contact-card {
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-card-text h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.contact-card-text p {
  font-size: 15px;
  color: var(--text-muted);
}

/* Plain accented text link, no chip or shadow. */
.btn-email {
  color: var(--accent);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s;
}

.btn-email:hover {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  color: var(--text);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Optional grouping of FAQ items under category labels */
.faq-group { margin-bottom: 32px; }

.faq-group-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.faq-group .faq-list { margin-bottom: 0; }

/* FAQ as a landing-page section (centered header + narrow column) */
.faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 100px;
}

.faq-note {
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 28px;
}

.faq-note a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.faq-note a:hover { text-decoration: underline; }

details {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--card-border, var(--border));
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s;
}

details:hover,
details[open] { border-color: var(--accent-border); }

summary {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  transition: color 0.2s;
}

summary:hover { color: var(--accent); }

summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

details[open] summary::after { transform: rotate(45deg); }

/* Answers fade in on open — the box itself snaps, which stays reliable
   across engines (no ::details-content height animation). */
details[open] .faq-answer { animation: faq-answer-in 0.28s ease both; }

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.faq-answer {
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}

.faq-answer strong { color: var(--text); }

.faq-answer a {
  color: var(--accent);
  text-decoration: none;
}

.faq-answer a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Responsive */
@media (max-width: 600px) {
  nav { padding: 16px 20px; }
  .hero { padding: 60px 20px 40px; }
  .apps { padding: 0 16px 24px; }
  .faq { padding: 0 16px 80px; }
  .features { padding: 56px 16px 80px; }
  .app-store-badge img { height: 46px; }
  main.support { padding: 32px 16px 80px; }
  .doc { padding: 16px 16px 80px; }
  .page-header h1 { font-size: 32px; }
  .contact-card { flex-direction: column; align-items: flex-start; }
  summary { padding: 18px 20px; font-size: 15.5px; }
  .faq-answer { padding: 0 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { transition: none; }

  details,
  summary,
  summary::after { transition: none; }

  details[open] .faq-answer { animation: none; }

  .feature-card,
  .app-card { transition: none; }
}