/* ==========================================================================
   Coconut Desk
   Theme: "Fresh farm". Light by default, dark available (html[data-theme="dark"]).
   Every colour comes from the tokens below; chart colours are read from them in app.js.
   ========================================================================== */

:root {
  color-scheme: light;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* Surfaces */
  --bg: #f4f1e8;
  --surface: #ffffff;
  --surface-2: #faf8f2;
  --surface-3: #efebdf;
  --line: #e7e2d4;
  --line-strong: #d3ccb8;

  /* Ink */
  --ink: #1c2a22;
  --ink-2: #44554a;
  --muted: #637267;

  /* Brand and states */
  --brand: #1f6f43;
  --brand-strong: #17573a;
  --brand-soft: #e2f0e7;
  --on-brand: #ffffff;
  --profit: #1a7a47;
  --expense: #b5432f;
  --amber: #8a5508;
  --good-soft: #e2f0e7;
  --bad-soft: #f8e4de;
  --bad-ink: #a03a28;
  --amber-soft: #fbf0d9;
  --info-soft: #e1edf6;
  --info-ink: #24608f;
  --focus: rgba(31, 111, 67, 0.32);

  /* Hero KPI */
  --hero-bg: #1f6f43;
  --hero-bg-negative: #a8452f;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(28, 42, 34, 0.06);
  --shadow: 0 1px 2px rgba(28, 42, 34, 0.05), 0 18px 40px -24px rgba(28, 42, 34, 0.3);
  --shadow-pop: 0 20px 44px -14px rgba(28, 42, 34, 0.3);
  --overlay: rgba(20, 30, 24, 0.46);
  --radius: 20px;
  --radius-sm: 12px;
  --shadow-hover: 0 2px 4px rgba(28, 42, 34, 0.06), 0 30px 54px -26px rgba(28, 42, 34, 0.42);

  /* Header band */
  --band-top: #123d29;
  --band-bottom: #1b5a3b;
  --band-glow: rgba(96, 190, 140, 0.4);
  --on-band: #ffffff;
  --on-band-2: rgba(255, 255, 255, 0.76);
  --glass: rgba(255, 255, 255, 0.1);
  --glass-strong: rgba(255, 255, 255, 0.17);
  --glass-line: rgba(255, 255, 255, 0.2);

  /* Toast and banner */
  --toast-bg: #1c2a22;
  --toast-ink: #f4f1e8;
  --toast-accent: #86dcaa;
  --banner-bg: #fbf0d9;
  --banner-ink: #5f3c05;
  --banner-line: #e8c987;

  /* Record type badges */
  --badge-production-bg: #e2f0e7;
  --badge-production-ink: #17573a;
  --badge-expense-bg: #f8e4de;
  --badge-expense-ink: #a03a28;
  --badge-revenue-bg: #e1edf6;
  --badge-revenue-ink: #24608f;
  --badge-husk-bg: #fbf0d9;
  --badge-husk-ink: #7a4b06;
  --badge-tree-bg: #efebdf;
  --badge-tree-ink: #44554a;

  /* Charts (validated palette; read by app.js) */
  --chart-tick: #637267;
  --chart-grid: rgba(28, 42, 34, 0.08);
  --chart-boundary: rgba(28, 42, 34, 0.35);
  --chart-revenue: #1f8a5b;
  --chart-expense: #c8553d;
  --chart-profit: #1c2a22;
  --chart-blue: #2f78b0;
  --chart-ochre: #c27e0e;
  --chart-spark: #3f9f72;
  --grade-a: #0f4a30;
  --grade-b: #1f7a50;
  --grade-c: #3f9f72;
  --grade-d: #6cbd8d;
  --chart-neutral: #b4ad9b;
  --ramp-dark: #0f4a30;
  --ramp-light: #6cbd8d;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1813;
  --surface: #15231b;
  --surface-2: #1a2b21;
  --surface-3: #223629;
  --line: #243629;
  --line-strong: #34503e;

  --ink: #e8f0ea;
  --ink-2: #b5c4b9;
  --muted: #8ea194;

  --brand: #3fae74;
  --brand-strong: #58c488;
  --brand-soft: #1d3a2a;
  --on-brand: #06140c;
  --profit: #4cc084;
  --expense: #ee8a72;
  --amber: #e3a93f;
  --good-soft: #1d3a2a;
  --bad-soft: #3d231d;
  --bad-ink: #f0a08c;
  --amber-soft: #3a2f15;
  --info-soft: #1b3042;
  --info-ink: #8fc2ea;
  --focus: rgba(88, 196, 136, 0.4);

  --hero-bg: #1c5b3a;
  --hero-bg-negative: #8e3a28;
  --band-top: #0a2218;
  --band-bottom: #0f3324;
  --band-glow: rgba(70, 170, 120, 0.28);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 54px -26px rgba(0, 0, 0, 0.75);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 30px -16px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 20px 44px -14px rgba(0, 0, 0, 0.7);
  --overlay: rgba(2, 8, 5, 0.66);

  --toast-bg: #e8f0ea;
  --toast-ink: #0e1813;
  --toast-accent: #17573a;
  --banner-bg: #3a2f15;
  --banner-ink: #f6dfa8;
  --banner-line: #6b5420;

  --badge-production-bg: #1d3a2a;
  --badge-production-ink: #8fdcb2;
  --badge-expense-bg: #3d231d;
  --badge-expense-ink: #f0a08c;
  --badge-revenue-bg: #1b3042;
  --badge-revenue-ink: #8fc2ea;
  --badge-husk-bg: #3a2f15;
  --badge-husk-ink: #e8c070;
  --badge-tree-bg: #223629;
  --badge-tree-ink: #b5c4b9;

  --chart-tick: #8ea194;
  --chart-grid: rgba(232, 240, 234, 0.09);
  --chart-boundary: rgba(232, 240, 234, 0.38);
  --chart-revenue: #2a9a74;
  --chart-expense: #d9694a;
  --chart-profit: #e8f0ea;
  --chart-blue: #4a8fc8;
  --chart-ochre: #b9801a;
  --chart-spark: #58c488;
  --grade-a: #8fdcb2;
  --grade-b: #5dc08e;
  --grade-c: #3a9c6f;
  --grade-d: #26704f;
  --chart-neutral: #5f6e64;
  --ramp-dark: #26704f;
  --ramp-light: #8fdcb2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Money and figures line up in columns. */
.kpi h2 + p,
td,
.schedule-main,
.weather-temp,
.record-mobile-amount {
  font-variant-numeric: tabular-nums;
}

.layout {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

/* ---------- Top bar (desktop) ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1320px;
  height: 60px;
  margin: 0 auto;
  padding: 0 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topnav::-webkit-scrollbar {
  display: none;
}

.topnav a {
  flex: none;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.topnav a:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.topnav a.is-active {
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  /* Stays on the right even when the section links are hidden (estate page). */
  margin-left: auto;
}

.task-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--expense);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* ---------- Page head ---------- */

.hero {
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0;
  color: var(--brand);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
}

h1 {
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-copy {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.dashboard-section {
  margin-top: 40px;
  scroll-margin-top: 76px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.section-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.section-divider {
  flex: 1;
  height: 1px;
  margin: 0;
  background: var(--line);
}

/* ---------- Date range ---------- */

.range-card {
  padding: 16px 18px;
  margin-top: 12px;
}

.range-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.range-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.range-header p {
  margin: 0;
  font-size: 0.8rem;
}

.range-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.range-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 12px;
  margin-top: 12px;
  align-items: end;
}

/* ---------- KPI cards ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.kpi-grid-secondary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 16px;
}

.kpi-grid-rainfall {
  grid-template-columns: minmax(220px, 1fr);
  margin-top: 16px;
}

.forecast-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.kpi {
  min-height: 136px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  container-type: inline-size;
}

.kpi h2 {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.kpi h2 + p {
  margin: 8px 0 0;
  /* Shrinks with the card so seven- and eight-digit amounts still fit on one line. */
  font-size: clamp(1.05rem, 11.5cqw, 1.65rem);
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.kpi .kpi-change {
  align-self: flex-start;
  margin: 10px 0 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
}

.kpi .kpi-change.muted,
.kpi-hero .kpi-change.muted {
  background: transparent;
  padding-inline: 0;
}

.kpi .kpi-change.trend-good {
  background: var(--good-soft);
  color: var(--profit);
}

.kpi .kpi-change.trend-bad {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.kpi-spark {
  margin-top: auto;
  width: 100%;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

/* Net profit hero card: bigger, with a large gradient chart and a coloured top edge */
.kpi-hero {
  min-height: 210px;
  box-shadow: inset 0 3px 0 var(--brand), var(--shadow);
}

.kpi-hero.is-negative {
  box-shadow: inset 0 3px 0 var(--expense), var(--shadow);
}

.kpi-hero h2 + p {
  font-size: clamp(2rem, 11.5cqw, 3.1rem);
  letter-spacing: -0.035em;
}

.kpi-hero .kpi-spark {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
}

/* Forecast cards */
.forecast-kpi {
  border-style: dashed;
  border-color: var(--line-strong);
  box-shadow: none;
}

.forecast-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.forecast-confidence {
  margin: 8px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.confidence-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}

.confidence-high {
  color: var(--profit);
}

.confidence-high .confidence-dot {
  background: var(--profit);
}

.confidence-medium {
  color: var(--amber);
}

.confidence-medium .confidence-dot {
  background: var(--amber);
}

.confidence-low {
  color: var(--bad-ink);
}

.confidence-low .confidence-dot {
  background: var(--expense);
}

.trend-good {
  color: var(--profit);
}

.trend-bad {
  color: var(--bad-ink);
}

.kpi[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 10px);
  background: var(--toast-bg);
  color: var(--toast-ink);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 8;
}

.kpi[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 26px;
  width: 10px;
  height: 10px;
  background: var(--toast-bg);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
  z-index: 8;
}

.kpi[data-tooltip]:hover::after,
.kpi[data-tooltip]:hover::before {
  opacity: 1;
}

.kpi[data-tooltip]:hover::after {
  transform: translateY(0);
}

/* Loading shimmer until the first data arrives */
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.is-loading .kpi h2 + p,
.is-loading .kpi .kpi-change {
  color: transparent !important;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
  width: 62%;
}

.is-loading .kpi-hero h2 + p,
.is-loading .kpi-hero .kpi-change {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.12) 75%);
  background-size: 200% 100%;
}

/* ---------- Charts ---------- */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.financial-chart-wrap {
  margin-top: 20px;
}

.chart-grid > .chart-card:only-child {
  grid-column: 1 / -1;
}

.chart-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.forecast-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  margin-top: 16px;
}


.forecast-empty {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--bad-ink);
}

.forecast-settings {
  padding: 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.forecast-settings h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.forecast-scenario-wrap {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: grid;
  gap: 8px;
}

.forecast-scenario-wrap p {
  margin: 0;
  font-size: 0.8rem;
}

.scenario-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
}

.scenario-pill:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.scenario-pill input {
  margin: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
}

.chart-card,
.form-card,
.table-card {
  padding: 18px;
}

.chart-card h3,
.form-card h3,
.table-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

/* Charts draw at exactly the size of their box (Chart.js maintainAspectRatio is off). */
.chart-box {
  position: relative;
  width: 100%;
  height: 300px;
}

.chart-box-sm {
  height: 260px;
}

.chart-box-lg {
  height: 340px;
}

/* ---------- Operations and weather ---------- */

.operations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.weather-widget {
  display: grid;
  gap: 10px;
  height: auto;
  overflow: visible;
}

.weather-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.weather-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weather-icon {
  font-size: 1.6rem;
}

.weather-temp {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.weather-desc {
  margin: 2px 0 0;
  font-size: 0.82rem;
}

.weather-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  flex: 1;
  align-items: center;
}

.weather-metrics p {
  margin: 0;
}

.weather-metrics .muted {
  font-size: 0.7rem;
  line-height: 1.2;
}

.weather-metrics p:not(.muted) {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.weather-divider {
  border-top: 1px solid var(--line);
  margin: 2px 0;
}

.weather-forecast-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
}

.weather-day {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 8px 4px;
  text-align: center;
  overflow: hidden;
}

.weather-day p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.3;
}

.weather-day .day-icon {
  font-size: 1.1rem;
}

.weather-day .day-rain {
  color: var(--muted);
}

.weather-day .day-rain.has-rain,
.weather-day .day-rain.is-heavy {
  color: var(--info-ink);
}

.weather-day .day-rain.is-heavy {
  font-weight: 700;
}

.weather-alert {
  border: 1px solid var(--banner-line);
  background: var(--amber-soft);
  color: var(--banner-ink);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.3;
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.chart-head h3 {
  margin: 0;
}

.weather-metric-toggle {
  display: inline-flex;
  gap: 6px;
}

.weather-offset-wrap {
  margin-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.weather-offset-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.weather-offset-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
}

.weather-status {
  margin: 8px 0 0;
  font-size: 0.84rem;
}

.compact-card p {
  margin: 0 0 10px;
  font-size: 0.86rem;
}

.quick-actions {
  display: grid;
  gap: 8px;
}

/* Quick-add entries: soft green so four of them don't shout */
.slide-panel .quick-actions button[data-open-modal] {
  background: var(--brand-soft);
  color: var(--brand-strong);
  border-color: transparent;
  text-align: left;
  padding: 11px 14px;
}

.slide-panel .quick-actions button[data-open-modal]:hover {
  background: var(--brand);
  color: var(--on-brand);
}

/* ---------- Up next / schedule ---------- */

.schedule-list {
  display: grid;
  gap: 10px;
}

.schedule-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface-2);
}

.schedule-item.is-overdue {
  border-left-color: var(--expense);
  background: var(--bad-soft);
}

.schedule-item.is-soon {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.schedule-item .muted {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 500;
}

.schedule-main {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}

.schedule-meta {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.schedule-item.is-overdue .schedule-meta {
  color: var(--bad-ink);
  font-weight: 600;
}

.schedule-item.is-soon .schedule-meta {
  color: var(--banner-ink);
  font-weight: 600;
}

.upnext-card {
  padding: 16px 18px;
  margin-top: 12px;
}

.upnext-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
}

.upnext-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.upnext-list .schedule-main {
  font-size: 1.1rem;
}

/* ---------- Expenses ---------- */

.expense-breakdown {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.expense-table-collapse {
  overflow: hidden;
  max-height: 420px;
  transition: max-height 250ms ease;
}

/* ---------- Records table ---------- */

.table-card {
  margin-top: 0;
}

.table-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.records-controls {
  align-items: flex-end;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 11px 10px;
  font-size: 0.86rem;
}

th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

tbody tr:hover {
  background: var(--surface-2);
}

tbody tr:last-child td {
  border-bottom: 0;
}

td:nth-child(4) {
  font-weight: 600;
}

.table-footer {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.record-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.record-type-production {
  background: var(--badge-production-bg);
  color: var(--badge-production-ink);
}

.record-type-expense {
  background: var(--badge-expense-bg);
  color: var(--badge-expense-ink);
}

.record-type-revenue {
  background: var(--badge-revenue-bg);
  color: var(--badge-revenue-ink);
}

.record-type-husk_sale {
  background: var(--badge-husk-bg);
  color: var(--badge-husk-ink);
}

.record-type-tree_count {
  background: var(--badge-tree-bg);
  color: var(--badge-tree-ink);
}

/* ---------- Forms ---------- */

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
}

input,
select {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:hover,
select:hover {
  border-color: var(--muted);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus);
}

input:disabled {
  color: var(--muted);
  background: var(--surface-3);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tree-count-form,
.edit-fields {
  display: grid;
  gap: 10px;
}

.type-filter {
  min-width: 170px;
}

.type-filter select {
  margin-top: 5px;
}

/* ---------- Buttons ---------- */

button {
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--on-brand);
  background: var(--brand);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}

button:hover {
  background: var(--brand-strong);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible,
a:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

.secondary-btn,
.row-edit-btn,
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.secondary-btn:hover,
.row-edit-btn:hover,
.btn-ghost:hover {
  background: var(--surface-3);
}

.btn-ghost {
  color: var(--ink-2);
}

.danger-btn,
.row-delete-btn,
.task-delete-btn {
  background: var(--bad-soft);
  color: var(--bad-ink);
  border-color: transparent;
}

.danger-btn:hover,
.row-delete-btn:hover,
.task-delete-btn:hover {
  background: var(--expense);
  color: #ffffff;
}

.row-actions {
  display: flex;
  gap: 8px;
}

.row-edit-btn,
.row-delete-btn {
  font-size: 0.78rem;
  padding: 6px 14px;
  min-width: 60px;
}

.icon-btn {
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-2);
  background: var(--surface-3);
}

.icon-btn:hover {
  background: var(--line-strong);
}

.text-btn {
  margin-top: 8px;
  background: transparent;
  color: var(--brand-strong);
  border: 1px solid var(--line-strong);
  padding: 6px 12px;
  font-size: 0.8rem;
}

.text-btn:hover {
  background: var(--brand-soft);
}

/* Pills: date presets and chart toggles */
.chip,
.metric-btn,
.offset-btn {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
}

.chip:hover,
.metric-btn:hover,
.offset-btn:hover {
  background: var(--surface-3);
}

.chip.is-active,
.metric-btn.is-active,
.offset-btn.is-active {
  background: var(--brand-soft);
  color: var(--brand-strong);
  border-color: var(--brand);
}

.metric-btn,
.offset-btn {
  padding: 5px 12px;
  font-size: 0.76rem;
}

.utility-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--on-brand);
  background: var(--brand);
  box-shadow: var(--shadow-pop);
  z-index: 30;
}

.utility-fab::after {
  content: attr(data-fab-tooltip);
  position: absolute;
  right: 66px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--toast-bg);
  color: var(--toast-ink);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.utility-fab:hover::after {
  opacity: 1;
  transition-delay: 300ms;
}

.task-panel-tab {
  position: fixed;
  right: -18px;
  top: 44%;
  transform: rotate(-90deg);
  transform-origin: center;
  z-index: 30;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  padding: 10px 16px;
  border-radius: 12px 12px 0 0;
  font-size: 0.84rem;
  font-weight: 600;
}

.task-panel-tab:hover {
  background: var(--surface-3);
}

.task-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--expense);
  color: #ffffff;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* ---------- Slide panels and tasks ---------- */

.panel-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 47;
}

.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 92vw);
  height: 100vh;
  padding: 18px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  z-index: 48;
  transform: translateX(100%);
  transition: transform 250ms ease;
  overflow-y: auto;
}

.slide-panel.is-open {
  transform: translateX(0);
}

.slide-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.slide-panel-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.slide-panel-section {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.slide-panel-section h4 {
  margin: 0 0 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-2);
}

.task-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 12px;
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: 70vh;
  overflow: auto;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.task-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.task-left input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.task-text {
  font-size: 0.86rem;
  color: var(--ink);
  word-break: break-word;
}

.task-text.done {
  color: var(--muted);
  text-decoration: line-through;
}

.task-delete-btn {
  padding: 5px 10px;
  font-size: 0.74rem;
}

/* ---------- Utilities ---------- */

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

.hidden {
  display: none !important;
}

.mobile-sticky-header {
  display: none;
}

.mobile-section-menu {
  display: none;
}

.records-mobile-list {
  display: none;
}

#openTaskFromUtility {
  display: none;
}

.quick-bar {
  display: none;
}

/* ---------- Modals ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 55;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(4px);
}

.modal-panel {
  position: relative;
  width: min(760px, calc(100% - 18px));
  max-height: calc(100dvh - 18px);
  overflow-y: auto;
  margin: 9px auto;
  padding: 20px;
  box-shadow: var(--shadow-pop);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.modal-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.modal-open {
  overflow: hidden;
}

/* ---------- Sync banner and toasts ---------- */

.sync-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 16px;
  background: var(--banner-bg);
  color: var(--banner-ink);
  border-bottom: 1px solid var(--banner-line);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}

.sync-banner-btn {
  background: var(--banner-ink);
  color: var(--banner-bg);
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.sync-banner-btn:hover {
  background: var(--banner-ink);
  filter: brightness(1.15);
}

.sync-blocked .utility-fab,
.sync-blocked #clearDataBtn,
.sync-blocked [data-edit-id],
.sync-blocked [data-delete-id],
.sync-blocked #addTopBtn {
  opacity: 0.45;
}

.sync-blocked .quick-bar button:not(#quickBarMore) {
  opacity: 0.45;
}

.toast-host {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 11px 14px;
  background: var(--toast-bg);
  color: var(--toast-ink);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  font-size: 0.86rem;
  pointer-events: auto;
}

.toast-action {
  flex: none;
  background: transparent;
  color: var(--toast-accent);
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 700;
}

.toast-action:hover {
  background: transparent;
  filter: brightness(1.15);
}

/* ---------- Collapsible metrics ---------- */

.more-metrics-toggle {
  display: block;
  margin: 14px 0 0;
}

.more-metrics {
  margin-top: 4px;
}

.more-metrics .kpi-grid-secondary {
  margin-top: 14px;
}

/* ---------- Mobile header bits (hidden on desktop) ---------- */

.mobile-header-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.mobile-header-range {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
}

.mobile-header-actions {
  display: flex;
  align-items: center;
}

/* ---------- Desktop-only: top bar replaces the floating buttons ---------- */

@media (min-width: 769px) {
  .utility-fab,
  .task-panel-tab,
  .quick-bar {
    display: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1440px) {
  .forecast-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .forecast-layout {
    grid-template-columns: 1fr;
  }

  .operations-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1240px) {
  .chart-grid-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .kpi-grid,
  .kpi-grid-secondary,
  .kpi-grid-rainfall,
  .chart-grid,
  .chart-grid-three,
  .forecast-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-grid > .kpi-hero {
    grid-column: 1 / -1;
  }

  .task-panel-tab {
    right: -14px;
  }

  .topnav a {
    padding: 7px 9px;
  }
}

@media (max-width: 768px) {
  .topbar {
    display: none;
  }

  .layout {
    padding: 60px 14px 34px;
  }

  .mobile-sticky-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 6px 0 14px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    z-index: 44;
  }

  .mobile-sticky-header span {
    font-size: 14px;
    font-weight: 600;
  }

  .mobile-header-title span:first-child {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: -0.01em;
  }

  .mobile-menu-btn,
  .mobile-sticky-header .theme-toggle {
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
    background: transparent;
    color: var(--ink);
    border: 0;
    padding: 0;
  }

  .mobile-sticky-header .theme-toggle:hover,
  .mobile-menu-btn:hover {
    background: var(--surface-3);
  }

  .mobile-section-menu {
    position: absolute;
    right: 8px;
    top: 56px;
    width: min(270px, calc(100vw - 16px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-pop);
    padding: 6px;
    display: grid;
    gap: 2px;
  }

  .mobile-section-menu button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    min-height: 44px;
    font-size: 14px;
    background: transparent;
    color: var(--ink);
    font-weight: 500;
  }

  .mobile-section-menu button:hover {
    background: var(--surface-3);
  }

  .dashboard-section {
    scroll-margin-top: 62px;
  }

  .kpi-grid,
  .kpi-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-grid-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chart-grid,
  .chart-grid-three,
  .forecast-kpi-grid,
  .three-col {
    grid-template-columns: 1fr;
  }

  .upnext-list {
    grid-template-columns: 1fr;
  }

  .range-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #section-operations .operations-grid > article:nth-child(2) {
    order: 1;
    grid-column: span 2;
  }

  #section-operations .operations-grid > article:nth-child(1) {
    order: 2;
    grid-column: span 2;
  }

  .weather-current {
    flex-direction: column;
    align-items: flex-start;
  }

  .weather-metrics {
    width: 100%;
  }

  .weather-forecast-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .section-header h2 {
    font-size: 1.3rem;
  }

  .chart-box {
    height: 260px;
  }

  .chart-box-sm {
    height: 230px;
  }

  .chart-box-lg {
    height: 290px;
  }

  th,
  td {
    font-size: 13px;
    padding: 9px;
  }

  .table-header,
  .table-actions,
  .range-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-panel-tab {
    right: 16px;
    top: auto;
    bottom: 92px;
    transform: none;
    border-radius: 999px;
  }

  .utility-fab {
    display: none;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .quick-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    display: grid;
    /* One column per visible button (the bill button shows only where bills can be read). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }

  .quick-bar button {
    min-height: 46px;
    padding: 8px 2px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Five buttons (with "+ Bill") need slightly smaller labels to stay on one line. */
  .quick-bar:has(.bill-open:not(.hidden)) {
    gap: 6px;
  }

  .quick-bar:has(.bill-open:not(.hidden)) button {
    font-size: 0.76rem;
  }

  .toast-host {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 430px) {
  body {
    overflow-x: hidden;
  }

  .layout {
    padding: 62px 14px 24px;
  }

  .hero {
    margin-bottom: 12px;
  }

  .eyebrow,
  .hero-copy {
    display: none;
  }

  h1 {
    font-size: 1.55rem;
  }

  .dashboard-section {
    margin-top: 28px;
    scroll-margin-top: 62px;
  }

  .section-header {
    margin-bottom: 12px;
  }

  .section-header h2 {
    font-size: 1.2rem;
  }

  .card,
  .chart-card,
  .form-card,
  .table-card {
    padding: 14px;
  }

  .range-card,
  .upnext-card {
    padding: 14px;
  }

  .range-header p {
    display: none;
  }

  .range-presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -14px;
    padding-inline: 14px;
    scrollbar-width: none;
  }

  .range-presets::-webkit-scrollbar {
    display: none;
  }

  .range-presets .chip {
    flex: none;
    min-height: 38px;
  }

  .range-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .range-controls input,
  .range-controls select {
    min-height: 44px;
    min-width: 0;
    padding-inline: 8px;
  }

  .kpi-grid,
  .kpi-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kpi {
    min-height: 112px;
  }

  .kpi-grid article,
  .kpi-grid-secondary article {
    padding: 12px;
  }

  .kpi-grid-secondary article:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .kpi h2 {
    font-size: 0.74rem;
  }

  .kpi-hero {
    min-height: 170px;
  }

  .kpi .kpi-change {
    font-size: 0.7rem;
  }

  .kpi-spark {
    display: none;
  }

  .kpi-hero .kpi-spark {
    display: block;
  }

  .chart-card h3 {
    font-size: 0.95rem;
  }

  .chart-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .weather-metric-toggle .metric-btn,
  .weather-offset-controls .offset-btn {
    min-height: 34px;
    font-size: 11px;
  }

  .weather-offset-wrap {
    width: 100%;
    gap: 6px;
  }

  .weather-offset-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .weather-offset-note {
    font-size: 11px;
  }

  .operations-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  #section-operations .operations-grid > article {
    grid-column: auto !important;
    width: 100%;
  }

  #section-operations .operations-grid > article:nth-child(2) {
    order: 1;
  }

  #section-operations .operations-grid > article:nth-child(1) {
    order: 2;
  }

  .weather-temp {
    font-size: 26px;
  }

  .weather-current {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .weather-main {
    min-width: 120px;
  }

  .weather-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    flex: 1;
  }

  .weather-desc {
    font-size: 13px;
  }

  .weather-metrics .muted {
    font-size: 10px;
  }

  .weather-metrics p:not(.muted) {
    font-size: 13px;
  }

  .weather-day p:first-child {
    font-size: 11px;
  }

  .weather-forecast-grid {
    gap: 6px;
  }

  .weather-day p {
    white-space: nowrap;
  }

  .weather-day .day-icon {
    font-size: 20px;
  }

  .weather-day p:nth-child(3) {
    font-size: 11px;
  }

  .weather-day .day-rain {
    font-size: 10px;
  }

  .schedule-main,
  .schedule-meta {
    font-size: 14px;
  }

  .schedule-item .muted {
    font-size: 13px;
    font-weight: 600;
  }

  #treeCountDate,
  #treeCountValue,
  #treeCountForm button {
    min-height: 44px;
    width: 100%;
  }

  .table-wrap {
    display: none;
  }

  .records-mobile-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 8px;
  }

  .record-mobile-item {
    border-bottom: 1px solid var(--line);
    padding: 12px 0 14px;
    overflow: visible;
  }

  .record-mobile-item:last-child {
    border-bottom: 0;
  }

  .record-mobile-top,
  .record-mobile-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .record-mobile-bottom {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .record-mobile-date {
    font-size: 13px;
    color: var(--muted);
  }

  .record-type-badge {
    font-size: 11px;
    padding: 3px 9px;
  }

  .record-mobile-details {
    margin: 6px 0;
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .record-mobile-amount {
    font-size: 15px;
    font-weight: 700;
    width: 100%;
    margin-bottom: 6px;
  }

  .record-mobile-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
  }

  .record-mobile-actions button {
    min-width: 72px;
    padding: 8px 12px;
  }

  .record-mobile-actions button,
  #recordTypeFilter,
  #clearDataBtn,
  #recordsLoadMoreBtn {
    min-height: 44px;
  }

  .records-controls {
    width: 100%;
    display: grid;
    gap: 12px;
  }

  .type-filter,
  .type-filter select,
  #clearDataBtn,
  #recordsLoadMoreBtn {
    width: 100%;
  }

  #clearDataBtn {
    margin-top: 12px;
    font-size: 13px;
    background: transparent;
    border: 1px solid var(--expense);
    color: var(--bad-ink);
  }

  .task-panel-tab {
    display: none !important;
  }

  .slide-panel {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 58vh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }

  .slide-panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    margin: 0 auto 12px;
  }

  .slide-panel.is-open {
    transform: translateY(0);
  }

  .slide-panel .quick-actions button,
  .slide-panel .task-form button,
  .slide-panel .task-form input {
    min-height: 48px;
    width: 100%;
  }

  #openTaskFromUtility {
    display: block;
  }

  .task-form {
    grid-template-columns: 1fr;
  }

  .task-back-btn {
    display: inline-flex !important;
    min-height: 44px;
    align-items: center;
  }

  .chart-card,
  .chart-card canvas {
    touch-action: pan-y;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   Polish pass: header band, depth, icons, motion
   ========================================================================== */

/* ---------- Top bar joins the header band ---------- */

.topbar {
  background: var(--band-top);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.brand,
.brand-name {
  color: var(--on-band);
}

.topnav a {
  color: var(--on-band-2);
}

.topnav a:hover {
  background: var(--glass-strong);
  color: #ffffff;
}

.topnav a.is-active {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.topbar .btn-ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.topbar .btn-ghost:hover {
  background: var(--glass-strong);
}

.topbar #addTopBtn {
  background: #f4f1e8;
  color: #123d29;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
}

.topbar #addTopBtn:hover {
  background: #ffffff;
}

/* ---------- Header band ---------- */

.page-band {
  position: relative;
  overflow: hidden;
  color: var(--on-band);
  padding: 40px 0 150px;
  background:
    radial-gradient(900px 440px at 88% -12%, var(--band-glow), transparent 62%),
    radial-gradient(600px 300px at 4% 110%, rgba(255, 255, 255, 0.06), transparent 70%),
    linear-gradient(180deg, var(--band-top) 0%, var(--band-bottom) 100%);
}

/* Palm frond artwork, kept faint so text stays clear (also behind the landing page's hero) */
.page-band::before,
.lp-hero::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -40px;
  width: 760px;
  height: 520px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 520'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round'%3E%3Cpath d='M740 500 C610 330 380 150 50 70' stroke-width='2.6' stroke-opacity='.22'/%3E%3Cpath d='M706.9 459.1 Q719.0 425.8 729.0 409.4' stroke-width='1.8' stroke-opacity='.15'/%3E%3Cpath d='M706.9 459.1 Q670.8 467.0 641.2 484.4' stroke-width='1.8' stroke-opacity='.15'/%3E%3Cpath d='M690.7 440.6 Q704.1 400.9 715.0 381.4' stroke-width='1.9' stroke-opacity='.15'/%3E%3Cpath d='M690.7 440.6 Q648.3 451.0 613.6 472.4' stroke-width='1.9' stroke-opacity='.15'/%3E%3Cpath d='M673.8 422.2 Q687.9 376.7 699.4 354.1' stroke-width='2.1' stroke-opacity='.15'/%3E%3Cpath d='M673.8 422.2 Q625.7 435.1 586.4 460.4' stroke-width='2.1' stroke-opacity='.15'/%3E%3Cpath d='M656.1 403.8 Q670.4 353.0 682.2 327.7' stroke-width='2.3' stroke-opacity='.15'/%3E%3Cpath d='M656.1 403.8 Q603.1 419.4 559.7 448.5' stroke-width='2.3' stroke-opacity='.15'/%3E%3Cpath d='M637.6 385.5 Q651.8 329.9 663.5 302.2' stroke-width='2.4' stroke-opacity='.15'/%3E%3Cpath d='M637.6 385.5 Q580.4 403.8 533.6 436.5' stroke-width='2.4' stroke-opacity='.15'/%3E%3Cpath d='M618.3 367.3 Q632.1 307.6 643.3 277.7' stroke-width='2.5' stroke-opacity='.15'/%3E%3Cpath d='M618.3 367.3 Q557.7 388.3 508.0 424.4' stroke-width='2.5' stroke-opacity='.15'/%3E%3Cpath d='M598.3 349.3 Q611.2 286.1 621.8 254.3' stroke-width='2.6' stroke-opacity='.15'/%3E%3Cpath d='M598.3 349.3 Q534.9 372.9 483.0 412.2' stroke-width='2.6' stroke-opacity='.15'/%3E%3Cpath d='M577.5 331.4 Q589.3 265.4 598.9 232.1' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M577.5 331.4 Q512.1 357.6 458.6 399.6' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M555.9 313.7 Q566.3 245.7 574.9 211.2' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M555.9 313.7 Q489.3 342.2 434.8 386.8' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M533.5 296.3 Q542.4 226.8 549.7 191.6' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M533.5 296.3 Q466.4 326.9 411.5 373.5' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M510.3 279.2 Q517.6 209.0 523.5 173.4' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M510.3 279.2 Q443.5 311.6 388.8 359.8' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M486.4 262.3 Q491.9 192.2 496.3 156.5' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M486.4 262.3 Q420.4 296.2 366.5 345.7' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M461.7 245.8 Q465.3 176.4 468.3 141.1' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M461.7 245.8 Q397.3 280.8 344.6 331.0' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M436.2 229.6 Q438.1 161.7 439.6 127.1' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M436.2 229.6 Q374.0 265.4 323.1 315.7' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M409.9 213.8 Q410.1 148.0 410.2 114.4' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M409.9 213.8 Q350.5 250.0 301.8 299.9' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M382.9 198.5 Q381.4 135.3 380.2 103.2' stroke-width='2.6' stroke-opacity='.15'/%3E%3Cpath d='M382.9 198.5 Q326.7 234.6 280.7 283.6' stroke-width='2.6' stroke-opacity='.15'/%3E%3Cpath d='M355.1 183.6 Q352.1 123.7 349.7 93.2' stroke-width='2.5' stroke-opacity='.15'/%3E%3Cpath d='M355.1 183.6 Q302.5 219.1 259.5 266.7' stroke-width='2.5' stroke-opacity='.15'/%3E%3Cpath d='M326.5 169.2 Q322.3 113.1 318.8 84.6' stroke-width='2.4' stroke-opacity='.15'/%3E%3Cpath d='M326.5 169.2 Q278.0 203.7 238.3 249.4' stroke-width='2.4' stroke-opacity='.15'/%3E%3Cpath d='M297.1 155.3 Q291.8 103.4 287.6 77.1' stroke-width='2.3' stroke-opacity='.15'/%3E%3Cpath d='M297.1 155.3 Q252.9 188.4 216.8 231.6' stroke-width='2.3' stroke-opacity='.15'/%3E%3Cpath d='M266.9 141.9 Q260.9 94.7 256.0 70.8' stroke-width='2.1' stroke-opacity='.15'/%3E%3Cpath d='M266.9 141.9 Q227.4 173.1 195.0 213.4' stroke-width='2.1' stroke-opacity='.15'/%3E%3Cpath d='M236.0 129.1 Q229.5 87.0 224.2 65.6' stroke-width='2.0' stroke-opacity='.15'/%3E%3Cpath d='M236.0 129.1 Q201.2 158.0 172.7 194.8' stroke-width='2.0' stroke-opacity='.15'/%3E%3Cpath d='M204.3 116.9 Q197.6 80.1 192.2 61.5' stroke-width='1.8' stroke-opacity='.15'/%3E%3Cpath d='M204.3 116.9 Q174.3 143.1 149.8 176.0' stroke-width='1.8' stroke-opacity='.15'/%3E%3Cpath d='M171.8 105.4 Q165.3 74.1 160.0 58.4' stroke-width='1.7' stroke-opacity='.15'/%3E%3Cpath d='M171.8 105.4 Q146.8 128.3 126.3 157.0' stroke-width='1.7' stroke-opacity='.15'/%3E%3Cpath d='M138.5 94.5 Q132.5 69.1 127.6 56.3' stroke-width='1.5' stroke-opacity='.15'/%3E%3Cpath d='M138.5 94.5 Q118.5 113.8 102.2 137.7' stroke-width='1.5' stroke-opacity='.15'/%3E%3Cpath d='M104.5 84.4 Q99.4 65.2 95.3 55.6' stroke-width='1.3' stroke-opacity='.15'/%3E%3Cpath d='M104.5 84.4 Q89.7 99.4 77.6 117.8' stroke-width='1.3' stroke-opacity='.15'/%3E%3Cpath d='M69.7 74.9 Q64.6 57.6 60.5 49.0' stroke-width='1.2' stroke-opacity='.15'/%3E%3Cpath d='M69.7 74.9 Q56.5 88.9 45.8 105.9' stroke-width='1.2' stroke-opacity='.15'/%3E%3Cg transform='translate(250 330) rotate(-14) scale(.7)'%3E%3Cpath d='M740 500 C610 330 380 150 50 70' stroke-width='2.6' stroke-opacity='.22'/%3E%3Cpath d='M706.9 459.1 Q719.0 425.8 729.0 409.4' stroke-width='1.8' stroke-opacity='.15'/%3E%3Cpath d='M706.9 459.1 Q670.8 467.0 641.2 484.4' stroke-width='1.8' stroke-opacity='.15'/%3E%3Cpath d='M687.6 437.1 Q701.1 396.3 712.2 376.1' stroke-width='2.0' stroke-opacity='.15'/%3E%3Cpath d='M687.6 437.1 Q644.0 448.0 608.3 470.1' stroke-width='2.0' stroke-opacity='.15'/%3E%3Cpath d='M667.1 415.2 Q681.4 367.6 693.0 343.9' stroke-width='2.2' stroke-opacity='.15'/%3E%3Cpath d='M667.1 415.2 Q617.1 429.1 576.2 455.9' stroke-width='2.2' stroke-opacity='.15'/%3E%3Cpath d='M645.6 393.3 Q659.9 339.7 671.7 313.0' stroke-width='2.4' stroke-opacity='.15'/%3E%3Cpath d='M645.6 393.3 Q590.1 410.5 544.7 441.7' stroke-width='2.4' stroke-opacity='.15'/%3E%3Cpath d='M623.0 371.6 Q636.9 312.9 648.2 283.4' stroke-width='2.5' stroke-opacity='.15'/%3E%3Cpath d='M623.0 371.6 Q563.1 392.0 514.1 427.3' stroke-width='2.5' stroke-opacity='.15'/%3E%3Cpath d='M599.2 350.1 Q612.2 287.1 622.8 255.4' stroke-width='2.6' stroke-opacity='.15'/%3E%3Cpath d='M599.2 350.1 Q536.0 373.7 484.2 412.8' stroke-width='2.6' stroke-opacity='.15'/%3E%3Cpath d='M574.4 328.9 Q586.0 262.5 595.6 229.1' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M574.4 328.9 Q508.8 355.4 455.2 397.8' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M548.5 307.9 Q558.4 239.3 566.6 204.5' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M548.5 307.9 Q481.6 337.1 426.9 382.4' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M521.4 287.3 Q529.5 217.4 536.1 181.9' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M521.4 287.3 Q454.4 318.9 399.5 366.4' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M493.3 267.1 Q499.3 196.9 504.2 161.2' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M493.3 267.1 Q427.0 300.6 372.8 349.8' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M464.1 247.3 Q467.9 177.9 471.0 142.5' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M464.1 247.3 Q399.5 282.3 346.7 332.4' stroke-width='2.8' stroke-opacity='.15'/%3E%3Cpath d='M433.7 228.1 Q435.4 160.3 436.8 125.8' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M433.7 228.1 Q371.8 264.0 321.1 314.2' stroke-width='2.7' stroke-opacity='.15'/%3E%3Cpath d='M402.3 209.4 Q401.9 144.3 401.7 111.1' stroke-width='2.6' stroke-opacity='.15'/%3E%3Cpath d='M402.3 209.4 Q343.7 245.6 295.8 295.3' stroke-width='2.6' stroke-opacity='.15'/%3E%3Cpath d='M369.7 191.3 Q367.5 129.7 365.7 98.3' stroke-width='2.5' stroke-opacity='.15'/%3E%3Cpath d='M369.7 191.3 Q315.2 227.2 270.6 275.6' stroke-width='2.5' stroke-opacity='.15'/%3E%3Cpath d='M336.1 173.9 Q332.3 116.5 329.2 87.3' stroke-width='2.4' stroke-opacity='.15'/%3E%3Cpath d='M336.1 173.9 Q286.2 208.9 245.4 255.2' stroke-width='2.4' stroke-opacity='.15'/%3E%3Cpath d='M301.3 157.2 Q296.2 104.8 292.0 78.1' stroke-width='2.3' stroke-opacity='.15'/%3E%3Cpath d='M301.3 157.2 Q256.5 190.6 219.9 234.1' stroke-width='2.3' stroke-opacity='.15'/%3E%3Cpath d='M265.5 141.3 Q259.4 94.3 254.5 70.6' stroke-width='2.1' stroke-opacity='.15'/%3E%3Cpath d='M265.5 141.3 Q226.1 172.4 193.9 212.5' stroke-width='2.1' stroke-opacity='.15'/%3E%3Cpath d='M228.5 126.2 Q222.0 85.3 216.6 64.6' stroke-width='1.9' stroke-opacity='.15'/%3E%3Cpath d='M228.5 126.2 Q194.9 154.4 167.3 190.4' stroke-width='1.9' stroke-opacity='.15'/%3E%3Cpath d='M190.5 111.9 Q183.8 77.4 178.4 60.0' stroke-width='1.7' stroke-opacity='.15'/%3E%3Cpath d='M190.5 111.9 Q162.6 136.7 139.9 167.9' stroke-width='1.7' stroke-opacity='.15'/%3E%3Cpath d='M151.3 98.6 Q145.1 70.9 139.9 57.0' stroke-width='1.5' stroke-opacity='.15'/%3E%3Cpath d='M151.3 98.6 Q129.4 119.3 111.4 145.1' stroke-width='1.5' stroke-opacity='.15'/%3E%3Cpath d='M111.0 86.2 Q105.8 65.8 101.4 55.6' stroke-width='1.3' stroke-opacity='.15'/%3E%3Cpath d='M111.0 86.2 Q95.2 102.2 82.2 121.7' stroke-width='1.3' stroke-opacity='.15'/%3E%3Cpath d='M69.7 74.9 Q64.6 57.6 60.5 49.0' stroke-width='1.2' stroke-opacity='.15'/%3E%3Cpath d='M69.7 74.9 Q56.5 88.9 45.8 105.9' stroke-width='1.2' stroke-opacity='.15'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat right top / contain;
  pointer-events: none;
}

.page-band-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 36px;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-band .eyebrow {
  color: #9fe3bf;
}

.page-band h1 {
  margin: 8px 0 10px;
  color: #ffffff;
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
  letter-spacing: -0.03em;
}

.page-band .hero-copy {
  color: var(--on-band-2);
}

.page-band .hero {
  margin-bottom: 0;
}

/* Date range sits on the band as glass controls */
.page-band .range-card {
  margin-top: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-band .range-header h3 {
  color: var(--on-band-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-band .range-header p {
  display: none;
}

.page-band .chip {
  background: var(--glass);
  color: #ffffff;
  border-color: var(--glass-line);
}

.page-band .chip:hover {
  background: var(--glass-strong);
}

.page-band .chip.is-active {
  background: #ffffff;
  color: #123d29;
  border-color: #ffffff;
}

.page-band .range-controls label {
  color: var(--on-band-2);
}

.page-band .range-controls input {
  color-scheme: dark;
  background: var(--glass);
  color: #ffffff;
  border-color: var(--glass-line);
}

.page-band .range-controls input:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

.page-band .range-controls input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/* Up next: glass panel on the right */
.page-band .upnext-card {
  margin: 0;
  padding: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-band .upnext-title {
  margin: 0 0 12px;
  color: var(--on-band-2);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-band .upnext-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-band .schedule-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 4px solid rgba(255, 255, 255, 0.4);
}

.page-band .schedule-item .muted {
  color: var(--on-band-2);
}

.page-band .schedule-main {
  color: #ffffff;
}

.page-band .schedule-meta {
  color: var(--on-band-2);
}

.page-band .schedule-item.is-overdue {
  background: rgba(238, 130, 106, 0.22);
  border-left-color: #ff9d85;
}

.page-band .schedule-item.is-overdue .schedule-meta {
  color: #ffd6cc;
}

.page-band .schedule-item.is-soon {
  background: rgba(240, 190, 90, 0.2);
  border-left-color: #f2c46b;
}

.page-band .schedule-item.is-soon .schedule-meta {
  color: #ffe9b8;
}

/* ---------- Layout below the band ---------- */

.layout {
  padding-top: 0;
}

.dashboard-section {
  margin-top: 60px;
}

/* The first section rides up over the band so the cards overlap its edge */
#section-financial {
  margin-top: -118px;
  position: relative;
  z-index: 2;
}

#section-financial .section-header h2 {
  color: #ffffff;
}

#section-financial .section-divider {
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- Cards: depth, icons, hover ---------- */

.card {
  border-color: color-mix(in srgb, var(--line) 60%, transparent);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.kpi:hover,
.chart-card:hover,
.form-card:hover,
.table-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.kpi-hero:hover {
  box-shadow: inset 0 3px 0 var(--brand), var(--shadow-hover);
}

.kpi-hero.is-negative:hover {
  box-shadow: inset 0 3px 0 var(--expense), var(--shadow-hover);
}

.kpi {
  padding: 18px 20px;
  min-height: 150px;
}

.kpi h2 {
  padding-right: 46px;
}

.kpi-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.kpi-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi:has(#totalExpenses) .kpi-icon,
.kpi:has(#costPerNut) .kpi-icon,
.kpi:has(#laborCostPerNut) .kpi-icon {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.kpi:has(#rainfallPeriodTotal) .kpi-icon {
  background: var(--info-soft);
  color: var(--info-ink);
}

.kpi:has(#huskRevenueTotal) .kpi-icon,
.kpi:has(#totalNuts) .kpi-icon {
  background: var(--amber-soft);
  color: var(--amber);
}

.kpi h2 + p {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.kpi .kpi-change {
  margin-top: 12px;
}

/* Chart cards get a summary line in the header */
.chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  color: var(--ink-2);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

.chart-stats .stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chart-stats .stat b {
  color: var(--ink);
  font-weight: 700;
}

.chart-stats .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.chart-card h3 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* ---------- Motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.kpi-grid > .kpi,
.page-band .upnext-card,
.chart-card,
.forecast-settings,
.form-card,
.table-card {
  animation: rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.kpi-grid > .kpi:nth-child(2) { animation-delay: 70ms; }
.kpi-grid > .kpi:nth-child(3) { animation-delay: 140ms; }
.kpi-grid > .kpi:nth-child(4) { animation-delay: 210ms; }
.kpi-grid > .kpi:nth-child(5) { animation-delay: 280ms; }
.page-band .upnext-card { animation-delay: 120ms; }

/* ---------- Dark theme touches ---------- */

:root[data-theme="dark"] .kpi-hero {
  box-shadow: inset 0 3px 0 var(--brand), var(--shadow);
}

/* ---------- Phones ---------- */

@media (max-width: 1023px) {
  .page-band-inner {
    /* minmax(0, …) so the scrolling date-range strip can't widen the column past the screen */
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .page-band::before {
    opacity: 0.7;
  }
}

@media (max-width: 768px) {
  .mobile-sticky-header {
    background: var(--band-top);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mobile-sticky-header span,
  .mobile-menu-btn,
  .mobile-sticky-header .theme-toggle {
    color: #ffffff;
  }

  .mobile-header-range {
    color: var(--on-band-2) !important;
  }

  .mobile-sticky-header .theme-toggle:hover,
  .mobile-menu-btn:hover {
    background: var(--glass-strong);
  }

  .page-band {
    padding: 76px 0 130px;
  }

  .page-band-inner {
    padding: 0 14px;
  }

  .layout {
    padding: 0 14px 34px;
  }

  .page-band h1 {
    font-size: 2rem;
  }

  .page-band .hero-copy {
    display: block;
    font-size: 0.9rem;
  }

  .page-band .range-card {
    margin-top: 18px;
  }

  .page-band .upnext-card {
    padding: 14px;
  }

  #section-financial {
    margin-top: -104px;
  }

  .page-band::before {
    width: 520px;
    height: 360px;
    right: -120px;
    top: 30px;
    opacity: 0.55;
  }
}

@media (max-width: 430px) {
  .layout {
    padding: 0 14px 24px;
  }

  /* Keep the band short so the first numbers are visible without scrolling */
  .page-band {
    padding: 68px 0 118px;
  }

  .page-band .eyebrow,
  .page-band .hero-copy,
  .page-band .range-header {
    display: none;
  }

  .page-band h1 {
    margin: 0;
    font-size: 1.7rem;
  }

  .page-band-inner {
    gap: 14px;
  }

  .page-band .range-card {
    margin-top: 12px;
  }

  .page-band .upnext-card {
    padding: 12px;
  }

  .page-band .upnext-title {
    margin-bottom: 8px;
  }

  .page-band .upnext-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .page-band .schedule-item {
    padding: 8px 10px;
  }

  .page-band .schedule-item .muted {
    margin-bottom: 2px;
    font-size: 0.7rem;
  }

  .page-band .schedule-main {
    font-size: 0.95rem;
  }

  .page-band .schedule-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    font-size: 0.7rem;
    line-height: 1.3;
  }

  #section-financial {
    margin-top: -92px;
  }

  .kpi-icon {
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .kpi h2 {
    padding-right: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kpi-grid > .kpi,
  .page-band .upnext-card,
  .chart-card,
  .forecast-settings,
  .form-card,
  .table-card {
    animation: none;
  }

  .kpi:hover,
  .chart-card:hover,
  .form-card:hover,
  .table-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   Harvest planner and Silvermills payments
   ========================================================================== */

.planner-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planner-kpi {
  min-height: 132px;
}

.planner-meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.kpi.is-alert {
  box-shadow: inset 0 3px 0 var(--expense), var(--shadow);
}

.planner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  margin-top: 16px;
}

/* Card pairs side by side (Silvermills payments and cash outlook; nuts per harvest and grade mix)
   share one split and stretch to the same height; their charts grow to fill the extra space. */
.planner-layout-bottom,
.production-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  align-items: stretch;
}

/* The cash outlook chart carries more than the payments list, so it gets the wider side. */
.planner-layout-bottom {
  grid-template-columns: minmax(340px, 1fr) minmax(0, 1.4fr);
}

.planner-layout-bottom > .card,
.production-grid > .card {
  display: flex;
  flex-direction: column;
}

.planner-layout-bottom .chart-box,
.production-grid .chart-box {
  flex: 1 1 auto;
  height: auto;
  min-height: 300px;
}

.grade-mix-card #gradeMix {
  flex: 1 1 auto;
}

.payment-compact {
  padding: 10px 14px;
}

.payment-compact .payment-head {
  align-items: center;
}

.payment-compact .payment-head > div {
  flex: 1;
  min-width: 0;
}

.payment-compact .text-btn {
  margin-top: 0;
}

.planner-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
}

.planner-table td {
  vertical-align: top;
  white-space: nowrap;
}

.planner-table td .sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 400;
}

.planner-table td:nth-child(4) {
  font-weight: 400;
}

.planner-table tr.is-confirmed td:first-child strong {
  color: var(--brand-strong);
}

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: 1px;
}

.tag-confirmed {
  background: var(--good-soft);
  color: var(--profit);
}

.tag-estimate {
  background: var(--surface-3);
  color: var(--muted);
}

.tag-late {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.planner-note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
}

.planner-settings {
  display: grid;
  gap: 12px;
  align-content: start;
}

.planner-settings h3 {
  margin-bottom: 0;
}

.planner-settings .text-btn {
  justify-self: start;
  margin-top: -4px;
}

.planner-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.planner-two input {
  min-width: 0;
}

/* Payments */
.payments-list {
  display: grid;
  gap: 12px;
}

.payment-item {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.payment-item.tone-soon {
  border-left-color: var(--amber);
}

.payment-item.tone-info {
  border-left-color: var(--info-ink);
}

.payment-item.tone-late {
  border-left-color: var(--expense);
  background: var(--bad-soft);
}

.payment-item.tone-done {
  border-left-color: var(--brand);
}

.payment-item.tone-muted {
  opacity: 0.75;
}

.payment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.payment-sub {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.status-pill {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.tone-soon .status-pill {
  background: var(--amber-soft);
  color: var(--banner-ink);
}

.tone-info .status-pill {
  background: var(--info-soft);
  color: var(--info-ink);
}

.tone-late .status-pill {
  background: var(--expense);
  color: #ffffff;
}

.tone-done .status-pill {
  background: var(--good-soft);
  color: var(--profit);
}

.payment-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.payment-steps li {
  position: relative;
  padding-top: 12px;
  border-top: 3px solid var(--line-strong);
  font-size: 0.76rem;
  line-height: 1.35;
}

.payment-steps li.is-done {
  border-top-color: var(--brand);
}

.step-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.payment-steps li:not(.is-done) .step-title {
  color: var(--muted);
}

.step-detail {
  display: block;
  color: var(--muted);
}

.payment-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.84rem;
}

.payment-foot .text-btn {
  margin-top: 0;
}

/* Forms */
.form-hint {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  color: var(--info-ink);
  font-size: 0.84rem;
  line-height: 1.45;
}

.settlement-panel {
  width: min(560px, calc(100% - 18px));
}

.settlement-step {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.settlement-step legend {
  padding: 0 6px;
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 700;
}

.settlement-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 1280px) {
  .planner-layout:not(.planner-layout-bottom) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1023px) {
  .planner-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: each upcoming harvest becomes a small card */
@media (max-width: 600px) {
  .planner-table thead {
    display: none;
  }

  .planner-table,
  .planner-table tbody,
  .planner-table tr,
  .planner-table td {
    display: block;
    width: 100%;
  }

  .planner-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .planner-table td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .planner-table td:first-child {
    grid-column: 1 / -1;
  }

  .planner-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
  }

  .payment-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The next three harvests are enough on a phone */
  .planner-table:not(.budget-table) tbody tr:nth-child(n + 4) {
    display: none;
  }
}

/* ==========================================================================
   Field operations and budget
   ========================================================================== */

.budget-table-card {
  margin-top: 16px;
}

.budget-bar {
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.budget-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand);
  transition: width 400ms ease;
}

.budget-bar span.is-over {
  background: var(--expense);
}

.budget-table td.is-over {
  color: var(--bad-ink);
}

.budget-table tr.is-muted td {
  color: var(--muted);
}

.budget-table td:last-child {
  text-align: right;
}

.budget-table .text-btn {
  margin-top: 0;
}

.tag-soon {
  background: var(--amber-soft);
  color: var(--banner-ink);
}

.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .budget-table td:last-child {
    grid-column: 1 / -1;
    text-align: left;
  }

  .budget-table td:last-child::before {
    content: none;
  }
}

.budget-toggle {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.45;
}

.budget-toggle input {
  flex: none;
  align-self: flex-start;
  margin-top: 2px;
}

.unbilled-note {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  color: var(--info-ink);
  font-size: 0.84rem;
  line-height: 1.45;
}


/* ==========================================================================
   Production & quality
   ========================================================================== */

.production-grid {
  display: grid;
  gap: 16px;
}

.production-wide {
  margin-top: 16px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--ink-2);
  font-size: 0.8rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: none;
}

.legend-line {
  display: inline-block;
  width: 16px;
  border-top: 2px dashed;
  flex: none;
}

.chart-card .chart-head + .chart-box {
  margin-top: 6px;
}

.grade-mix-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.grade-mix-bar span {
  height: 100%;
}

.grade-mix-table {
  margin-top: 14px;
}

.grade-mix-table th,
.grade-mix-table td {
  padding: 10px 8px;
  vertical-align: top;
}

.grade-mix-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
}

.grade-mix-table .legend-dot {
  margin-right: 8px;
}

.grade-mix-table td .sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 400;
}

.grade-mix-table td:nth-child(4) {
  font-weight: 600;
}

.grade-mix-empty {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .planner-layout-bottom,
  .production-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Crop check: nuts counted at the estate against nuts graded, sold or used
   ========================================================================== */

.crop-check-card.is-alert {
  box-shadow: inset 0 3px 0 var(--expense), var(--shadow);
}

.crop-check-summary {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.crop-check-empty {
  margin: 4px 0 0;
  font-size: 0.86rem;
}

.crop-check-table td:nth-child(4) {
  font-weight: 600;
}

.crop-check-table td.is-short {
  color: var(--expense);
  font-weight: 700;
}

.crop-check-table tr.is-waiting td {
  color: var(--muted);
}

.crop-check-table tr.is-waiting td strong {
  color: var(--ink-2);
}

/* Prices: the summary line sits under the card title, the table under the chart */
.price-stats {
  display: block;
  margin: 0 0 12px;
  line-height: 1.6;
}

.price-stats b {
  color: var(--ink);
  font-weight: 600;
}

.price-table {
  margin-top: 16px;
}

/* ---------- Landing and sign-in page (login.html) ---------- */

.lp {
  --lp-mint: #a6f0c6;
  --lp-mint-ink: #0b2a1b;
  --lp-nav-bg: rgba(18, 61, 41, 0.88);
  --lp-section-alt: var(--bg);
  --lp-section: var(--surface);
  background: var(--surface);
  overflow-x: hidden;
}

:root[data-theme="dark"] .lp {
  --lp-nav-bg: rgba(10, 34, 24, 0.88);
  --lp-section: var(--bg);
  --lp-section-alt: #112019;
}

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

.lp-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.lp-skip:focus {
  top: 12px;
}

.lp h2 {
  margin: 10px 0 12px;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.lp h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lp a:focus-visible,
.lp summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Buttons */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.lp-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.lp-btn:hover {
  transform: translateY(-1px);
}

.lp-btn:hover svg {
  transform: translateX(3px);
}

.lp-btn-sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.88rem;
}

.lp-btn-lg {
  min-height: 54px;
  padding: 0 26px;
  font-size: 1rem;
}

.lp-btn-block {
  width: 100%;
}

.lp-btn-primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 10px 24px -12px rgba(23, 87, 58, 0.7);
}

.lp-btn-primary:hover {
  background: var(--brand-strong);
}

.lp-btn-outline {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.lp-btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}

/* On the green bands the main button is mint, so it stands out */
.lp-nav .lp-btn-primary,
.lp-hero .lp-btn-primary {
  background: var(--lp-mint);
  color: var(--lp-mint-ink);
  box-shadow: 0 12px 30px -12px rgba(166, 240, 198, 0.55);
}

.lp-nav .lp-btn-primary:hover,
.lp-hero .lp-btn-primary:hover {
  background: #c4f7d9;
}

.lp-btn-ghost {
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}

.lp-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

/* Top bar */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lp-nav-bg);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.lp-nav.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}

.lp-nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.lp-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

.lp-nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.lp-nav-links a,
.lp-nav-signin {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 140ms ease;
}

.lp-nav-links a:hover,
.lp-nav-signin:hover {
  color: #ffffff;
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 12px;
}

/* Hero */
.lp-hero {
  position: relative;
  overflow: hidden;
  margin-top: -68px;
  padding: 140px 0 140px;
  color: var(--on-band);
  background:
    radial-gradient(900px 560px at 85% 0%, var(--band-glow), transparent 62%),
    radial-gradient(700px 420px at -10% 110%, rgba(255, 255, 255, 0.07), transparent 70%),
    linear-gradient(170deg, var(--band-top) 0%, var(--band-bottom) 100%);
}

.lp-hero::before {
  right: -80px;
  top: 10px;
  width: 980px;
  height: 680px;
  opacity: 0.8;
}

.lp-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  color: #d4f5e2;
  font-size: 0.82rem;
  font-weight: 600;
}

.lp-kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-mint);
  box-shadow: 0 0 0 4px rgba(166, 240, 198, 0.2);
}

.lp-hero h1 {
  margin: 22px 0 20px;
  color: #ffffff;
  font-size: clamp(2.5rem, 5vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.lp-hero-lead {
  max-width: 560px;
  margin: 0 0 30px;
  color: var(--on-band-2);
  font-size: 1.12rem;
  line-height: 1.6;
}

.lp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--on-band-2);
  font-size: 0.88rem;
}

.lp-hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lp-hero-facts li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--lp-mint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lp-hero-facts strong {
  color: #ffffff;
}

.lp-error {
  max-width: 560px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bad-soft);
  color: var(--bad-ink);
  font-size: 0.9rem;
}

/* The dashboard picture */
.lp-shot {
  position: relative;
  margin: 0;
  animation: lp-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.lp-shot-window {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.65), 0 0 0 8px rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.lp-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.lp-shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.lp-shot-bar span {
  margin: 0 auto;
  padding: 2px 28px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.lp-shot-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.lp-shot-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  color: #ffffff;
  background:
    radial-gradient(300px 160px at 100% 0%, var(--band-glow), transparent 70%),
    linear-gradient(160deg, var(--band-top), var(--band-bottom));
}

.lp-shot-head > div {
  display: grid;
  gap: 2px;
}

.lp-shot-label {
  color: #9fe3bf;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-shot-date {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
}

.lp-shot-expected {
  text-align: right;
}

.lp-shot-expected strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

.lp-shot-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
}

.lp-shot-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lp-shot-kpis > div {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.lp-shot-kpis span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.lp-shot-kpis strong {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.lp em.is-good,
.lp em.is-amber {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.lp em.is-good {
  background: var(--good-soft);
  color: var(--profit);
}

.lp em.is-amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.lp-shot-chart {
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.lp-shot-chart-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 0.74rem;
  font-weight: 700;
}

.lp-shot-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}

.lp-shot-legend i {
  width: 12px;
  height: 10px;
  border: 1.5px dashed var(--brand);
  border-radius: 3px;
}

.lp-shot-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 92px;
}

.lp-shot-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 55%, transparent));
  transform-origin: bottom;
  animation: lp-grow 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.lp-shot-bars i.is-forecast {
  border: 1.5px dashed var(--brand);
  background: var(--brand-soft);
}

.lp-shot-bars i:nth-child(2) { animation-delay: 40ms; }
.lp-shot-bars i:nth-child(3) { animation-delay: 80ms; }
.lp-shot-bars i:nth-child(4) { animation-delay: 120ms; }
.lp-shot-bars i:nth-child(5) { animation-delay: 160ms; }
.lp-shot-bars i:nth-child(6) { animation-delay: 200ms; }
.lp-shot-bars i:nth-child(7) { animation-delay: 240ms; }
.lp-shot-bars i:nth-child(8) { animation-delay: 280ms; }
.lp-shot-bars i:nth-child(9) { animation-delay: 320ms; }
.lp-shot-bars i:nth-child(10) { animation-delay: 360ms; }
.lp-shot-bars i:nth-child(11) { animation-delay: 400ms; }

.lp-shot-payments {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 4px;
  list-style: none;
}

.lp-shot-payments li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.78rem;
  font-weight: 600;
}

.lp-shot-payments li + li {
  border-top: 1px solid var(--line);
}

.lp-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  animation: lp-float 6s ease-in-out infinite;
}

.lp-float div {
  display: grid;
}

.lp-float strong {
  font-size: 0.8rem;
}

.lp-float span:not(.lp-float-icon) {
  color: var(--muted);
  font-size: 0.74rem;
}

.lp-float-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-soft);
}

.lp-float-icon svg,
.lp-icon svg,
.lp-strip-list svg,
.lp-assurances svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-float-a {
  left: -40px;
  top: -26px;
}

.lp-float-b {
  right: 32px;
  bottom: -44px;
  animation-delay: -3s;
}

@keyframes lp-rise {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

@keyframes lp-grow {
  from {
    transform: scaleY(0.05);
    opacity: 0;
  }
}

@keyframes lp-float {
  50% {
    transform: translateY(-6px);
  }
}

/* What it's made for: a card lifted over the hero's edge */
.lp-strip {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}

.lp-strip-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  list-style: none;
}

.lp-strip-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  color: var(--ink-2);
  font-size: 0.86rem;
  line-height: 1.4;
}

.lp-strip-list li + li {
  border-left: 1px solid var(--line);
}

.lp-strip-list svg {
  flex: none;
  width: 22px;
  height: 22px;
}

.lp-strip-list strong {
  color: var(--ink);
}

/* Sections */
.lp-section {
  scroll-margin-top: 40px;
  padding: 104px 0;
  background: var(--lp-section);
}

.lp-section-alt {
  background: var(--lp-section-alt);
}

.lp-section-head {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}

.lp-section-head > p:last-child {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.06rem;
  line-height: 1.6;
}

.lp-section-head .eyebrow,
.lp-section-head-left .eyebrow {
  color: var(--brand);
}

.lp-section-head-left {
  margin: 0;
  text-align: left;
}

.lp-section-head a {
  color: var(--brand-strong);
}

/* The questions it answers */
.lp-questions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.lp-q {
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.lp-q p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.6;
}

.lp-q .lp-q-ask {
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Features */
.lp-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.lp-card {
  grid-column: span 2;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.lp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.lp-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.6;
}

.lp-card-wide {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: 30px;
}

.lp-card-wide h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
}

.lp-card-wide p {
  font-size: 1rem;
}

.lp-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--brand-soft);
}

.lp-icon svg {
  width: 22px;
  height: 22px;
}

.lp-mini-table,
.lp-mini-pay {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.lp-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lp-mini-row span:not(:first-child) {
  text-align: right;
}

.lp-mini-row + .lp-mini-row {
  border-top: 1px solid var(--line);
}

.lp-mini-head {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-mini-row:nth-child(2) {
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.lp-mini-pay {
  display: grid;
  gap: 8px;
}

.lp-mini-pay > div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.9rem;
}

.lp-mini-pay span {
  color: var(--muted);
  font-weight: 600;
}

.lp-mini-pay strong {
  font-variant-numeric: tabular-nums;
}

/* How it works */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.lp-steps li {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.lp-steps p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.6;
}

.lp-step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.lp-story {
  max-width: 820px;
  margin: 64px auto 0;
  text-align: center;
}

.lp-story blockquote {
  margin: 0;
}

.lp-story blockquote p {
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.lp-story figcaption {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  text-align: left;
}

.lp-story figcaption img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.lp-story figcaption span {
  display: grid;
  color: var(--muted);
  font-size: 0.86rem;
}

.lp-story figcaption strong {
  color: var(--ink);
}

/* Pricing */
.lp-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.lp-plan.is-featured {
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-pop);
}

.lp-plan h3 {
  color: var(--ink-2);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lp-plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(23, 87, 58, 0.7);
}

.lp-plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 4px;
}

.lp-plan-price strong {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.lp-plan-price span {
  color: var(--muted);
  font-weight: 600;
}

.lp-plan-note {
  min-height: 1.5em;
  margin: 6px 0 22px;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.lp-checks {
  display: grid;
  gap: 11px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.lp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-2);
  font-size: 0.93rem;
}

.lp-checks li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--profit);
}

.lp-value {
  max-width: 860px;
  margin: 28px auto 0;
  padding: 18px 22px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.6;
  text-align: center;
}

.lp-value strong {
  color: var(--ink);
}

.lp-assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 860px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
}

.lp-assurances li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.lp-assurances svg {
  flex: none;
}

.lp-assurances strong {
  color: var(--ink);
}

.lp-fine {
  max-width: 860px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.lp-fine a {
  color: var(--brand-strong);
}

/* FAQ */
.lp-faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 56px;
}

.lp-faq-wrap .lp-section-head {
  position: sticky;
  top: 100px;
}

.lp-faq details {
  border-bottom: 1px solid var(--line);
}

.lp-faq details:first-child {
  border-top: 1px solid var(--line);
}

.lp-faq summary {
  position: relative;
  padding: 20px 44px 20px 0;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.lp-faq summary::-webkit-details-marker {
  display: none;
}

.lp-faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10M14 9v10' fill='none' stroke='%23637267' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--surface-3);
  transition: transform 200ms ease;
}

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

.lp-faq details p {
  margin: -4px 0 22px;
  padding-right: 44px;
  color: var(--ink-2);
  line-height: 1.65;
}

.lp-faq a {
  color: var(--brand-strong);
}

/* Closing call to action */
.lp-final {
  padding: 0 0 96px;
  background: var(--lp-section);
}

.lp-final-inner {
  position: relative;
  overflow: hidden;
  max-width: 1132px;
  padding: 72px 32px;
  border-radius: 28px;
  color: var(--on-band);
  text-align: center;
  background:
    radial-gradient(600px 320px at 50% -20%, var(--band-glow), transparent 70%),
    linear-gradient(160deg, var(--band-top), var(--band-bottom));
}

.lp .lp-final h2 {
  max-width: 720px;
  margin: 0 auto 14px;
  color: #ffffff;
}

.lp-final p {
  margin: 0 0 28px;
  color: var(--on-band-2);
  font-size: 1.05rem;
}

.lp .lp-google {
  width: auto;
  min-height: 52px;
  padding: 0 28px;
  font-size: 1rem;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6);
}

.lp-final .lp-final-note {
  margin: 22px 0 0;
  font-size: 0.86rem;
}

.lp-final-note a {
  color: #ffffff;
}

/* Footer */
.lp-footer {
  padding: 48px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--lp-section-alt);
}

.lp-footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 32px;
  align-items: start;
}

.lp-footer .lp-brand {
  color: var(--ink);
}

.lp-footer-brand p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.lp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding-top: 8px;
}

.lp-footer-links a {
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.lp-footer-links a:hover {
  color: var(--brand-strong);
}

.lp-footer-legal {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}

.lp-footer-legal a {
  color: var(--muted);
}

/* Fade in on scroll (only when motion is welcome; see login.html) */
.lp-motion .lp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lp-motion .lp-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.lp-motion .lp-card.lp-reveal.is-visible:hover {
  transform: translateY(-3px);
}

@media (max-width: 1080px) {
  .lp-nav-links {
    gap: 20px;
  }

  .lp-questions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-float-a {
    left: -12px;
  }
}

@media (max-width: 920px) {
  .lp-nav-links {
    display: none;
  }

  .lp-nav-actions {
    margin-left: auto;
  }

  .lp-hero {
    padding: 112px 0 112px;
  }

  .lp-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .lp-shot {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }

  .lp-strip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-strip-list li + li {
    border-left: 0;
  }

  .lp-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-card {
    grid-column: span 1;
  }

  .lp-card-wide {
    grid-column: span 2;
  }

  .lp-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-faq-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .lp-faq-wrap .lp-section-head {
    position: static;
  }
}

@media (max-width: 640px) {
  .lp-wrap {
    padding: 0 16px;
  }

  .lp-nav-inner {
    height: 60px;
    gap: 12px;
  }

  .lp-hero {
    margin-top: -60px;
    padding: 92px 0 96px;
  }

  .lp-brand {
    font-size: 1.05rem;
  }

  .lp-brand img {
    width: 30px;
    height: 30px;
  }

  .lp-nav-actions {
    gap: 12px;
  }

  .lp-hero h1 {
    margin-top: 18px;
    font-size: 2.35rem;
  }

  .lp-hero-lead {
    font-size: 1.02rem;
  }

  .lp-hero-ctas .lp-btn {
    width: 100%;
  }

  .lp-kicker {
    font-size: 0.76rem;
  }

  .lp-shot-head {
    padding: 14px;
  }

  .lp-shot-date {
    font-size: 1.5rem;
  }

  .lp-shot-expected strong {
    font-size: 1.05rem;
    white-space: nowrap;
  }

  .lp-shot-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-shot-kpi-hide {
    display: none !important;
  }

  .lp-float {
    display: none;
  }

  .lp-strip-list {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 12px;
  }

  .lp-strip-list li + li {
    border-top: 1px solid var(--line);
  }

  .lp-section {
    padding: 72px 0;
  }

  .lp-section-head {
    margin-bottom: 36px;
  }

  .lp-questions,
  .lp-bento,
  .lp-plans,
  .lp-assurances {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-card,
  .lp-card-wide {
    grid-column: auto;
  }

  .lp-card-wide {
    padding: 24px 20px;
  }

  .lp-plans {
    gap: 28px;
  }

  /* The better-value plan first on phones */
  .lp-plan.is-featured {
    order: -1;
  }

  .lp-plan {
    padding: 28px 22px;
  }

  .lp-final {
    padding-bottom: 64px;
  }

  .lp-final-inner {
    padding: 52px 20px;
    border-radius: 22px;
  }

  .lp-footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-faq details p {
    padding-right: 0;
  }
}

/* Small phones: the logo alone, so "Sign in" and the trial button both fit */
@media (max-width: 400px) {
  .lp-nav .lp-brand span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-shot,
  .lp-shot-bars i,
  .lp-float {
    animation: none;
  }

  .lp-btn,
  .lp-card,
  .lp-btn svg {
    transition: none;
  }
}

/* Google's sign-in button: white, the multicoloured G, Google's wording. */
.google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  border: 1px solid #747775;
  border-radius: 999px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: "Roboto", var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.google-btn:hover {
  background: #f8faff;
  box-shadow: var(--shadow-sm);
}

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

/* ---------- Account page ---------- */

.account-layout {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}

.account-layout h1 {
  margin-bottom: 4px;
}

.account-status:empty {
  display: none;
}

.account-card {
  margin-top: 20px;
  padding: 22px 24px;
}

.account-card h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.account-card h3 {
  margin: 24px 0 4px;
  font-size: 0.95rem;
}

.account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.small {
  font-size: 0.84rem;
}

.block {
  display: block;
}

.btn-link {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}

.btn-link:hover {
  text-decoration: underline;
}

.account-page .topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.account-page .topbar-actions form {
  margin: 0;
}

.account-page .topbar .btn-link {
  color: var(--on-band-2);
}

.account-page .topbar .btn-link:hover {
  color: var(--on-band);
}

.profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile h2,
.profile p {
  margin: 0;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 1.4rem;
  font-weight: 700;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.profile-facts dt {
  color: var(--muted);
  font-size: 0.8rem;
}

.profile-facts dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.farm-list,
.people-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.farm-list li,
.people-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.farm-list li.is-current strong {
  color: var(--brand-strong);
}

.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.role-badge.role-owner {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.role-badge.role-editor {
  background: var(--info-soft);
  color: var(--info-ink);
}

.inline-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.inline-form label {
  display: grid;
  gap: 5px;
  flex: 1 1 200px;
}

.inline-form input,
.inline-form select {
  width: 100%;
  box-sizing: border-box;
}

#leaveFarmBtn {
  margin-top: 14px;
}

.token-reveal {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
  color: var(--banner-ink);
}

.token-reveal p {
  margin: 0 0 8px;
}

.token-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.token-row code {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.danger-zone {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.danger-zone summary {
  color: var(--bad-ink);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 600px) {
  .account-card {
    padding: 18px 16px;
  }

  .farm-list li,
  .people-list li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .farm-list li > :last-child,
  .people-list li > :last-child {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .profile-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Dashboard: account link, read-only farms ---------- */

.account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.account-link:hover {
  background: var(--surface-3);
}

.account-link .avatar {
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
}

.account-link span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Viewers can look but not change anything. */
body.is-viewer #addTopBtn,
body.is-viewer .quick-bar,
body.is-viewer [data-open-modal],
body.is-viewer [data-edit-id],
body.is-viewer [data-delete-id],
body.is-viewer [data-task-delete],
body.is-viewer [data-settle-id],
body.is-viewer [data-op-edit],
body.is-viewer #clearDataBtn,
body.is-viewer #importCsvBtn,
body.is-viewer #plannerClearDate {
  display: none !important;
}

.mobile-account-link {
  width: 34px;
  height: 34px;
  font-size: 0.9rem;
  text-decoration: none;
}

/* ---------- Privacy policy and terms ---------- */

.legal-page {
  padding: 0 16px 64px;
}

.legal-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 0;
}

.legal-header .brand,
.legal-header .brand-name {
  color: var(--ink);
}

.legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 32px;
  line-height: 1.65;
}

.legal-body h2 {
  margin: 28px 0 8px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.legal-body h3 {
  margin: 18px 0 4px;
  font-size: 0.98rem;
}

.legal-body p,
.legal-body li {
  color: var(--ink-2);
}

.legal-body ul {
  padding-left: 20px;
}

.legal-body li + li {
  margin-top: 6px;
}

.legal-body a,
.legal-links a {
  color: var(--brand);
}

.legal-links {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.account-layout > .legal-links {
  text-align: center;
}

@media (max-width: 600px) {
  .legal-body {
    padding: 20px 18px;
  }
}

/* ---------- Admin overview ---------- */

.admin-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}

.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.admin-head h1 {
  margin-bottom: 0;
}

.admin-tools {
  display: flex;
  gap: 10px;
  flex: 0 1 420px;
}

.admin-tools input {
  flex: 1;
  min-width: 0;
}

.admin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.admin-tile {
  padding: 14px 16px;
}

.admin-tile span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.admin-tile strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
}

.admin-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.admin-table th {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-table td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-weight: 400;
}

.admin-table td:nth-child(4) {
  font-weight: 400;
}

.admin-table a {
  color: var(--brand);
  overflow-wrap: anywhere;
}

.admin-table tr.is-archived td {
  opacity: 0.6;
}

.admin-farms,
.admin-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-farm {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-page .topbar .btn-link {
  color: var(--on-band-2);
}

.admin-page .topbar .btn-link:hover {
  color: var(--on-band);
}

.weather-location {
  margin: -4px 0 10px;
}

.weather-location:empty {
  display: none;
}

/* Account page: choosing a farm's location */
.place-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.place-option {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
  text-align: left;
}

.place-option:hover {
  background: var(--surface-3);
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.location-manual {
  margin-top: 12px;
}

.location-manual summary {
  color: var(--brand);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Estate census (/estate) ---------- */

body.view-estate .page-band,
body.view-estate main.layout:not(.estate-view) {
  display: none;
}

/* Dashboard | Estate: the pages, always in view (the section links only apply to the dashboard). */
.page-switch {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
}

.page-switch a {
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--on-band-2);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.page-switch a:hover {
  color: var(--on-band);
}

.page-switch a.is-current {
  background: #f4f1e8;
  color: #123d29;
}

body.view-estate .topnav,
body.view-estate .mobile-menu-btn,
body.view-estate .mobile-section-menu,
body.view-estate .mobile-header-range {
  display: none !important;
}

.page-switch-mobile a {
  padding: 4px 12px;
  font-size: 13px;
}

.estate-view {
  padding-top: 32px;
}

.estate-head {
  max-width: 760px;
  margin-bottom: 24px;
}

.census-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.census-card {
  padding: 18px 20px;
}

.census-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.census-card p {
  margin: 2px 0 0;
}

.census-total {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.census-total span {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
}

.census-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px;
  color: var(--ink-2);
}

.estate-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.census-form-card,
.census-current-card,
.census-history-card {
  padding: 20px 22px;
}

.census-history-card {
  margin-top: 18px;
}

.census-form-card h2,
.census-current-card h2,
.census-history-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.census-form input,
.census-form select {
  width: 100%;
  box-sizing: border-box;
}

.census-where {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  border: 0;
}

.census-where legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
}

.census-where .choice {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
}

.census-where .choice input {
  width: auto;
}

.census-actions {
  display: flex;
  gap: 10px;
}

.census-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}

.census-mini {
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--ink-2);
}

.census-mini li + li {
  margin-top: 4px;
}

/* Viewers see the census but can't change it. */
body.is-viewer #censusFormCard,
body.is-viewer .census-row-actions {
  display: none !important;
}

body.is-viewer .estate-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 860px) {
  .estate-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Current counts: filters and sortable columns */
.census-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.census-filters input {
  grid-column: 1 / -1;
}

.census-filters input,
.census-filters select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.census-filter-summary {
  margin: 10px 0 0;
}

.census-filter-summary:empty {
  display: none;
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.sort-btn:hover,
.sort-btn.is-active {
  background: transparent;
  color: var(--ink);
}

.sort-arrow {
  font-size: 0.9em;
  opacity: 0.45;
}

.sort-btn.is-active .sort-arrow {
  opacity: 1;
  color: var(--brand);
}

.census-current-table .num {
  text-align: right;
}

.census-current-table th.num .sort-btn {
  flex-direction: row-reverse;
}

@media (max-width: 600px) {
  .census-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Estate: blocks, how full each is and what grows in it */
.blocks-card {
  margin-top: 18px;
  padding: 20px 22px;
}

.blocks-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 8px;
}

.blocks-head h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.blocks-head p {
  max-width: 640px;
  margin: 0;
}

.blocks-target {
  flex: none;
}

.blocks-target-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-weight: 500;
}

.blocks-target input {
  width: 76px;
}

.block-row {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.block-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 8px;
}

.block-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.block-size .text-btn {
  padding: 0;
  font-size: 0.84rem;
}

.block-size-form {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.block-size-form input {
  width: 90px;
  padding: 5px 8px;
}

.block-size-form button {
  padding: 6px 12px;
}

.block-status {
  margin-left: auto;
  font-size: 0.86rem;
  font-weight: 600;
}

.block-status.is-room {
  color: var(--info-ink);
}

.block-status.is-full {
  color: var(--profit);
}

.block-status.is-crowded {
  color: var(--amber);
}

.block-status.is-unknown {
  color: var(--muted);
  font-weight: 500;
}

/* Palms against a full planting: the mark is 100% */
.density-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--surface-3);
}

.density-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--profit);
  transition: width 300ms ease;
}

.density-bar.is-room .density-fill {
  background: var(--info-ink);
}

.density-bar.is-crowded .density-fill {
  background: var(--amber);
}

.density-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--ink);
}

.density-value {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
}

/* What grows in the block, by count */
.mix-bar {
  display: flex;
  gap: 2px;
  height: 10px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
}

.mix-bar span {
  min-width: 3px;
}

.block-crops {
  margin: 8px 0 0;
}

.mix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.82rem;
}

.mix-legend:empty {
  display: none;
}

.mix-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mix-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

@media (max-width: 600px) {
  .block-status {
    flex-basis: 100%;
    margin-left: 0;
  }
}

.census-more {
  grid-column: 1 / -1;
  justify-self: center;
}

@media (max-width: 600px) {
  .census-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .census-card {
    padding: 14px;
  }

  .census-total {
    font-size: 1.6rem;
  }

  .blocks-card,
  .census-form-card,
  .census-current-card,
  .census-history-card {
    padding: 16px;
  }
}

/* Income by crop: one bar per crop, share of the period's income */
.income-crop-card {
  margin-top: 16px;
}

.income-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.income-crop {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.income-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.income-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.income-amount {
  color: var(--ink-2);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Other crop harvests */
.crop-harvests-card .chart-head {
  align-items: center;
}

.crop-years-table .num {
  text-align: right;
}

@media (max-width: 600px) {
  .income-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .income-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Planner: how the figures are worked out, closed by default */
.planner-explain {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--ink-2);
}

.planner-explain summary {
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
}

.planner-explain ul {
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.55;
}

.planner-explain li + li {
  margin-top: 6px;
}

.planner-explain strong {
  color: var(--ink);
}

/* In a narrow payments card the four payment steps sit two by two. */
.payments-list {
  container-type: inline-size;
}

@container (max-width: 520px) {
  .payment-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
}

/* Estate: workers */
.workers-card {
  margin-top: 18px;
  padding: 20px 22px;
}

.workers-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.workers-month {
  flex: none;
}

.workers-empty {
  margin: 10px 0 2px;
}

.workers-entries-table .num {
  text-align: right;
  white-space: nowrap;
}

#labourForm .two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.labour-total {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.labour-total:empty {
  display: none;
}

body.is-viewer #workersAdd,
body.is-viewer .workers-entries .census-row-actions {
  display: none !important;
}

.workers-month select {
  min-width: 170px;
}

.workers-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.workers-tile {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.workers-tile span {
  color: var(--muted);
  font-size: 0.78rem;
}

.workers-tile strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

.workers-tile small {
  color: var(--ink-2);
  font-size: 0.78rem;
}

.workers-changes {
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.workers-changes li {
  position: relative;
  padding: 4px 0 4px 18px;
}

.workers-changes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}

.workers-changes li.is-warn::before {
  background: var(--amber);
}

.workers-changes li.is-info::before {
  background: var(--info-ink);
}

.workers-changes li.is-ok::before {
  background: var(--profit);
}

.workers-grid .num {
  text-align: right;
}

.workers-grid td.worker-cell {
  --heat: 0;
  background: color-mix(in srgb, var(--profit) calc(var(--heat) * 22%), transparent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.workers-grid tbody td:first-child {
  min-width: 170px;
}

.workers-grid tr.workers-section th {
  padding-top: 16px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

.workers-grid tbody:first-of-type tr.workers-section th {
  padding-top: 8px;
}

.workers-grid tr.workers-section span {
  color: var(--muted);
  font-weight: 500;
}

.workers-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}

.workers-legend strong {
  color: var(--amber);
}

.workers-legend-swatch {
  width: 28px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--profit) 22%, transparent));
  border: 1px solid var(--line);
}

.workers-grid td.is-empty {
  color: var(--line-strong);
}

.workers-grid td.is-drop {
  color: var(--amber);
  font-weight: 700;
}

.wage-check {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.wage-check summary {
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
}

.wage-check-table .num {
  text-align: right;
}

.wage-check-table tr.is-mismatch td {
  color: var(--amber);
  font-weight: 600;
}

@media (max-width: 760px) {
  .workers-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Reading bills ---------- */

.modal-panel.bill-panel.is-reviewing {
  width: min(1180px, calc(100% - 18px));
}

.bill-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 170px;
  padding: 24px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.bill-drop:hover,
.bill-drop.is-dragging,
.bill-drop:focus-within {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.bill-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.bill-drop input[type="file"]:disabled {
  cursor: progress;
}

.bill-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 0.88rem;
}

.bill-status.is-busy::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 8px;
  vertical-align: -0.1em;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: bill-spin 0.8s linear infinite;
}

.bill-status.is-error {
  color: var(--bad-ink);
}

@keyframes bill-spin {
  to {
    transform: rotate(360deg);
  }
}

.bill-review {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

.bill-preview {
  position: sticky;
  top: 0;
  height: calc(100dvh - 120px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}

.bill-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.bill-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.bill-drafts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.bill-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bill-draft-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bill-draft {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.bill-draft.is-unsure {
  border-color: var(--amber);
}

.bill-draft.is-excluded {
  background: var(--surface-2);
}

.bill-draft.is-excluded .bill-draft-fields,
.bill-draft.is-excluded .bill-draft-amount {
  opacity: 0.5;
}

.bill-draft-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 150px) auto;
  align-items: center;
  gap: 8px;
}

.bill-include {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.bill-draft-amount {
  min-width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bill-draft-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 10px;
}

.bill-draft-fields .bill-field-wide {
  grid-column: 1 / -1;
}

.bill-draft-fields input,
.bill-draft-fields select,
.bill-draft-head input,
.bill-draft-head select {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
}

.bill-draft-fields .checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.bill-draft-fields .checkbox-row input {
  width: auto;
}

.bill-grades {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bill-grade-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 0.85rem;
}

.bill-grade-head {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bill-flags:empty {
  display: none;
}

.bill-flags {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bill-flag {
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.bill-flag-unsure {
  background: var(--amber-soft);
  color: var(--amber);
}

.bill-flag-duplicate {
  background: var(--info-soft);
  color: var(--info-ink);
}

.bill-flag-problem {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.bill-footer {
  position: sticky;
  bottom: -20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -20px -20px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.bill-footer p {
  margin: 0;
}

.bill-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 860px) {
  .bill-review {
    grid-template-columns: 1fr;
  }

  .bill-preview {
    position: static;
    height: 38dvh;
  }
}

@media (max-width: 520px) {
  .bill-draft-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .bill-draft-head input[type="date"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .bill-actions {
    width: 100%;
  }

  .bill-actions button {
    flex: 1;
  }
}

/* Cards have 14px padding on phones (see the 430px rules above). */
@media (max-width: 430px) {
  .bill-footer {
    bottom: -14px;
    margin: 0 -14px -14px;
    padding: 12px 14px 14px;
  }
}

/* ---------- Importing past bills ---------- */

.modal-panel.import-panel.is-reviewing {
  width: min(980px, calc(100% - 18px));
}

.bill-bulk-link {
  margin: 14px 0 0;
}

.bill-bulk-link .text-btn {
  margin: 0 0 0 4px;
}

.import-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.import-files:empty {
  display: none;
}

.import-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
}

.import-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-file .text-btn {
  margin: 0;
  padding: 3px 10px;
}

.import-file.is-uploading,
.import-file.is-waiting {
  background: var(--surface-2);
}

.import-file.is-failed {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.import-file.is-failed .muted {
  color: inherit;
}

.import-file.is-skipped {
  background: var(--info-soft);
  color: var(--info-ink);
}

.import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.danger-text {
  color: var(--bad-ink);
}

.import-progress {
  height: 10px;
  margin: 8px 0 12px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.import-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 400ms ease;
}

.import-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.import-review-head p,
.import-review-head .import-actions {
  margin: 0;
}

.import-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.85rem;
}

.import-note p {
  margin: 0;
}

.import-note.is-error {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.import-months {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.import-month {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.import-month > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style-position: inside;
}

.import-month-name {
  font-weight: 600;
}

.import-month-figures {
  margin-left: auto;
  color: var(--ink-2);
}

.import-to-check {
  color: var(--amber);
  font-weight: 600;
}

.import-month-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 14px 14px;
}

.import-doc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.import-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.import-doc-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.import-doc-head .text-btn {
  flex-shrink: 0;
  margin: 0;
}

.import-month-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .import-doc-head {
    flex-direction: column;
  }

  .import-month-figures {
    margin-left: 0;
  }
}

/* ---------- How you sell ---------- */

.selling-settings {
  display: grid;
  gap: 12px;
  /* A fieldset is otherwise as wide as its widest content, which widened the page on phones. */
  min-width: 0;
  margin: 4px 0 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.selling-settings legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.selling-settings .checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.grade-names summary {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.grade-names .planner-two {
  margin-top: 10px;
}

/* ---------- Sample estate and guided tour ---------- */

.sample-banner {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 10px 16px;
  background: var(--amber-soft);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  text-align: center;
}

.sample-banner p {
  margin: 0;
}

.sample-banner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sample-banner .secondary-btn {
  padding: 6px 12px;
}

.sample-banner-cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
  text-decoration: none;
}

.sample-banner-cta:hover {
  background: var(--brand-strong);
}

.tour-blocker {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.tour-blocker:not(.hidden) {
  animation: tour-fade-in 200ms ease-out;
}

/* Moved by app.js a frame at a time (showTourStep), so it has no transition of its own. */
.tour-spot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 71;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--brand), 0 0 0 9999px rgba(10, 20, 14, 0.55);
  pointer-events: none;
  will-change: transform, width, height;
}

/* Following a late shift in the page. */
.tour-spot.is-settling {
  transition: transform 220ms ease-out, width 220ms ease-out, height 220ms ease-out;
}

.tour-blocker.is-leaving,
.tour-spot.is-leaving {
  opacity: 0;
  transition: opacity 160ms ease-in;
}

@keyframes tour-fade-in {
  from {
    opacity: 0;
  }
}

.tour-card {
  position: fixed;
  z-index: 72;
  width: min(380px, calc(100% - 32px));
  padding: 16px 18px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  transition: opacity 160ms ease-out, translate 200ms ease-out;
}

/* Faded out between steps while the spotlight moves, then faded back in at its new place. */
.tour-card.is-moving,
.tour-card.is-leaving {
  opacity: 0;
  translate: 0 6px;
  pointer-events: none;
  transition: opacity 140ms ease-in, translate 140ms ease-in;
}

.tour-card.is-settling {
  transition: top 220ms ease-out, left 220ms ease-out;
}

.tour-card.is-centred {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* No part to point at: dim the whole page. */
.touring .tour-blocker {
  background: rgba(10, 20, 14, 0.55);
}

/* With a part to point at, the spotlight's shadow does the dimming. */
.touring:has(.tour-spot:not(.hidden)) .tour-blocker {
  background: transparent;
}

.tour-card.is-sheet {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: auto;
}

.tour-card h3 {
  margin: 2px 0 6px;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.tour-card p {
  margin: 0;
  line-height: 1.5;
}

.tour-progress {
  margin: 0;
}

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.tour-actions .text-btn {
  margin: 0;
}

.tour-nav {
  display: flex;
  gap: 8px;
}

.selling-settings label,
.selling-settings input,
.selling-settings select {
  min-width: 0;
}

.selling-settings input:not([type="checkbox"]),
.selling-settings select {
  width: 100%;
}

/* ---------- Setup page ---------- */

.setup-layout {
  max-width: 640px;
}

.setup-layout .eyebrow {
  margin-bottom: 6px;
  color: var(--brand-strong);
}

.setup-steps {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: setup;
}

.setup-steps li {
  flex: 1;
  padding: 8px 10px 0;
  border-top: 4px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  counter-increment: setup;
}

.setup-steps li::before {
  content: counter(setup) ". ";
}

.setup-steps li.is-current {
  border-color: var(--brand);
  color: var(--ink);
}

.setup-steps li.is-done {
  border-color: var(--brand-soft);
}

.setup-step {
  display: grid;
  gap: 12px;
}

.setup-step h1 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.6rem;
}

.setup-step p {
  margin: -4px 0 0;
}

.setup-label {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
}

.setup-place {
  display: grid;
  gap: 8px;
}

.setup-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}

.setup-chosen .text-btn {
  margin: 0 0 0 auto;
}

.setup-choices {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.choice-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 400;
}

.choice-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.choice-card input {
  margin-top: 3px;
}

.choice-card > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
}

.setup-step .checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.setup-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.btn-primary-link {
  display: inline-flex;
  justify-self: start;
  align-self: flex-start;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand) !important;
  font-weight: 600;
  text-decoration: none;
}

.btn-primary-link:hover {
  background: var(--brand-strong);
}

/* ---------- Subscription (account page) and its dashboard banner ---------- */

.billing-status {
  margin: 0 0 12px;
  font-size: 0.92rem;
}

.billing-status.is-warning {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
}

.billing-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.billing-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.billing-plan:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.billing-plan.is-featured {
  border-color: var(--brand);
}

.billing-plan-name {
  font-size: 0.9rem;
}

.billing-plan-badge {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.72rem;
}

.billing-plan-price {
  font-weight: 500;
  color: var(--ink-2);
}

.billing-plan-price strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
}

/* Clear of the sticky top bar when the dashboard links here. */
#subscription {
  scroll-margin-top: 80px;
}

.billing-section a {
  color: var(--brand);
  font-weight: 600;
}

.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .billing-plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Setup checklist ---------- */

.setup-checklist {
  position: relative;
  margin-bottom: 24px;
  padding: 18px 20px 8px;
}

.setup-checklist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.setup-checklist-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.setup-checklist-head p {
  margin: 2px 0 0;
}

.setup-checklist-head .text-btn {
  margin: 0;
  flex-shrink: 0;
}

.setup-progress {
  height: 8px;
  margin: 12px 0 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.setup-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 300ms ease;
}

.setup-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.setup-item-check {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  color: var(--on-brand);
  font-size: 0.75rem;
  font-weight: 700;
}

.setup-item.is-done .setup-item-check {
  border-color: var(--brand);
  background: var(--brand);
}

.setup-item-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.setup-item.is-done .setup-item-text strong {
  color: var(--muted);
  text-decoration: line-through;
}

.setup-item-action {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.8rem;
}

a.setup-item-action {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.setup-item-done {
  flex-shrink: 0;
  color: var(--brand-strong);
  font-weight: 600;
}

@media (max-width: 520px) {
  .setup-item {
    flex-wrap: wrap;
  }

  .setup-item-action {
    margin-left: 34px;
  }
}

/* With the setup checklist showing, the checklist rides up over the band instead of the first
   section, whose heading then sits on the page background. */
.has-setup-checklist .setup-checklist {
  z-index: 2;
  margin-top: -118px;
}

.has-setup-checklist #section-financial {
  margin-top: 36px;
}

.has-setup-checklist #section-financial .section-header h2 {
  color: var(--ink);
}

.has-setup-checklist #section-financial .section-divider {
  background: var(--line);
}

@media (max-width: 768px) {
  .has-setup-checklist .setup-checklist {
    margin-top: -104px;
  }

  .has-setup-checklist #section-financial {
    margin-top: 28px;
  }
}

@media (max-width: 430px) {
  .has-setup-checklist .setup-checklist {
    margin-top: -92px;
    padding: 14px 14px 6px;
  }

  .setup-items {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pricing and the site links on public pages ---------- */

.legal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.legal-nav {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.legal-nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.legal-nav a:hover,
.legal-nav a[aria-current="page"] {
  color: var(--brand-strong);
}

.pricing-body h1 {
  margin-top: 4px;
}

.pricing-body .eyebrow {
  margin: 0;
  color: var(--brand-strong);
}

.pricing-lead {
  font-size: 1.05rem;
}

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 18px;
}

.pricing-plan {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.pricing-plan.is-featured {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.pricing-plan h2 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.pricing-price {
  margin: 0 0 4px;
}

.pricing-price strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
}

.pricing-price span {
  color: var(--ink-2);
}

.pricing-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.72rem;
  font-weight: 700;
}

.pricing-facts,
.pricing-features {
  padding-left: 1.1em;
}

.pricing-facts li,
.pricing-features li {
  margin: 6px 0;
}

@media (max-width: 560px) {
  .pricing-plans {
    grid-template-columns: 1fr;
  }

  .legal-body {
    padding: 22px 18px;
  }
}