/* XpenseAI marketing pages — shared stylesheet.
   Tokens mirror client/pages/landing.js's .xl-root theme (the app's own pre-login
   landing page — the visual reference these pages are meant to read as "the same
   product" as) so the marketing site and the real app landing page look identical.
   Do not introduce new colours here; if a value is missing, add it to landing.js's
   token set first and copy it across. */

:root {
  --bg0: #060A16;
  --bg1: #0F1830;
  --card: #0F1830;
  --text: #EAF0FB;
  --dim: #93A0B8;
  --accent: #5B8DEF;
  --accent2: #7C6CF6;
  --success: #3DDC91;
  --danger: #FF6B6B;
  --warning: #F5B84E;
  --hair: rgba(255, 255, 255, 0.14);
  --hair-soft: rgba(255, 255, 255, 0.08);
  --maxw: 1080px;
  --radius: 16px;

  /* landing.js's own tertiary/muted text tone (--dim there) — used here wherever a
     lighter caption/faint label is needed, matching that page's own hierarchy. */
  --faint: #66748F;
  --accent-solid: #5B8DEF;
  --header-bg: rgba(7, 11, 23, 0.86);

  /* Explicit z-index scale — every layer picks from here, so nothing ever escalates
     into arbitrary five-digit stacking values. */
  --z-base: 1;
  --z-sticky: 10;
  --z-header: 20;
  --z-overlay: 30;
  --z-toast: 50;
}

/* Mirrors landing.js's html[data-theme="light"] .xl-root branch. Followed automatically
   by OS/browser preference until the visitor makes an explicit choice with the header
   toggle (theme.js), at which point the higher-specificity :root[data-theme=...] rules
   below take over in both directions — same "xpenseai_theme" localStorage key the real
   app's own toggle uses, so a preference set in either place is honored in the other. */
@media (prefers-color-scheme: light) {
  :root {
    --bg0: #FDF8F4;
    --bg1: #FFFFFF;
    --card: #FFFFFF;
    --text: #1A1025;
    --dim: #7A6F8C;
    --accent: #8B3DFF;
    --accent2: #FF5C8A;
    --hair: rgba(26, 16, 37, 0.14);
    --hair-soft: rgba(26, 16, 37, 0.08);
    --faint: #B3A9C4;
    --accent-solid: #6D28D9;
    --header-bg: rgba(238, 241, 248, 0.75);
  }
}

/* Explicit overrides for the header toggle — higher specificity than the media query
   above by attribute selector alone, so these win once a visitor has picked a theme,
   regardless of their OS/browser preference. Values match the two blocks above exactly. */
:root[data-theme="dark"] {
  --bg0: #060A16; --bg1: #0F1830; --card: #0F1830; --text: #EAF0FB; --dim: #93A0B8;
  --accent: #5B8DEF; --accent2: #7C6CF6;
  --hair: rgba(255, 255, 255, 0.14); --hair-soft: rgba(255, 255, 255, 0.08);
  --faint: #66748F; --accent-solid: #5B8DEF; --header-bg: rgba(7, 11, 23, 0.86);
}
:root[data-theme="light"] {
  --bg0: #FDF8F4; --bg1: #FFFFFF; --card: #FFFFFF; --text: #1A1025; --dim: #7A6F8C;
  --accent: #8B3DFF; --accent2: #FF5C8A;
  --hair: rgba(26, 16, 37, 0.14); --hair-soft: rgba(26, 16, 37, 0.08);
  --faint: #B3A9C4; --accent-solid: #6D28D9; --header-bg: rgba(238, 241, 248, 0.75);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg0);
  color: var(--text);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ── Skip link: first tab stop, hidden until focused ───────────────────────── */
.skip {
  position: absolute; top: 0; left: 0; z-index: var(--z-toast);
  transform: translateY(-120%);
  background: var(--accent-solid); color: #fff; padding: 14px 22px;
  border-radius: 0 0 12px 0; font-weight: 600; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: transform .18s ease;
}
.skip:focus { transform: translateY(0); }

/* Visible focus everywhere — keyboard users need to see where they are. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair-soft);
}
header.site .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 68px;
  flex-wrap: wrap; row-gap: 8px; padding-top: 10px; padding-bottom: 10px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.3px;
  color: var(--text); text-decoration: none;
}
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.brand span.ai { color: var(--accent); }
nav.site { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
nav.site a {
  color: var(--dim); text-decoration: none; font-size: 15px;
  padding: 8px 14px; border-radius: 10px;
  min-height: 44px; display: inline-flex; align-items: center;   /* 44px touch target */
}
nav.site a:hover { color: var(--text); background: rgba(148, 163, 184, 0.09); }
nav.site a[aria-current="page"] { color: var(--accent); background: rgba(91, 141, 239, 0.12); }

/* Header-only toggle + CTA -- sit outside nav.site so they're never mistaken for a page
   link, always visible (not tucked in the wrapping nav list) since they're actions, not
   navigation. */
.theme-toggle {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--hair); background: transparent;
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .18s ease;
}
.theme-toggle:hover { background: rgba(148, 163, 184, 0.09); }
.header-cta {
  padding: 10px 20px; min-height: 40px; font-size: 14.5px; flex-shrink: 0;
}

/* ── Type ──────────────────────────────────────────────────────────────────── */
h1 {
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.08; letter-spacing: -1.6px; font-weight: 800;
  margin: 0 0 18px;
}
h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.2; letter-spacing: -0.8px; font-weight: 700;
  margin: 0 0 14px;
}
h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.2px; }
p { margin: 0 0 16px; color: var(--dim); }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--dim); max-width: 62ch; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
.mono { font-family: 'Space Mono', ui-monospace, monospace; }
a { color: var(--accent); }

section { padding: 76px 0; border-top: 1px solid var(--hair-soft); }
section:first-of-type { border-top: 0; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 14px; min-height: 48px;      /* 44px+ touch target */
  cursor: pointer;
  font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, background .18s ease, filter .18s ease;
}
.btn:active { transform: scale(0.98); }
/* Gradient starts at --accent-solid so white label text clears 4.5:1 at the
   left edge where it sits; the lighter --accent2 end carries no text. */
.btn-primary { background: linear-gradient(135deg, var(--accent-solid), var(--accent2)); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--hair); color: var(--text); }
.btn-ghost:hover { background: rgba(148, 163, 184, 0.09); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* SVG icons only — never emoji. Fixed 24x24 viewBox, sized by the parent. */
.icon { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.9; }
.card .ico .icon { width: 21px; height: 21px; }

/* ── Cards / grid ──────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--hair-soft);
  border-radius: var(--radius);
  padding: 26px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.card h3 { color: var(--text); }
.card p:last-child { margin-bottom: 0; }
.card .ico {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(91, 141, 239, 0.13);
  border: 1px solid rgba(91, 141, 239, 0.26);
  display: grid; place-items: center;
  margin-bottom: 14px; font-size: 19px;
}

/* ── Step list ─────────────────────────────────────────────────────────────── */
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 14px; }
ol.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  background: var(--card); border: 1px solid var(--hair-soft);
  border-radius: 14px; padding: 20px 22px;
}
ol.steps li::before {
  content: counter(s);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(91, 141, 239, 0.15); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
ol.steps h3 { margin-bottom: 4px; }
ol.steps p { margin: 0; font-size: 15.5px; }

/* ── Screens ───────────────────────────────────────────────────────────────── */
/* minmax floor was 210px -- on Overview's 5-screenshot grid that packs 4 per row at
   ~1032px wrap width, each phone screenshot rendered at only ~243px wide, downscaled
   heavily off its 1080px source and visibly softening the fine in-app text (same root
   cause reported live on How it works' 2-screenshot grid, fixed there by uncapping its
   own max-width). Raised so every .shots grid on the site renders fewer, bigger columns
   instead. */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.shot { text-align: center; }
.shot img {
  width: 100%; height: auto; display: block;
  border-radius: 18px; border: 1px solid var(--hair);
  background: var(--bg1);
}
.shot figcaption { font-size: 14px; color: var(--faint); margin-top: 10px; }

/* ── Pricing ───────────────────────────────────────────────────────────────── */
.tier { display: flex; flex-direction: column; }
.tier.featured { border-color: rgba(91, 141, 239, 0.5); }
.tier .price { font-size: 42px; font-weight: 800; letter-spacing: -1.4px; margin: 6px 0 2px; }
.tier .price small { font-size: 16px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.tier ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; }
.tier li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 15.5px; color: var(--dim); }
.tier li .tick { color: var(--success); display: inline-flex; }
.tier li .no { color: var(--faint); display: inline-flex; }
.tier li .icon { width: 17px; height: 17px; margin-top: 4px; }
.tier .btn { margin-top: auto; justify-content: center; }
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: rgba(91, 141, 239, 0.16); color: var(--accent); margin-bottom: 10px;
}

/* ── Callouts ──────────────────────────────────────────────────────────────── */
.note {
  border-radius: 14px; padding: 18px 22px; border: 1px solid;
  background: rgba(61, 220, 145, 0.07); border-color: rgba(61, 220, 145, 0.22);
}
.note.warn { background: rgba(245, 184, 78, 0.07); border-color: rgba(245, 184, 78, 0.24); }
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--text); }

dl.faq { margin: 0; }
dl.faq div {
  border-bottom: 1px solid var(--hair-soft); padding: 20px 0;
}
dl.faq dt { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
dl.faq dd { margin: 0; color: var(--dim); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--hair-soft); padding: 40px 0 56px;
  color: var(--faint); font-size: 14.5px;
}
footer.site .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--dim); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
footer.site a:hover { color: var(--text); }
footer.site .spacer { margin-left: auto; }

/* Get-the-app badges -- own full-width row (the flex-wrap on .wrap above pushes a
   100%-wide child onto its own line) so the two store badges don't crowd into the
   plain-text nav-link row above them. */
footer.site .foot-apps {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  width: 100%; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--hair-soft);
}
footer.site .foot-apps-label { font-size: 13px; color: var(--faint); min-height: 0; }
footer.site .foot-apps a { min-height: 0; }
footer.site .foot-apps img { display: block; opacity: .92; transition: opacity .18s ease, transform .18s ease; }
footer.site .foot-apps a:hover img { opacity: 1; transform: translateY(-1px); }

@media (max-width: 640px) {
  section { padding: 54px 0; }
  ol.steps li { grid-template-columns: 34px 1fr; gap: 12px; padding: 18px; }
}