/* ---------- 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 ---------- */
:root {
  --bg-dark: #0c1420;
  --bg-dark-2: #121b2b;
  --panel-dark: #182338;
  --accent: #1f3a5f;
  --accent-light: #5f8fc4;
  --accent-dark: #122744;
  --accent-soft: #e7edf5;
  --accent-soft-border: #c2d2e3;
  --accent-contrast: #ffffff;
  --ink: #10141c;
  --ink-soft: #5b6472;
  --ink-on-dark: #e6eaf0;
  --ink-on-dark-soft: #97a2b0;
  --paper: #fafbfc;
  --paper-soft: #eef1f5;
  --border: #dde4ec;
  --radius-lg: 22px;
  --radius-md: 13px;
  --radius-sm: 8px;
  --shadow-sm: 0 8px 24px -12px rgba(16,20,28,0.18);
  --shadow-md: 0 24px 56px -24px rgba(16,20,28,0.28);
  --shadow-lg: 0 60px 120px -48px rgba(16,20,28,0.45);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -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: 600; }
em { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-weight: 400; }
.hero em, .workflow__title em, .cta-card__main em { color: var(--accent-light); }

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

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--accent); color: var(--accent-contrast); }
.btn--accent:hover { background: var(--accent-dark); }
.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 ---------- */
.navbar {
  background: var(--bg-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
}
.brand__mark {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex: none;
  transition: transform 0.2s ease;
}
.brand:hover .brand__mark { transform: rotate(-6deg); }
.navbar__links {
  display: flex;
  gap: 32px;
  flex: 1;
  justify-content: center;
}
.navbar__links a {
  color: var(--ink-on-dark);
  font-weight: 600;
  font-size: 0.95rem;
}
.navbar__links a:hover { color: var(--paper); }
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.navbar__toggle { display: none; }
.navbar__mobile-link,
.navbar__mobile-pricing { display: none; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(circle at 15% -10%, rgba(95,143,196,0.28) 0%, transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(31,58,95,0.35) 0%, transparent 50%),
    var(--bg-dark);
  color: var(--paper);
  padding: 90px 0 0;
  text-align: center;
  overflow: hidden;
}
.eyebrow {
  color: var(--accent-light);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  margin-bottom: 22px;
}
.eyebrow--dark { color: var(--accent-dark); }
.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; }

/* ---------- Checkout modal ---------- */
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(16, 20, 28, 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: shrinks and gains a shadow on scroll ---------- */
.navbar {
  transition: height 0.2s ease, box-shadow 0.2s ease;
}
.navbar--scrolled { box-shadow: 0 8px 24px -12px rgba(16,20,28,0.5); }
.navbar--scrolled .navbar__inner { height: 62px; }

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

/* ---------- Platform (module grid) ----------
   The four core modules used to sit in an asymmetric "bento" grid where
   only the CRM card carried a live-feature preview and the other three
   were bare text, then briefly became a one-at-a-time carousel — both
   made the reader wait or scan unevenly to see all four. This is a
   static 2x2 grid instead: every module gets equal billing, its own
   preview snippet, and the same card size, all visible together with no
   interaction required. .platform-card is flex-column so the preview
   block bottom-aligns via margin-top: auto regardless of how long each
   module's description runs, keeping cards in the same row level. */
.platform { padding: 110px 0; background: var(--paper); }
.platform-static-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.platform-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.platform-card:hover { border-color: var(--accent-light); box-shadow: var(--shadow-sm); }
.platform-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.platform-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 1.05rem;
}
.platform-card__index { font-family: var(--font-serif); font-style: italic; color: var(--border); font-size: 1.6rem; }
.platform-card h3 { font-size: 1.18rem; font-weight: 600; margin-bottom: 12px; }
.platform-card p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.65; }
.platform-card__preview { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.platform-card__preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}
.platform-card__preview-row em { margin-left: auto; font-style: normal; font-family: var(--font-sans); }
.platform-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.68rem;
  font-weight: 800;
}

/* ---------- Workflow ---------- */
.workflow {
  background: linear-gradient(160deg, var(--panel-dark), var(--bg-dark-2));
  color: var(--paper);
  padding: 90px 0;
  margin: 0 24px;
  border-radius: var(--radius-lg);
}
.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: 56px;
}
.workflow__track { position: relative; }
.workflow__line {
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
}
/* Fills in left-to-right once the track scrolls into view, so the line
   reads as "progress through the four steps" rather than a static rule.
   .workflow__track picks up data-reveal directly in the HTML (rather
   than through main.js's auto-tag list) purely so this fill has an
   is-visible class to key off; the existing IntersectionObserver in
   main.js drives it the same as every other [data-reveal] element. */
.workflow__line::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: var(--accent-light);
  transition: width 1.3s ease 0.15s;
}
.workflow__track.is-visible .workflow__line::after { width: 100%; }
.workflow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.workflow__step { position: relative; }
.workflow__step-bg {
  /* Sits behind the heading/paragraph, not the numbered-circle timeline
     row above it — top offset clears the 44px circle + 20px margin so it
     never competes with the circle or the connecting line. */
  position: absolute;
  top: 58px;
  right: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 4rem;
  line-height: 1;
  color: rgba(255,255,255,0.045);
  pointer-events: none;
  z-index: 0;
}
.workflow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-dark-2);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--accent-light);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.workflow__step h3, .workflow__step p { position: relative; z-index: 1; }
.workflow__step h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; }
.workflow__step p { color: var(--ink-on-dark); font-size: 0.92rem; line-height: 1.6; }
.workflow__foot {
  margin-top: 56px;
  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-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-size: 1.1rem; 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 (index.html "old way vs Brixoza") ----------
   Was a single wide two-column table with a shared header row (one long
   "old" paragraph beside one long "new" paragraph, five times down the
   page). Restructured as a grid of individual transformation cards, each
   one its own crossed-out problem collapsing into a checked-off accent
   resolution — reads as five distinct wins at a glance instead of one
   dense reading exercise, using the same –/✓ markers and accent-soft
   tint the old table already established. */
.compare-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.compare-cards__item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
}
.compare-cards__old {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
  padding-bottom: 14px;
}
.compare-cards__old::before { content: '\2715  '; color: #c7c0c3; font-weight: 700; }
.compare-cards__arrow {
  align-self: center;
  color: var(--accent-light);
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 14px;
}
.compare-cards__new {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-md);
  padding: 15px 17px;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: auto;
}
.compare-cards__new::before { content: '\2713  '; color: var(--accent-dark); font-weight: 800; }

/* ---------- Highlights carousel (auto-scrolling) ---------- */
.highlights { padding: 90px 0; background: var(--paper-soft); overflow: hidden; }
.highlights__head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.highlights__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.highlights__viewport + .highlights__viewport { margin-top: 20px; }
.highlights__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: highlights-scroll 55s linear infinite;
}
/* Second row runs the same loop in reverse, so the two rows drift past
   each other in opposite directions instead of marching in lockstep. */
.highlights__track--reverse { animation-direction: reverse; }
.highlights__viewport:hover .highlights__track { animation-play-state: paused; }
@keyframes highlights-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.highlight-card {
  flex: none;
  width: 300px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.highlight-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 800;
  margin-bottom: 16px;
}
.highlight-card__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 10px;
}
.highlight-card__quote { font-size: 0.98rem; line-height: 1.55; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .highlights__track { animation: none; }
  .highlights__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 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: linear-gradient(90deg, var(--accent-light), var(--accent));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.price-card:hover::before, .price-card--highlight::before { opacity: 1; }
.price-card--highlight {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}
/* 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(95,143,196,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: rgba(31,58,95,0.18);
  color: var(--accent-light);
  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%; }
.price-card--highlight .btn--accent { background: var(--accent); color: var(--accent-contrast); }
.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: #dad3d5; }
.plan-compare__note { margin-top: 18px; color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- FAQ ---------- */
.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; gap: 14px; }
.faq__item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.faq__item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Same italic-serif index numeral used on the module carousel cards
   (.platform-card__index) and the workflow steps, so the FAQ list reads
   as one more instance of the same numbered-index motif rather than a
   plain question list. */
.faq__item-num { font-family: var(--font-serif); font-style: italic; color: var(--accent-light); font-size: 0.95rem; margin-right: 10px; }
.faq__item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin-left: 12px;
}
.faq__item[open] summary::after { content: '–'; }
.faq__item p { margin-top: 14px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; }

/* ---------- CTA band ---------- */
.cta-band { padding: 0 24px 110px; background: var(--paper); }
.cta-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--ink) 0%, var(--bg-dark-2) 60%, var(--panel-dark) 100%);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}
/* Soft accent glow in the corner, echoing the maroon accent elsewhere on
   the page, so the card reads as textured rather than flat black. */
.cta-card::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95,143,196,0.28), transparent 70%);
  pointer-events: none;
}
.cta-card__main, .cta-card__widget { position: relative; z-index: 1; }
.cta-card__main h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); font-weight: 600; margin-bottom: 18px; color: var(--paper); }
.cta-card__main p { color: var(--ink-on-dark); font-size: 1.02rem; margin-bottom: 26px; line-height: 1.6; }
.cta-card__note { margin-top: 18px; font-size: 0.85rem; color: var(--ink-on-dark-soft); }
/* Stat tiles echo the dashboard preview's own .dash__stat cards (label on
   top, big serif figure below) instead of a flat label/value row, so the
   CTA visually calls back to the product rather than feeling generic. */
.cta-card__widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-card__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.cta-card__stat span { font-size: 0.74rem; color: var(--ink-on-dark-soft); margin-bottom: 6px; }
.cta-card__stat strong { color: var(--paper); font-size: 1.35rem; font-weight: 600; font-family: var(--font-serif); }
.cta-card__stat--accent { background: rgba(95,143,196,0.16); border-color: rgba(95,143,196,0.35); }
.cta-card__stat--accent span { color: var(--accent-light); }

/* ---------- Footer ---------- */
.footer { background: var(--bg-dark); color: var(--ink-on-dark); padding: 84px 0 0; }
.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; }
.footer__business-info a:hover { color: var(--paper); }
.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; }
.footer__col a:hover { color: var(--paper); }
.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(--paper); }

/* ---------- 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 { font-family: var(--font-serif); font-style: italic; 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 { font-family: var(--font-serif); font-style: italic; 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 { font-family: var(--font-serif); font-style: italic; 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; }
.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; }
.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(16,20,28,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(16,20,28,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(16, 20, 28, 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(16, 20, 28, 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__line { display: none; }
  .workflow__steps { grid-template-columns: repeat(2, 1fr); }
  .compare__grid { grid-template-columns: 1fr; }
  .compare-cards { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .faq__wrap { grid-template-columns: 1fr; }
  .cta-card { grid-template-columns: 1fr; padding: 48px 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%; }

  /* Workflow becomes a left-rail vertical timeline instead of a floating
     stack of numbered boxes, so the scroll-down motion through the four
     steps reads as one connected line rather than four disconnected cards. */
  .workflow__steps { grid-template-columns: 1fr; gap: 34px; }
  .workflow__line {
    display: block;
    top: 4px;
    bottom: 4px;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
  }
  /* Vertical rail: the fill now runs top-to-bottom instead of left-to-right. */
  .workflow__line::after { width: 100%; height: 0; transition: height 1.3s ease 0.15s; }
  .workflow__track.is-visible .workflow__line::after { height: 100%; }
  .workflow__step { position: relative; padding-left: 58px; }
  .workflow__num { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  .workflow__step-bg { top: -14px; right: 0; font-size: 3.4rem; }

  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;
    box-shadow: 0 18px 50px rgba(0,0,0,0.32);
  }
  .navbar.is-open .navbar__links::before {
    content: 'BRIXOZA';
    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);
    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: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;
  }
  .workflow__steps, .pricing-grid, .compare-cards, .platform-static-grid { grid-template-columns: 1fr; }
  .platform-card { padding: 28px 22px; }
  .cta-card { padding: 36px 24px; gap: 32px; }
  .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, .workflow__step, .compare__card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(16,20,28,0.2);
}

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