/* ---------- Self-hosted font ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700.woff2) format('woff2');
}

/* ---------- Tokens: "Aurora" redesign (Sep 2026) ----------
   Replaces the flat monochrome-plus-burnt-orange palette with a richer,
   two-accent system: a warmer, more saturated orange-red as the primary
   accent, and a cool violet as a secondary accent used sparingly for
   contrast (badges, secondary glows, gradient stops) so the site reads
   as considered rather than one-note. Darks now carry a faint violet
   undertone instead of true neutral black. Radii are pulled up across
   the board (6px -> 20px lineage) for a rounder, more premium feel —
   every component below already keys off these variables, so this one
   change cascades site-wide. Headings move to Space Grotesk (loaded via
   Google Fonts in each page's <head>) via the --font-serif token, which
   every h1/h2/h3/em rule already references. */
:root {
  --bg-dark: #08070d;
  --bg-dark-2: #121019;
  --panel-dark: #181420;
  --accent: #ff5a36;
  --accent-light: #ff8a5b;
  --accent-dark: #c23b12;
  --accent-soft: #fff1ea;
  --accent-soft-border: #ffd3bd;
  --accent-contrast: #ffffff;
  --violet: #7c6cff;
  --violet-light: #a599ff;
  --violet-dark: #5a48d6;
  --violet-soft: #f1efff;
  --gradient-aurora: linear-gradient(135deg, var(--accent) 0%, #ff3d81 55%, var(--violet) 100%);
  --ink: #0a0a0f;
  --ink-soft: #5c5866;
  --ink-on-dark: #ecebf3;
  --ink-on-dark-soft: #9f9bac;
  --paper: #ffffff;
  --paper-soft: #f7f5fa;
  --border: #e8e4ef;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 8px 24px -12px rgba(10,8,16,0.16);
  --shadow-md: 0 24px 56px -24px rgba(10,8,16,0.28);
  --shadow-lg: 0 60px 120px -48px rgba(10,8,16,0.45);
  --shadow-glow: 0 20px 44px -16px rgba(255,90,54,0.45);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Display face for every h1/h2/h3/em on the site — see file header. */
  --font-serif: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Matches the hero's dark base so an elastic overscroll bounce at the
     top of the page reveals this instead of the browser's default white
     behind the floating navbar. */
  background: var(--bg-dark);
  /* `overflow-x` belongs here, not on `body`: setting it on `body` makes
     Chrome/WebKit treat `body` as its own scroll container instead of the
     real viewport, which breaks `position: sticky` on `.navbar` — it
     renders the sticky `top` offset as a permanent gap even at scroll 0. */
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.03em; }
em {
  font-family: var(--font-serif); font-style: normal; font-weight: 700;
  background: var(--gradient-aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero em, .workflow__title em, .cta-card__main em { filter: brightness(1.25); }

/* ---------- Gradient text utility ----------
   For a headline word/phrase that needs the aurora treatment outside an
   <em> (e.g. inside a <span>). */
.grad-text {
  background: var(--gradient-aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Inline highlight mark ----------
   A second way of picking out a phrase within a sentence, alongside the
   italic-serif "em" accent used in headings: a flat highlighter-pen
   stripe sat behind the lower two-fifths of the text rather than a
   colour or weight change, so the emphasis reads as something drawn
   onto the copy after the fact rather than a font-level treatment. Used
   sparingly, one phrase per paragraph at most, scattered through body
   copy across every section. `--invert` is the same device recoloured
   for use on the site's dark sections (hero, workflow, CTA). */
mark, .hl {
  background: linear-gradient(to bottom, transparent 60%, var(--accent-soft) 60%);
  color: inherit;
  padding: 0 1px;
}
.hl--invert {
  background: linear-gradient(to bottom, transparent 60%, rgba(255,90,54,0.32) 60%);
}

::selection { background: var(--accent-soft); color: var(--accent-dark); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

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

/* ---------- Buttons ----------
   Pill radius across the board now (was a 4px near-square), and the
   primary CTA carries the aurora gradient plus a colour-matched glow
   shadow instead of a flat fill — the one element on every page that
   should visibly announce the new palette. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--gradient-aurora); color: var(--accent-contrast); box-shadow: var(--shadow-glow); }
.btn--accent:hover { box-shadow: 0 26px 52px -16px rgba(255,61,129,0.55); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { opacity: 0.9; }
.btn--ghost { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.35); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { opacity: 0.85; }
.btn--outline-dark { background: transparent; color: var(--ink); border: 1px solid var(--border); width: 100%; margin-top: 20px; }
.btn--outline-dark:hover { border-color: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn--outline:hover { border-color: var(--ink); }
.link-muted { color: var(--ink-on-dark); font-weight: 600; font-size: 0.95rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Navbar: floating glass pill ----------
   NOTE for future edits: keep `backdrop-filter` off `.navbar__inner`
   whenever `.navbar.is-open` — `backdrop-filter` (like `filter` and
   `transform`) creates a new containing block for `position: fixed`
   descendants, and the fullscreen mobile menu below relies on
   `.navbar__links`/`.navbar__actions` being fixed against the *viewport*.
   Losing that guard traps the mobile menu inside this 68px bar again. */
.navbar {
  position: sticky;
  /* `top` must be 0, not a positive offset: `.navbar` is the first element
     on the page, so its static (unscrolled) position is already above any
     positive `top` value — the sticky algorithm has to satisfy "stay at
     least `top`px from the viewport edge" even at scroll 0, so it was
     rendering permanently shifted down by that amount, exposing `body`'s
     background as a gap above it on every single page load. The floating
     look now comes from real padding below, painted with this element's
     own background instead of an empty gap. */
  top: 0;
  z-index: 50;
  padding: 14px 16px 0;
  background: var(--bg-dark);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 12px 0 22px;
  background: rgba(18, 16, 25, 0.72);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 40px -22px rgba(0,0,0,0.65);
  transition: height 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.navbar.is-open .navbar__inner {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  flex: none;
}
.brand__mark {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  flex: none;
  transition: transform 0.2s ease;
}
.brand:hover .brand__mark { transform: rotate(-6deg); }
.navbar__links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 5px;
}
.navbar__links a {
  color: var(--ink-on-dark-soft);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 16px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.navbar__links a:hover { color: var(--paper); background: rgba(255,255,255,0.08); }
.navbar__links a.is-active { color: var(--paper); background: var(--gradient-aurora); }
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.navbar__actions .btn--light {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 10px 20px;
}
.navbar__actions .btn--light:hover { background: rgba(255,255,255,0.08); opacity: 1; border-color: rgba(255,255,255,0.4); }
.navbar__actions .btn--accent { padding: 10px 20px; font-size: 0.9rem; }
.navbar__toggle { display: none; }
.navbar__mobile-link,
.navbar__mobile-pricing { display: none; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(circle at 12% -10%, rgba(255,90,54,0.28) 0%, transparent 45%),
    radial-gradient(circle at 88% 6%, rgba(124,108,255,0.24) 0%, transparent 50%),
    radial-gradient(circle at 55% 60%, rgba(255,61,129,0.10) 0%, transparent 55%),
    var(--bg-dark);
  color: var(--paper);
  padding: 90px 0 0;
  text-align: center;
  overflow: hidden;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-light);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  margin-bottom: 22px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,90,54,0.12);
  border: 1px solid rgba(255,90,54,0.28);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gradient-aurora);
  flex: none;
}
.eyebrow--dark { color: var(--accent-dark); background: rgba(255,90,54,0.08); border-color: rgba(255,90,54,0.18); }
.hero__title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto 24px;
}
.hero__subtitle {
  max-width: 620px;
  margin: 0 auto 34px;
  color: var(--ink-on-dark);
  font-size: 1.08rem;
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hero__note {
  color: var(--ink-on-dark-soft);
  font-size: 0.85rem;
  margin-bottom: 60px;
}

.hero--compact { padding: 80px 0 90px; }
.hero--compact .hero__subtitle { margin-bottom: 0; }

/* ---------- Hero: split layout (home page) ----------
   Copy on the left, a live-dashboard mock on the right, rather than a
   single centred column — the previous hero's shape. Text is left-aligned
   and un-centred within its half; the visual half is hidden below the
   point where the two columns would otherwise get too cramped to read. */
.hero--split { text-align: left; padding: 64px 0 0; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
  gap: 48px;
  padding-bottom: 64px;
}
.hero--split .eyebrow { margin-bottom: 18px; }
.hero--split .hero__title {
  margin: 0 0 22px;
  max-width: none;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
}
.hero--split .hero__subtitle {
  margin: 0 0 16px;
  max-width: 540px;
}
.hero--split .hero__subtitle:last-of-type { margin-bottom: 30px; }
.hero--split .hero__actions { justify-content: flex-start; margin-bottom: 14px; }
.hero--split .hero__note { margin-bottom: 0; }
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero__visual::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(255,90,54,0.24) 0%, transparent 70%);
  z-index: 0;
}
.hero__visual .dash-scale { position: relative; z-index: 1; }
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__visual { display: none; }
  .hero--split { text-align: center; }
  .hero--split .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero--split .hero__actions { justify-content: center; }
}

/* ---------- Checkout modal ---------- */
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.6);
  padding: 24px;
}
.checkout-modal.is-open { display: flex; }
.checkout-modal__panel {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px;
}
.checkout-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.checkout-modal__status {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
  padding: 60px 20px;
}
.checkout-modal__status--error { color: #b42318; }
.checkout-modal__status[hidden] { display: none; }

/* ---------- Scroll-reveal (site-wide) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal].is-visible:nth-child(2) { transition-delay: 0.08s; }
[data-reveal].is-visible:nth-child(3) { transition-delay: 0.16s; }
[data-reveal].is-visible:nth-child(4) { transition-delay: 0.24s; }
[data-reveal].is-visible:nth-child(5) { transition-delay: 0.32s; }
[data-reveal].is-visible:nth-child(6) { transition-delay: 0.4s; }
[data-reveal].is-visible:nth-child(7) { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-visible { opacity: 1; transform: none; transition: none; }
}

/* ---------- Scroll-reveal: mobile ----------
   On phones each reveal target is full-width and scrolled to individually
   (rather than several sitting side by side in the same viewport at once
   like on desktop), so it can afford a more noticeable, tactile motion —
   a bigger rise combined with a scale-in — without feeling busy. */
@media (max-width: 720px) {
  [data-reveal] {
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-reveal].is-visible { transform: translateY(0) scale(1); }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 200;
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

/* ---------- Navbar: tightens and gains more contrast on scroll ---------- */
.navbar--scrolled .navbar__inner {
  height: 58px;
  background: rgba(10, 9, 14, 0.88);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 48px -20px rgba(0,0,0,0.75);
}

/* ---------- Hero dashboard preview: peek carousel ----------
   Each .dash is a fixed-size decorative "screenshot" of the app, not a
   real reflowing layout — like the real dashboard.php it echoes, it's
   built once at a natural 1100x~650px desktop size and scaled down as a
   single unit, since reflowing a sidebar+table layout below ~600px stops
   being legible regardless of how the CSS is written.

   The four slides sit side by side in .dash-peek__track, all
   simultaneously in the DOM (unlike the module carousel above them) —
   a peek carousel's whole point is that the previous/next slide is
   partially visible at the edges, dimmed and slightly scaled down,
   while the active one is centered at full size. The inline script
   computes each item's transform scale (to fit the fixed 1100px .dash
   into whatever width .dash-peek__item actually has) and the track's
   translateX (to center the active item), both from real measured
   widths rather than hand-tuned breakpoints, so it stays correct at any
   viewport size. */
.dash-peek {
  width: 100%;
  max-width: 1100px;
  margin: 60px auto 0;
  overflow: hidden;
}
.dash-peek__track {
  display: flex;
  gap: 16px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-peek__item {
  /* Same flex-basis for every item, so all four render at the exact same
     size — the peek effect comes purely from the viewport clipping the
     neighbours at the edges, not from shrinking them; only opacity marks
     which one is active. */
  flex: 0 0 82%;
  max-width: 82%;
  opacity: 0.45;
  transition: opacity 0.4s ease;
}
.dash-peek__item--active { opacity: 1; }
.dash-scale { overflow: hidden; }
.dash {
  width: 1100px;
  transform-origin: top left;
  color: var(--ink);
  text-align: left;
}

/* Dot navigation, used by the hero peek carousel below (the only
   carousel left on the page — see assets/js/carousels.js). */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot:hover { background: var(--accent-soft); }
.carousel-dot--active { background: var(--accent); transform: scale(1.3); }
.carousel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dash__frame {
  display: flex;
  /* Fills whatever height the carousel JS gives .dash (see carousels.js —
     every slide is stretched to the tallest slide's natural height), so
     shorter-content slides (e.g. Customers, which has no chart/activity
     row) get extra blank paper background at the bottom of the sidebar
     and main columns instead of a gap that shows the page behind them. */
  height: 100%;
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 60px 100px -40px rgba(0,0,0,0.6);
  overflow: hidden;
}
.dash__sidebar {
  width: 190px;
  flex: none;
  background: var(--paper-soft);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
}
.dash__sidebar-brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; margin-bottom: 22px; padding: 0 6px; }
.dash__nav { display: flex; flex-direction: column; gap: 3px; }
.dash__nav-item {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.dash__nav-item--active { background: var(--accent-soft); color: var(--accent-dark); }
.dash__upgrade {
  margin-top: auto;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 14px;
}
.dash__upgrade p { font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; }
.dash__upgrade > span { font-size: 0.7rem; color: var(--ink-on-dark-soft); display: block; margin-bottom: 10px; }
.dash__upgrade-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
}
.dash__main { flex: 1; min-width: 0; padding: 22px 26px; }
.dash__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.dash__topbar strong { display: block; font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; }
.dash__topbar span { font-size: 0.8rem; color: var(--ink-soft); }
.dash__topbar-cta {
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.dash__stat { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.dash__stat span { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 6px; }
.dash__stat strong { display: block; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 4px; }
.dash__stat em { font-style: normal; font-size: 0.7rem; color: var(--accent-dark); font-weight: 600; }
.dash__row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 14px; margin-bottom: 18px; }
.dash__highlights { display: flex; flex-direction: column; gap: 14px; }
.dash__highlight { flex: 1; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.dash__highlight--accent { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dash__highlight span { display: block; font-size: 0.74rem; margin-bottom: 8px; opacity: 0.75; }
.dash__highlight strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; }
.dash__chart { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; }
.dash__chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 0.82rem; }
.dash__chart-head span { color: var(--ink-soft); font-size: 0.74rem; }
.dash__chart-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; min-height: 90px; }
.dash__chart-bars span { flex: 1; background: var(--accent-soft); border-radius: 4px 4px 0 0; }
.dash__chart-bars span:nth-child(6) { background: var(--accent); }
.dash__activity { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dash__activity > strong { font-size: 0.82rem; }
.dash__activity-item { display: flex; align-items: center; gap: 10px; }
.dash__activity-item div { flex: 1; min-width: 0; }
.dash__activity-item strong { display: block; font-size: 0.78rem; font-weight: 700; }
.dash__activity-item span { font-size: 0.7rem; color: var(--ink-soft); }
.dash__activity-item em { font-style: normal; font-size: 0.68rem; color: var(--ink-soft); flex: none; }
.dash__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  flex: none;
}
.dash__table { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.dash__table-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.dash__table-head strong { font-weight: 700; }
.dash__table-head span { font-size: 0.76rem; color: var(--accent-dark); font-weight: 700; }
.dash__table-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.dash__table-row:last-child { border-bottom: none; }
.dash__table-row--head { color: var(--ink-soft); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* Card view for the "recent items" list inside each hero carousel slide,
   in place of the table-row layout above. */
.dash__card-grid {
  padding: 14px 18px 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.dash__mini-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dash__mini-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
}
.dash__mini-card__top .badge { flex: none; }
.dash__mini-card__top-meta { font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); }
.dash__mini-card__line { font-size: 0.76rem; color: var(--ink-soft); }
.dash__mini-card__amount { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; margin-top: 2px; }

/* ---------- Section headings ---------- */
.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.22;
}
.section-title--center { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.section-lede { margin-top: 14px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }

/* A second way of presenting a section kicker: instead of a horizontal
   small-caps line sitting above the heading like every other section on
   the page, the label runs vertically along a rule to the left of a
   left-aligned block — a spine, not a banner. One-off treatment, used
   on a single section so it reads as a deliberate accent rather than a
   second system competing with the horizontal eyebrow everywhere else. */
.section-head--spine {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 720px;
  margin: 0 0 56px;
  text-align: left;
}
.section-head--spine .eyebrow {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  margin: 0;
  padding-right: 2px;
  border-right: 1px solid var(--border);
}
.section-head--spine .section-title,
.section-head--spine .section-lede { margin-left: 0; }

/* ---------- Feature tour ----------
   Real screenshot on one side, plain explanation on the other, flipping
   sides feature to feature — the standard "see it in action" pattern,
   using the actual dashboard mockups (built once, reused here) rather
   than an icon-and-blurb summary of them. .tour-row__media holds a full
   1100px-wide .dash mockup (see .dash / .dash__frame etc. under "Hero
   dashboard preview" below) scaled down to fit the column via JS
   (assets/js/carousels.js's fitTourMedia()), the same measure-then-scale
   approach already used for the old hero carousel, just without needing
   every slide to match a shared height this time since each row is
   independent rather than sitting in a peeking carousel track. */
.tour { padding: 110px 0; background: var(--paper); }
.tour-list { display: flex; flex-direction: column; gap: 100px; margin-top: 64px; }
.tour-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.tour-row--reverse .tour-row__body { order: 2; }
.tour-row--reverse .tour-row__media { order: 1; }
.tour-row__index {
  display: block;
  font-weight: 800;
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.tour-row__body h3 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.2; }
.tour-row__body > p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; margin-bottom: 22px; }
.tour-row__list { display: flex; flex-direction: column; gap: 10px; }
.tour-row__list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.5;
}
.tour-row__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
}
.tour-row__media {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: var(--paper);
}

/* ---------- Workflow ---------- */
.workflow {
  position: relative;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,90,54,0.16) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(124,108,255,0.14) 0%, transparent 50%),
    linear-gradient(160deg, var(--panel-dark), var(--bg-dark-2));
  color: var(--paper);
  padding: 90px 0;
  margin: 0 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.workflow .wrap { max-width: 1080px; }
.workflow__title {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 600;
  line-height: 1.25;
  max-width: 720px;
  margin-bottom: 64px;
}
/* A single connected column of rows rather than a four-cell grid, so it
   never needs to fight for width at narrow viewports — the same layout
   holds from phone to desktop. A hairline spine runs behind the number
   circles, tying the steps together as one sequence instead of four
   independent tiles; the circle fills solid on hover to mark progress. */
.workflow-steps {
  position: relative;
  display: flex;
  flex-direction: column;
}
.workflow-steps::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: rgba(255,255,255,0.16);
}
.workflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.workflow-step:first-child { border-top: none; padding-top: 0; }
.workflow-step:last-child { padding-bottom: 0; }
.workflow-step__num {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--paper);
  background: var(--bg-dark-2);
  flex: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.workflow-step:hover .workflow-step__num {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}
.workflow-step__body { padding-top: 4px; }
.workflow-step__body h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.3; margin-bottom: 10px; color: var(--paper); }
.workflow-step__body p { color: var(--ink-on-dark); font-size: 0.95rem; line-height: 1.7; margin: 0; max-width: 640px; }
@media (max-width: 560px) {
  .workflow-steps::before { left: 21px; }
  .workflow-step { grid-template-columns: 44px 1fr; gap: 18px; }
  .workflow-step__num { width: 44px; height: 44px; font-size: 0.92rem; }
}
.workflow__foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: var(--ink-on-dark);
  font-size: 0.95rem;
}

/* ---------- Compare ---------- */
.compare { padding: 110px 0; background: var(--paper-soft); }
.compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.compare__card {
  border-radius: var(--radius-lg);
  padding: 40px;
}
.compare__card--old { background: var(--paper); border: 1px solid var(--border); }
.compare__card--new { background: var(--accent-soft); border: 1px solid var(--accent-soft-border); }
.compare__label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 26px; }
.compare__label--accent { color: var(--accent-dark); }
.compare__card li {
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 0.98rem;
  color: var(--ink);
}
.compare__card--old li { color: var(--ink-soft); }
.compare__card li:first-child { border-top: none; }

/* ---------- Compare (manifesto list) ----------
   This section has already been a bounded card grid, a two-column
   ledger table, and a struck-through/arrow redline paragraph — three
   different skins on the same "old sentence vs new sentence" pairing.
   Dropped the pairing itself: each point is now a single confident
   claim (what Learnaxis actually gives you), not an old/new sentence
   pair, with a short line of support underneath. No strikethrough, no
   arrow glyph, no bounded card, no table, and no hairline rules between
   items (that separator pattern already carries the FAQ list elsewhere
   on this page) — rows are set apart by a large flat index numeral and
   generous whitespace instead. */
.manifesto { max-width: 820px; margin: 0 auto; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.manifesto__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  column-gap: 26px;
  align-items: start;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  transition: background 0.2s ease, transform 0.2s ease;
}
.manifesto__item:hover { background: var(--paper); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.manifesto__index {
  font-family: var(--font-serif);
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-aurora);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.55;
}
.manifesto__claim {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: 10px;
}
.manifesto__note { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 520px; }

/* ---------- Statement break ----------
   A new component type, not a restyle of an existing one: a full-width
   section that is nothing but a single oversized line of type, no card,
   no border, no icon. Set bold and tight rather than italic — a flat
   declarative statement, not a magazine pull-quote — dropped between
   the redline prose above and the spec grid below as a rhythm break. */
.statement { padding: 130px 24px; text-align: center; background: var(--paper); }
.statement__quote {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.25;
  max-width: 940px;
  margin: 0 auto;
  color: var(--ink);
}
.statement__cite {
  display: block;
  margin-top: 30px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Highlights (spec grid) ----------
   Individually rounded, shadowed cards on a soft ground, each lifting
   on hover — replaces the earlier flat ruled-table treatment (shared
   borders, no shadows, no radius) to match the rounder, more premium
   card language used everywhere else post-redesign. */
.highlights { padding: 90px 0; background: var(--paper-soft); }
.highlights__head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.spec-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.spec-item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.spec-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.spec-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--gradient-aurora);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.spec-item__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 10px;
}
.spec-item__desc { font-size: 0.92rem; line-height: 1.55; color: var(--ink); }

/* ---------- Pricing ---------- */
.pricing { padding: 110px 0; background: var(--paper); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.price-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
}
.price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-aurora);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.price-card:hover::before, .price-card--highlight::before { opacity: 1; }
.price-card--highlight {
  background: var(--bg-dark);
  color: var(--paper);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
/* Same corner-glow motif as the closing CTA card, so the one plan we
   want to sell reads as "the important one" the same way the CTA does. */
.price-card--highlight::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,54,0.28), transparent 70%);
  pointer-events: none;
}
.price-card--highlight > * { position: relative; z-index: 1; }
.price-card__badge {
  position: absolute;
  top: 24px; right: 24px;
  background: var(--gradient-aurora);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.price-card__name { font-weight: 700; color: var(--ink-soft); margin-bottom: 14px; }
.price-card--highlight .price-card__name { color: var(--ink-on-dark-soft); }
.price-card__amount { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 600; margin-bottom: 14px; }
.price-card__amount span { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-left: 4px; }
.price-card--highlight .price-card__amount span { color: var(--ink-on-dark-soft); }
.price-card__desc { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; min-height: 66px; }
.price-card--highlight .price-card__desc { color: var(--ink-on-dark); }
.price-card__features { display: flex; flex-direction: column; gap: 11px; margin: 24px 0 0; }
.price-card__features li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 0.84rem; line-height: 1.4; }
.price-card__features li::before { content: '✓'; color: var(--accent-dark); font-weight: 800; }
.price-card--highlight .price-card__features li { color: var(--ink-on-dark); }
.price-card--highlight .price-card__features li::before { color: var(--accent-light); }
.price-card .btn--outline-dark { margin-top: 24px; }
.price-card--highlight .btn--outline-dark,
.price-card--highlight .btn--accent { margin-top: 20px; width: 100%; }
.pricing__foot { margin-top: 40px; text-align: center; color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- Plan comparison ---------- */
.plan-compare { padding: 105px 0; background: var(--paper-soft); }
.plan-compare .section-title { margin-bottom: 12px; }
.plan-compare__intro { max-width: 620px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 32px; }
.plan-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px; }
.plan-compare__table { width: 100%; min-width: 760px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); border-spacing: 0; border-collapse: separate; background: var(--paper); }
.plan-compare__table th, .plan-compare__table td { padding: 14px 18px; border-bottom: 1px solid var(--border); text-align: center; font-size: 0.88rem; }
.plan-compare__table thead th { color: var(--ink-soft); background: var(--paper); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.plan-compare__table th:first-child { width: 42%; text-align: left; }
.plan-compare__table tbody th { color: var(--ink); font-weight: 700; }
.plan-compare__table tbody tr:last-child th, .plan-compare__table tbody tr:last-child td { border-bottom: 0; }
.plan-compare__group th { width: auto !important; padding: 10px 18px !important; color: var(--accent-dark) !important; background: var(--accent-soft); font-size: 0.68rem !important; letter-spacing: 0.11em; text-transform: uppercase; }
.plan-compare__yes { color: var(--accent-dark); font-weight: 800; font-size: 1rem; }
.plan-compare__no { color: #d4d4d4; }
.plan-compare__note { margin-top: 18px; color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- FAQ ----------
   Was a stack of individually bordered/shadowed cards — one more
   instance of the same white rounded box used for pricing, platform,
   and highlights. Stripped down to a borderless, ruled index instead:
   a bigger italic-serif numeral leads each question, and a hairline
   rule (not a box) separates entries, closer to a printed FAQ page or
   table of contents than a stack of accordion widgets. Shared between
   the homepage teaser (.faq) and the standalone FAQ page (.faq-page),
   since both reuse .faq__item. */
.faq { padding: 110px 0; background: var(--paper-soft); }
.faq__wrap { display: grid; grid-template-columns: 340px 1fr; gap: 60px; }
.faq__intro .section-lede { margin-bottom: 28px; }
.faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.faq__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 28px 2px;
  box-shadow: none;
}
.faq__item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item-label { display: flex; align-items: baseline; flex: 1; }
.faq__item-num {
  font-weight: 800;
  color: var(--accent);
  font-size: 1.05rem;
  margin-right: 16px;
  flex: none;
}
.faq__item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin-left: auto;
  flex: none;
}
.faq__item[open] summary::after { content: '\2013'; color: var(--accent); }
.faq__item p { margin: 16px 0 0 31px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; max-width: 640px; }

/* ---------- CTA band ----------
   The client asked for this section to be removed and replaced with a
   new kind of section rather than restyled — so this isn't the old
   full-bleed dark glow with abstract stat tiles reskinned, it's a
   different mechanism entirely: a light, contained panel with a bold
   graphic border (a solid ink outline plus an accent top bar standing
   in for the old glow) split into two columns — the pitch on the left,
   a real copy of the product dashboard on the right instead of stat
   tiles. The mockup reuses the exact .tour-row__media > .dash-scale >
   .dash markup built for the FEATURE TOUR section (including the
   .tour-row__media wrapper class itself), so the existing
   fitTourMedia() scaler in carousels.js — which queries
   document.querySelectorAll('.tour-row__media') — picks it up here
   automatically. No changes needed to any .dash/.tour-row rule or to
   any JS file. */
.cta-band { padding: 110px 0; background: var(--paper); }
.cta-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--gradient-aurora);
}
.cta-card__main {
  padding: 76px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.cta-card__main .eyebrow { margin-bottom: 18px; }
.cta-card__main h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 18px; max-width: 480px; }
.cta-card__main > p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; margin-bottom: 28px; max-width: 440px; }
.cta-card__note { margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft); }
.cta-card__media {
  min-width: 0;
  background: var(--paper-soft);
  border-left: 1px solid var(--border);
  padding: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cta-card__media .tour-row__media { width: 100%; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  padding: 88px 0 0;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gradient-aurora);
  opacity: 0.6;
}
.footer::after {
  content: '';
  position: absolute;
  top: -220px; left: 50%;
  width: 640px; height: 440px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255,90,54,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.footer .wrap { position: relative; z-index: 1; }
.footer__inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}
.brand--footer { margin-bottom: 16px; }
.footer__brand p { font-size: 0.9rem; line-height: 1.6; max-width: 260px; }
.footer__business-info { display: flex; flex-direction: column; gap: 7px; }
.footer__business-info p { margin: 0; }
.footer__business-info address { font-size: 0.9rem; font-style: normal; line-height: 1.65; margin: 12px 0 2px; }
.footer__business-info a { font-size: 0.9rem; overflow-wrap: anywhere; transition: color 0.15s ease; }
.footer__business-info a:hover { color: var(--accent-light); }
.footer__heading {
  color: var(--ink-on-dark-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.footer__col { display: flex; flex-direction: column; gap: 16px; }
.footer__col a { font-size: 0.92rem; transition: color 0.15s ease; }
.footer__col a:hover { color: var(--accent-light); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem;
}
.footer__bottom a:hover { color: var(--accent-light); }

/* ---------- Cookie notice ---------- */
.cookie-notice {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.cookie-notice__intro { padding: 20px 18px 18px; color: var(--ink); }
.cookie-notice__intro h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.cookie-notice__intro p { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.55; }
.cookie-notice__intro a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.cookie-notice__options { padding: 0 18px 16px; color: var(--ink-soft); font-size: 0.82rem; }
.cookie-notice__options label { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.cookie-notice__options span { margin-left: auto; font-size: 0.72rem; color: var(--accent-dark); font-weight: 700; }
.cookie-notice__actions { border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.cookie-notice__actions button { width: 100%; min-height: 38px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 800; }
.cookie-notice__details { border: 0; background: transparent; color: var(--accent-dark); text-align: right; padding: 5px 8px 8px; }
.cookie-notice__details span, .cookie-notice__customise span { float: right; font-size: 1.15rem; line-height: 0.75; }
.cookie-notice__allow { border: 1px solid var(--accent); color: var(--accent-contrast); background: var(--accent); }
.cookie-notice__customise, .cookie-notice__necessary { border: 1px solid var(--accent); color: var(--ink); background: var(--paper); }
.cookie-notice__customise.is-saving { background: var(--accent); color: var(--accent-contrast); }

/* ---------- Contact details ---------- */
.contact-details {
  margin-top: 32px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
}
.contact-details p + p { margin-top: 5px; }
.contact-details strong { color: var(--ink); }
.contact-details a { color: var(--accent-dark); font-weight: 700; }

/* ---------- Legal / prose pages ---------- */
.legal { padding: 80px 0 110px; background: var(--paper); }
.legal .wrap { max-width: 760px; }
.legal__updated { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 28px; }
.legal__intro { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.legal h2 { font-size: 1.35rem; font-weight: 600; margin: 44px 0 14px; line-height: 1.3; }
.legal h2:first-of-type { margin-top: 40px; }
.legal h3 { font-size: 1.02rem; font-weight: 600; margin: 26px 0 10px; color: var(--accent-dark); }
.legal p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 16px; font-size: 0.98rem; }
.legal ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal li { color: var(--ink-soft); line-height: 1.7; margin-bottom: 8px; font-size: 0.98rem; }
.legal__table-wrap { overflow-x: auto; margin: 8px 0 28px; }
.legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; }
.legal th, .legal td { text-align: left; padding: 12px 14px; border: 1px solid var(--border); }
.legal th { background: var(--paper-soft); font-weight: 700; }
.legal__footer { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.legal__footer p { font-size: 0.92rem; margin-bottom: 6px; }
.legal__disclaimer { color: var(--ink-soft); font-size: 0.9rem; margin-top: 18px; line-height: 1.7; }

/* ---------- FAQ full page ---------- */
.faq-page { padding: 80px 0 110px; background: var(--paper); }
.faq-page .wrap { max-width: 780px; }
.faq-page__intro { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; margin-bottom: 48px; }
.faq-page__category { margin-top: 48px; }
.faq-page__category:first-child { margin-top: 0; }
.faq-page__category h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 22px; }
.faq-page__footer { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.faq-page__footer p { font-size: 0.92rem; margin-bottom: 6px; color: var(--ink-soft); }
.faq-page__disclaimer { color: var(--ink-soft); font-size: 0.9rem; margin-top: 18px; line-height: 1.7; }

/* ---------- About ---------- */
.about-page { padding: 100px 0; background: var(--paper); }
.about-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.about-page__copy { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; }
.about-page__copy p { margin-bottom: 22px; }
.about-page__copy .btn { margin-top: 12px; }
.about-page--detail { padding-top: 0; }
.about-page__prose { max-width: 780px; }
.about-page__prose > .section-title { margin-bottom: 34px; }
.about-page__prose h3 { margin: 38px 0 12px; color: var(--ink); font-size: 1.2rem; font-weight: 600; }
.about-page__prose p { margin-bottom: 22px; color: var(--ink-soft); font-size: 1rem; line-height: 1.78; }
.about-page__prose .btn { margin-top: 14px; }
.about-values { padding: 90px 0 110px; background: var(--paper-soft); }
.about-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
.about-values__grid article { padding: 28px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); }
.about-values__grid h2 { margin-bottom: 12px; font-size: 1.1rem; font-weight: 600; }
.about-values__grid p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.65; }

/* ---------- Contact form ---------- */
.contact { padding: 80px 0 110px; background: var(--paper); }
.contact .wrap { max-width: 620px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-weight: 700; font-size: 0.9rem; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="date"],
.form-field input[type="number"],
.form-field input[type="password"],
.form-field select,
.form-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
}
.form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236e6870'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; }
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.form-consent input { margin-top: 3px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 0.92rem; padding: 12px 16px; border-radius: var(--radius-sm); display: none; }
.form-status--success { background: var(--accent-soft); color: var(--accent-dark); display: block; }
.form-status--error { background: #fef2f2; color: #b42318; display: block; }
.form-submit { align-self: flex-start; border: none; cursor: pointer; }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- App shell (logged-in product) ---------- */
.app-shell { display: flex; min-height: 100vh; background: var(--paper-soft); }
.app-sidebar {
  width: 240px;
  flex: none;
  background: var(--paper);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 0 10px 20px;
  color: var(--ink);
}
.app-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
}
.app-sidebar__link:hover { background: var(--paper-soft); color: var(--ink); }
.app-sidebar__link--active { background: var(--accent-soft); color: var(--accent-dark); }
.app-sidebar__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.app-sidebar__business { font-size: 0.85rem; font-weight: 700; padding: 0 12px 4px; color: var(--ink); }
.app-sidebar__role { font-size: 0.75rem; color: var(--ink-soft); padding: 0 12px 10px; text-transform: capitalize; }

.app-main { flex: 1; min-width: 0; }
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-topbar h1 { font-size: 1.35rem; font-weight: 600; }
.app-nav-toggle { display: none; }
.app-content { padding: 32px; max-width: 1180px; }

.app-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; box-shadow: 0 1px 2px rgba(10,10,10,0.03); }
.stat-card span { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 8px; }
.stat-card strong { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; }

.app-panel { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 24px; box-shadow: 0 1px 2px rgba(10,10,10,0.03); }
.app-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.app-panel__head h2 { font-size: 1.05rem; font-weight: 600; }
.app-panel__body { padding: 4px 0; }
.app-panel__empty { padding: 40px 22px; text-align: center; color: var(--ink-soft); font-size: 0.92rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { text-align: left; padding: 12px 22px; border-bottom: 1px solid var(--border); }
.data-table th { color: var(--ink-soft); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--paper-soft); }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table select,
.data-table input[type="date"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper);
}

.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.badge--grey { background: #ede8e9; color: var(--ink-soft); }
.badge--teal { background: var(--accent-soft); color: var(--accent-dark); }
.badge--green { background: #dcf5e3; color: #15803d; }
.badge--amber { background: #fef3c7; color: #b45309; }
.badge--red { background: #fee2e2; color: #b42318; }

.app-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.app-form-grid .form-field--full { grid-column: 1 / -1; }
.app-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.app-toolbar h1 { font-size: 1.55rem; font-weight: 600; }

/* ---------- Finances ---------- */
.finance-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.finance-entry-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 100px 130px 150px auto;
  gap: 10px;
  align-items: end;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.finance-entry-form__amount { width: 100px; }
.finance-entry-form__category { width: 130px; }
.finance-entry-form__date { width: 150px; }
.finance-entry-form__submit { border: 0; padding: 11px 20px; cursor: pointer; }

.app-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--paper-soft); padding: 24px; }
.app-auth__card { background: var(--paper); border-radius: var(--radius-lg); padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 20px 50px -20px rgba(10,10,10,0.15); border: 1px solid var(--border); }
.app-auth__card h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: 8px; }
.app-auth__card p.sub { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 28px; }
.app-auth__foot { margin-top: 20px; text-align: center; font-size: 0.9rem; color: var(--ink-soft); }
.app-auth__foot a { color: var(--accent-dark); font-weight: 700; }

.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(10,10,10,0.5); padding: 24px; }
.modal.is-open { display: flex; }
.modal__panel { position: relative; background: var(--paper); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 28px; }
.modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--paper); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.modal h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; }

@media (max-width: 900px) {
  body.app-menu-open { overflow: hidden; }
  .app-sidebar {
    display: flex;
    position: fixed;
    z-index: 80;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(290px, 82vw);
    height: 100dvh;
    transform: translateX(-105%);
    box-shadow: 24px 0 60px rgba(10, 10, 10, 0.2);
    transition: transform 0.2s ease;
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .app-sidebar.is-open::after {
    content: '';
    position: fixed;
    inset: 0 0 0 min(290px, 82vw);
    background: rgba(10, 10, 10, 0.4);
    z-index: -1;
  }
  .app-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink);
    background: var(--paper);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
  }
  .app-content { padding: 20px; }
  .app-form-grid { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .about-values__grid { grid-template-columns: repeat(2, 1fr); }
  .workflow__step { grid-template-columns: 56px 200px 1fr; gap: 24px; }
  .compare__grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-grid { grid-template-columns: repeat(3, 1fr); }
  .tour-row { gap: 36px; }
  .faq__wrap { grid-template-columns: 1fr; }
  .cta-card__main { padding: 60px 44px; }
  .cta-card__media { padding: 32px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* Bigger peek item / smaller side reveal on phones — there's less
     width to spare for "next slide" teaser than on desktop. */
  .dash-peek__item { flex-basis: 90%; max-width: 90%; }

  /* Narrow phones: the numeral/heading/paragraph row collapses to a
     single column, with the numeral pinned to the spine on the left and
     the heading/paragraph stacked beside it. */
  .workflow__step { grid-template-columns: 1fr; gap: 8px; padding-left: 56px; position: relative; }
  .workflow__num { position: absolute; left: 0; top: 34px; }
  .workflow__step-bg { top: 24px; right: 0; font-size: 3.4rem; }

  /* Manifesto list (Old way vs New way section): narrower index column
     and smaller claim type so the row still reads as a single unit on
     phones instead of the numeral crowding the text. */
  .manifesto { gap: 38px; }
  .manifesto__item { grid-template-columns: 46px 1fr; column-gap: 16px; }
  .manifesto__index { font-size: 1.9rem; }
  .manifesto__claim { font-size: 1.2rem; }
  .manifesto__note { font-size: 0.95rem; }

  body.menu-open { overflow: hidden; }
  .navbar__links, .navbar__actions { display: none; }
  .navbar__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
  }
  .form-field input, .form-field select, .form-field textarea { font-size: 16px; }
  .navbar__toggle span {
    width: 22px;
    height: 2px;
    background: var(--paper);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .navbar.is-open .navbar__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    inset: 16px;
    z-index: 60;
    overflow-y: auto;
    background: var(--bg-dark-2);
    padding: 88px 16px 152px;
    gap: 0;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 50px rgba(0,0,0,0.32);
  }
  .navbar.is-open .navbar__links::before {
    content: 'LEARNAXIS';
    position: absolute;
    top: 86px;
    left: 16px;
    color: var(--ink-on-dark-soft);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.16em;
  }
  .navbar.is-open .navbar__links a {
    color: var(--paper);
    background: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 15px 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
  }
  .navbar.is-open .navbar__links a.is-active { background: none; color: var(--accent-light); }
  .navbar.is-open .navbar__links a:first-of-type { margin-top: 36px; }
  .navbar.is-open .navbar__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    right: 32px;
    bottom: 32px;
    left: 32px;
    z-index: 61;
    gap: 9px;
  }
  .navbar.is-open .navbar__actions .link-muted { display: none; }
  .navbar.is-open .navbar__actions .btn {
    width: 100%;
    min-height: 42px;
    border-radius: 0;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .navbar.is-open .navbar__actions .btn--light {
    background: var(--accent);
    color: var(--accent-contrast);
  }
  .navbar.is-open .navbar__mobile-pricing {
    display: inline-flex;
    color: var(--paper);
    border: 1px solid rgba(255,255,255,0.85);
  }
  .navbar.is-open .navbar__toggle {
    position: fixed;
    top: 52px;
    right: 28px;
    z-index: 62;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--accent);
  }
  .navbar.is-open .navbar__toggle span { display: none; }
  .navbar.is-open .navbar__toggle::after {
    content: '\00d7';
    color: var(--paper);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
  }
  .navbar.is-open .navbar__toggle:hover { background: rgba(255,255,255,0.08); }
  .navbar__mobile-link { display: none; }
  .navbar.is-open .navbar__mobile-link { display: block; }
  .navbar.is-open .navbar__links a:hover { color: var(--accent-light); }
  .navbar.is-open {
    position: relative;
    z-index: 70;
  }
  .pricing-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-item { padding: 22px 18px; }
  .tour-list { gap: 56px; margin-top: 40px; }
  .tour-row { grid-template-columns: 1fr; gap: 28px; }
  .tour-row--reverse .tour-row__body { order: 1; }
  .tour-row--reverse .tour-row__media { order: 2; }
  .tour-row__body h3 { font-size: 1.4rem; }
  .cta-card { grid-template-columns: 1fr; }
  .cta-card__main { padding: 48px 24px 36px; }
  .cta-card__main h2, .cta-card__main > p { max-width: none; }
  .cta-card__media { border-left: none; border-top: 1px solid var(--border); padding: 24px; }
  .about-page__grid, .about-values__grid { grid-template-columns: 1fr; gap: 20px; }
  .footer__inner { grid-template-columns: 1fr; }
  .wrap { padding: 0 16px; }
  .hero { padding: 60px 0 0; }
  .hero--compact { padding: 56px 0 64px; }
  .hero__title { font-size: clamp(2.1rem, 10vw, 2.7rem); }
  .hero__subtitle { font-size: 0.98rem; }
  .hero__actions, .btn-row { align-items: stretch; }
  .hero__actions .btn, .btn-row .btn { width: 100%; }
  .platform, .workflow, .pricing, .plan-compare, .faq-page, .legal, .contact, .about-page { padding: 56px 0 68px; }
  .compare-table__row p, .compare-table__head span { padding: 16px 20px; }
  .plan-compare__scroll { margin-right: -16px; padding-right: 16px; }
  .plan-compare__table th, .plan-compare__table td { padding: 13px 15px; }
  .about-values { padding: 56px 0 68px; }
  .section-title { font-size: clamp(1.85rem, 8vw, 2.35rem); }
  .price-card { padding: 26px 20px; }
  .footer { padding-top: 48px; }
  .footer__inner { gap: 32px; padding-bottom: 38px; }
  .footer__bottom { flex-direction: column; gap: 8px; padding: 18px 0; }
  .cookie-notice { right: 16px; bottom: 12px; left: 16px; width: auto; }
  .checkout-modal { padding: 12px; align-items: flex-end; }
  .checkout-modal__panel { max-height: 94dvh; border-radius: 22px 22px 0 0; padding: 16px 10px; }
  .modal { padding: 12px; align-items: flex-end; }
  .modal__panel { max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 24px 18px; }
  .app-topbar { gap: 12px; padding: 12px 16px; }
  .app-topbar h1 { font-size: 1.1rem; }
  .app-content { padding: 16px; }
  .app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
  .stat-card { padding: 15px; }
  .stat-card strong { font-size: 1.2rem; }
  .app-toolbar { align-items: stretch; margin-bottom: 16px; }
  .app-toolbar h1 { font-size: 1.3rem; }
  .app-toolbar .btn { width: 100%; }
  .app-panel { margin-bottom: 16px; border-radius: var(--radius-sm); }
  .app-panel__head { padding: 15px 16px; }
  .app-panel__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 620px; font-size: 0.84rem; }
  .data-table th, .data-table td { padding: 10px 14px; }
  .data-table .btn { padding: 8px 12px; font-size: 0.76rem; }
  .app-auth { align-items: flex-start; padding: 16px; }
  .app-auth__card { border-radius: var(--radius-md); padding: 28px 20px; margin-top: 28px; }
  .finance-entry-grid { grid-template-columns: 1fr; gap: 16px; }
  .finance-entry-form {
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    padding: 16px;
    min-width: 0;
  }
  .finance-entry-form__description { grid-column: 1 / -1; }
  .finance-entry-form__amount,
  .finance-entry-form__category,
  .finance-entry-form__date { width: auto; }
  .finance-entry-form__date { grid-column: 1 / -1; }
  .finance-entry-form__submit { grid-column: 1 / -1; width: 100%; }
  .finance-entry-form input { min-width: 0; width: 100%; }
}


/* ---------- Liveliness: hover lift on cards ---------- */
.price-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ---------- Comparison table description row ---------- */
.plan-compare__desc-row td, .plan-compare__desc-row th {
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top;
  padding-top: 12px !important;
  padding-bottom: 16px !important;
}
.plan-compare__desc-row td {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  line-height: 1.5;
}