/* ============================================================
   HEADER / NAV
   Transparent over the hero; settles onto a dark glass surface
   once the page scrolls.
   ============================================================ */
.site-header {
  --header-pad: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: var(--header-pad);
  transition: transform var(--transition-slow), padding-block var(--transition-slow);
}
.site-header.is-stuck { --header-pad: 0px; }
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: rgba(15, 15, 15, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: opacity var(--transition-slow);
}
.site-header.is-stuck::before,
.site-header.nav-open::before { opacity: 1; }
/* Sub-pages ship with the header already stuck over a light page, so use the solid brand surface. */
.site-header.is-stuck:not(#site-header)::before {
  background: var(--color-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.nav-open::before { background: rgba(15, 15, 15, 0.96); }
.site-header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header.is-hidden { transform: none; }
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--header-height);
}
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.brand img { height: 41px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.nav-links a {
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius-sm) * var(--sq, 1));
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.nav-actions { justify-self: end; display: flex; align-items: center; gap: var(--space-3); }
.nav-actions .btn { height: 42px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: calc(var(--radius-sm) * var(--sq, 1));
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 900px) {
  .nav { grid-template-columns: auto auto; justify-content: space-between; }
  .nav-toggle { display: inline-flex; }
  .nav-links,
  .nav-actions { display: none; }

  .site-header.nav-open .nav-links,
  .site-header.nav-open .nav-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding-bottom: var(--space-5);
  }
  .site-header.nav-open .nav-links a {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border-radius: calc(var(--radius-md) * var(--sq, 1));
  }
  .site-header.nav-open .nav-actions {
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    gap: var(--space-3);
  }
  .site-header.nav-open .nav-actions .btn { width: 100%; }
}

/* The halftone oak is the brand's signature texture. Fixed so the page rolls over it. */
/* Parallax layers: absolutely positioned, oversized vertically so the drift never shows an edge.
   main.js moves them with a transform; without JS (or with reduced motion) they just sit still. */
.plx-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -14%;
  bottom: -14%;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding-inline: var(--space-3);
  margin-bottom: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85); corner-shape: round; }
.hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(0, 189, 126, 0.18); corner-shape: round; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero-microcopy {
  margin-top: var(--space-5);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
}
.hero-microcopy a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-underline-offset: 3px; }
.hero-microcopy a:hover { color: #fff; }

.fact-value {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.fact-value small {
  font-family: var(--font-sans);
  font-size: 0.5em;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.6);
  margin-left: 2px;
}

/* ============================================================
   PAGE-LOAD INTRO
   ============================================================ */
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.site-header .brand,
.nav-links a,
.nav-actions,
.nav-toggle,
.hero-badge,
.hero-cta,
.hero-microcopy {
  animation: intro-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Holding the end transform would make .nav-actions the containing block for the account
   menu's panel, so it opened 20px higher than the other menus. Its end state is the resting
   style anyway, so let it go once the rise is done. */
.nav-actions { animation-fill-mode: backwards; }
.site-header .brand { animation-delay: 80ms; }
.nav-links a:nth-child(1) { animation-delay: 140ms; }
.nav-links a:nth-child(2) { animation-delay: 190ms; }
.nav-links a:nth-child(3) { animation-delay: 240ms; }
.nav-links a:nth-child(4) { animation-delay: 290ms; }
.nav-links a:nth-child(5) { animation-delay: 340ms; }
.nav-actions,
.nav-toggle { animation-delay: 380ms; }
.hero-badge { animation-delay: 160ms; }

.hero-cta { animation-delay: 460ms; }
.hero-microcopy { animation-delay: 560ms; }

@media (max-width: 900px) {
  .site-header.nav-open .nav-links a,
  .site-header.nav-open .nav-actions {
    animation: intro-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .site-header.nav-open .nav-links a:nth-child(1) { animation-delay: 40ms; }
  .site-header.nav-open .nav-links a:nth-child(2) { animation-delay: 80ms; }
  .site-header.nav-open .nav-links a:nth-child(3) { animation-delay: 120ms; }
  .site-header.nav-open .nav-links a:nth-child(4) { animation-delay: 160ms; }
  .site-header.nav-open .nav-links a:nth-child(5) { animation-delay: 200ms; }
  .site-header.nav-open .nav-actions { animation-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand, .nav-links a, .nav-actions, .nav-toggle,
  .hero-badge, .hero-cta, .hero-microcopy,
  .site-header.nav-open .nav-links a, .site-header.nav-open .nav-actions { animation: none; }

}

/* ============================================================
   STATEMENT (one large positioning heading)
   ============================================================ */

.pricing-section { position: relative; overflow: hidden; }

.pricing-section > .container { position: relative; z-index: 1; }

/* ============================================================
   FEATURE ROWS (alternating copy / visual)
   ============================================================ */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.feature-row + .feature-row { margin-top: clamp(88px, 12vw, 176px); }
.feature-row.is-reversed .feature-copy { order: 2; }
.feature-row.is-reversed .feature-visual { order: 1; }

.feature-copy > p {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.65;
}
.feature-copy .check-list { margin-top: var(--space-6); }
.feature-copy .check-list li { font-size: var(--text-base); }

/* ============================================================
   FEATURE HIGHLIGHTS
   Simple UI (stat tiles, segmented controls, budget lines, notice card) is
   rebuilt here from the app's own CSS so it renders crisp at any size.
   Only the charts are screenshots, cropped to the canvas inside the card.
   Tokens below mirror D:\budgeting-app\renderer\design-system.css.
   ============================================================ */
.feature-visual {
  position: relative;
  will-change: transform;
  --ui-text:        #111827;
  --ui-muted:       #6B7280;
  --ui-border:      #E6E6E0;
  --ui-input:       #D5D5CD;
  --ui-secondary:   #F2F2EE;
  --ui-accent:      #05b97d;
  --ui-danger:      #EF4444;
  --ui-shadow-md:   0 4px 8px rgba(0,0,0,0.04), 0 3px 4px rgba(0,0,0,0.02);
  --ui-shadow-lg:   0 15px 30px rgba(0,0,0,0.055), 0 6px 8px rgba(0,0,0,0.025);
  --ui-float:       0 36px 50px -16px rgba(15,15,15,0.14), 0 9px 14px rgba(15,15,15,0.035);
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.feature-visual > img {
  display: block;
  width: 100%;
  border-radius: calc(var(--radius-xl) * var(--sq, 1));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
}

/* App card (.card): white, 12px radius, 1px border, md shadow. Chart canvas gets even padding. */
.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--ui-border);
  border-radius: calc(12px * var(--sq, 1));
  box-shadow: var(--ui-shadow-lg);
  overflow: hidden;
}
.ui-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ui-border);
}
.ui-card-header .ui-stat-label { text-align: left; }
.ui-card-title { font-size: 15px; font-weight: 600; color: var(--ui-text); margin-top: 2px; }
.ui-card-body { padding: 16px; }
.ui-card-body img { display: block; width: 100%; height: auto; }

/* .stat-card */
.ui-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 24px 20px 28px;
  background: var(--color-surface);
  border: 1px solid var(--ui-border);
  border-radius: calc(12px * var(--sq, 1));
  box-shadow: var(--ui-shadow-md);
}
.ui-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ui-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ui-stat-value {
  font-size: 22px;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ui-text);
}
.ui-stat-value.is-accent { color: var(--ui-accent); }

/* .segmented + .btn.btn-field */
.ui-seg {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  height: 33px;
  padding: 2px;
  background: var(--color-surface);
  border: 1px solid var(--ui-input);
  border-radius: calc(8px * var(--sq, 1));
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-muted);
  white-space: nowrap;
}
.ui-seg > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: calc(6px * var(--sq, 1));
}
.ui-seg > span.active { background: var(--ui-secondary); color: var(--ui-text); }
.ui-seg svg { width: 14px; height: 14px; }

/* ============================================================
   FEATURE GRAPHICS (.fg): one live card per feature row, after the feature graphics on calendly.com.
   The card is drawn from the app's own components rather than screenshotted, zoomed well past the app's
   real sizes so it reads at a glance, and centred in its field with room around it. Nothing points or
   clicks: the card changes in place, in soft moves under a second with long rests (the motion tokens in
   design-system.css), scripted in main.js. Each field has a halftone illustration burned into it.
   ============================================================ */
.feature-visual.gf.fg { display: flex; align-items: center; justify-content: center; padding-block: clamp(24px, 3.6vw, 44px); }
/* The halftone, burned in: screen drops the engraving's black (so the light fields stay light) and its pale lines
   lift the colour; the gradient's points still drift beneath it. */
/* The feature graphics and the Ask Oak chat are pictures of the app, not the app: like the hero's preview
   (.lh-app-card) they can't be clicked, selected or dragged. */
.feature-visual, .feature-visual *, .oc[data-chat], .oc[data-chat] * { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.fg::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--fg-art); background-position: var(--fg-pos, center); background-size: var(--fg-size, cover); background-repeat: no-repeat; mix-blend-mode: screen; opacity: 0.75; }
.hl-summary { --fg-art: url('/assets/img/halftone/oak-leaves.jpg'); }
.fg-debt { --fg-art: url('/assets/img/halftone/oak-dawn.jpg'); --fg-pos: center bottom; }
.fg-voice { --fg-art: url('/assets/img/oak-halftone.jpg'); --fg-pos: center bottom; }
.fg-privacy { --fg-art: url('/assets/img/halftone/oak-roots.jpg'); --fg-pos: center 35%; }
/* Everything in the card scales with the card's own width (cqw), from phones up to 500px. */
.fg-stage { position: relative; width: min(100%, 500px); container-type: inline-size; }
.fg-card { border-radius: calc(clamp(14px, 4.4cqw, 22px) * var(--sq, 1)); }
.fg-card .ui-card-header { padding: clamp(13px, 4.2cqw, 21px) clamp(16px, 5.6cqw, 28px); }
.fg-card .ui-stat-label { font-size: clamp(11px, 2.6cqw, 13px); }
.fg-card .ui-card-title { margin-top: clamp(2px, 0.8cqw, 4px); font-size: clamp(18px, 5.2cqw, 26px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; }
.fg-card .ui-seg { height: clamp(34px, 8.8cqw, 44px); border-radius: calc(clamp(9px, 2.4cqw, 12px) * var(--sq, 1)); font-size: clamp(13px, 3.2cqw, 15px); }
.fg-card .ui-seg > span { padding-inline: clamp(8px, 2.8cqw, 14px); border-radius: calc(clamp(7px, 1.8cqw, 9px) * var(--sq, 1)); transition: background var(--dur-rise) var(--ease-smooth), color var(--dur-rise) var(--ease-smooth); }
.fg-card .ui-seg svg { width: clamp(15px, 4cqw, 20px); height: clamp(15px, 4cqw, 20px); }
.fg-body { padding: clamp(14px, 4.8cqw, 24px) clamp(12px, 4.8cqw, 24px) clamp(12px, 4.4cqw, 22px); }
/* Hidden until the figure scrolls in, then the card rises in the way the app's pages do. */
.fg.is-armed .fg-card { opacity: 0; }
.fg-card.is-entering { animation: fg-card-in 800ms var(--ease-rise) both; }
@keyframes fg-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fg-card.is-still, .fg-card.is-still * { transition: none !important; }
/* A readout that swaps its text: out, change, back in. */
.fg-readout { display: grid; justify-items: end; gap: 2px; text-align: right; transition: opacity var(--dur-fade) ease, transform var(--dur-rise) var(--ease-rise); }
.fg-readout b, .dt-stats b { font-size: clamp(17px, 4.6cqw, 23px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ui-text); }
.is-swapping { opacity: 0 !important; transform: translateY(4px); transition-duration: 180ms !important; }
@container (max-width: 279px) {
  .fg-card .ui-seg { display: none; }
}

/* ---- Budget: the app's Budget Summary card, with its donut's geometry and colours (app.js renderSummaryChartHtml) ---- */

.bs-heads { display: grid; min-width: 0; }
.bs-head { grid-area: 1 / 1; min-width: 0; transition: opacity 240ms ease, transform 600ms var(--ease-rise); }
.bs-head.is-detail { opacity: 0; transform: translateY(6px); }
.bs-card[data-view="detail"] .bs-head.is-summary { opacity: 0; transform: translateY(-6px); }
.bs-card[data-view="detail"] .bs-head.is-detail, .bs-card[data-view="summary"] .bs-head.is-summary { opacity: 1; transform: none; transition-delay: 90ms; }

.bs-body { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 4.8cqw, 24px); padding: clamp(14px, 4.8cqw, 24px) clamp(12px, 4.8cqw, 24px) clamp(12px, 4.4cqw, 22px); }
.bs-donut { position: relative; width: clamp(220px, 57.6cqw, 288px); aspect-ratio: 1; flex-shrink: 0; }
.bs-donut svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bs-ring-bg { stroke: var(--ui-secondary); }
.bs-ring { --donut-r: 100px; --donut-r-inner: 88px; --donut-stroke: 24px; }
.bs-seg { stroke: var(--seg-grey); transition: stroke-dasharray var(--dur-morph) var(--ease-smooth), stroke-dashoffset var(--dur-morph) var(--ease-smooth), stroke 500ms ease, stroke-width 500ms var(--ease-smooth); }
.bs-seg[data-i="0"], .bs-seg.is-active { stroke: var(--seg-color); }
.bs-seg.is-active { stroke-width: 32px; }
/* Each segment fills outward from the ring's inner edge; the next starts once this one is halfway in. */
.bs-seg.is-drawing { animation: bs-seg-in var(--seg-duration, 300ms) var(--ease-rise) var(--seg-delay, 0ms) backwards; }
@keyframes bs-seg-in {
  from { r: var(--donut-r-inner); stroke-width: 0; }
  to { r: var(--donut-r); stroke-width: var(--donut-stroke); }
}
/* The subcategories sit folded inside the Food & Shopping slice, in its colour, and take over from it the
   moment it starts to open. Closing, the slice comes back only once they've folded away. */
.is-summary .bs-seg[data-i="2"] { transition-property: stroke-dasharray, stroke-dashoffset, stroke, stroke-width, opacity; transition-duration: var(--dur-morph), var(--dur-morph), 500ms, 500ms, 0s; transition-delay: 0s, 0s, 0s, 0s, var(--dur-morph); }
.bs-card[data-view="detail"] .is-summary .bs-seg[data-i="2"] { opacity: 0; transition-delay: 0s; }
.bs-ring .is-detail { opacity: 0; transition: opacity 0s var(--dur-morph); }
.bs-card[data-view="detail"] .bs-ring .is-detail { opacity: 1; transition-delay: 0s; }
.bs-card[data-view="summary"] .bs-ring .is-detail .bs-seg { stroke: color-mix(in srgb, var(--ui-muted) 57%, var(--ui-secondary)); }
.bs-card[data-view="summary"].is-food-lit .bs-ring .is-detail .bs-seg { stroke: #F9B733; stroke-width: 32px; }

.bs-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2px, 0.6cqw, 3px); padding: 0 15%; text-align: center; transition: opacity 240ms ease, transform 500ms var(--ease-rise); }
.bs-centre.is-swapping { opacity: 0; transform: translateY(4px); transition-duration: 180ms; }
.bs-centre > span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-centre-label { font-size: clamp(10.5px, 2.6cqw, 13px); font-weight: 600; line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-muted); }
.bs-centre-label[data-tone] { color: var(--seg-color); }
.bs-centre-total { font-size: clamp(24px, 6cqw, 30px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--ui-text); }
.bs-centre-share { font-size: clamp(12.5px, 3cqw, 15px); line-height: 1.35; color: var(--ui-muted); }

/* The card grows and shrinks with the legend, from its centre, since the figure centres it. */
.bs-legends { position: relative; width: 100%; transition: height var(--dur-morph) var(--ease-smooth); }
.bs-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4px, 1.5cqw, 8px) clamp(6px, 2.4cqw, 12px); width: 100%; }
.bs-legend.is-detail { position: absolute; top: 0; left: 0; }
.bs-row { display: flex; align-items: center; gap: clamp(6px, 1.8cqw, 9px); min-width: 0; padding: clamp(3px, 1cqw, 5px) clamp(4px, 1.6cqw, 8px); border-radius: calc(clamp(6px, 2cqw, 10px) * var(--sq, 1)); font-size: clamp(13px, 3.2cqw, 16px); line-height: 1.4; color: var(--ui-text); transition: background 400ms ease, opacity 220ms ease, transform 220ms ease; }
.bs-row.is-active { background: var(--ui-secondary); }
.bs-dot { width: clamp(8px, 2cqw, 10px); height: clamp(8px, 2cqw, 10px); border-radius: 50%; flex-shrink: 0; background: var(--seg-grey); transition: background 400ms ease; corner-shape: round; }
.bs-row[data-i="0"] .bs-dot, .bs-row.is-active .bs-dot { background: var(--seg-color); }
.bs-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Leaving rows fade together; arriving rows rise in one after another. */
.bs-card[data-view="summary"] .bs-legend.is-detail .bs-row, .bs-card[data-view="detail"] .bs-legend.is-summary .bs-row { opacity: 0; transform: translateY(6px); }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row, .bs-card[data-view="detail"] .bs-legend.is-detail .bs-row { transition: background 400ms ease, opacity 500ms ease, transform 700ms var(--ease-rise); }
.bs-card[data-view="detail"] .bs-legend.is-detail .bs-row:nth-child(1) { transition-delay: 130ms; }
.bs-card[data-view="detail"] .bs-legend.is-detail .bs-row:nth-child(2) { transition-delay: 190ms; }
.bs-card[data-view="detail"] .bs-legend.is-detail .bs-row:nth-child(3) { transition-delay: 250ms; }
.bs-card[data-view="detail"] .bs-legend.is-detail .bs-row:nth-child(4) { transition-delay: 310ms; }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row:nth-child(1) { transition-delay: 130ms; }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row:nth-child(2) { transition-delay: 160ms; }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row:nth-child(3) { transition-delay: 190ms; }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row:nth-child(4) { transition-delay: 220ms; }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row:nth-child(5) { transition-delay: 250ms; }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row:nth-child(6) { transition-delay: 280ms; }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row:nth-child(7) { transition-delay: 310ms; }
.bs-card[data-view="summary"] .bs-legend.is-summary .bs-row:nth-child(8) { transition-delay: 340ms; }

/* The app's slice colours; everything but the first rests in grey until it's lit. */
.hl-summary [data-i="0"], .hl-summary [data-tone="0"] { --seg-color: var(--ui-accent); }
.hl-summary [data-i="1"], .hl-summary [data-tone="1"] { --seg-color: #7072CC; }
.hl-summary [data-i="2"], .hl-summary [data-tone="2"] { --seg-color: #F9B733; }
.hl-summary [data-i="3"], .hl-summary [data-tone="3"] { --seg-color: #4B86D0; }
.hl-summary [data-i="4"], .hl-summary [data-tone="4"] { --seg-color: #36B2AA; }
.hl-summary [data-i="5"], .hl-summary [data-tone="5"] { --seg-color: #EB5F33; }
.hl-summary [data-i="6"], .hl-summary [data-tone="6"] { --seg-color: #AA6BCA; }
.hl-summary [data-i="7"], .hl-summary [data-tone="7"] { --seg-color: #D367A8; }
.hl-summary .is-summary [data-i="0"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 70%, var(--ui-secondary)); }
.hl-summary .is-summary [data-i="1"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 64%, var(--ui-secondary)); }
.hl-summary .is-summary [data-i="2"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 57%, var(--ui-secondary)); }
.hl-summary .is-summary [data-i="3"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 51%, var(--ui-secondary)); }
.hl-summary .is-summary [data-i="4"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 44%, var(--ui-secondary)); }
.hl-summary .is-summary [data-i="5"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 38%, var(--ui-secondary)); }
.hl-summary .is-summary [data-i="6"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 31%, var(--ui-secondary)); }
.hl-summary .is-summary [data-i="7"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 25%, var(--ui-secondary)); }
.hl-summary .is-detail [data-i="0"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 70%, var(--ui-secondary)); }
.hl-summary .is-detail [data-i="1"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-secondary)); }
.hl-summary .is-detail [data-i="2"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 40%, var(--ui-secondary)); }
.hl-summary .is-detail [data-i="3"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 25%, var(--ui-secondary)); }

/* Building the budget (main.js budget, the first point): a second card over the donut's, in the app's
   steps. The Budget Toolbox's Add Budget Category form (budgeting.js #budget-rcpt-page-edit) fills in and
   saves, then swipes left to the new category on the Budget page (renderCategoryCard), where each
   subcategory's budget box takes its amount and the category's total adds up. The donut's card steps
   back while it plays. */
.bs-card { transition: opacity 360ms var(--ease-smooth), transform 600ms var(--ease-rise); }
.bs-card.is-away { opacity: 0; transform: translateY(10px) scale(0.985); pointer-events: none; transition-duration: 260ms; }
.bb-card { position: absolute; left: 0; right: 0; top: 50%; z-index: 2; overflow: hidden; translate: 0 -50%; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 260ms var(--ease-smooth), transform 260ms var(--ease-smooth), visibility 0s linear 260ms; }
.bb-card.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 360ms var(--ease-smooth) 120ms, transform 600ms var(--ease-rise) 120ms, visibility 0s; }
.bb-card.is-still, .bb-card.is-still * { transition: none !important; }
.bb-card { display: grid; }
.bb-page { grid-area: 1 / 1; min-width: 0; transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease; }
.bb-card[data-phase="form"] .bb-page.is-lines { transform: translateX(100%); opacity: 0; }
.bb-card[data-phase="lines"] .bb-page.is-form { transform: translateX(-100%); opacity: 0; }

/* The form, as the app's field rows: a label on the left, the control on the right. */
.bb-form { display: grid; gap: clamp(10px, 3cqw, 14px); padding: clamp(14px, 4.4cqw, 22px) clamp(16px, 5.6cqw, 28px) 0; }
.bb-field { display: grid; grid-template-columns: clamp(92px, 27cqw, 132px) minmax(0, 1fr); align-items: center; gap: 12px; }
.bb-field.is-top { align-items: start; }
.bb-field.is-top .bb-label { padding-top: clamp(6px, 1.8cqw, 9px); }
.bb-label { font-size: clamp(12px, 3cqw, 14px); font-weight: 500; color: var(--ui-text); }
.bb-label i { font-style: normal; color: var(--ui-accent); }
.bb-ctrl { display: flex; gap: 8px; min-width: 0; }
.bb-input, .bb-emoji { display: flex; align-items: center; box-sizing: border-box; height: clamp(30px, 8cqw, 36px); padding: 0 clamp(9px, 2.6cqw, 12px); border: 1px solid var(--ui-input); border-radius: calc(clamp(7px, 2cqw, 9px) * var(--sq, 1)); background: #fff; font-size: clamp(12.5px, 3.2cqw, 15px); color: var(--ui-text); white-space: nowrap; overflow: hidden; }
.bb-ctrl .bb-input { flex: 1; min-width: 0; }
.bb-emoji { justify-content: center; flex-shrink: 0; width: clamp(30px, 8cqw, 36px); padding: 0; }
.bb-emoji > * , .bb-emoji { font-size: clamp(14px, 3.8cqw, 17px); }
.bb-input.is-select { color: var(--ui-muted); }
.bb-subs { display: grid; gap: clamp(6px, 1.6cqw, 8px); }
.bb-type { display: inline-block; clip-path: inset(0 100% 0 0); }
.bb-type.is-in, .is-in > .bb-type { clip-path: inset(0 0 0 0); transition: clip-path 600ms steps(14, end); }
/* Before it's picked, the emoji button is empty and a subcategory is just a blank select. */
.bb-emoji:not(.is-in) { font-size: 0; }
.bb-emoji.is-in { animation: bb-pop 360ms var(--ease-rise); }
@keyframes bb-pop { from { scale: 0.6; } to { scale: 1; } }
.bb-sub { transition: opacity 300ms var(--ease-smooth), transform 500ms var(--ease-rise); }
.bb-sub:not(.is-in) { opacity: 0; transform: translateY(6px); }
.bb-bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: clamp(14px, 4cqw, 18px); padding: clamp(12px, 3.6cqw, 16px) clamp(16px, 5.6cqw, 28px) clamp(16px, 5cqw, 22px); border-top: 1px solid var(--ui-border); }
/* Save as the app's accent button (.btn-accent), pressed as Bulk Add is. */
.bb-save { display: inline-flex; align-items: center; height: clamp(28px, 7.6cqw, 34px); padding: 0 clamp(12px, 3.4cqw, 16px); border: 1.5px solid var(--ui-accent); border-radius: calc(clamp(7px, 2cqw, 9px) * var(--sq, 1)); background: var(--ui-accent); color: #fff; font-size: clamp(11.5px, 2.9cqw, 13.5px); font-weight: 500; }
.bb-save.is-pressed { animation: fx-press 420ms var(--ease-smooth); }

/* The category on the Budget page: the column titles, its line (bold, the total its subcategories add up
   to) and a line per subcategory with its budget box; what's left of each shows once it has an amount. */
.bb-line { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 27cqw, 128px) clamp(70px, 19cqw, 96px); align-items: center; gap: clamp(8px, 2.4cqw, 12px); padding: clamp(8px, 2.4cqw, 11px) clamp(16px, 5.6cqw, 28px); border-top: 1px solid var(--ui-border); font-size: clamp(12.5px, 3.2cqw, 15px); color: var(--ui-text); }
.bb-line > :not(:first-child) { justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-line.is-head { border-top: 0; padding-block: clamp(6px, 1.8cqw, 9px); font-size: clamp(11.5px, 2.8cqw, 13px); font-weight: 500; color: var(--ui-muted); }
.bb-line.is-cat { padding-block: clamp(11px, 3.2cqw, 14px); font-weight: 700; }
.bb-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bb-line:not(.is-cat):not(.is-head) .bb-name { padding-left: clamp(14px, 4cqw, 22px); }
.bb-name b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.bb-sum, .bb-left { transition: opacity 240ms ease, transform 500ms var(--ease-rise); }
.bb-left { color: var(--ui-accent); }
.bb-line:not(.is-in):not(.is-cat) .bb-left { opacity: 0; }
.bb-box { display: flex; align-items: center; gap: 4px; box-sizing: border-box; width: 100%; height: clamp(28px, 7.6cqw, 34px); padding: 0 clamp(8px, 2.4cqw, 10px); border: 1px solid var(--ui-input); border-radius: calc(clamp(7px, 2cqw, 9px) * var(--sq, 1)); background: #fff; transition: border-color 150ms ease, box-shadow 150ms ease; }
.bb-box i { font-style: normal; font-size: 0.9em; color: var(--ui-muted); }
.bb-box .bb-type { margin-left: auto; }
@container (max-width: 400px) {
  .bb-line { grid-template-columns: minmax(0, 1fr) 78px 58px; gap: 8px; padding-inline: 14px; font-size: 12.5px; }
  .bb-line:not(.is-cat):not(.is-head) .bb-name { padding-left: 8px; }
  .bb-box { padding-inline: 7px; }
}
.bb-box.is-focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 18%, transparent); }

/* Grouped by fixed and variable (main.js budget, the fourth point): the slices close up into two arcs, Fixed
   in the accent and Variable in grey, as the app colours the largest slice and rests the rest; a lit group
   takes its colour and thickens, like a lit slice. The header and legend swap as they do for a category. */
.bs-head.is-kind { opacity: 0; transform: translateY(6px); }
.bs-card[data-view="kind"] .bs-head.is-summary { opacity: 0; transform: translateY(-6px); }
.bs-card[data-view="kind"] .bs-head.is-kind { opacity: 1; transform: none; transition-delay: 90ms; }
.bs-card[data-view="kind"] .is-summary .bs-seg[data-k="f"] { stroke: var(--ui-accent); }
.bs-card[data-view="kind"] .is-summary .bs-seg[data-k="v"] { stroke: color-mix(in srgb, var(--ui-muted) 57%, var(--ui-secondary)); }
.bs-card[data-view="kind"].is-v-lit .is-summary .bs-seg[data-k="v"] { stroke: #7072CC; }
.bs-card[data-view="kind"].is-f-lit .is-summary .bs-seg[data-k="f"],
.bs-card[data-view="kind"].is-v-lit .is-summary .bs-seg[data-k="v"] { stroke-width: 32px; }
.bs-legend.is-kind { position: absolute; top: 0; left: 0; }
.hl-summary .is-kind [data-i="1"] { --seg-grey: color-mix(in srgb, var(--ui-muted) 57%, var(--ui-secondary)); }
.bs-card:not([data-view="kind"]) .bs-legend.is-kind .bs-row,
.bs-card[data-view="kind"] .bs-legend:not(.is-kind) .bs-row { opacity: 0; transform: translateY(6px); }
.bs-card[data-view="kind"] .bs-legend.is-kind .bs-row { transition: background 400ms ease, opacity 500ms ease, transform 700ms var(--ease-rise); }
.bs-card[data-view="kind"] .bs-legend.is-kind .bs-row:nth-child(1) { transition-delay: 130ms; }
.bs-card[data-view="kind"] .bs-legend.is-kind .bs-row:nth-child(2) { transition-delay: 190ms; }

/* One legend column once two can't hold names like Food & Shopping. */
@container (max-width: 339px) {
  .bs-legend { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

.dt-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- Debt: the payoff curve (the step scenes draw it; styles below) ---- */
.dt-grid { stroke: var(--ui-border); stroke-width: 1; }
.dt-axis { font-size: 10.5px; fill: var(--ui-muted); font-variant-numeric: tabular-nums; }
.dt-line { fill: none; stroke: var(--ui-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--ease-smooth); }
.dt-area { transition: opacity var(--dur-rise) ease 500ms; }
.dt-dot { fill: var(--ui-accent); stroke: #fff; stroke-width: 3; transition: opacity var(--dur-fade) ease 1000ms; }
.dt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 3cqw, 16px); margin-top: clamp(12px, 3.6cqw, 18px); padding-top: clamp(12px, 3.6cqw, 18px); border-top: 1px solid var(--ui-border); }
.dt-stats > div { display: grid; gap: 2px; }
.dt-stats b { transition: opacity var(--dur-fade) ease, transform var(--dur-rise) var(--ease-rise); }

/* ---- Ask Oak: the voice card, its greeting streaming in ---- */
.ov-card { padding: clamp(18px, 5.6cqw, 28px); }
.ov-head { display: flex; align-items: center; gap: clamp(10px, 3cqw, 14px); }
.ov-avatar { display: grid; place-items: center; width: clamp(38px, 10cqw, 48px); aspect-ratio: 1; border-radius: 50%; background: var(--color-accent-subtle); color: var(--green-ink, #04855C); flex-shrink: 0; corner-shape: round; }
.ov-avatar svg { width: 55%; height: 55%; }
.ov-who { display: grid; min-width: 0; }
.ov-who b { font-size: clamp(16px, 4.4cqw, 20px); font-weight: 600; color: var(--ui-text); }
.ov-who em { font-style: normal; font-size: clamp(12px, 3cqw, 14px); color: var(--ui-muted); }
.ov-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: #0F1F1A; color: #fff; font-size: clamp(11px, 2.8cqw, 13px); font-weight: 500; white-space: nowrap; corner-shape: round; }
.ov-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-danger); animation: ov-blink 1.6s ease-in-out infinite; corner-shape: round; }
.ov-quote { margin-top: clamp(16px, 4.8cqw, 24px); font-family: var(--font-display); font-size: clamp(17px, 4.8cqw, 24px); line-height: 1.45; color: var(--ui-text); text-wrap: pretty; }
.ov-w { display: inline-block; transition: opacity 360ms ease, transform 600ms var(--ease-rise); }
.fg.is-scripted .ov-card:not(.is-speaking) .ov-w { opacity: 0; transform: translateY(5px); transition-duration: 420ms, 420ms; }
.ov-card.is-speaking .ov-w { transition-delay: var(--d, 0ms); }
.ov-listen { display: flex; align-items: center; gap: 10px; margin-top: clamp(16px, 4.8cqw, 24px); padding-top: clamp(12px, 3.6cqw, 18px); border-top: 1px solid var(--ui-border); font-size: clamp(13px, 3.2cqw, 15px); color: var(--ui-muted); }
.ov-listen [data-voice-state] { transition: opacity var(--dur-fade) ease, transform var(--dur-rise) var(--ease-rise); }
.ov-bars { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.ov-bars i { display: block; width: 3px; height: 6px; border-radius: calc(2px * var(--sq, 1)); background: var(--ui-accent); animation: ov-bar 1.1s ease-in-out infinite; }
.ov-bars i:nth-child(2) { animation-delay: 0.15s; }
.ov-bars i:nth-child(3) { animation-delay: 0.3s; }
.ov-bars i:nth-child(4) { animation-delay: 0.45s; }
.ov-bars i:nth-child(5) { animation-delay: 0.6s; }
@keyframes ov-bar { 0%, 100% { height: 5px; } 50% { height: 18px; } }
@keyframes ov-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ov-live i, .ov-bars i { animation: none; } }

/* ---- Privacy: where the data goes, one row at a time ---- */
.pv-icon { display: grid; place-items: center; width: clamp(38px, 10cqw, 48px); aspect-ratio: 1; border-radius: calc(clamp(10px, 2.8cqw, 14px) * var(--sq, 1)); background: var(--color-accent-subtle); color: var(--green-ink, #04855C); flex-shrink: 0; }
.pv-icon svg { width: 52%; height: 52%; }
.pv-rows { display: grid; gap: clamp(4px, 1.4cqw, 8px); margin: 0; padding: clamp(10px, 3cqw, 16px) clamp(10px, 3.2cqw, 16px) clamp(12px, 3.6cqw, 18px); list-style: none; }
.pv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(10px, 3cqw, 14px); padding: clamp(10px, 3cqw, 14px) clamp(8px, 2.6cqw, 12px); border-radius: calc(clamp(10px, 2.8cqw, 14px) * var(--sq, 1)); transition: background var(--dur-rise) var(--ease-smooth), opacity 500ms ease, transform var(--dur-rise) var(--ease-rise); }
.pv-row.is-active { background: var(--ui-secondary); }
.pv-dot { width: clamp(9px, 2.4cqw, 11px); aspect-ratio: 1; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent); corner-shape: round; }
.pv-text { display: grid; gap: 2px; min-width: 0; }
.pv-text b { font-size: clamp(15px, 4cqw, 18px); font-weight: 600; color: var(--ui-text); }
.pv-text span { font-size: clamp(12.5px, 3.2cqw, 14.5px); line-height: 1.4; color: var(--ui-muted); }
.pv-row em { font-style: normal; font-size: clamp(10.5px, 2.6cqw, 12px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; padding: 5px 10px; border-radius: 999px; background: var(--pill-bg); color: var(--pill-fg); transition: transform var(--dur-rise) var(--ease-rise); corner-shape: round; }
.pv-row.is-active em { transform: scale(1.06); }
.pv-row.is-never { --dot: var(--color-expense); --pill-bg: #FEF2F2; --pill-fg: #B91C1C; }
.pv-row.is-never b { text-decoration: line-through; text-decoration-color: var(--color-expense); text-decoration-thickness: 2px; }
.pv-row.is-optional { --dot: var(--color-savings); --pill-bg: #EFF6FF; --pill-fg: #1D4ED8; }
.pv-row.is-request { --dot: var(--color-accent); --pill-bg: var(--color-accent-subtle); --pill-fg: #04704E; }
.fg.is-scripted .pv-card:not(.is-shown) .pv-row { opacity: 0; transform: translateY(10px); transition: none; }
.pv-card.is-shown .pv-row:nth-child(1) { transition-delay: 0s, 250ms, 250ms; }
.pv-card.is-shown .pv-row:nth-child(2) { transition-delay: 0s, 400ms, 400ms; }
.pv-card.is-shown .pv-row:nth-child(3) { transition-delay: 0s, 550ms, 550ms; }
@container (max-width: 339px) {
  .pv-row { grid-template-columns: auto minmax(0, 1fr); }
  .pv-row em { grid-column: 2; justify-self: start; }
}

/* Compositions */

/* Dashboard & Debt: chart card; controls float off the header's right edge (where the
   app keeps them), the stat tile sits over the chart's quiet bottom-left corner. */

@media (max-width: 900px) {
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .feature-row.is-reversed .feature-copy,
  .feature-row.is-reversed .feature-visual { order: initial; }
  .feature-visual > img { border-radius: calc(var(--radius-md) * var(--sq, 1)); }
  /* Phones: no overlaps. Floats become a stacked column around the card. */
  .ui-card-body { padding: 10px; }
  .ui-card-header { padding: 10px 14px; }

}

.oak-shot {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}
/* ---------- Ask Oak chat, rebuilt from the app's chat page (dark theme) ----------
   Values mirror renderer/styles.css: #191918 page, serif 15px assistant text,
   black user bubble, #232323 composer. */
.oc {
  --oc-bg: #191918;
  --oc-surface: #232323;
  --oc-border: #2A2A2A;
  --oc-text: #F9FAFB;
  --oc-body: #D5D6D7;
  --oc-muted: #9CA3AF;
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(540px, 56vw, 660px);
  padding-bottom: 40px;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) * var(--sq, 1));
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--oc-bg);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.85);
  color: var(--oc-body);
  text-align: left;
}
.oc-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 48px;
  padding-inline: 18px;
  color: var(--oc-muted);
}
.oc-tb-group { display: flex; align-items: center; gap: 18px; }
.oc-titlebar svg { width: 19px; height: 19px; }
.oc-titlebar .oc-logo { width: 23px; height: 23px; color: var(--color-accent); }
.oc-titlebar .oc-win { width: 17px; height: 17px; }

.oc-convo {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 24px), transparent 100%);
}
.oc-scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 40px 28px;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.oc-msg { display: flex; flex-direction: column; min-width: 0; }
.oc-user { align-items: flex-end; }
.oc-bubble {
  max-width: 85%;
  padding: 12px 18px;
  border-radius: calc(16px * var(--sq, 1)) calc(16px * var(--sq, 1)) calc(14px * var(--sq, 1));
  background: #000;
  color: var(--oc-text);
  font-size: 15px;
  line-height: 1.6;
}
.oc-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0 12px;
  color: var(--oc-muted);
  font-size: 14px;
  font-weight: var(--fw-medium);
}
.oc-steps-chevron { width: 12px; height: 12px; margin-left: 4px; transition: opacity 200ms ease; }
.oc-steps-label { display: inline-block; white-space: nowrap; }
.oc-steps-label.is-swap { animation: oc-label-in 200ms ease both; }
@keyframes oc-label-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* Running steps shimmer like the app's live header, and hide the chevron. */
.oc-steps.is-running .oc-steps-chevron { opacity: 0; }
.oc-steps.is-running .oc-steps-label {
  color: transparent;
  background: linear-gradient(90deg, var(--oc-muted) 0%, var(--oc-muted) 35%, #E5E7EB 50%, var(--oc-muted) 65%, var(--oc-muted) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: oc-shimmer 1.4s linear infinite;
}
@keyframes oc-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.oc-answer {
  padding-right: 20px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  word-spacing: -0.06em;
  color: var(--oc-body);
}
.oc-answer p { margin: 0 0 1em; }
.oc-answer strong { font-weight: 700; color: var(--oc-text); }
.oc-answer h4 {
  margin: 0.9em 0 0.35em;
  font-family: var(--font-display);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--oc-text);
}
.oc-table { margin: 12px 0 18px; overflow: hidden; }
.oc-table table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.oc-table th, .oc-table td { padding: 8px 12px; text-align: left; }
.oc-table th {
  border-bottom: 2px solid var(--oc-border);
  color: var(--oc-text);
  font-weight: 700;
  white-space: nowrap;
}
.oc-table td { border-bottom: 1px solid var(--oc-border); }

.oc-composer {
  flex-shrink: 0;
  width: calc(100% - 48px);
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 20px 14px;
  border: 1px solid var(--oc-border);
  border-radius: calc(16px * var(--sq, 1));
  background: var(--oc-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 200ms ease;
}
.oc.is-typing .oc-composer { border-color: #3A3A3A; }
.oc-input { position: relative; min-height: 1.5em; color: var(--oc-text); }
.oc-placeholder { color: var(--oc-muted); }
.oc.has-draft .oc-placeholder { display: none; }
.oc.is-typing .oc-draft::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: var(--oc-text);
  animation: oc-caret 1s steps(1) infinite;
}
.oc.is-typing .oc-placeholder { display: none; }
@keyframes oc-caret { 50% { opacity: 0; } }
.oc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  color: var(--oc-muted);
}
.oc-actions svg { width: 22px; height: 22px; }
.oc-actions-right { display: flex; align-items: center; gap: 14px; }
.oc-actions-right .oc-wave { width: 19px; height: 19px; }
.oc-send {
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-block: -5px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff; corner-shape: round; }
.oc-send svg { width: 16px; height: 16px; }
.oc.has-draft .oc-wave { display: none; }
.oc.has-draft .oc-send { display: grid; }
.oc-send.is-pressed { animation: oc-press 260ms ease; }
@keyframes oc-press { 40% { transform: scale(0.86); } }

/* Playback: steps stay hidden until the script reveals them. */
.oc.is-playing [data-chat-step]:not(.is-in) { display: none; }
.oc.is-playing [data-chat-step].is-in { animation: oc-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.oc.is-playing [data-chat-step="stream"].is-in { animation: none; }
@keyframes oc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.oc.is-resetting .oc-scroll { opacity: 0; transition: opacity 400ms ease; }
/* Suggestion chips lifted from the real empty state, floated over the shot's lower edge. */
.oak-chips {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: max-content;
  max-width: calc(100% - 2 * var(--space-6));
}
.oak-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-dark-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
  white-space: nowrap; corner-shape: round; }
.oak-chip svg { width: 16px; height: 16px; color: var(--color-accent); }

/* Screen share + voice row */
.share-row { margin-block: clamp(136px, 15vw, 208px); }
.share-row .feature-copy > p { color: var(--color-dark-muted); }
.share-row .check-list li { color: var(--color-dark-muted); }

.oak-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: clamp(64px, 7vw, 88px);
}
.oak-card {
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.oak-card .icon-tile { margin-bottom: var(--space-4); }
.oak-card h3 { color: #fff; font-size: var(--text-lg); }
.oak-card p { margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.6; color: var(--color-dark-muted); }
.oak-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  border: 1px solid rgba(0, 189, 126, 0.22);
  background: rgba(0, 189, 126, 0.06);
  list-style: none;
}
.oak-trust li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); line-height: 1.55; color: var(--color-dark-muted); }
.oak-trust b { color: #fff; font-weight: var(--fw-semibold); }
.oak-trust svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: var(--color-accent); }
@media (max-width: 900px) { .oak-trust { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); } }
.oak-fine {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-dark-subtle);
}
.oak-fine a { color: var(--color-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.oak-fine a:hover { color: #fff; }

@media (max-width: 900px) {
  .oak-grid { grid-template-columns: minmax(0, 1fr); }
  .oak-chips { position: static; transform: none; margin-top: var(--space-5); width: auto; max-width: none; }
  .oak-chip { height: 40px; font-size: var(--text-xs); }
  .oc { height: 560px; padding-bottom: 14px; border-radius: calc(var(--radius-md) * var(--sq, 1)); }
  .oc-scroll { padding: 28px 20px 24px; }
  .oc-composer { width: calc(100% - 24px); padding: 14px 14px 10px; }
  .oc-tb-group { gap: 14px; }
  .oc-tb-group:last-child svg:nth-child(-n + 2) { display: none; }
}
@media (max-width: 600px) {
  .oc { height: 540px; }
  .oc-bubble, .oc-answer, .oc-composer { font-size: 13.5px; }
  .oc-table th, .oc-table td { padding: 7px 6px; }
  .oc-col-min { display: none; }
}

/* ============================================================
   PRIVACY — roots under the data map
   ============================================================ */
.privacy { position: relative; overflow: hidden; }
.privacy > .container { position: relative; z-index: 1; }
.privacy .feature-copy > p { color: var(--color-dark-muted); }
/* The hub: a dark raised card with the accent as an edge and a glow, not a filled block. */
/* Vertical spine from the core down the side of the links. */

/* ============================================================
   WHO IT'S FOR — the reader's own words, then Oakfold's answer
   ============================================================ */
.who-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.who-intro { position: sticky; top: calc(var(--header-height) + 40px); }
.who-intro h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.18; margin-top: var(--space-4); }
.who-intro > p { margin-top: var(--space-5); max-width: 42ch; font-size: var(--text-md); line-height: 1.6; color: var(--color-text-muted); }
.who-list { list-style: none; display: grid; border-top: 1px solid var(--color-border); }
.who-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-4);
  padding: clamp(24px, 2.6vw, 36px) 0 clamp(24px, 2.6vw, 36px) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  transition: padding-left var(--transition-base);
}
/* A thin accent rule draws in on hover, like a margin note being underlined. */
.who-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-5);
  bottom: var(--space-5);
  width: 2px;
  border-radius: calc(2px * var(--sq, 1));
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition-base);
}
.who-row:hover { padding-left: var(--space-4); }
.who-row:hover::before { transform: none; }
.who-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-accent);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.who-body { display: grid; gap: var(--space-3); }
.who-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.who-quote {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  max-width: 30ch;
}
.who-answer { font-size: var(--text-base); line-height: 1.62; color: var(--color-text-muted); max-width: 56ch; }
.who-list .reveal:nth-child(2) { --reveal-stagger: 70ms; }
.who-list .reveal:nth-child(3) { --reveal-stagger: 140ms; }
.who-list .reveal:nth-child(4) { --reveal-stagger: 210ms; }
.who-list .reveal:nth-child(5) { --reveal-stagger: 280ms; }
.not-fit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  border: 1px dashed var(--color-border-strong);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.not-fit svg { width: 20px; height: 20px; color: var(--color-text-subtle); margin-top: 2px; }
.not-fit b { color: var(--color-ink); }
@media (max-width: 900px) {
  .who-layout { grid-template-columns: minmax(0, 1fr); }
  .who-intro { position: static; }
  .who-intro > p { max-width: none; }
  .not-fit { margin-top: var(--space-6); }
  .who-row { grid-template-columns: 44px minmax(0, 1fr); }
  .who-row:hover { padding-left: var(--space-2); }
}

/* ============================================================
   COMPARISON
   ============================================================ */
.cost-chart {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-radius: calc(var(--radius-xl) * var(--sq, 1));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.cost-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}
.cost-chart-head h3 { font-size: var(--text-md); }
.cost-chart-head span { font-size: var(--text-xs); color: var(--color-text-subtle); }
.cost-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 84px;
  gap: var(--space-4);
  align-items: center;
  font-size: var(--text-sm);
}
.cost-name { color: var(--color-text); font-weight: var(--fw-medium); }
.cost-sub { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: var(--fw-regular); }
.cost-bar { height: 14px; border-radius: calc(4px * var(--sq, 1)); background: var(--color-bg-alt); overflow: hidden; }
.cost-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  min-width: 4px;
  border-radius: calc(4px * var(--sq, 1));
  background: var(--color-text-subtle);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible .cost-bar i { transform: none; }
.cost-row:nth-child(3) .cost-bar i { transition-delay: 60ms; }
.cost-row:nth-child(4) .cost-bar i { transition-delay: 120ms; }
.cost-row:nth-child(5) .cost-bar i { transition-delay: 180ms; }
.cost-row:nth-child(6) .cost-bar i { transition-delay: 240ms; }
.cost-row:nth-child(7) .cost-bar i { transition-delay: 300ms; }
.cost-row.is-us .cost-bar i { background: var(--color-accent); }
.cost-row.is-us .cost-name { color: var(--color-accent-deep); font-weight: var(--fw-bold); }
.cost-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--color-ink); }
.cost-row.is-us .cost-value { color: var(--color-accent-deep); }
.cost-foot { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); line-height: 1.5; }

@media (max-width: 560px) {
  .cost-row { grid-template-columns: 96px minmax(0, 1fr) 64px; gap: var(--space-3); }
  .cost-sub { display: none; }
}

.compare-wrap {
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-xl) * var(--sq, 1));
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.compare-scroll { overflow-x: auto; }
.compare { min-width: 680px; font-size: var(--text-sm); }
.compare th, .compare td {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
.compare thead th {
  background: var(--color-bg-alt);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-block: var(--space-4);
}
.compare th:first-child, .compare td:first-child {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  min-width: 200px;
}
.compare .col-us { background: rgba(0, 189, 126, 0.05); border-inline: 1px solid rgba(0, 189, 126, 0.16); }
.compare thead .col-us {
  background: var(--color-ink);
  color: #fff;
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: var(--fw-bold);
}
.compare tbody tr:last-child td { border-bottom: none; }
.compare .yes { color: var(--color-accent-deep); font-weight: var(--fw-semibold); }
.compare .no  { color: var(--color-text-subtle); }
.compare .highlight { font-weight: var(--fw-bold); color: var(--color-ink); }
@media (max-width: 560px) {
  .compare { min-width: 560px; font-size: var(--text-xs); }
  .compare th, .compare td { padding: var(--space-3) var(--space-3); }
  .compare th:first-child, .compare td:first-child { min-width: 128px; position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
  .compare thead th:first-child { background: var(--color-bg-alt); }
}

/* ============================================================
   STEPS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-top: var(--space-8);
  border-top: 2px solid var(--color-accent);
}
.step-num {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold); corner-shape: round; }
.step-time {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: 0;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  white-space: nowrap; corner-shape: round; }
.section-alt .step-time { background: var(--color-surface); }
.step h3 { font-size: var(--text-md); }
.step p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 800px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } }

.buy-bar-price b s { font-weight: var(--fw-medium); color: var(--color-text-subtle); margin-right: 4px; font-size: 0.85em; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); } }
.faq-aside { position: sticky; top: calc(var(--header-height) + 32px); }
.faq-aside h2 { font-size: clamp(28px, 3vw, var(--text-3xl)); }
.faq-aside p { margin-top: var(--space-4); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
@media (max-width: 900px) { .faq-aside { position: static; } }

.faq-list { display: grid; gap: var(--space-3); }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-item[open] { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron { width: 20px; height: 20px; color: var(--color-text-subtle); transition: transform var(--transition-base); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--color-accent); }
.faq-answer { padding: 0 var(--space-6); font-size: var(--text-sm); line-height: 1.68; color: var(--color-text-muted); }
.faq-answer > :last-child { padding-bottom: var(--space-6); }
.faq-answer p + p { margin-top: var(--space-3); }

/* ============================================================
   FINAL CTA — a slow morning: the life the page has been describing.
   ============================================================ */
.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  text-align: center;
  padding-block: clamp(96px, 12vw, 160px);
}
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, var(--color-primary) 0%, rgba(15, 15, 15, 0.15) 30%, rgba(15, 15, 15, 0.25) 75%, var(--color-primary) 100%),
    radial-gradient(ellipse 58% 70% at 50% 40%, rgba(15, 15, 15, 0.7), transparent 72%);
  pointer-events: none;
}
.final-cta > :not(.plx-layer) { position: relative; z-index: 1; }
.final-cta h2 { color: #fff; max-width: 900px; margin-inline: auto; font-size: clamp(30px, 4vw, 52px); text-wrap: balance; }
.final-cta h2 em { font-style: italic; font-weight: 400; color: var(--color-accent); }
.final-cta p { max-width: 600px; margin: var(--space-6) auto 0; line-height: 1.65; color: rgba(255, 255, 255, 0.78); }

.final-cta .hero-cta { margin-top: var(--space-8); }
.final-cta .hero-microcopy { color: rgba(255, 255, 255, 0.5); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #0A0A0A;
  color: var(--color-dark-muted);
  padding-block: var(--space-16) var(--space-8);
  font-size: var(--text-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.footer-brand .brand { margin-bottom: var(--space-4); }
.footer-about { max-width: 320px; line-height: 1.62; color: var(--color-dark-muted); }
.footer-contact { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.footer-contact a { color: var(--color-dark-text); }
.footer-contact a:hover { color: var(--color-accent); }
.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: grid; gap: var(--space-3); }
.footer-col a { color: var(--color-dark-muted); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.55); }
.footer-bottom a:hover { color: #fff; }
.footer-bottom.is-bare { margin-top: 0; padding-top: 0; border-top: none; }
.footer-disclaimer {
  margin-top: var(--space-6);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.3);
  max-width: 780px;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   STICKY MOBILE BUY BAR
   ============================================================ */
.buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(252, 251, 248, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 24px rgba(15, 15, 15, 0.07);
  transform: translateY(110%);
  transition: transform var(--transition-base);
}
.buy-bar.is-visible { transform: none; }
.buy-bar-price { display: grid; line-height: 1.25; }
.buy-bar-price b { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-ink); }
.buy-bar-price span { font-size: var(--text-xs); color: var(--color-text-subtle); }
@media (max-width: 900px) {
  .buy-bar { display: flex; }
  body { padding-bottom: 76px; }
}

/* ============================================================
   LEGAL / SIMPLE CONTENT PAGES
   ============================================================ */
.page-hero {
  padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-alt);
}
.page-hero h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, var(--text-4xl)); }
.page-hero p { margin-top: var(--space-4); color: var(--color-text-muted); max-width: 640px; }
.page-hero .text-center p { margin-inline: auto; }

.prose { max-width: 760px; }
.prose h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  scroll-margin-top: calc(var(--header-height) + 24px);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-md); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose p { color: var(--color-text-muted); }
.prose p + p { margin-top: var(--space-4); }
.prose ul { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding-left: var(--space-5); list-style: disc; }
.prose ul li { color: var(--color-text-muted); }
.prose ul li::marker { color: var(--color-accent); }
.prose table { margin-top: var(--space-5); font-size: var(--text-sm); }
.prose table th, .prose table td { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); text-align: left; }
.prose table th { background: var(--color-bg-alt); font-weight: var(--fw-semibold); }
.prose table td { color: var(--color-text-muted); }

/* ============================================================
   DOWNLOAD / THANK-YOU
   ============================================================ */
.download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 760px;
  margin-inline: auto;
}
@media (max-width: 640px) { .download-grid { grid-template-columns: minmax(0, 1fr); } }
.download-card {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.download-card svg.os-icon { width: 40px; height: 40px; color: var(--color-ink); }
.download-card h3 { font-size: var(--text-md); }
.download-card .text-xs { color: var(--color-text-subtle); }
.license-box {
  max-width: 560px;
  margin: var(--space-10) auto 0;
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  text-align: center;
}

/* ============================================================
   PARTNERS PAGE
   ============================================================ */
.partner-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
  padding-block: clamp(96px, 12vw, 160px) clamp(64px, 8vw, 112px);
}
.partner-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/halftone/oak-dawn.jpg') center 60% / cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
}
.partner-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-primary) 0%, transparent 50%, var(--color-primary) 100%);
  pointer-events: none;
}
.partner-hero > .container { position: relative; z-index: 1; max-width: 820px; text-align: center; }
.partner-hero h1 { color: #fff; font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); }
.partner-hero h1 em { font-style: italic; font-weight: 400; color: var(--color-accent); }
.partner-hero p { margin: var(--space-6) auto 0; max-width: 620px; color: rgba(255, 255, 255, 0.78); font-size: var(--text-md); line-height: 1.6; }
.partner-hero .hero-cta { margin-top: var(--space-8); }

.partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.partner-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.partner-card h3 { font-size: var(--text-md); }
.partner-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.partner-card .fact-value { color: var(--color-ink); font-size: clamp(28px, 3vw, 36px); }
@media (max-width: 860px) { .partner-grid { grid-template-columns: minmax(0, 1fr); } }

.partner-terms {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}
.partner-term {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: var(--text-sm);
}
.partner-term:last-child { border-bottom: none; }
.partner-term b { color: var(--color-ink); font-weight: var(--fw-semibold); }
.partner-term span { color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 560px) { .partner-term { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

/* ============================================================
   PARALLAX FALLBACKS
   ============================================================ */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .plx-layer { top: 0; bottom: 0; transform: none !important; will-change: auto; }

  .oak-chip { height: 38px; padding-inline: var(--space-3); }

  [data-plx] { transform: none !important; }
}

/* ============================================================
   APP ICONS (assets/svgs/app-icons.svg, <use> references)
   ============================================================ */
.oak-chip svg { width: 16px; height: 16px; }
.icon-tile svg { width: 22px; height: 22px; }

.not-fit svg { width: 22px; height: 22px; }
.ui-seg svg { width: 16px; height: 16px; flex-shrink: 0; }
.ui-seg > span { flex-shrink: 0; }

.faq-chevron { width: 20px; height: 20px; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { width: 16px; height: 16px; }

/* ============================================================
   SCENES — a cursor walks through each highlight and the UI responds
   ============================================================ */
/* Sankeys sit at the top and run off the card's bottom edge, as the flows do in the app. */
.ui-seg > span {
  transition: background 220ms ease, color 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease;
}
/* Ripple ring on click, drawn by a sibling the script moves with the cursor. */

/* ============================================================
   MOBILE NAV TOOLS (header)
   ============================================================ */
@media (max-width: 900px) {
  .nav-mobile-tools { display: inline-flex; gap: var(--space-1); align-items: center; }
  .nav-toggle { border: none; background: transparent; }
  .nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
}
@media (min-width: 901px) { .nav-mobile-tools { display: none; } }

/* ============================================================
   RELEASES — /releases timeline and /releases/vX.Y.Z pages
   ============================================================ */
.rel-hero h1 { font-size: clamp(34px, 4.6vw, 56px); text-wrap: balance; }

.rel-timeline { list-style: none; max-width: 980px; margin-inline: auto; display: grid; gap: var(--space-8); }
.rel-entry {
  --rel-gap: clamp(24px, 4vw, 56px);
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--rel-gap);
  align-items: start;
}
/* A vertical rail joins the versions; the newest gets a filled accent dot. */
.rel-entry::before {
  content: '';
  position: absolute;
  left: calc(180px + var(--rel-gap) / 2);
  top: 14px;
  bottom: calc(-1 * var(--space-8));
  width: 1px;
  background: var(--color-border);
}
.rel-entry:last-child::before { bottom: 0; }
.rel-entry::after {
  content: '';
  position: absolute;
  left: calc(180px + var(--rel-gap) / 2 - 5px);
  top: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-border-strong); corner-shape: round; }
.rel-entry.is-latest::after { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-glow); }
.rel-meta { position: sticky; top: calc(var(--header-height) + 32px); display: grid; gap: var(--space-1); text-align: right; }
.rel-version { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.rel-date { font-size: var(--text-sm); color: var(--color-text-subtle); }

.rel-card {
  display: grid;
  gap: var(--space-4);
  padding: clamp(24px, 3vw, 36px);
  border-radius: calc(var(--radius-xl) * var(--sq, 1));
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); color: inherit; }
.rel-card-head { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rel-card h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; }
.rel-card p { font-size: var(--text-base); line-height: 1.65; color: var(--color-text-muted); max-width: 62ch; }
.rel-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted); corner-shape: round; }
.rel-chip.is-beta { background: var(--color-accent-subtle); border-color: transparent; color: var(--color-accent-deep); }
.rel-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.rel-tags li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-text-muted); }
.rel-tags svg { width: 16px; height: 16px; color: var(--color-accent); }
.rel-more { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-accent-hover); }
.rel-more svg { width: 16px; height: 16px; transition: transform var(--transition-base); }
.rel-card:hover .rel-more svg { transform: translateX(3px); }

.rel-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  max-width: 980px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: var(--space-5) var(--space-6);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  border: 1px dashed var(--color-border-strong);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.rel-note > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--color-accent); }
.rel-note b { display: block; color: var(--color-ink); }

@media (max-width: 760px) {
  .rel-entry { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-left: var(--space-6); }
  .rel-entry::before { left: 5px; }
  .rel-entry::after { left: 0; }
  .rel-meta { position: static; text-align: left; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--space-3); }
}

/* Release page */
.rel-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
  padding-block: clamp(72px, 9vw, 128px) clamp(64px, 8vw, 112px);
}
.rel-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/img/halftone/oak-branch.jpg') right -10% top / min(1100px, 110vw) auto no-repeat;
  opacity: 0.4;
  mix-blend-mode: screen;
  mask-image: linear-gradient(to right, transparent 30%, #000 70%), linear-gradient(to bottom, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 70%), linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  pointer-events: none;
}
.rel-page-hero > .container { position: relative; z-index: 1; }
.rel-page-hero h1 { margin-top: var(--space-5); max-width: 760px; color: #fff; font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); line-height: 1.12; text-wrap: balance; }
.rel-page-hero h1 em { font-style: italic; font-weight: 400; color: var(--color-accent); }
.rel-page-hero p { margin-top: var(--space-6); max-width: 600px; font-size: var(--text-md); line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.rel-page-hero .hero-cta { justify-content: flex-start; margin-top: var(--space-8); }
.rel-back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); }
.rel-back:hover { color: #fff; }
.rel-back svg { width: 16px; height: 16px; }
.rel-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-8); }
.rel-page-hero .rel-chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); }
.rel-page-hero .rel-chip.is-beta { background: rgba(0, 189, 126, 0.16); border-color: rgba(0, 189, 126, 0.32); color: var(--color-accent); }
.rel-page-date { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.55); margin-left: var(--space-2); }

.rel-hl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.rel-hl {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) * var(--sq, 1));
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.rel-hl .icon-tile { margin-bottom: var(--space-2); }
.rel-hl h3 { font-size: var(--text-md); }
.rel-hl p { font-size: var(--text-sm); line-height: 1.62; color: var(--color-text-muted); }
.rel-hl-grid .reveal:nth-child(3n + 2) { --reveal-stagger: 70ms; }
.rel-hl-grid .reveal:nth-child(3n + 3) { --reveal-stagger: 140ms; }
@media (max-width: 980px) { .rel-hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rel-hl-grid { grid-template-columns: minmax(0, 1fr); } }

.rel-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
.rel-block h2 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: var(--space-6); }
.rel-reqs { display: grid; border-top: 1px solid var(--color-border); }
.rel-reqs > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.rel-reqs dt { font-weight: var(--fw-semibold); color: var(--color-ink); }
.rel-reqs dd { color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 860px) { .rel-details { grid-template-columns: minmax(0, 1fr); } }

.rel-pager { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.rel-pager-item { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--color-accent-hover); }
.rel-pager-item svg { width: 16px; height: 16px; }
.rel-pager-item.is-empty { font-weight: var(--fw-regular); color: var(--color-text-subtle); }

/* ============================================================
   SCENES — the app's own wallpapers (renderer/assets/backgrounds).
   Pencil on paper; multiply lets the white of the sketch take on the paper colour.
   ============================================================ */
.scene { background-size: cover; background-position: center; mix-blend-mode: multiply; }

/* ============================================================
   PAPER — the homepage. The hero, Ask Oak, Privacy and the closing
   CTA sit on warm paper instead of black, and the header reads in
   ink until it settles onto a paper glass.
   ============================================================ */
:root {
  --paper:      #FCFBF8;
  --ink:        #1D1A16;
  --ink-muted:  #5F5850;
  --ink-line:   rgba(11, 43, 34, 0.12);
  --green-ink:  #04855C;
}

/* ---------- Header ---------- */
.brand .brand-on-paper { display: none; }
.site-header.is-paper .brand-on-dark { display: none; }
.site-header.is-paper .brand-on-paper { display: block; }
.site-header.is-paper .nav-links a { color: rgba(11, 43, 34, 0.78); }
.site-header.is-paper .nav-links a:hover { color: var(--ink); background: rgba(11, 43, 34, 0.06); }
.site-header.is-paper .nav-toggle { color: var(--ink); border-color: var(--ink-line); }
.site-header.is-paper .nav-toggle:hover { background: rgba(11, 43, 34, 0.06); }
.site-header.is-paper::before {
  background: rgba(252, 251, 248, 0.86);
  border-bottom-color: var(--ink-line);
}
.site-header.is-paper.nav-open::before { background: rgba(252, 251, 248, 0.98); }
.site-header.is-paper .btn-light {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: #fff;
}
.site-header.is-paper .btn-light:hover { background: #036C4B; border-color: #036C4B; color: #fff; }

/* ---------- Buttons on paper: green leads, an outlined ink button follows ---------- */

.final-cta .btn-light {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(4, 133, 92, 0.6);
}

.final-cta .btn-light:hover { background: #036C4B; border-color: #036C4B; color: #fff; }

.final-cta .btn-on-dark {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(11, 43, 34, 0.22);
  color: var(--ink);
}

.final-cta .btn-on-dark:hover { background: #fff; border-color: rgba(11, 43, 34, 0.4); color: var(--ink); }

.hero-badge {
  border-color: var(--ink-line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-muted);
}
.hero-microcopy { color: rgba(11, 43, 34, 0.55); }
.hero-microcopy a { color: var(--ink-muted); }
.hero-microcopy a:hover { color: var(--ink); }

.fact-value { color: var(--ink); }
.fact-value small{ color: var(--ink-muted); }

/* ---------- Ask Oak and Privacy: the dark-section palette, re-inked ---------- */
.section-dark {
  --color-dark-bg:      var(--paper);
  --color-dark-surface: var(--color-surface);
  --color-dark-raised:  var(--color-surface);
  --color-dark-border:  var(--ink-line);
  --color-dark-text:    var(--ink);
  --color-dark-muted:   var(--ink-muted);
  --color-dark-subtle:  #87938E;
  background: var(--paper);
}
.section-dark .section-head h2 em,
.section-dark .feature-copy h2 em { color: var(--green-ink); }
.section-dark .check-list li::before { background-color: var(--color-accent-subtle); }

/* The chat, rebuilt from the app's light theme (renderer/design-system.css [data-theme="light"]). */
.oc {
  --oc-bg: #FFFFFF;
  --oc-surface: var(--color-surface);
  --oc-border: #E6E6E0;
  --oc-text: #111827;
  --oc-body: #374151;
  --oc-muted: #6B7280;
  border-color: rgba(11, 43, 34, 0.1);
  box-shadow: 0 40px 90px -36px rgba(11, 43, 34, 0.35), 0 2px 6px rgba(11, 43, 34, 0.06);
}
.oc-bubble { background: rgba(11, 43, 34, 0.07); }
.oc-composer { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.oc.is-typing .oc-composer { border-color: #D5D5CD; }
.oc-steps.is-running .oc-steps-label {
  background-image: linear-gradient(90deg, var(--oc-muted) 0%, var(--oc-muted) 35%, #111827 50%, var(--oc-muted) 65%, var(--oc-muted) 100%);
}
.oak-chip {
  background: var(--color-surface);
  border-color: var(--ink-line);
  color: var(--ink);
  box-shadow: 0 12px 28px -14px rgba(11, 43, 34, 0.35);
}
.oak-card h3, .oak-trust b { color: var(--ink); }
.oak-card { background: rgba(255, 255, 255, 0.72); border-color: var(--ink-line); }
.oak-trust { background: rgba(5, 185, 125, 0.07); border-color: rgba(4, 133, 92, 0.2); }
.oak-trust svg { color: var(--green-ink); }
.oak-fine a:hover { color: var(--ink); }

/* Privacy data map */

/* ---------- Final CTA ---------- */
.final-cta { background: var(--paper); }
.final-cta::after {
  background:
    linear-gradient(to bottom, var(--paper) 0%, rgba(252, 251, 248, 0) 22%, rgba(252, 251, 248, 0) 80%, var(--paper) 100%),
    radial-gradient(ellipse 50% 62% at 50% 44%, rgba(252, 251, 248, 0.94), rgba(252, 251, 248, 0) 78%);
}
.final-cta h2 { color: var(--ink); }
.final-cta h2 em { color: var(--green-ink); }
.final-cta p { color: var(--ink-muted); }
.final-cta .hero-microcopy { color: rgba(11, 43, 34, 0.55); }
@media (max-width: 600px) {
  .final-cta::after {
    background:
      linear-gradient(to bottom, var(--paper) 0%, rgba(252, 251, 248, 0) 16%, rgba(252, 251, 248, 0) 84%, var(--paper) 100%),
      radial-gradient(ellipse 95% 60% at 50% 46%, rgba(252, 251, 248, 0.95) 45%, rgba(252, 251, 248, 0) 90%);
  }
}
/* Light screenshots carry a pure-white canvas; multiply lets it take the cream of the card behind. */

.feature-visual img { mix-blend-mode: multiply; }

/* ============================================================
   ACCOUNT — /account.html (js/account.js). Sign in with the app's
   Supabase account, then a ledger of license, credits and computers.
   ============================================================ */
[hidden] { display: none !important; }

/* Nav: a quiet text link beside the main button. */
.nav-signin {
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius-sm) * var(--sq, 1));
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-signin:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-header.is-paper .nav-signin { color: rgba(11, 43, 34, 0.78); }
.site-header.is-paper .nav-signin:hover { color: var(--ink); background: rgba(11, 43, 34, 0.06); }

/* Sub-pages default to a black stuck header; the account page sits on paper like the homepage. */
.site-header.is-paper.is-stuck:not(#site-header)::before {
  background: rgba(252, 251, 248, 0.92);
  border-bottom: 1px solid var(--ink-line);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.account-page { background: var(--paper); }
/* No site footer on this page: the main area fills the window below the header. */
.account-main { min-height: calc(100svh - var(--header-height, 72px)); padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 88px); }
/* Signed in, the page ends 24px below the content, the same gap the sticky sidebar keeps from
   the bottom of the window, so at the end of the scroll the sidebar isn't pushed up. The
   content's own bottom space lives inside .acct-main instead. */
.account-main:has(> .account-view:not([hidden])) { padding-top: 40px; padding-bottom: 24px; }
/* The account page's header runs straight into the page, with no hairline under it. */
body:has(.account-main) .site-header::before { border-bottom-color: transparent !important; }
/* Tabs of different lengths shouldn't move the page sideways: keep the scrollbar's space
   reserved whether or not the current tab needs one. */
html:has(.account-main) { scrollbar-gutter: stable; }

.account-loading { display: grid; place-items: center; min-height: 40vh; }
.account-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--color-border-strong);
  border-top-color: var(--green-ink);
  animation: account-spin 800ms linear infinite; corner-shape: round; }
@keyframes account-spin { to { transform: rotate(360deg); } }

/* ---------- Signed out: the oak plate beside the form ---------- */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
/* The plate is a gradient field like every other product visual, with the app's Home screen
   sitting in it and running off the right and bottom edges. */
.auth-plate { margin: 0; width: 100%; max-width: 560px; aspect-ratio: 1; }
.auth-window { position: absolute; left: 16%; top: 24%; width: 150%; }
.auth-plate, .auth-plate * { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.auth-card { display: grid; gap: var(--space-5); }
.auth-card .eyebrow { margin-bottom: 0; }
.auth-card h1 { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; color: var(--ink); }
.auth-lede { margin-top: calc(-1 * var(--space-2)); color: var(--ink-muted); line-height: 1.6; }

.auth-google { gap: var(--space-3); }
.auth-google svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

.field { display: grid; gap: var(--space-2); }
.field > span, .field > label > span { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.field input {
  height: 48px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: calc(var(--radius-md) * var(--sq, 1));
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input::placeholder { color: var(--color-text-subtle); }
.field input:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(4, 133, 92, 0.16); }
.field-link,
.auth-switch button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--green-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.field-link { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.auth-switch { text-align: center; font-size: var(--text-sm); color: var(--ink-muted); }
.auth-switch button { font-weight: var(--fw-semibold); }

.auth-message {
  padding: var(--space-3) var(--space-4);
  border-radius: calc(var(--radius-md) * var(--sq, 1));
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--ink);
}
.auth-message.is-error { background: #FBEDEA; border-color: #F0C9C1; color: #9B2C1F; }
.auth-message.is-ok { background: var(--color-accent-subtle); border-color: rgba(4, 133, 92, 0.2); color: #0B5C41; }

/* ---------- Signed in: one ledger, a row per part of the account ---------- */
/* Same box as the header's container, so the sidebar lines up with the logo. */
.account-view { max-width: 1264px; padding-inline: clamp(20px, 4vw, 48px); }
.account-head { padding-bottom: var(--space-8); border-bottom: 1px solid var(--ink); }
.account-head h1 { margin-top: var(--space-2); font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 54px); line-height: 1.1; color: var(--ink); }
.account-head p { margin-top: var(--space-3); color: var(--ink-muted); }
.account-head .auth-message { margin-top: var(--space-5); }

.ledger { margin: 0; }
.ledger-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-8);
  align-items: start;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.ledger-row dt {
  padding-top: 3px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.ledger-row dd { margin: 0; display: grid; gap: var(--space-1); }
.ledger-row dd b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); }
.ledger-row dd > span { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); max-width: 54ch; }
.ledger-row dd a:not(.btn) { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.ledger-row dd b.ledger-figure { font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ledger-wide { grid-column: 2 / -1; }
.ledger-action { align-self: center; }

.device-list { margin-top: var(--space-4); list-style: none; display: grid; gap: var(--space-2); }
.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-md) * var(--sq, 1));
  background: var(--color-surface);
}
.device-row b { display: block; font-size: var(--text-base); color: var(--ink); }
.device-row small { font-size: var(--text-xs); color: var(--color-text-subtle); }
.account-foot { margin-top: var(--space-8); }

/* ---------- Signed in: a sidebar of tabs and one panel at a time ----------
   After ollama.com's account pages: a plain left rail (icon + label), white cards on the
   page colour, big tabular figures, quiet tables. The hash picks the tab (account.js). */
.acct-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
/* Sticks exactly where it starts (header + .account-main's top padding), so it never moves while
   the content scrolls. Tabs, then help links and the person, as tall as they need. */
.acct-side { --acct-side-top: calc(var(--header-height) + 40px); position: sticky; top: var(--acct-side-top); display: flex; flex-direction: column; gap: var(--space-4); }
/* A window too short to hold the rail below the header: let it scroll with the page instead of
   sticking part of the way and then being pushed. */
@media (max-height: 660px) { .acct-side { position: static; height: auto; min-height: 0; } }
.acct-nav, .acct-side-foot { display: grid; gap: 2px; }
/* The help links follow the tabs, set off by a hairline. */
.acct-side-foot { padding-top: var(--space-4); border-top: 1px solid var(--ink-line); }
/* One link style for the whole rail: the tabs and the help links at the bottom. */
.acct-nav a, .acct-side-foot a {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  border-radius: calc(12px * var(--sq, 1)); font-size: 14px; color: var(--ink); text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.acct-nav svg, .acct-side-foot svg { width: 18px; height: 18px; flex-shrink: 0; }
.acct-nav a:hover, .acct-side-foot a:hover { background: rgba(11, 43, 34, 0.05); color: var(--ink); }
.acct-nav a.is-active { background: rgba(11, 43, 34, 0.07); color: var(--ink); font-weight: 500; }
.acct-side-foot a.acct-me { margin-top: var(--space-4); padding: 12px 14px; border-top: 1px solid var(--ink-line); border-radius: 0; color: var(--ink); }
.acct-side-foot a.acct-me:hover { background: transparent; }
.acct-me > span:last-child { display: grid; min-width: 0; }
.acct-me b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-me small { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-legal { margin: var(--space-4) 14px 0; font-size: 12px; color: var(--ink-muted); }
.acct-legal a { display: inline; padding: 0; color: inherit; font-size: inherit; text-decoration: none; }
.acct-legal a:hover { color: var(--ink); background: none; text-decoration: underline; }

.acct-main { min-width: 0; max-width: 860px; padding-bottom: clamp(24px, 4vw, 64px); }
.acct-main > .auth-message { margin-bottom: var(--space-5); }
.acct-tab-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
/* Serif headings set like the site's section headings (weight 500, -0.04em, 1.14), at account sizes. */
.acct-tab-head h1 { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 40px); font-weight: 500; line-height: 1.14; letter-spacing: -0.04em; color: var(--ink); }
.acct-head-actions { display: flex; gap: var(--space-3); }
.acct-head-actions .btn { height: 44px; }
.acct-h2 { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.14; letter-spacing: -0.04em; color: var(--ink); }

.acct-card {
  display: grid; gap: 6px; margin: 0 0 var(--space-4); padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--color-border); border-radius: calc(18px * var(--sq, 1)); background: #fff;
}
.acct-card > b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); }
.acct-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-muted); }
.acct-sub { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); max-width: 62ch; }
.acct-sub a, a.acct-link { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.acct-figure { font-size: clamp(28px, 3vw, 36px); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.acct-pill { padding: 2px 9px; border-radius: 999px; corner-shape: round; background: rgba(4, 133, 92, 0.1); font-size: 12px; font-weight: 500; color: var(--green-ink); }
.acct-pill.is-free { background: rgba(11, 43, 34, 0.06); color: var(--ink-muted); }
.acct-empty { margin: var(--space-6) 0; text-align: center; font-size: var(--text-sm); color: var(--ink-muted); }
.acct-footnote { margin-top: var(--space-4); font-size: 13px; line-height: 1.6; color: var(--ink-muted); }

.acct-summary { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); }
.acct-summary-main, .acct-summary-side { display: grid; gap: 6px; align-content: start; }
.acct-summary-side { padding-left: var(--space-6); border-left: 1px solid var(--ink-line); min-width: 190px; }
.acct-summary .usage-meter-track { margin-top: var(--space-2); max-width: 420px; }

.acct-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.acct-quick-card {
  display: grid; gap: 6px; align-content: start; padding: 18px 20px; min-height: 120px;
  border: 1px solid var(--color-border); border-radius: calc(16px * var(--sq, 1)); background: #fff;
  color: var(--ink); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.acct-quick-card:hover { border-color: var(--color-border-strong); box-shadow: 0 8px 24px -16px rgba(11, 43, 34, 0.3); }
.acct-quick-card b { font-size: 16px; font-weight: 500; }
.acct-quick-card span { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

.acct-row-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.acct-row-card > div { display: grid; gap: 4px; }
.acct-row-card b { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--ink); }
.acct-row-card .btn, .acct-current-actions .btn { height: 42px; }

/* Profile > Your details: two columns of the site's form fields, Save at the bottom. */
.acct-details { gap: 10px; }
.acct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin-top: var(--space-3); }
.acct-fields .field.is-wide { grid-column: 1 / -1; }
.acct-fields .field input { height: 44px; width: 100%; min-width: 0; }
.acct-fields-group { margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border: 0; border-top: 1px solid var(--ink-line); }
.acct-fields-group legend { padding: 0; font-size: 14px; color: var(--ink-muted); }
.acct-fields-group legend small { margin-left: 6px; font-size: 12px; color: var(--color-text-subtle); }
.acct-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.acct-form-actions .btn { height: 44px; }
.acct-form-actions .btn:disabled { opacity: 0.5; cursor: default; }
.acct-password { gap: 6px; }
.acct-pw-alt { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--ink-line); max-width: none; }
.acct-link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-link-btn:disabled { color: var(--ink-muted); text-decoration: none; cursor: default; }
@media (max-width: 640px) { .acct-fields { grid-template-columns: minmax(0, 1fr); } }

/* Date field, as in the app: type a date in words ("May 14 1990", "5/14/1990") or pick one from the
   calendar. The calendar opens on days; its title steps out to months, then years. (account.js) */
.date-field { position: relative; display: flex; align-items: center; width: 100%; }
.date-field input { padding-right: 44px; }
.date-field input.is-error { border-color: #C0392B; }
.date-field-btn {
  position: absolute; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--ink-muted); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.date-field-btn svg { width: 18px; height: 18px; }
.date-field-btn:hover, .date-field-btn:focus-visible, .date-field-btn[aria-expanded="true"] { background: rgba(11, 43, 34, 0.06); color: var(--ink); outline: none; }
.cal-popover {
  position: fixed; z-index: 200; width: 300px; padding: 16px;
  border: 1px solid var(--color-border); border-radius: 16px 6px 16px 16px; background: #fff;
  box-shadow: 0 24px 48px -16px rgba(11, 43, 34, 0.22), 0 4px 12px rgba(11, 43, 34, 0.06);
  animation: cal-in 140ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: top right;
}
.cal-popover.is-above { border-radius: 16px 16px 6px 16px; transform-origin: bottom right; }
@keyframes cal-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cal-popover { animation: none; } }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-nav {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; flex-shrink: 0;
  border: 1px solid var(--color-border-strong); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer;
}
.cal-nav svg { width: 16px; height: 16px; }
.cal-nav:hover { border-color: var(--ink-muted); }
.cal-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(4, 133, 92, 0.18); }
.cal-title { padding: 4px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.cal-title:hover, .cal-title:focus-visible { background: rgba(11, 43, 34, 0.06); outline: none; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid.is-months, .cal-grid.is-years { grid-template-columns: repeat(3, 1fr); }
.cal-day { height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.cal-grid.is-months .cal-day, .cal-grid.is-years .cal-day { height: 44px; }
.cal-day:hover, .cal-day:focus-visible { background: rgba(11, 43, 34, 0.06); outline: none; }
.cal-day.is-outside, .cal-day:disabled { color: var(--ink-muted); opacity: 0.5; }
.cal-day:disabled { cursor: default; pointer-events: none; }
.cal-day.is-today { color: var(--green-ink); font-weight: 600; }
.cal-day.is-selected { background: rgba(4, 133, 92, 0.12); color: var(--green-ink); font-weight: 600; }
.acct-facts { gap: 0; padding-block: 6px; }
.acct-facts > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--ink-line); }
.acct-facts > div:last-child { border-bottom: 0; }
.acct-facts dt { font-size: 14px; color: var(--ink-muted); }
.acct-facts dd { margin: 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }

/* Usage: range, headline figures, the chart, then the same numbers as tables. */
.acct-range { display: inline-flex; padding: 3px; border: 1px solid var(--color-border); border-radius: 999px; corner-shape: round; background: #fff; }
.acct-range button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; corner-shape: round; background: transparent; font: inherit; font-size: 14px; color: var(--ink-muted); cursor: pointer; }
.acct-range button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.acct-stats > div { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--color-border); border-radius: calc(16px * var(--sq, 1)); background: #fff; }
.acct-stats .acct-figure { font-size: clamp(24px, 2.4vw, 30px); }

/* Categorical slots in fixed order (dataviz reference palette, validated on white). */
.acct-main, .use-chart-card {
  --f-chat: #2a78d6; --f-voice: #eb6834; --f-search: #1baf7a; --f-read: #eda100; --f-data: #e87ba4; --f-other: #8a8f8c;
  position: relative; gap: var(--space-4);
}
.use-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink); }
.use-legend span { display: inline-flex; align-items: center; gap: 7px; }
.use-legend i, .use-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.use-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.use-axis { position: relative; height: 220px; min-width: 40px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.use-axis span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.use-chart { position: relative; height: 220px; display: flex; align-items: flex-end; gap: var(--use-gap, 4px); border-bottom: 1px solid var(--color-border-strong); }
.use-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ink-line); pointer-events: none; }
.use-col { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; border: 0; background: transparent; cursor: default; }
.use-col:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; border-radius: 4px; }
.use-bar { display: flex; flex-direction: column-reverse; gap: 2px; width: 100%; max-width: 28px; margin-inline: auto; border-radius: 4px 4px 0 0; overflow: hidden; }
.use-bar i { display: block; width: 100%; background: var(--c); }
.use-col:hover .use-bar, .use-col:focus-visible .use-bar { filter: brightness(0.92); }
.use-days { position: relative; height: 16px; margin-left: 50px; font-size: 12px; color: var(--ink-muted); }
.use-days span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.use-days span:last-child { transform: translateX(-85%); }
.use-tip {
  position: absolute; z-index: 5; min-width: 190px; padding: 10px 12px; border-radius: 10px; background: var(--ink);
  color: #fff; font-size: 13px; line-height: 1.5; pointer-events: none; box-shadow: 0 10px 24px -10px rgba(11, 43, 34, 0.45);
}
.use-tip b { display: block; margin-bottom: 4px; font-weight: 500; color: #fff; }
.use-tip div { display: flex; align-items: center; gap: 8px; }
.use-tip div span:last-child { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.use-tip .use-tip-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.2); }

.acct-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: calc(16px * var(--sq, 1)); background: #fff; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.acct-table th { padding: 12px 18px; border-bottom: 1px solid var(--color-border); text-align: left; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }
.acct-table td { padding: 13px 18px; border-bottom: 1px solid var(--ink-line); color: var(--ink); white-space: nowrap; }
.acct-table tr:last-child td { border-bottom: 0; }
.acct-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.acct-table td.muted { color: var(--ink-muted); }
.acct-table td.wrap { white-space: normal; }
.acct-table .use-feature { display: inline-flex; align-items: center; gap: 8px; }
.acct-table a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acct-table .acct-empty-row td { padding: 28px 18px; text-align: center; color: var(--ink-muted); white-space: normal; }
.acct-status { display: inline-flex; align-items: center; gap: 6px; }
.acct-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); }
.acct-status.is-paid::before { background: var(--green-ink); }
.acct-status.is-open::before { background: var(--color-warning); }

/* Billing: the current plan card, then this period's bill so far. */
.acct-current { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); }
.acct-current-text { display: grid; gap: 4px; }
.acct-current-text b { font-size: 18px; font-weight: 600; color: var(--ink); }
.acct-current-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.acct-next-lines { display: grid; margin-top: 6px; }
.acct-next-lines > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 8px 0; border-bottom: 1px solid var(--ink-line); font-size: 15px; color: var(--ink); }
.acct-next-lines > div span:last-child { font-variant-numeric: tabular-nums; }
.acct-next-lines > div.is-total { border-bottom: 0; font-weight: 600; }

@media (max-width: 900px) {
  .acct-shell { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .acct-side { position: static; height: auto; min-height: 0; }
  .acct-nav { display: flex; gap: 4px; margin-inline: calc(-1 * var(--space-4)); padding: 0 var(--space-4) 4px; overflow-x: auto; scrollbar-width: none; }
  .acct-nav a { flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px; corner-shape: round; background: #fff; font-size: 14px; }
  .acct-nav a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
  .acct-nav svg { width: 16px; height: 16px; }
  .acct-side-foot { display: none; }
  .acct-summary, .acct-current, .acct-row-card { grid-template-columns: minmax(0, 1fr); }
  .acct-summary-side { padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid var(--ink-line); }
  .acct-quick, .acct-stats { grid-template-columns: minmax(0, 1fr); }
  .acct-stats > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .acct-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .use-axis, .use-chart { height: 180px; }
}

/* Extra usage: a slider and a dollar box that move together, the same control as the app's
   Plans & Credits. The slider fill and the meter width are set from account.js through the
   CSSOM (--range-pct, style.width), which the CSP allows; inline style="" would not be. */
/* Profile: the picture (the same one the app and the nav's account menu show), with change and remove. */
.profile-who { display: flex; align-items: flex-start; gap: var(--space-5); }
.profile-avatar {
  display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; overflow: hidden;
  border-radius: 50%; corner-shape: round; background: var(--green-ink); color: #fff;
  font-family: var(--font-display); font-size: 30px; line-height: 1;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-text { display: grid; gap: var(--space-1); min-width: 0; }
.profile-text > b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ink); }
.profile-text > span { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); max-width: 54ch; }
.profile-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.profile-actions .btn { height: 40px; }
.profile-remove { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.profile-remove:hover { color: var(--ink); }
.profile-actions [disabled] { opacity: 0.6; cursor: default; }

.usage-limit { margin-top: var(--space-4); max-width: 560px; display: grid; gap: var(--space-2); }
.usage-limit-label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.usage-limit-row { display: flex; align-items: center; gap: var(--space-4); }
.usage-limit-row input[type="range"] {
  --range-pct: 0;
  flex: 1;
  min-width: 0;
  height: 24px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.usage-limit-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right,
    var(--green-ink) calc(11px + (100% - 22px) * var(--range-pct)),
    var(--color-border-strong) calc(11px + (100% - 22px) * var(--range-pct)));
}
.usage-limit-row input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.usage-limit-row input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--radius-pill); background: var(--green-ink); }
.usage-limit-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--green-ink);
  border: 3px solid var(--color-surface);
  box-shadow: 0 1px 4px rgba(11, 43, 34, 0.25);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.usage-limit-row input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-ink);
  border: 3px solid var(--color-surface);
  box-shadow: 0 1px 4px rgba(11, 43, 34, 0.25);
}
.usage-limit-row input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
.usage-limit-row input[type="range"]:focus-visible { outline: none; }
.usage-limit-row input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(4, 133, 92, 0.22); }
.usage-limit-row input[type="range"]:disabled { opacity: 0.45; cursor: default; }
.usage-limit-amount { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.usage-limit-amount > span {
  position: absolute;
  left: 14px;
  font-size: var(--text-base);
  color: var(--ink-muted);
  pointer-events: none;
}
.usage-limit-amount input {
  width: 96px;
  height: 44px;
  padding: 0 14px 0 28px;
  border: 1px solid var(--color-border-strong);
  border-radius: calc(var(--radius-md) * var(--sq, 1));
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.usage-limit-amount input:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(4, 133, 92, 0.16); }
.usage-limit-amount input:disabled { opacity: 0.6; }
.usage-limit-hint { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); }
.usage-meter { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.usage-meter-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); }
.usage-meter-head b { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; }
.usage-meter-head small { font-size: var(--text-sm); color: var(--ink-muted); }
.usage-meter-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.usage-meter-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green-ink); transition: width var(--transition-base, 240ms) ease; }
.usage-meter-track i.is-warning { background: var(--color-warning); }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-plate { order: 2; max-width: 420px; }
  .ledger-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .ledger-wide { grid-column: auto; }
  .ledger-action { align-self: start; }
}
/* Phone menu: Sign in reads as one more menu item, above the main button. */
@media (max-width: 900px) {
  .site-header.nav-open .nav-signin { padding: var(--space-3) var(--space-4); font-size: var(--text-base); border-radius: calc(var(--radius-md) * var(--sq, 1)); }
}
/* The deeper green carries white text at a readable contrast, as on the homepage. */
.account-page .btn-accent { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.account-page .btn-accent:hover { background: #036C4B; border-color: #036C4B; color: #fff; }

/* ============================================================
   GRADIENT FIELDS
   Every product visual sits in a soft colour field: a pale base, blurred colour blobs
   and fine grain (the grain also stops the blobs banding). Palettes come from the app's
   scenes: meadow, apricot, lake, dawn, plus deep green "grove" for the privacy moments.
   Anything translucent inside a field takes its colour, so screenshots go in .gf-window.
   ============================================================ */
.gf {
  --gf-pad: clamp(14px, 3vw, 36px);
  --gf-radius: clamp(24px, 2.8vw, 40px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: calc(var(--gf-radius) * var(--sq, 1));
  background-color: var(--gf-base);
  /* A horizon, after calendly.com: pale sky, a band that glows where it meets the ground, a deep base.
     Every field is Oakfold green, lit by accents that sit beside green (lime, teal, mint), never opposite.
     This is the resting gradient: what shows without JS or under reduced motion, and under the moving points. */
  background-image:
    radial-gradient(58% 24% at 26% 52%, var(--gf-1), transparent 72%),
    radial-gradient(52% 22% at 80% 56%, var(--gf-2), transparent 72%),
    linear-gradient(180deg, var(--gf-sky) 0%, var(--gf-mid) 28%, var(--gf-hz) 50%, var(--gf-3) 63%, var(--gf-low) 80%, var(--gf-deep) 100%);
}
/* Fine grain over the colour, under the content. Stays still while the points move beneath it. */
.gf::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.55;
}
/* Light, after the hero floor: the page's own colour at the top (a shade off it, so the tile still has an
   edge), a pale glow along the horizon, settling into the floor's sage (accent-hover greyed into #CBD2CF)
   at the bottom. Each field leads with its own dusty tint; nothing goes deep or saturated. */
/* The companions: colours beside green on the wheel, never across it. */
.gf { --c-azure: #4FB3E8; --c-aqua: #2FD3C4; --c-spring: #5FDDA0; --c-teal: #0E8C86; }
.gf-meadow, .gf-apricot, .gf-lake, .gf-dawn, .gf-grove {
  --c-azure: #A3BFCB; --c-aqua: #9CC6BE; --c-spring: #AECFB9; --c-teal: #7FA39D; --c-sage: #A9BDB2;
  --gf-floor: color-mix(in oklab, var(--color-accent-hover) 20%, #CBD2CF);
  --gf-sky: color-mix(in oklab, var(--color-bg) 84%, var(--gf-tint));
  --gf-mid: color-mix(in oklab, var(--color-bg) 70%, var(--gf-floor));
  --gf-hz: color-mix(in oklab, #fff 62%, var(--gf-tint));
  --gf-3: color-mix(in oklab, var(--color-bg) 42%, var(--gf-floor));
  --gf-low: color-mix(in oklab, var(--color-bg) 22%, var(--gf-floor));
  --gf-deep: color-mix(in oklab, var(--gf-floor) 92%, var(--color-accent-hover));
  --gf-base: color-mix(in oklab, var(--color-bg) 55%, var(--gf-floor));
  --gf-1: color-mix(in oklab, var(--gf-c1) 34%, #fff); --gf-2: color-mix(in oklab, var(--gf-c2) 34%, #fff); --gf-4: color-mix(in oklab, var(--gf-c4) 30%, #fff); }
.gf-meadow  { --gf-tint: var(--c-azure);  --gf-c1: var(--c-aqua);   --gf-c2: var(--c-spring); --gf-c4: var(--c-azure); }
.gf-apricot { --gf-tint: var(--c-spring); --gf-c1: var(--c-aqua);   --gf-c2: var(--c-azure);  --gf-c4: var(--c-spring); }
.gf-lake    { --gf-tint: var(--c-azure);  --gf-c1: var(--c-teal);   --gf-c2: var(--c-aqua);   --gf-c4: var(--c-azure); }
.gf-dawn    { --gf-tint: var(--c-aqua);   --gf-c1: var(--c-spring); --gf-c2: var(--c-azure);  --gf-c4: var(--c-aqua); }
.gf-grove   { --gf-tint: var(--c-sage);   --gf-c1: var(--c-azure);  --gf-c2: var(--c-spring); --gf-c4: var(--c-teal); }

/* The moving gradient points, added by main.js. Transform only, so the cards and screenshots
   above them never repaint. They run only while the tile is on screen (.is-live). */
.gf-mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* The blended layers (grain, halftone, moving points) stop 1px inside the squircle. Clipped at the edge itself,
   their anti-aliased pixels blend against nothing and draw a grey seam round the corners on the light fields. */
.gf::after, .fg::before, .gf-mesh { inset: 1px; border-radius: calc(var(--gf-radius) * var(--sq, 1) - 1px); }
.gf-mesh i {
  position: absolute;
  width: 95%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--gf-c) 0%, color-mix(in srgb, var(--gf-c) 62%, transparent) 42%, transparent 100%);
  animation: 26s ease-in-out infinite alternate paused;
  animation-delay: calc(var(--gf-seed, 0) * -5.3s); corner-shape: round; }
.gf-mesh i:nth-child(1) { --gf-c: var(--gf-1); left: -18%; top: 28%; aspect-ratio: 2 / 1; animation-name: gf-drift-a; animation-duration: 23s; }
.gf-mesh i:nth-child(2) { --gf-c: var(--gf-2); right: -22%; top: 36%; aspect-ratio: 2 / 1; animation-name: gf-drift-b; animation-duration: 29s; }
.gf-mesh i:nth-child(3) { --gf-c: var(--gf-3); left: 6%; top: 46%; aspect-ratio: 2.4 / 1; animation-name: gf-drift-c; animation-duration: 34s; }
.gf-mesh i:nth-child(4) { --gf-c: var(--gf-4); left: 4%; top: -42%; animation-name: gf-drift-d; animation-duration: 27s; }
.gf.is-live .gf-mesh i { animation-play-state: running; will-change: transform; }
/* Along the horizon, not across it: the glows slide sideways and breathe, so the band stays a band. */
@keyframes gf-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(38%, 6%) scale(1.18); } }
@keyframes gf-drift-b { from { transform: translate(0, 0) scale(1.08); } to { transform: translate(-40%, -5%) scale(0.88); } }
@keyframes gf-drift-c { from { transform: translate(0, 0) scale(0.94); } to { transform: translate(20%, 4%) scale(1.12); } }
@keyframes gf-drift-d { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(30%, 8%) scale(0.92); } }

/* A screenshot's own opaque pane, so its multiply blend lands on cream rather than on the field. */
.gf-window {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: calc(12px * var(--sq, 1));
  background: var(--color-surface);
  border: 1px solid rgba(11, 43, 34, 0.1);
  box-shadow: 0 24px 50px -22px rgba(40, 50, 30, 0.34);
}
.gf-window img { display: block; width: 100%; height: auto; }

/* Feature rows: the field needs the width, since its padding comes out of the visual. */
.feature-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 4.5vw, 72px); }
.feature-row.is-reversed { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.feature-visual.gf { padding: var(--gf-pad); will-change: auto; }
.feature-visual .ui-card { box-shadow: 0 20px 44px -24px rgba(40, 50, 30, 0.32); }

/* A block's content sits in .gf-fit. Stacked, the wrapper steps out of the way (each block keeps its own
   height); side by side, every block is the same square and the wrapper is centred in it. main.js zooms
   a wrapper down evenly if its content would run taller than the square. */
.gf-fit { display: contents; }
@media (min-width: 901px) {
  .feature-row .feature-visual.gf { aspect-ratio: 1; min-width: 0; min-height: 0; padding: var(--gf-pad); display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
  .gf-fit { display: block; position: relative; width: 100%; }

  /* The card at about two thirds of the square, with the field showing well around it. */
  .fg .gf-fit { display: flex; justify-content: center; }
  .fg .fg-stage { width: 76%; }
}

/* Screen share: the same kind of frame, with the voice card inside it. */

/* Privacy map: the cards sit straight on the deep field, with the connectors drawn in pale ink. */

@media (max-width: 900px) {
  .feature-row, .feature-row.is-reversed { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

/* ============================================================
   SITE SYSTEM: inset panels, bold tight sans headings, near-white page
   Page #FCFBF8, pale panels #F5F4EF, ink #0B2B22. Sections sit in large rounded panels inset from
   the viewport; product UI floats on moving gradient fields with a soft white ring around it.
   ============================================================ */
:root {
  --paper: #FCFBF8;
  --panel: #F5F4EF;
  --ink: #0B2B22;
  --ink-muted: #5C6B66;
  --ink-line: rgba(11, 43, 34, 0.12);
  --panel-inset: clamp(8px, 1.7vw, 24px);
  --panel-radius: clamp(28px, 3.4vw, 48px);
  --ring: 0 0 0 5px rgba(255, 255, 255, 0.3), 0 26px 54px -24px rgba(0, 35, 28, 0.45);
}
body { letter-spacing: 0; line-height: 1.5; background: var(--paper); }
a { color: var(--green-ink); }

/* ---------- Type: every heading is the serif, at medium weight. Body and UI stay sans. ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
h1 { font-size: clamp(42px, 5.2vw, 72px); letter-spacing: -0.04em; line-height: 1.14; }
h2 { font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -0.04em; line-height: 1.14; text-wrap: balance; }
h3 { font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -0.02em; line-height: 1.3; }
h4 { font-size: 18px; letter-spacing: -0.015em; }
.section-head h2 em, .feature-copy h2 em, .final-cta h2 em { font-style: normal; font-weight: inherit; color: inherit; }
.feature-copy h2 { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.045em; }
.faq-aside h2, .who-intro h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.14; }
.page-hero h1 { font-size: clamp(36px, 4.4vw, 60px); }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); margin-bottom: var(--space-4); }
.eyebrow.is-tag { display: flex; gap: 8px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.eyebrow.is-tag i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: calc(8px * var(--sq, 1)); background: var(--color-accent); color: #fff; }
.eyebrow.is-tag svg { width: 15px; height: 15px; }

.section { padding-block: clamp(72px, 9vw, 128px); }
.section-head { max-width: 800px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head p { font-size: 18px; line-height: 1.45; color: var(--ink-muted); max-width: 640px; margin-inline: auto; }
.section-head .btn { margin-top: var(--space-8); }

/* Pale sections are inset rounded panels rather than full-bleed bands. */
.section-alt { margin-inline: var(--panel-inset); border-radius: calc(var(--panel-radius) * var(--sq, 1)); background: var(--panel); }
.section-dark { background: transparent; }

/* ---------- Buttons ---------- */
.btn { height: 48px; padding-inline: 20px; border-radius: calc(16px * var(--sq, 1)); border-width: 1px; font-size: 15px; font-weight: 500; letter-spacing: 0; }
.btn-lg { height: 52px; padding-inline: 24px; border-radius: calc(18px * var(--sq, 1)); font-size: 16px; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-accent{ background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.btn-accent:hover{ background: #036C4B; border-color: #036C4B; color: #fff; }
.btn-outline { background: transparent; border-color: var(--color-accent-hover); color: var(--color-accent-hover); }
.btn-outline:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.btn-white { background: #fff; border-color: #fff; color: var(--ink); }
.btn-white:hover { background: #F2F7F4; border-color: #F2F7F4; color: var(--ink); }

/* ---------- Header: solid, flat, nav beside the logo ---------- */
.site-header, .site-header.is-stuck { --header-pad: 0px; background: var(--paper); }
.site-header::before, .site-header.is-paper::before, .site-header.is-paper.nav-open::before,
.site-header.is-stuck:not(#site-header)::before, .site-header.is-paper.is-stuck:not(#site-header)::before {
  background: var(--paper); border-bottom: 1px solid var(--ink-line); backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1;
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); min-height: var(--header-height); }
.site-header .container { max-width: 1264px; padding-inline: clamp(20px, 4vw, 48px); } /* the hero's text column (.lh-head), so the logo lines up with the headline */
.brand img { height: 36px; }
.site-header .brand img { height: 46px; }
.nav-links { justify-self: auto; margin: 0; gap: 2px; }
.nav-links a, .site-header.is-paper .nav-links a { font-size: 15px; font-weight: 400; color: var(--ink); }
.nav-actions { margin-left: auto; gap: 12px; }
.nav-actions .btn { height: 48px; }
.nav-actions .btn-accent, .nav-actions .btn-outline { font-weight: 400; }
.site-header.is-paper .nav-actions .btn-outline:hover { color: #fff; }
.nav-signin, .site-header.is-paper .nav-signin { color: var(--ink); }
@media (max-width: 900px) {
  .nav { justify-content: space-between; }
  .site-header.nav-open .nav-links, .site-header.nav-open .nav-actions { width: 100%; }
  .site-header.nav-open .nav { flex-wrap: wrap; }
  .site-header.nav-open .nav-actions { margin-left: 0; }
}

/* ---------- Header, after linear.app's ----------
   A 72px bar on a translucent, blurred page colour with a hairline underneath. The logo sits on the content
   edge; the links sit together on the right as small pills, then a hairline divider, a plain Sign in
   link and one small dark pill for the call to action. */
:root { --header-height: 72px; }
.site-header::before, .site-header.is-paper::before, .site-header.is-paper.nav-open::before,
.site-header.is-stuck:not(#site-header)::before, .site-header.is-paper.is-stuck:not(#site-header)::before {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
/* The open phone menu covers the page, so it's solid paper. (An older rule left it near-black
   on every page but the homepage, under dark ink links.) */
.site-header.nav-open::before, .site-header.is-paper.nav-open::before { background: var(--paper); }
.site-header, .site-header.is-stuck { background: transparent; }
.nav { gap: 0; min-height: var(--header-height); }
.site-header .brand img { height: 40px; }
.nav-links { margin-left: auto; gap: 0; }
.nav-links a, .site-header.is-paper .nav-links a, .site-header:not(.is-paper) .nav-links a,
.nav-signin, .site-header.is-paper .nav-signin, .nav-menu-btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: calc(16px * var(--sq, 1));
  font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink); background: transparent;
  transition: color var(--transition-fast), background var(--transition-fast); }
.nav-links a:hover, .site-header.is-paper .nav-links a:hover, .site-header:not(.is-paper) .nav-links a:hover,
.nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"],
.nav-signin:hover, .site-header.is-paper .nav-signin:hover, .site-header:not(.is-paper) .nav-signin:hover { color: var(--ink); background: rgba(11, 43, 34, 0.05); }
.nav-actions { margin-left: 0; gap: 8px; }
/* Pinned, as Linear's is: it no longer slides away on scroll. */
.site-header.is-hidden { transform: none; }
.nav-actions::before { content: ''; width: 1px; height: 16px; margin: 0 8px 0 12px; background: var(--ink-line); }
.nav-actions .btn, .site-header .nav-actions .btn-light, .site-header .nav-actions .btn-accent, .site-header .nav-actions .btn-on-dark {
  height: 32px; padding: 0 12px; border-radius: calc(16px * var(--sq, 1)); border: 1px solid var(--color-accent-hover);
  background: var(--color-accent-hover); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0; box-shadow: none; }
.nav-actions .btn:hover, .site-header .nav-actions .btn-light:hover, .site-header .nav-actions .btn-accent:hover, .site-header .nav-actions .btn-on-dark:hover { background: #036C4B; border-color: #036C4B; color: #fff; }
@media (max-width: 900px) {
  .nav-actions::before { display: none; }
  .site-header.nav-open .nav-links a, .site-header.nav-open .nav-signin { height: auto; padding: var(--space-3) var(--space-4); font-size: var(--text-base); color: var(--ink); border-radius: calc(var(--radius-md) * var(--sq, 1)); }
  .site-header.nav-open .nav-actions .btn { height: 44px; font-size: var(--text-base); }
}

/* Dropdowns, after linear.app's: a panel under the bar, right-aligned with the buttons. A pale frame holds a
   white card of three columns split by hairlines (titled links with a line each, then a column of plain
   links), with an optional strip beneath. Opens on hover or click (main.js); fades and drops in. */
.nav { position: relative; }
.nav-menu-btn { border: 0; font-family: inherit; line-height: 1; cursor: pointer; animation: intro-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both; }
@media (prefers-reduced-motion: reduce) { .nav-menu-btn { animation: none; } }
.nav-panel {
  position: absolute; z-index: 60; top: calc(100% - 4px); right: 0; width: min(760px, 100%);
  padding: 8px; border: 1px solid var(--ink-line); border-radius: calc(16px * var(--sq, 1));
  background: var(--paper); box-shadow: 0 24px 48px -16px rgba(11, 43, 34, 0.18), 0 4px 12px rgba(11, 43, 34, 0.05);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fade) var(--ease-smooth), transform var(--dur-fade) var(--ease-smooth), visibility 0s var(--dur-fade);
}
.nav-menu.is-open .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-header.is-switching .nav-panel { transition: none; }
.nav-panel-card { display: grid; grid-template-columns: 1fr 1fr 0.9fr; padding: 10px 0; border: 1px solid var(--color-border); border-radius: calc(12px * var(--sq, 1)); background: #fff; }
.nav-panel-col { display: grid; align-content: start; gap: 4px; padding: 4px 12px; }
.nav-panel-col + .nav-panel-col { border-left: 1px solid var(--ink-line); }
.site-header .nav-links .nav-panel a {
  display: grid; gap: 4px; height: auto; padding: 10px 12px; border-radius: calc(10px * var(--sq, 1));
  font-size: 14px; line-height: 1.45; color: var(--ink); background: transparent; animation: none; text-decoration: none;
}
.site-header .nav-links .nav-panel a:hover { background: rgba(11, 43, 34, 0.04); color: var(--ink); }
.nav-panel-item b { font-weight: 500; }
.nav-panel-item span { color: var(--ink-muted); }
.site-header .nav-links .nav-panel .is-plain a { padding-block: 8px; }
.site-header .nav-links .nav-panel a.nav-panel-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 12px 20px; color: var(--ink-muted); }
.nav-panel-foot b { margin-right: 8px; font-weight: 500; color: var(--ink); }
.nav-panel-more { display: inline-flex; align-items: center; gap: 6px; }
.nav-panel-more svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.nav-panel-foot:hover .nav-panel-more svg { transform: translateX(3px); }
/* Signed in: the person's picture (or initial) opens a small account menu in the same frame. */
.nav-account .nav-avatar-btn { gap: 8px; padding: 0 4px; border-radius: 50%; corner-shape: round; }
.nav-account .nav-avatar-btn:hover, .nav-account .nav-avatar-btn[aria-expanded="true"] { background: transparent; }
.nav-account .nav-avatar-btn:hover .nav-avatar, .nav-account .nav-avatar-btn[aria-expanded="true"] .nav-avatar { box-shadow: 0 0 0 3px rgba(4, 133, 92, 0.18); }
.nav-account .nav-avatar-btn:focus-visible { outline: none; }
.nav-account .nav-avatar-btn:focus-visible .nav-avatar { box-shadow: 0 0 0 3px rgba(4, 133, 92, 0.35); }
.nav-account-name { display: none; }
.nav-avatar {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; overflow: hidden;
  border-radius: 50%; background: var(--green-ink); color: #fff; font-size: 14px; font-weight: 500; line-height: 1;
  transition: box-shadow var(--transition-fast); corner-shape: round;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-avatar.is-large { width: 40px; height: 40px; font-size: 16px; }
.nav-account-panel { width: 280px; }
.nav-account-card { display: grid; padding: 6px; border: 1px solid var(--color-border); border-radius: calc(12px * var(--sq, 1)); background: #fff; }
.nav-account-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--ink-line); }
.nav-account-who > span:last-child { display: grid; gap: 2px; min-width: 0; }
.nav-account-who b { font-size: 14px; font-weight: 500; color: var(--ink); }
.nav-account-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-muted); }
.site-header .nav-account-link {
  display: flex; align-items: center; width: 100%; height: auto; padding: 9px 10px; border: 0;
  border-radius: calc(8px * var(--sq, 1)); background: transparent; font: inherit; font-size: 14px; text-align: left;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.site-header .nav-account-link:hover { background: rgba(11, 43, 34, 0.04); }
.site-header .nav-account-signout { position: relative; margin-top: 11px; color: var(--ink-muted); }
.site-header .nav-account-signout::before { content: ''; position: absolute; top: -6px; left: 10px; right: 10px; height: 1px; background: var(--ink-line); }
.nav-actions.is-signed-in::before { margin-right: 4px; }

@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; transform: none; } }
@media (max-width: 900px) {
  /* Phone menu: the account sits at the end of the list, its links shown in place. */
  .site-header.nav-open .nav-account { width: 100%; }
  .site-header.nav-open .nav-account .nav-avatar-btn { width: 100%; justify-content: flex-start; gap: 12px; border-radius: calc(var(--radius-md) * var(--sq, 1)); }
  .site-header.nav-open .nav-account .nav-avatar-btn::after { margin-left: auto; }
  .site-header.nav-open .nav-account-name { display: inline; }
  .nav-account-panel { width: auto; }
  .nav-account-card { padding: 0; border: 0; background: none; }
  .nav-account-who { display: none; }
  .site-header .nav-account-link { padding: var(--space-2) var(--space-4); font-size: var(--text-base); }
  .site-header .nav-account-signout { margin-top: 0; }
  .site-header .nav-account-signout::before { display: none; }

  /* In the phone menu the dropdowns open in place, as plain lists. */
  .site-header.nav-open .nav-menu-btn { width: 100%; height: auto; padding: var(--space-3) var(--space-4); font-size: var(--text-base); color: var(--ink); justify-content: space-between; border-radius: calc(var(--radius-md) * var(--sq, 1)); }
  .site-header.nav-open .nav-menu-btn::after { content: ''; width: 8px; height: 8px; margin-right: 4px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fade) var(--ease-smooth); }
  .site-header.nav-open .nav-menu.is-open .nav-menu-btn::after { transform: translateY(2px) rotate(-135deg); }
  .nav-panel { position: static; width: auto; display: none; padding: 0 0 0 var(--space-4); border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-menu.is-open .nav-panel { display: block; }
  .nav-panel-card { display: block; padding: 0; border: 0; background: none; }
  .nav-panel-col, .nav-panel-col + .nav-panel-col { padding: 0; border: 0; gap: 0; }
  .nav-panel-item span, .site-header .nav-links .nav-panel a.nav-panel-foot { display: none; }
  .nav-panel-item b { font-weight: 400; }
  .site-header .nav-links .nav-panel a { padding: var(--space-2) var(--space-4); font-size: var(--text-base); }
}

/* ---------- Gradient palettes for the two big panels ---------- */
.gf-hero, .gf-showcase { --gf-radius: var(--panel-radius); }
.gf-hero {
  --gf-base: var(--color-accent); --gf-1: var(--color-accent-hover); --gf-2: color-mix(in oklab, var(--color-accent-hover) 80%, var(--c-teal)); --gf-3: color-mix(in oklab, var(--c-aqua) 52%, #fff); --gf-4: color-mix(in oklab, var(--color-accent) 70%, var(--c-azure));
  background-image: linear-gradient(180deg, color-mix(in oklab, var(--color-accent-hover) 78%, var(--color-primary)) 0%, color-mix(in oklab, var(--color-accent-hover) 78%, var(--color-primary)) 38%, color-mix(in oklab, color-mix(in oklab, var(--color-accent) 55%, var(--color-accent-hover)) 70%, var(--c-teal)) 58%, color-mix(in oklab, var(--color-accent) 72%, var(--c-aqua)) 74%, color-mix(in oklab, color-mix(in oklab, var(--color-accent) 60%, var(--c-azure)) 62%, #fff) 90%, color-mix(in oklab, var(--c-aqua) 50%, #fff) 100%);
}
.gf-showcase {
  --gf-base: var(--color-accent); --gf-1: var(--color-accent-hover); --gf-2: color-mix(in oklab, var(--color-accent-hover) 80%, var(--c-teal)); --gf-3: color-mix(in oklab, var(--c-aqua) 52%, #fff); --gf-4: color-mix(in oklab, var(--color-accent) 70%, var(--c-azure));
  background-image: linear-gradient(180deg, color-mix(in oklab, var(--color-accent-hover) 78%, var(--color-primary)) 0%, color-mix(in oklab, var(--color-accent-hover) 78%, var(--color-primary)) 38%, color-mix(in oklab, color-mix(in oklab, var(--color-accent) 55%, var(--color-accent-hover)) 70%, var(--c-teal)) 58%, color-mix(in oklab, var(--color-accent) 72%, var(--c-aqua)) 74%, color-mix(in oklab, color-mix(in oklab, var(--color-accent) 60%, var(--c-azure)) 62%, #fff) 90%, color-mix(in oklab, var(--c-aqua) 50%, #fff) 100%);
}
.gf-hero .gf-mesh i, .gf-showcase .gf-mesh i { width: 62%; }
.gf-hero .gf-mesh i:nth-child(1), .gf-showcase .gf-mesh i:nth-child(1) { top: -30%; left: -18%; }
.gf-hero .gf-mesh i:nth-child(2), .gf-showcase .gf-mesh i:nth-child(2) { top: -26%; right: -18%; }
.gf-hero .gf-mesh i:nth-child(3), .gf-showcase .gf-mesh i:nth-child(3) { bottom: -22%; right: -14%; }
.gf-hero .gf-mesh i:nth-child(4), .gf-showcase .gf-mesh i:nth-child(4) { bottom: -18%; left: -16%; }
/* The light glows stay on the horizon at the bottom, clear of the white headline above. */
.gf-hero .gf-mesh i:nth-child(3), .gf-showcase .gf-mesh i:nth-child(3), .gf-hero .gf-mesh i:nth-child(4), .gf-showcase .gf-mesh i:nth-child(4) { top: auto; aspect-ratio: 1; }
.gf-hero .gf-mesh i:nth-child(1), .gf-showcase .gf-mesh i:nth-child(1), .gf-hero .gf-mesh i:nth-child(2), .gf-showcase .gf-mesh i:nth-child(2) { aspect-ratio: 1; }

/* ---------- Hero, after linear.app's: headline left, the product wide beneath it ----------
   The window is a 2x capture of the real app's home screen on June 2026 (light theme, Actual, Monthly
   Cash Flow), fading out at the bottom. */
.lh { padding-top: clamp(44px, 7.4vw, 112px); }
.lh-head { max-width: 1264px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.lh h1 { max-width: 19ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.lh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px 48px; margin-top: clamp(20px, 2.4vw, 32px); }
.lh-row p { max-width: 580px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; color: var(--ink-muted); }
.lh-new { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 15px; color: var(--ink-muted); text-decoration: none; transition: color var(--transition-fast); }
.lh-new b { font-weight: 600; color: var(--ink); }
.lh-new svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.lh-new:hover { color: var(--ink); }
.lh-new:hover svg { transform: translateX(3px); }
.lh-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6vw, 32px); }
.lh-buttons .btn { gap: 10px; }
.lh-buttons .btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* The floor the window stands on, after linear.app's: a panel across the full width of the page, behind
   the whole window, lit from behind it. The light is brightest at the middle of the window's bottom edge
   and spreads out and down, so the window stands in silhouette against it; the floor darkens toward its
   edges and fades into the page at the top. The floor clips its contents (overflow: clip follows its
   squircle corners), so the window's wide shadow stays inside the gradient. It starts --lh-above higher
   than the window, in the page's own colour, so the clip line above the window never shows; the hero's
   text sits above that overlap. */
.lh-head { position: relative; z-index: 1; }
.lh-floor {
  --lh-edge: clamp(6px, 0.85vw, 12px); --lh-below: clamp(56px, 7vw, 104px); --lh-above: 96px;
  position: relative; isolation: isolate; overflow: clip;
  margin: calc(clamp(36px, 4.4vw, 64px) - var(--lh-above)) var(--lh-edge) 0;
  padding: var(--lh-above) 0 var(--lh-below);
  border-radius: 0 0 calc(10px * var(--sq, 1)) calc(10px * var(--sq, 1));
  background:
    radial-gradient(34% calc(var(--lh-below) * 2.4) at 50% calc(100% - var(--lh-below)), #fff 0%, rgba(255, 255, 255, 0.75) 30%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(70% calc(var(--lh-below) * 3.6) at 50% calc(100% - var(--lh-below)), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) calc(var(--lh-above) + 8%), color-mix(in oklab, var(--color-accent-hover) 20%, #CBD2CF) 100%);
}
.lh-stage { max-width: calc(1344px - 2 * var(--lh-edge)); margin-inline: auto; padding-inline: max(0px, calc(clamp(12px, 2.4vw, 32px) - var(--lh-edge))); }
.lh-window {
  margin: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none;
  border: 1px solid var(--color-border); border-radius: calc(14px * var(--sq, 1)); background: var(--paper);
  /* A soft, wide lift: layered shadows tinted with the brand's deep green, from a crisp contact edge out to
     a very large, faint blur, so the window floats above the floor without a hard dark band. */
  box-shadow:
    0 1px 2px rgba(11, 43, 34, 0.06),
    0 8px 16px -6px rgba(11, 43, 34, 0.08),
    0 24px 48px -12px rgba(11, 43, 34, 0.12),
    0 60px 120px -24px rgba(11, 43, 34, 0.18),
    0 100px 200px -40px rgba(4, 133, 92, 0.16);
  animation: lh-in var(--dur-morph) var(--ease-smooth) 1000ms both;
}
.lh-window { position: relative; }
.lh-window img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
/* The cash-flow card, live: the app's own markup, CSS and drawing code in a shadow root (js/hero-app.js),
   laid exactly over the card in the still (244,188, 1180 x 597.6 of the 1440 x 810 capture). */
.lh-app-card { position: absolute; left: 16.9444%; top: 23.2099%; width: 81.9444%; height: 73.7778%; pointer-events: none; user-select: none; -webkit-user-select: none; }
/* The app's typeface, for that card (font faces can't be declared inside a shadow root). */
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/NotoSans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/NotoSans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@keyframes lh-in { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }
/* The hero's words come up out of a blur, one after another, then the window, on the same curve and
   duration as the budget graphic's donut morph (--ease-smooth over --dur-morph). */
.lh h1, .lh-row p, .lh-new, .lh-buttons { animation: lh-focus var(--dur-morph) var(--ease-smooth) both; }
.lh h1 { animation-delay: 560ms; }
.lh-row p { animation-delay: 680ms; }
.lh-new { animation-delay: 780ms; }
.lh-buttons { animation-delay: 860ms; }
@keyframes lh-focus { from { opacity: 0; transform: translateY(14px); filter: blur(10px); } }
@media (prefers-reduced-motion: reduce) { .lh h1, .lh-row p, .lh-new, .lh-buttons { animation: none; } }
@media (prefers-reduced-motion: reduce) { .lh-window { animation: none; } }
@media (max-width: 860px) {
  .lh-row { flex-direction: column; align-items: flex-start; }
  .lh-window { border-radius: calc(10px * var(--sq, 1)); }
}

/* ---------- Why: centred head, four cards in a pale panel ---------- */
.why { padding-bottom: 0; }
.why .section-head h2 { max-width: 720px; margin-inline: auto; }
.why-panel { margin: 0 var(--panel-inset); padding: clamp(16px, 5.6vw, 80px) clamp(12px, 6.8vw, 96px); border-radius: calc(var(--panel-radius) * var(--sq, 1)); background: linear-gradient(180deg, var(--paper), var(--panel) 42%); }
.why-cards { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(12px, 1.7vw, 24px); max-width: 1200px; margin-inline: auto; }
.why-card { display: grid; align-content: start; gap: 16px; padding: 32px; background: #fff; border-radius: calc(32px * var(--sq, 1)); box-shadow: 0 20px 40px -30px rgba(11, 43, 34, 0.2); }
.why-card b { font-size: clamp(40px, 4vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.why-card span { font-size: 16px; line-height: 1.42; color: var(--ink-muted); }
@media (max-width: 980px) { .why-cards { grid-template-columns: 1fr 1fr; } .why-card { padding: 24px; border-radius: calc(24px * var(--sq, 1)); } }
@media (max-width: 480px) { .why-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Feature rows: serif head, hairline list, big square field ---------- */
.feature-row, .feature-row.is-reversed { gap: clamp(36px, 6vw, 96px); }
.feature-row + .feature-row { margin-top: clamp(80px, 10vw, 144px); }
.feature-copy > p { font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.feature-copy .check-list { display: grid; gap: 0; margin-top: var(--space-6); border-top: 1px solid var(--color-border); }
.feature-copy .check-list li { padding-block: 16px; border-bottom: 1px solid var(--color-border); font-size: 15px; line-height: 1.4; color: var(--ink); }
.feature-copy .check-list li::before { top: 16px; }
.share-row { margin-block: 0 clamp(72px, 9vw, 128px); }
.feature-visual { --ui-border: #E8E8E2; --ui-input: #D9D9D2; --ui-secondary: #F2F2EE; }
.gf .ui-card, .gf .gf-window, .gf .ui-stat { box-shadow: var(--ring); }
.gf .ui-card, .gf .gf-window { border-color: transparent; }
.feature-visual .ui-card, .feature-visual .gf-window { border-radius: calc(16px * var(--sq, 1)); }

/* ---------- Ask Oak showcase ---------- */
.showcase-panel { margin-inline: var(--panel-inset); padding: clamp(56px, 7vw, 104px) 0 clamp(32px, 5.6vw, 80px); }
.showcase-panel .section-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(32px, 4vw, 48px); }
.showcase-panel .eyebrow, .showcase-panel .section-head h2, .showcase-panel .section-head p, .showcase-panel .section-head p em { color: #fff; }
.showcase-panel .section-head p { max-width: 620px; font-size: 18px; }
.oak-shot, .oak-shot.gf { max-width: 960px; padding: 0; margin-inline: auto; }
.oak-shot .oc { border: none; border-radius: calc(clamp(20px, 2.8vw, 32px) * var(--sq, 1)); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.28), 0 40px 80px -40px rgba(0, 35, 40, 0.6); }
.oak-chips, .oak-shot.gf .oak-chips { position: static; transform: none; width: auto; max-width: none; margin-top: 24px; }
.oak-chip { border: none; box-shadow: none; }
.ask-oak-more { padding-top: clamp(72px, 9vw, 128px); }

/* ---------- Who ---------- */
.who-quote { font-family: var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.who-num, .who-label { color: var(--ink-muted); }

/* ---------- Plans ---------- */
.pricing-section { background: none; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 960px; margin-inline: auto; }
.plan { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid var(--color-border); border-radius: calc(32px * var(--sq, 1)); }
.plan h3, .plan-sheet h3 { font-size: 28px; }
.plan-tagline { margin-top: 4px; font-size: 15px; color: var(--ink-muted); }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 24px 0; }
.plan-price b { font-size: clamp(48px, 5vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.plan-price span { font-size: 16px; color: var(--ink-muted); }
.plan-note { min-height: 40px; margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--ink-muted); text-align: center; }
.plan .check-list { margin-top: 16px; display: grid; gap: 10px; }
.plan .check-list li { font-size: 15px; line-height: 1.4; color: var(--ink); }
.plan-plus { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--ink); }
.plan-plus + .check-list { margin-top: 12px; }
.plan.is-core { padding: 8px; border: none; }
.plan-sheet { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2.6vw, 32px); background: #fff; border-radius: calc(26px * var(--sq, 1)); }
.gf-hero-ring { --gf-base: var(--color-accent); --gf-1: var(--color-accent-hover); --gf-2: color-mix(in oklab, var(--color-accent) 55%, #fff); --gf-3: var(--color-accent-hover); --gf-4: color-mix(in oklab, var(--color-accent) 70%, #fff); }
.addons-title { max-width: 960px; margin: clamp(40px, 5vw, 64px) auto 20px; font-size: 24px; }
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 960px; margin-inline: auto; }
.addons.is-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 520px) {
  .addon { flex-direction: column; gap: 12px; }
  .addon-price { text-align: left; display: flex; align-items: baseline; gap: 8px; }
}
.addon { display: flex; justify-content: space-between; gap: 20px; padding: 24px; background: var(--panel); border-radius: calc(24px * var(--sq, 1)); }
.addon p { margin-top: 6px; font-size: 14px; line-height: 1.42; color: var(--ink-muted); }
.addon-price { flex-shrink: 0; text-align: right; }
.addon-price b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.addon-price span { font-size: 13px; color: var(--ink-muted); }
.plans-foot { max-width: 620px; margin: 24px auto 0; font-size: 14px; line-height: 1.45; text-align: center; color: var(--ink-muted); }
@media (max-width: 760px) { .plans, .addons { grid-template-columns: minmax(0, 1fr); } .plan-note { min-height: 0; } }

/* ---------- Final CTA: plain and centred ---------- */
.final-cta { background: none; text-align: center; overflow: visible; }
.final-cta::after { display: none; }
.final-cta h2 { max-width: 780px; margin-inline: auto; font-size: clamp(34px, 4.2vw, 60px); }
.final-cta p { max-width: 600px; margin: 20px auto 32px; font-size: 18px; line-height: 1.45; color: var(--ink-muted); }

/* ---------- Footer: a dark rounded panel ---------- */
.site-footer { margin: 0 var(--panel-inset) var(--panel-inset); padding-block: clamp(40px, 5.6vw, 80px) 32px; border-radius: calc(var(--panel-radius) * var(--sq, 1)); background: var(--ink); --color-dark-muted: rgba(255, 255, 255, 0.72); }
.footer-lead { margin-bottom: clamp(32px, 5vw, 72px); font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.14; text-wrap: balance; color: #fff; }
.footer-col h4 { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff; }
.footer-col a, .footer-about { font-size: 14px; }
.footer-bottom, .footer-disclaimer { font-size: 13px; }

/* ---------- Mobile bar and leftovers ---------- */
.buy-bar { background: var(--paper); }
.compare-wrap, .cost-chart { border-radius: calc(32px * var(--sq, 1)); }
.faq-item { border-radius: calc(20px * var(--sq, 1)); }
.download-card { border-radius: calc(32px * var(--sq, 1)); }
.pill-accent { color: var(--color-accent-deep); }

/* ---------- Fixes from review ---------- */
.plan.is-core { background-color: var(--gf-base); background-image:
    radial-gradient(70% 80% at 8% 4%, var(--gf-1), transparent 72%),
    radial-gradient(65% 80% at 96% 12%, var(--gf-2), transparent 72%),
    radial-gradient(80% 75% at 78% 104%, var(--gf-3), transparent 74%),
    radial-gradient(60% 60% at 6% 100%, var(--gf-4), transparent 72%); }

/* Sub-pages: same header, panels and heading style as the homepage. */
.site-header:not(.is-paper) .nav-toggle { color: var(--ink); border-color: var(--ink-line); }
.site-header .nav-actions .btn-light { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.page-hero { margin-inline: var(--panel-inset); border: none; border-radius: calc(var(--panel-radius) * var(--sq, 1)); background: var(--panel); }
.partner-hero.gf, .rel-page-hero.gf { margin-inline: var(--panel-inset); background-color: var(--gf-base);
  background-image: linear-gradient(180deg, color-mix(in oklab, var(--color-accent-hover) 78%, var(--color-primary)) 0%, color-mix(in oklab, var(--color-accent-hover) 78%, var(--color-primary)) 100%); }
.partner-hero.gf::before, .rel-page-hero.gf::before { display: none; }
.partner-hero h1, .rel-page-hero h1, .auth-card h1, .account-head h1 { letter-spacing: -0.04em; line-height: 1.14; }
.partner-hero h1 em, .rel-page-hero h1 em { font-style: normal; font-weight: inherit; color: inherit; }
.partner-hero p, .rel-page-hero p, .rel-page-hero .rel-back, .rel-page-date { color: #fff; }
.partner-hero .hero-badge { color: #fff; background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); }
.partner-hero .btn-on-dark, .rel-page-hero .btn-on-dark { background: transparent; border-color: #fff; color: #fff; }
.partner-hero .btn-on-dark:hover, .rel-page-hero .btn-on-dark:hover { background: #fff; color: var(--ink); }
.rel-card { border-radius: calc(32px * var(--sq, 1)); }
.auth-card .btn[type="submit"], .ledger-action .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.auth-card .btn[type="submit"]:hover, .ledger-action .btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }


@media (max-width: 900px) {
  .nav-mobile-tools { order: 1; margin-left: auto; }
  .nav-toggle:hover, .site-header.is-paper .nav-toggle:hover { background: var(--ink-line); }
  .site-header.nav-open .nav-links { order: 2; }
  .site-header.nav-open .nav-actions { order: 3; padding-bottom: 16px; }
}
/* Short sub-page heroes: a peach point reads as a hot spot, so they stay green. */
.partner-hero.gf, .rel-page-hero.gf { --gf-1: color-mix(in oklab, var(--color-accent-hover) 78%, var(--color-primary)); --gf-2: var(--color-accent-hover); --gf-3: color-mix(in oklab, var(--color-accent-hover) 78%, var(--color-primary)); --gf-4: var(--color-accent-hover); }
.rel-page-hero .rel-chip, .rel-page-hero .rel-chip.is-beta { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.34); color: #fff; }

/* ============================================================
   VALUES THAT USED TO BE INLINE
   The CSP is style-src 'self', which blocks style="" attributes in production, so per-element
   values live here. New bar width: add it to this list rather than using an inline style.
   ============================================================ */
[data-c="blue"]  { --c: #3B82F6; }
[data-c="green"] { --c: #22C55E; }
[data-c="amber"] { --c: #F59E0B; }
[data-p="62"] { --p: 62%; }
[data-w="0"] { --w: 0%; }
[data-w="55"] { --w: 55%; }
[data-w="44"] { --w: 44%; }
[data-w="84"] { --w: 84%; }
[data-w="87"] { --w: 87%; }
[data-w="91"] { --w: 91%; }
[data-w="92"] { --w: 92%; }
[data-w="97"] { --w: 97%; }
[data-w="98"] { --w: 98%; }
[data-w="99"] { --w: 99%; }
[data-w="100"] { --w: 100%; }

/* Homepage headings: one word or phrase in Libre Baskerville's italic for emphasis, in the heading's own
   colour, the way the app sets its titles ("Check Your Minimums"). The id outranks the section rules that
   colour heading emphasis green elsewhere on the site. */
#main.is-home :is(h1, h2) em { font-style: italic; font-weight: 400; color: inherit; }

/* ============================================================
   FEATURE ACCORDIONS (.fa), after calendly.com's: the heading up top, three points under it in
   the copy, a short step under the heading. One is open at a time; a thin bar under it fills, and
   when it's full the next one opens. Each point will later drive its own scene in the graphic beside it
   (main.js fires feature:step on the row and sets data-step on the visual).
   Without JS every point stays open; under reduced motion nothing advances on its own.
   ============================================================ */
.fa { --fa-dur: 8s; --fa-move: 420ms; position: relative; margin-top: 28px; min-height: var(--fa-min, 0); }
.fa-item { position: relative; border-bottom: 1px solid var(--ink-line); }
.fa-title { margin: 0; font: inherit; letter-spacing: 0; }
.fa-head {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 22px 0; border: 0; background: none;
  font-family: var(--font-body); font-size: clamp(18px, 1.45vw, 21px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3;
  color: var(--ink); text-align: left; cursor: pointer; transition: color var(--dur-fade) var(--ease-smooth);
}
.fa-head svg { flex-shrink: 0; width: 22px; height: 22px; }
.fa-panel p { margin: 0; padding-bottom: 24px; max-width: 48ch; font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.fa-bar { display: none; }

.fa-js .fa-item:not(.is-open) .fa-head { color: color-mix(in oklab, var(--ink-muted) 80%, var(--color-bg)); }
.fa-js .fa-item:not(.is-open) .fa-head:hover { color: var(--ink); }
.fa-js .fa-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--fa-move) var(--ease-smooth), opacity 160ms var(--ease-smooth), visibility 0s linear var(--fa-move);
}
.fa-js .fa-item.is-open .fa-panel {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows var(--fa-move) var(--ease-smooth), opacity 320ms var(--ease-rise) 120ms, visibility 0s;
}
.fa-js .fa-panel > div { min-height: 0; overflow: hidden; }

/* The progress bar sits on the open point's rule. */
.fa-js .fa-item.is-open .fa-bar { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.fa-bar i { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; }
.fa.is-playing .fa-item.is-open .fa-bar i { animation: fa-fill var(--fa-dur) linear forwards; }
.fa.is-playing.is-paused .fa-item.is-open .fa-bar i { animation-play-state: paused; }
.fa.is-static .fa-item.is-open .fa-bar i { transform: none; }
@keyframes fa-fill { to { transform: scaleX(1); } }

/* Side by side, the points sit a fixed step under the heading, the copy centred beside the graphic. */
@media (min-width: 901px) { .feature-copy .fa { margin-top: clamp(32px, 3.2vw, 48px); } }

/* ============================================================
   STEP SCENES (.fx): a feature graphic that follows its accordion. Each point has its own step: a card
   with a smaller card overlapping its edge, after calendly.com's. The row's accordion sets data-step on
   the visual; main.js shows that step and, once it's in, adds .is-on so the step plays its one small
   change (a schedule added, a description rewritten, a filter applied) and rests there.
   The markup holds each step's finished state. Without JS only the first step shows, finished.
   ============================================================ */
.fg-tx { --fg-art: url('/assets/img/halftone/oak-branch.jpg'); --fg-pos: right top; --fg-size: auto 100%; }
.fg-home { --fg-art: url('/assets/img/halftone/oak-leaves.jpg'); --fg-pos: left bottom; }

.fx { display: grid; }
.fx-step { grid-area: 1 / 1; position: relative; align-self: center; min-width: 0; }
.fx { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.fx:not(.fx-js) .fx-step:not(:first-child) { display: none; }
.fx-js .fx-step { transition: opacity 360ms var(--ease-smooth), transform 600ms var(--ease-rise), visibility 0s; }
.fx-js .fx-step:not(.is-active) { opacity: 0; transform: translateY(10px) scale(0.985); visibility: hidden; pointer-events: none; transition: opacity 260ms var(--ease-smooth), transform 260ms var(--ease-smooth), visibility 0s linear 260ms; }
.fx-js .fx-step.is-active .fx-float { animation: fx-float-in 700ms var(--ease-rise) 180ms both; }
@keyframes fx-float-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* Timing for the small change, in order: .fx-d1 first, then every ~0.3s. */
.fx-step { --fx-t: 0ms; }
.fx-d1 { --fx-t: 300ms; } .fx-d2 { --fx-t: 650ms; } .fx-d3 { --fx-t: 1000ms; } .fx-d4 { --fx-t: 1200ms; }
.fx-d5 { --fx-t: 1450ms; } .fx-d6 { --fx-t: 1700ms; } .fx-d7 { --fx-t: 1900ms; }
/* Later beats, for a step that waits on typing (.fx-type takes 900ms). */
.fx-d8 { --fx-t: 2200ms; } .fx-d9 { --fx-t: 2650ms; } .fx-d10 { --fx-t: 3000ms; }

/* The cards */
.fx-card { position: relative; z-index: 1; }
.fx-card .ui-card-header { gap: 12px; }
.fx-card .ui-card-header > div:first-child { min-width: 0; }
.fx-float {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: clamp(8px, 2.6cqw, 13px);
  padding: clamp(10px, 3cqw, 15px) clamp(12px, 3.6cqw, 18px); background: #fff; color: var(--ui-text);
  border-radius: calc(clamp(12px, 3.6cqw, 18px) * var(--sq, 1)); box-shadow: var(--ui-float), var(--ring);
}
.fx-float .ui-stat-label { font-size: clamp(10.5px, 2.5cqw, 12.5px); }
.fx-float.at-br { right: -9%; bottom: -8%; }
.fx-float.at-bl { left: -9%; bottom: -9%; }
.fx-float.at-tr { right: -10%; top: -9%; }
.fx-float.at-tl { left: -10%; top: -10%; }
.fx-float.at-bc { left: 50%; bottom: -7%; transform: translateX(-50%); white-space: nowrap; }
.fx-float.at-top { left: 50%; top: -6%; transform: translateX(-50%); padding: clamp(5px, 1.4cqw, 7px); }

.fx-list { margin: 0; padding: 0 clamp(16px, 5.6cqw, 28px) clamp(6px, 2cqw, 10px); list-style: none; }
.fx-row, .fx-goal { display: flex; align-items: center; gap: clamp(10px, 3cqw, 14px); padding-block: clamp(10px, 3cqw, 14px); border-top: 1px solid var(--ui-border); font-size: clamp(13.5px, 3.4cqw, 16.5px); line-height: 1.3; color: var(--ui-text); transition: opacity 500ms var(--ease-smooth) var(--fx-t); }
.fx-list > :first-child { border-top: 0; }
.fx-ic { display: grid; place-items: center; flex-shrink: 0; width: clamp(30px, 8.4cqw, 40px); aspect-ratio: 1; border-radius: calc(clamp(8px, 2.4cqw, 11px) * var(--sq, 1)); background: var(--ui-secondary); font-size: clamp(14px, 4cqw, 19px); }
.fx-name { display: grid; min-width: 0; font-weight: 500; }
.fx-name small { font-size: 0.82em; font-weight: 400; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-amt.is-in { color: var(--green-ink, #04855C); }
.fx-amt.is-out { color: #C2410C; }
.fx-amt.is-big { font-size: clamp(18px, 5cqw, 25px); font-weight: 700; letter-spacing: -0.015em; }
.fx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--ui-secondary); font-size: clamp(11.5px, 2.8cqw, 13.5px); font-weight: 500; white-space: nowrap; color: var(--ui-text); corner-shape: round; }
.fx-chip.is-good { background: #DDF3E8; color: #04724F; }
.fx-chip.is-bad { background: #FDE8E4; color: #B42318; }
.fx-chip.is-shared { background: #E9EEF9; color: #3B5BA9; }
.fx-chip svg { width: 14px; height: 14px; }
.fx-av { display: grid; place-items: center; flex-shrink: 0; width: clamp(28px, 7.6cqw, 36px); aspect-ratio: 1; border-radius: 50%; font-size: clamp(12px, 3.2cqw, 15px); font-weight: 600; corner-shape: round; }
.fx-av.is-m { background: #DDF3E8; color: #04724F; }
.fx-av.is-s { background: #F6E7D8; color: #9A5B1E; }
.fx-av.is-shared { background: #E9EEF9; color: #3B5BA9; }
.fx-av.is-add { background: #fff; border: 1.5px dashed var(--ui-input); color: var(--ui-muted); font-weight: 400; }
.fx-av svg { width: 58%; height: 58%; }
.fx-bar { position: relative; display: block; height: 6px; border-radius: 99px; background: var(--ui-secondary); overflow: hidden; }
.fx-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ui-accent); transition: width var(--dur-morph) var(--ease-smooth) var(--fx-t); }
.fx-bar .w20 { width: 20%; } .fx-bar .w37 { width: 38.25%; } .fx-bar .w61 { width: 61.7%; } .fx-bar .w62 { width: 62%; } .fx-bar .w74 { width: 74%; }

/* A value that changes: the old one leaves, the new one rises in its place. */
.fx-swap { display: inline-grid; }
.fx-swap > span { grid-area: 1 / 1; transition: opacity 260ms var(--ease-smooth), transform 600ms var(--ease-rise); transition-delay: var(--fx-t); }
.fx-swap .fx-a { opacity: 0; transform: translateY(-5px); pointer-events: none; }
.fx-swap.is-end { justify-items: end; }

/* Segmented controls: the option that's chosen once the step has played. */
.fx .ui-seg > span { transition: background 400ms var(--ease-smooth) var(--fx-t), color 400ms var(--ease-smooth) var(--fx-t); }
.fx .ui-seg > .fx-post { background: var(--ui-secondary); color: var(--ui-text); }

/* Before the step plays (JS only): every change above sits at its start. */
.fx-js .fx-step:not(.is-on) * { transition-duration: 0s !important; transition-delay: 0s !important; }
.fx-js .fx-step:not(.is-on) .fx-swap .fx-a { opacity: 1; transform: none; }
.fx-js .fx-step:not(.is-on) .fx-swap .fx-b { opacity: 0; transform: translateY(5px); }
.fx-js .fx-step:not(.is-on) .ui-seg > .fx-pre { background: var(--ui-secondary); color: var(--ui-text); }
.fx-js .fx-step:not(.is-on) .ui-seg > .fx-post { background: transparent; color: var(--ui-muted); }

/* Transactions 1: Bulk Add, and each schedule gets its tick. */
.fx-check { display: grid; place-items: center; flex-shrink: 0; width: clamp(20px, 5.4cqw, 26px); aspect-ratio: 1; border-radius: 50%; background: #DDF3E8; color: #04724F; transition: opacity 300ms var(--ease-smooth) var(--fx-t), transform 600ms var(--ease-rise) var(--fx-t); corner-shape: round; }
.fx-check svg { width: 62%; height: 62%; }
.fx-js .fx-step:not(.is-on) .fx-check { opacity: 0; transform: scale(0.5); }
.fx-cta { gap: clamp(12px, 3.6cqw, 18px); }
.fx-cta-text { display: grid; gap: 1px; }
.fx-cta-text b { font-size: clamp(13.5px, 3.4cqw, 16px); font-weight: 600; }
.fx-cta-text small { font-size: clamp(11.5px, 2.8cqw, 13.5px); color: var(--ui-muted); }
/* The app's accent button (.btn-accent), as the Head Start notice's Bulk Add:
   field height, 1.5px edge in its own colour, medium weight. Once pressed it
   settles into the "on" look the toolbox tiles use. */
.fx-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: clamp(30px, 8cqw, 36px); padding: 0 clamp(11px, 3.4cqw, 16px); border: 1.5px solid color-mix(in srgb, var(--ui-accent) 55%, transparent); border-radius: calc(clamp(8px, 2.2cqw, 10px) * var(--sq, 1)); background: color-mix(in srgb, var(--ui-accent) 10%, #fff); color: var(--ui-accent); font-size: clamp(12.5px, 3cqw, 14.5px); font-weight: 500; line-height: 1.4; white-space: nowrap; transition: background 300ms ease calc(var(--fx-t) + 250ms), color 300ms ease calc(var(--fx-t) + 250ms), border-color 300ms ease calc(var(--fx-t) + 250ms); }
.fx-js .fx-step:not(.is-on) .fx-btn { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.fx-step:has(.fx-cta) .fx-list { padding-bottom: clamp(36px, 11cqw, 54px); }
.fx-step.is-on .fx-btn { animation: fx-press 420ms var(--ease-smooth) var(--fx-t) both; }
@keyframes fx-press { 40% { scale: 0.93; } 100% { scale: 1; } }

/* Transactions 2: the bank's words become yours, then a note. */
.fx-card .ui-card-title .fx-swap .fx-a { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.74em; letter-spacing: 0; color: var(--ui-muted); align-self: center; }
.fx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3.6cqw, 18px) clamp(14px, 4cqw, 20px); margin: 0; padding: clamp(14px, 4.4cqw, 22px) clamp(16px, 5.6cqw, 28px) clamp(30px, 9cqw, 44px); }
.fx-fields dt { font-size: clamp(10.5px, 2.5cqw, 12.5px); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ui-muted); }
.fx-fields dd { margin: 4px 0 0; font-size: clamp(14px, 3.5cqw, 17px); font-weight: 500; color: var(--ui-text); }
.fx-note.at-bl { bottom: -13%; }
.fx-note { flex-direction: column; align-items: flex-start; gap: 4px; min-width: 52%; }
.fx-note .ui-stat-label { display: flex; align-items: center; gap: 6px; }
.fx-note .ui-stat-label svg { width: 14px; height: 14px; }
.fx-note p { margin: 0; font-size: clamp(14px, 3.5cqw, 17px); color: var(--ui-text); }
.fx-type { display: inline-block; clip-path: inset(0 0 0 0); transition: clip-path 900ms steps(20, end) var(--fx-t); }
.fx-js .fx-step:not(.is-on) .fx-type { clip-path: inset(0 100% 0 0); }

/* Transactions 3: the Toolbox, with Scan and Add Missing doing the work. */
.fx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2.4cqw, 12px); margin: 0; padding: clamp(14px, 4.4cqw, 22px) clamp(14px, 4.4cqw, 22px) clamp(30px, 9cqw, 44px); list-style: none; }
/* The app's tile buttons (.btn-tile): white, a field's grey edge, the icon,
   label and two-line description centred. A tool that ran takes the app's
   "on" look (accent edge, accent wash, accent icon and label). */
.fx-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2px, 0.8cqw, 4px); min-width: 0; aspect-ratio: 1; box-sizing: border-box; padding: clamp(8px, 2.6cqw, 12px) clamp(6px, 1.8cqw, 8px); text-align: center; border: 1px solid var(--ui-input); border-radius: calc(clamp(10px, 3cqw, 12px) * var(--sq, 1)); background: #fff; transition: background 400ms var(--ease-smooth) var(--fx-t), border-color 400ms var(--ease-smooth) var(--fx-t), translate 260ms var(--ease-rise), scale 260ms var(--ease-rise), box-shadow 260ms var(--ease-smooth); }
.fx-tile svg { width: clamp(20px, 5.4cqw, 26px); height: clamp(20px, 5.4cqw, 26px); margin-bottom: clamp(2px, 0.8cqw, 4px); color: var(--ui-text); transition: color 400ms var(--ease-smooth) var(--fx-t); }
.fx-tile b { font-size: clamp(12px, 3cqw, 14px); font-weight: 600; line-height: 1.2; color: var(--ui-text); transition: color 400ms var(--ease-smooth) var(--fx-t); }
.fx-tile small { width: 100%; min-height: 2.6em; font-size: clamp(10px, 2.5cqw, 12px); line-height: 1.3; color: var(--ui-muted); }
.fx-tile.is-hit { border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent); background: color-mix(in srgb, var(--ui-accent) 10%, #fff); }
.fx-tile.is-hit svg, .fx-tile.is-hit b { color: var(--ui-accent); }
.fx-js .fx-step:not(.is-on) .fx-tile.is-hit { border-color: var(--ui-input); background: #fff; }
.fx-js .fx-step:not(.is-on) .fx-tile.is-hit :is(svg, b) { color: var(--ui-text); }
/* A tool being used, in its turn: the tile lifts and grows as if the pointer
   came to it, presses, and lights up green as it settles back. The green
   waits for the press (--fx-tap). */
.fx-tile.is-hit { --fx-tap: calc(var(--fx-t) + 560ms); position: relative; transition-delay: var(--fx-tap), var(--fx-tap), 0s, 0s, 0s; }
.fx-tile.is-hit :is(svg, b) { transition-delay: var(--fx-tap); }
.fx-step.is-on .fx-tile.is-hit { animation: fx-tile-use 1100ms var(--ease-smooth) var(--fx-t) both; }
@keyframes fx-tile-use {
  0% { z-index: 1; translate: 0 0; scale: 1; box-shadow: 0 0 0 rgba(17, 24, 39, 0); }
  28%, 42% { z-index: 1; translate: 0 -4px; scale: 1.07; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12), 0 3px 6px rgba(17, 24, 39, 0.06); }
  54% { z-index: 1; translate: 0 -1px; scale: 1.01; box-shadow: 0 3px 8px rgba(17, 24, 39, 0.08); }
  100% { z-index: 0; translate: 0 0; scale: 1; box-shadow: 0 0 0 rgba(17, 24, 39, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-step.is-on .fx-tile.is-hit { animation: none; }
}
.fx-toast { gap: 10px; }
.fx-toast > svg { flex-shrink: 0; width: clamp(28px, 7.4cqw, 34px); height: clamp(28px, 7.4cqw, 34px); padding: 7px; border-radius: 50%; background: #DDF3E8; color: #04724F; }
.fx-toast span { display: grid; }
.fx-toast b { font-size: clamp(13.5px, 3.4cqw, 16px); font-weight: 600; }
.fx-toast small { font-size: clamp(11.5px, 2.8cqw, 13.5px); color: var(--ui-muted); }
.fx-js .fx-step.is-on .fx-toast { animation: fx-float-in 700ms var(--ease-rise) var(--fx-t) both; }
.fx-js .fx-step:not(.is-on) .fx-toast { visibility: hidden; animation: none; }

/* Issues (the app's Transaction Toolbox > Issues, account-summary.js). Amber is the app's issue colour
   (the Sankey charts' Sunflower), as the history marks a flagged row. */
.fg-iss { --fg-art: url('/assets/img/halftone/oak-leaves.jpg'); --fg-pos: right top; --iss: #F9B733; --iss-ink: #8A5A00; }

/* Issues 1: three rows turn amber one after another, each saying what's off, and the count comes up. */
.fx-flag { margin-inline: calc(-1 * clamp(16px, 5.6cqw, 28px)); padding-inline: clamp(16px, 5.6cqw, 28px); background: color-mix(in srgb, var(--iss) 15%, #fff); box-shadow: inset 3px 0 0 var(--iss); transition: background 500ms var(--ease-smooth) var(--fx-t), box-shadow 500ms var(--ease-smooth) var(--fx-t); }
.fx-flag .fx-b { color: var(--iss-ink); }
.fx-js .fx-step:not(.is-on) .fx-flag { background: transparent; box-shadow: inset 0 0 0 transparent; }
.fx-count { gap: clamp(10px, 3cqw, 14px); }
.fx-count-n { display: grid; place-items: center; width: clamp(34px, 9cqw, 44px); aspect-ratio: 1; border-radius: calc(clamp(9px, 2.6cqw, 12px) * var(--sq, 1)); background: color-mix(in srgb, var(--iss) 22%, #fff); color: var(--iss-ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(17px, 4.6cqw, 22px); font-weight: 700; }
.fx-count > span:last-child { display: grid; }
.fx-count b { font-size: clamp(13.5px, 3.4cqw, 16px); font-weight: 600; }
.fx-count small { font-size: clamp(11.5px, 2.8cqw, 13.5px); color: var(--ui-muted); }
.fx-step:has(.fx-count) .fx-card { margin-top: 9%; }

/* Issues 2: one step as the app sets it (account-summary.js renderDiscrepancies, styles.css .disc-*), at
   the scene's scale (about 1.2x): a plain card header with the transaction's name, date · subcategory
   and amount (.disc-txn.card-header); the question as a section title in the serif, bold
   (.disc-question); the reason in small muted text, its values italic in the line's own colour (.disc-why). */
.fx-disc-head { align-items: flex-start; }
.fx-disc-head > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-disc-name, .fx-disc-amt { font-size: clamp(15px, 4cqw, 19px); font-weight: 600; line-height: 1.3; color: var(--ui-text); }
.fx-disc-name { overflow-wrap: anywhere; }
.fx-disc-amt { flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-disc-sub { font-size: clamp(12.5px, 3.2cqw, 15.5px); line-height: 1.4; color: var(--ui-muted); }
/* The payee's favicon (the app's transactionFaviconUrl, from the website): none while the payee is
   Unknown, so the header holds an empty slot; it comes in once the website is typed, in the header and
   in the Website field (the app's .field-icon). */
.fx-fav img { transition: opacity 300ms var(--ease-smooth) var(--fx-t), transform 600ms var(--ease-rise) var(--fx-t); }
.fx-disc-head .fx-fav { flex-shrink: 0; margin-left: auto;transition: background 300ms var(--ease-smooth) var(--fx-t), box-shadow 300ms var(--ease-smooth) var(--fx-t); }
.fx-js .fx-step:not(.is-on) .fx-disc-head .fx-fav { background: var(--ui-secondary); box-shadow: inset 0 0 0 1px var(--ui-border); }
.fx-js .fx-step:not(.is-on) .fx-fav img { opacity: 0; transform: scale(0.6); }
.fx-fav.is-field { display: grid; flex-shrink: 0; width: clamp(15px, 4cqw, 18px); margin-right: 8px; overflow: hidden; border-radius: calc(4px * var(--sq, 1)); transition: width 300ms var(--ease-smooth) var(--fx-t), margin 300ms var(--ease-smooth) var(--fx-t); }
.fx-fav.is-field img { display: block; width: clamp(15px, 4cqw, 18px); height: auto; }
.fx-js .fx-step:not(.is-on) .fx-fav.is-field { width: 0; margin-right: 0; }
.fx-q { padding: clamp(14px, 4.4cqw, 22px) clamp(16px, 5.6cqw, 28px) clamp(16px, 5cqw, 24px); }
.fx-ask { margin: 0 0 clamp(8px, 2.2cqw, 10px); font-family: var(--font-display); font-size: clamp(15px, 4cqw, 19px); font-weight: 700; letter-spacing: -0.015em; word-spacing: -0.06em; line-height: 1.35; color: var(--ui-text); }
.fx-ask em, .fx-why em { font-style: italic; }
.fx-why { margin: 0; font-size: clamp(12.5px, 3.2cqw, 15.5px); line-height: 1.5; color: var(--ui-muted); }
.fx-form { display: grid; gap: clamp(6px, 1.8cqw, 8px); margin: clamp(12px, 3.6cqw, 16px) 0 0; }
.fx-form > div { display: grid; grid-template-columns: clamp(64px, 18cqw, 88px) minmax(0, 1fr); align-items: center; gap: 10px; }
.fx-form dt { font-size: clamp(12px, 3cqw, 14px); font-weight: 500; color: var(--ui-text); }
.fx-form dt i { font-style: normal; color: var(--ui-accent); }
.fx-form dd { display: flex; align-items: center; height: clamp(30px, 8cqw, 36px); margin: 0; padding: 0 clamp(9px, 2.6cqw, 12px); border: 1px solid var(--ui-input); border-radius: calc(clamp(7px, 2cqw, 9px) * var(--sq, 1)); background: #fff; font-size: clamp(12.5px, 3.2cqw, 15px); color: var(--ui-text); overflow: hidden; white-space: nowrap; }
.fx-acts { display: flex; align-items: center; gap: clamp(6px, 1.8cqw, 8px); margin-top: clamp(14px, 4cqw, 18px); }
.fx-step-n { margin-right: auto; font-size: clamp(11.5px, 2.8cqw, 13.5px); color: var(--ui-muted); white-space: nowrap; }
/* The app's field buttons (.btn-field): white, the field's grey edge, medium weight. Save presses, as Bulk Add does. */
.fx-fbtn { display: inline-flex; align-items: center; height: clamp(28px, 7.6cqw, 34px); padding: 0 clamp(9px, 2.6cqw, 12px); border: 1px solid var(--ui-input); border-radius: calc(clamp(7px, 2cqw, 9px) * var(--sq, 1)); background: #fff; font-size: clamp(11.5px, 2.9cqw, 13.5px); font-weight: 500; white-space: nowrap; color: var(--ui-text); }
.fx-step.is-on .fx-fbtn.is-go { animation: fx-press 420ms var(--ease-smooth) var(--fx-t) both; }

/* Issues 3: the same change, offered for the rest; each one is ticked, then Apply renames them all. */
.fx-facts { display: grid; gap: 4px; margin: clamp(10px, 3cqw, 14px) 0 0; padding: clamp(8px, 2.4cqw, 11px) clamp(10px, 3cqw, 14px); border-radius: calc(clamp(8px, 2.4cqw, 11px) * var(--sq, 1)); background: var(--ui-secondary); }
.fx-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: clamp(12px, 3cqw, 14px); }
.fx-facts dt { color: var(--ui-muted); }
.fx-facts dd { margin: 0; font-weight: 500; color: var(--ui-text); }
.fx-apply { padding-bottom: clamp(36px, 11cqw, 54px); }
.fx-apply .fx-row { padding-block: clamp(8px, 2.4cqw, 11px); }
.fx-box { display: grid; place-items: center; flex-shrink: 0; width: clamp(18px, 4.8cqw, 22px); aspect-ratio: 1; border: 1.5px solid var(--ui-accent); border-radius: calc(5px * var(--sq, 1)); background: var(--ui-accent); color: #fff; transition: background 220ms var(--ease-smooth) var(--fx-t), border-color 220ms var(--ease-smooth) var(--fx-t); }
.fx-box svg { width: 78%; height: 78%; transition: opacity 220ms var(--ease-smooth) var(--fx-t), transform 400ms var(--ease-rise) var(--fx-t); }
.fx-js .fx-step:not(.is-on) .fx-box { border-color: var(--ui-input); background: #fff; }
.fx-js .fx-step:not(.is-on) .fx-box svg { opacity: 0; transform: scale(0.4); }

/* Debt & goals 1: where the extra goes, and each goal's date answers. */
.fx-goal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
.fx-goal .fx-bar { grid-column: 2 / -1; }
.fx-goal .fx-ic { grid-row: span 2; }
.fx-seg-float { flex-direction: column; align-items: flex-start; gap: 6px; }
.fx-seg-float .ui-seg { height: clamp(30px, 8cqw, 38px); font-size: clamp(12px, 3cqw, 14px); }
.fx-seg-float .ui-seg > span { padding-inline: clamp(7px, 2.4cqw, 12px); }
.fx-step:has(.fx-seg-float.at-tr) .fx-card { margin-top: 13%; }

/* Debt & goals 2: snowball gives way to a custom order. */
.fx-pre-g, .fx-post-g { transition: opacity 700ms var(--ease-smooth) var(--fx-t); }
.fx-pre-g { opacity: 0; }
.fx-js .fx-step:not(.is-on) .fx-pre-g { opacity: 1; }
.fx-js .fx-step:not(.is-on) .fx-post-g { opacity: 0; }
.fx-extra { flex-direction: column; align-items: flex-start; gap: 2px; }
.fx-extra b { font-size: clamp(18px, 5cqw, 24px); font-weight: 700; letter-spacing: -0.015em; }
.fx-extra small { font-size: 0.6em; font-weight: 500; color: var(--ui-muted); }
.fx-card .dt-stats b { display: block; }

/* Debt & goals 3: what's paid so far, then the projection draws on and each payoff is pinned. */
.fx-proj { stroke-dasharray: 0.012 0.012; stroke-opacity: 0.6; }
.fx-today { stroke: var(--ui-input); stroke-width: 1; stroke-dasharray: 3 3; }
.fx-today-t { font-weight: 600; }
.fx-pin rect { fill: #fff; stroke: var(--ui-border); }
.fx-pin text { font-size: 10.5px; font-weight: 600; fill: var(--ui-text); }
.fx-pin .fx-pin-sub { font-size: 9.5px; font-weight: 400; fill: var(--ui-muted); }
.fx-pin-dot { fill: #fff; stroke: var(--ui-accent); stroke-width: 2.5; }
.fx-pin-dot.fx-end { fill: var(--ui-accent); stroke: #fff; stroke-width: 3; }
.fx-pin { transition: opacity 400ms var(--ease-smooth) var(--fx-t); }
.fx-js .fx-step:not(.is-on) .fx-pin { opacity: 0; }
.fx-ring-float svg { width: clamp(40px, 11cqw, 52px); height: clamp(40px, 11cqw, 52px); rotate: -90deg; }
.fx-ring-float circle { fill: none; stroke: var(--ui-secondary); stroke-width: 5; }
.fx-ring-float .fx-ring { stroke: var(--ui-accent); stroke-linecap: round; stroke-dasharray: 19 100; transition: stroke-dasharray var(--dur-morph) var(--ease-smooth) var(--fx-t); }
.fx-js .fx-step:not(.is-on) .fx-ring { stroke-dasharray: 0 100; }
.fx-ring-float > span { display: grid; }
.fx-ring-float b { font-size: clamp(17px, 4.6cqw, 22px); font-weight: 700; line-height: 1.15; }
.fx-ring-float small { font-size: clamp(11px, 2.7cqw, 13px); color: var(--ui-muted); }
.fx-step:has(.fx-ring-float) .fx-card { margin-top: 11%; }

/* Household 1: the accounts come in, each with its owner, then the household itself. */
.fx-rise { transition: opacity 400ms var(--ease-smooth) var(--fx-t), transform 600ms var(--ease-rise) var(--fx-t); }
.fx-js .fx-step:not(.is-on) .fx-rise { opacity: 0; transform: translateY(8px); }
.fx-members { flex-direction: column; align-items: flex-start; gap: 6px; }
.fx-people { display: flex; gap: 6px; }
.fx-step:has(.fx-members) .fx-card { margin-top: 10%; }

/* Household 2: the household narrows to one person. Rows stay put and fade, so nothing jumps. */
.fx-filter { padding-top: clamp(4px, 1.4cqw, 8px); }
.fx-card .fx-filter .is-other { opacity: 0.28; }
.fx-js .fx-step:not(.is-on) .fx-filter .is-other { opacity: 1; }
.fx-step:has(.at-top) .fx-card { margin-top: 6%; }
.fx-step:has(.at-top) .fx-card .ui-card-header { padding-top: clamp(30px, 8.4cqw, 40px); }

/* Household 3: one goal, funded from both sides; the budget card behind it. */
.fx-goal-big { padding: clamp(14px, 4.4cqw, 22px) clamp(16px, 5.6cqw, 28px) clamp(4px, 1.2cqw, 6px); }
.fx-goal-nums { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.fx-goal-nums b { font-size: clamp(24px, 6.4cqw, 32px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fx-goal-nums small { font-size: clamp(13px, 3.2cqw, 15px); color: var(--ui-muted); }
.fx-bar.is-big { height: 10px; }
.fx-js .fx-step:not(.is-on) .fx-bar .w37 { width: 36.5%; }
.fx-foot { padding: 0 clamp(16px, 5.6cqw, 28px) clamp(16px, 5cqw, 24px); }
.fx-mini { flex-direction: column; align-items: stretch; gap: 4px; z-index: 0; min-width: 46%; }
.fx-mini b { font-size: clamp(15px, 4cqw, 19px); font-weight: 700; }
.fx-mini b small { font-weight: 400; color: var(--ui-muted); font-size: 0.75em; }
.fx-mini .fx-bar { margin-top: 4px; }
.fx-step:has(.fx-mini) .fx-card { margin-top: 15%; }

/* Narrow cards: each goal's date drops under its name, and the funding switch centres over the card. */
@container (max-width: 400px) {
  .fx-goal { grid-template-columns: auto minmax(0, 1fr); }
  .fx-goal .fx-ic { grid-row: span 3; }
  .fx-goal .fx-swap.is-end { grid-column: 2; justify-items: start; }
  .fx-goal .fx-bar { grid-column: 2; }
  .fx-seg-float.at-tr { right: auto; left: 50%; transform: translateX(-50%); }
  .fx-card .ui-card-header { flex-wrap: wrap; row-gap: 10px; }
}
/* Stacked, the card can't sit at two thirds of the field, so the scene steps in to leave room for its overlaps. */
@media (max-width: 900px) {
  .feature-visual.fg:has(.fx) { padding: clamp(40px, 11vw, 64px) clamp(22px, 7vw, 40px); }
  .fx-float.at-br { right: -5%; } .fx-float.at-bl { left: -5%; } .fx-float.at-tr { right: -5%; } .fx-float.at-tl { left: -5%; }
}
@media (prefers-reduced-motion: reduce) {
  .fx *, .fx-step { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ---- Step scenes: real icons, photo avatars, and the household coming together ---- */
/* Icons as the app draws them: its own glyph where there's no merchant, the merchant's icon where there is. */
.fx-ic svg { width: 52%; height: 52%; color: var(--ui-text); }
.fx-ic.is-logo { overflow: hidden; background: transparent; }
.fx-ic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A wordmark favicon on a clear background (ADP): the whole mark, as wide as the icon. */
.fx-ic.is-fit img { object-fit: contain; }
.fx-card .ui-card-header:has(> .fx-ic) { justify-content: flex-start; }
.fx-card .ui-card-header:has(> .fx-ic) > .fx-amt { margin-left: auto; }
.fx-av { overflow: hidden; }
.fx-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-av.is-lg { width: clamp(52px, 14cqw, 68px); box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(15, 15, 15, 0.12); }
.fx-people .fx-av + .fx-av { margin-left: -10px; box-shadow: 0 0 0 2.5px #fff; }

/* Household, first point: Myles's and Sam's profiles appear side by side, slide together into one
   household, and the household's accounts come in after it. The finished state is just the accounts. */
.fx-join { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.fx-prof, .fx-merged {
  grid-area: 1 / 1; display: grid; justify-items: center; gap: 2px; padding: clamp(14px, 4cqw, 20px) clamp(16px, 5cqw, 24px);
  min-width: 38%; background: #fff; border-radius: calc(clamp(14px, 4cqw, 20px) * var(--sq, 1)); box-shadow: var(--ui-float), var(--ring);
  color: var(--ui-text); text-align: center; opacity: 0;
}
.fx-prof .fx-av { margin-bottom: 8px; }
.fx-prof b, .fx-merged b { font-size: clamp(15px, 4cqw, 19px); font-weight: 600; }
.fx-prof small, .fx-merged small { font-size: clamp(11.5px, 2.9cqw, 13.5px); color: var(--ui-muted); }
.fx-pin-set { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: #DDF3E8; color: #04724F; font-size: clamp(11px, 2.7cqw, 12.5px); font-weight: 500; corner-shape: round; }
.fx-pin-set svg { width: 12px; height: 12px; }
.fx-merged .fx-people { margin-bottom: 8px; }
.fx-merged .fx-av { width: clamp(44px, 12cqw, 56px); }
.fx-js .fx-late.is-on .fx-prof.is-l { animation: fx-prof-l 2600ms var(--ease-smooth) both; }
.fx-js .fx-late.is-on .fx-prof.is-r { animation: fx-prof-r 2600ms var(--ease-smooth) 150ms both; }
.fx-js .fx-late.is-on .fx-merged { animation: fx-merged 3900ms var(--ease-smooth) both; }
@keyframes fx-prof-l {
  0% { opacity: 0; transform: translate(-58%, 14px); }
  18%, 62% { opacity: 1; transform: translate(-58%, 0); }
  84%, 100% { opacity: 0; transform: translate(-8%, 0) scale(0.9); }
}
@keyframes fx-prof-r {
  0% { opacity: 0; transform: translate(58%, 14px); }
  18%, 62% { opacity: 1; transform: translate(58%, 0); }
  84%, 100% { opacity: 0; transform: translate(8%, 0) scale(0.9); }
}
@keyframes fx-merged {
  0%, 46% { opacity: 0; transform: scale(0.86); }
  56%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translate(34%, -46%) scale(0.6); }
}
/* The accounts wait for the household, then come in as before. */
.fx-js .fx-late:not(.is-on) .fx-card { opacity: 0; }
.fx-js .fx-late.is-on .fx-card { animation: fx-late-in 700ms var(--ease-rise) 3300ms both; }
@keyframes fx-late-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fx-late .fx-rise { transition-delay: calc(var(--fx-t) + 3400ms); }
.fx-js .fx-late.is-active .fx-float { animation: none; opacity: 0; }
.fx-js .fx-late.is-on .fx-float { animation: fx-float-in 700ms var(--ease-rise) 3700ms both; }
@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-late.is-on .fx-card, .fx-js .fx-late.is-on .fx-float { opacity: 1; }
}

/* ============================================================
   COMPARE PAGES (/compare/, built by tools/build_compare.py). After eden.so/vs/: the short version, a
   side-by-side table in plain words, credit for what the other tool does well, who should pick which,
   both prices and a short FAQ.
   ============================================================ */
.cmp-narrow { max-width: 980px; }
.cmp-hero > .container { max-width: 860px; }
.cmp-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: var(--space-6); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.6); }
.cmp-crumbs a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.cmp-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cmp-short { max-width: 760px; }
.cmp-short p { margin-top: var(--space-3); font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; letter-spacing: -0.01em; color: var(--color-ink); text-wrap: pretty; }
.cmp-table { margin-top: var(--space-10); }
.cmp-table .compare { min-width: 620px; }
.cmp-table .compare td { text-align: left; vertical-align: top; line-height: 1.5; color: var(--color-text-muted); }
.cmp-table .compare td.col-us { color: var(--color-text); }
.cmp-table .compare th[scope="row"] { vertical-align: top; }
.cmp-table .compare thead th:not(:first-child) { text-align: left; }
.cmp-source { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-subtle); }
.cmp-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.cmp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); }
.cmp-pair h2 { margin: var(--space-3) 0 var(--space-6); font-size: clamp(26px, 3vw, 36px); }
.cmp-pair h2 em { font-style: italic; font-weight: 400; color: var(--green-ink, #04855C); }

.cmp-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.cmp-pick { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--color-border); border-radius: calc(24px * var(--sq, 1)); background: var(--color-surface); }
.cmp-pick.is-us { border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface)); }
.cmp-pick h3 { margin-bottom: var(--space-4); font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); }
.cmp-pick ul { display: grid; gap: var(--space-3); padding-left: 1.1em; }
.cmp-pick li { line-height: 1.55; color: var(--color-text-muted); }

.cmp-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cmp-price { display: grid; gap: 4px; align-content: start; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: calc(20px * var(--sq, 1)); background: var(--color-surface); }
.cmp-price span { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.cmp-price b { font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.cmp-price small { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.cmp-price.is-us b { color: var(--green-ink, #04855C); }

.cmp-rel-title { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: var(--space-6); }
.cmp-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); list-style: none; }
.cmp-links li { display: grid; gap: 2px; padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.cmp-links a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 21px); color: var(--color-ink); text-decoration: none; }
.cmp-links a svg { width: 16px; height: 16px; color: var(--color-accent); transition: transform 200ms ease; }
.cmp-links a:hover svg { transform: translateX(3px); }
.cmp-links span { font-size: var(--text-sm); color: var(--color-text-muted); }
.cmp-all { margin-top: var(--space-6); }
.cmp-group + .cmp-group { margin-top: var(--space-16); }
.cmp-group h2 { font-size: clamp(26px, 3vw, 36px); }
.cmp-group > p { margin: var(--space-2) 0 var(--space-6); color: var(--color-text-muted); }

@media (max-width: 800px) {
  .cmp-pair, .cmp-picks, .cmp-links { grid-template-columns: minmax(0, 1fr); }
  .cmp-prices { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone the table can't scroll the other product out of view: each row stacks, its label across
   the top and the two answers side by side, each named. */
@media (max-width: 640px) {
  .cmp-table .compare { min-width: 0; }
  .cmp-table .compare thead { display: none; }
  .cmp-table .compare tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--color-border-subtle); }
  .cmp-table .compare tbody tr:last-child { border-bottom: 0; }
  .cmp-table .compare th[scope="row"] { grid-column: 1 / -1; position: static; min-width: 0; padding: var(--space-4) var(--space-4) var(--space-2); border: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); background: transparent; }
  .cmp-table .compare td { position: static; min-width: 0; padding: var(--space-2) var(--space-4) var(--space-4); border: 0; font-size: var(--text-xs); }
  .cmp-table .compare td:first-of-type { background: rgba(0, 189, 126, 0.05); }
  .cmp-table .compare td::before { content: attr(data-col); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-subtle); }
  .cmp-table .compare td.col-us::before { color: var(--green-ink, #04855C); }
}

/* ============================================================
   ABOUT PAGE (about.html): Myles's story as a single column of prose, then what Oakfold stands for and
   who it's for.
   ============================================================ */
.about-story { max-width: 720px; }
.about-story h2 { margin: var(--space-3) 0 var(--space-8); font-size: clamp(30px, 3.6vw, 46px); }
.about-story p { margin-top: var(--space-5); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--color-text-muted); text-wrap: pretty; }
.about-story .about-lead { margin-top: 0; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.35; color: var(--color-ink); }
.about-sign { display: grid; gap: 2px; margin-top: var(--space-10) !important; font-family: var(--font-display); font-size: 22px !important; color: var(--color-ink) !important; }
.about-sign span { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-muted); }
.about-narrow { max-width: 980px; }
.about-beliefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.about-beliefs > div { padding-top: var(--space-5); border-top: 2px solid var(--color-accent); }
.about-beliefs h3 { font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 24px); margin-bottom: var(--space-3); }
.about-beliefs p { line-height: 1.65; color: var(--color-text-muted); }
.about-alt { margin-top: var(--space-5); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
@media (max-width: 800px) { .about-beliefs { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   CONTACT — /contact.html. Words on the left, the form on a card on the right.
   The form posts to the `contact` Edge Function, which emails the support inbox.
   ============================================================ */
.contact-section { padding-block: calc(var(--header-height) + clamp(40px, 6vw, 88px)) clamp(72px, 9vw, 128px); }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact-intro h1 {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: var(--fw-medium);
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.contact-intro h1 em { font-style: italic; font-weight: 400; color: var(--color-accent-hover); }
.contact-lede { margin-top: var(--space-5); max-width: 520px; font-size: var(--text-md); line-height: 1.6; color: var(--ink-muted); }
.contact-quick { margin-top: clamp(32px, 4vw, 48px); max-width: 520px; }
.contact-quick h2 { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 1.4; color: var(--ink); }
.contact-quick ul { margin: var(--space-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink-line); }
.contact-quick li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-line);
}
.contact-quick a { font-weight: var(--fw-medium); color: var(--ink); }
.contact-quick a:hover { color: var(--green-ink); }
.contact-quick span { font-size: var(--text-sm); color: var(--ink-muted); text-align: right; }
.contact-post { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--ink-muted); }

.contact-card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--ink-line);
  border-radius: calc(var(--radius-xl, 20px) * var(--sq, 1));
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(11, 43, 34, 0.04), 0 12px 32px -12px rgba(11, 43, 34, 0.12);
}
#contact-form { display: grid; gap: var(--space-5); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); }
.contact-fields .field.is-wide { grid-column: 1 / -1; }
.contact-fields .field input { width: 100%; min-width: 0; }
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: calc(var(--radius-md) * var(--sq, 1));
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field select {
  height: 48px;
  padding-right: 44px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5850' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}
.field textarea { min-height: 168px; padding-block: 12px; line-height: 1.55; resize: vertical; }
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(4, 133, 92, 0.16); }
.field textarea::placeholder { color: var(--color-text-subtle); }
.field-row small { font-size: 12px; font-weight: 400; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.field-row small.is-near { color: #9B2C1F; }
.contact-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-hint { margin-top: calc(-1 * var(--space-2)); font-size: var(--text-sm); color: var(--ink-muted); }
#contact-form .btn[type="submit"] { background: var(--ink); border-color: var(--ink); color: #fff; }
#contact-form .btn[type="submit"]:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
#contact-form .btn[type="submit"]:disabled { opacity: 0.6; cursor: progress; }

.contact-done { display: grid; justify-items: start; gap: var(--space-3); padding-block: var(--space-4); outline: none; }
.contact-done svg {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: var(--color-accent-subtle);
  color: var(--green-ink);
  corner-shape: round;
}
.contact-done h2 { margin-top: var(--space-2); font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -0.04em; color: var(--ink); }
.contact-done p { color: var(--ink-muted); line-height: 1.6; }
.contact-done .btn { margin-top: var(--space-3); }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-card { max-width: 620px; }
}
@media (max-width: 520px) {
  .contact-fields { grid-template-columns: minmax(0, 1fr); }
  .contact-quick li { flex-direction: column; gap: 2px; }
  .contact-quick span { text-align: left; }
}