/* ============================================================
   Foresia: cool teal-green ink on warm cream.
   Built from docs/design/brand (design system). No frameworks, no inline styles.
   Mobile first: everything is designed for a phone, then centred on bigger screens.
   ============================================================ */

@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("/static/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("/static/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("/static/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url("/static/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-display: swap; src: url("/static/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap; src: url("/static/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 700; font-display: swap; src: url("/static/fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --green-50: #E9F4F0; --green-100: #CFE8E0; --green-200: #9FD0C2; --green-300: #66B4A1; --green-400: #2F9580;
  --green-500: #137A63; --green-600: #0F6552; --green-700: #0C5043; --green-900: #073026;
  --amber-50: #FDF3E8; --amber-100: #FAE1C6; --amber-400: #E08A36; --amber-500: #C9732A; --amber-600: #A85B1E;
  --ink: #0F1C19; --ink-800: #1C2A26; --ink-700: #2E3B36;
  --n-600: #4E5B55; --n-500: #626E67; --n-400: #909A93; --n-300: #BEC5BE; --n-200: #DDE0D8; --line: #E7E4DB;
  --n-100: #EFEDE5; --n-50: #F6F4EE;
  --cream: #FBF8F3; --paper: #FFFFFF; --blue: #3E7CA8; --plum: #8A5A8C; --danger: #C0492F; --danger-50: #FBEDE9;
  --muted-on-dark: #9DB3AC;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(15,28,25,.06), 0 1px 2px rgba(15,28,25,.04);
  --shadow-md: 0 4px 12px rgba(15,28,25,.07), 0 2px 4px rgba(15,28,25,.04);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
h1 { font-size: 2rem; font-weight: 600; }
h2 { font-size: 1.375rem; font-weight: 600; }
h3 { font-size: 1.0625rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--green-600); text-underline-offset: 2px; }
a:hover { color: var(--green-700); }
.mono, .tabular { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--n-500); }
.small { font-size: .875rem; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid rgba(19,122,99,.45); outline-offset: 2px; border-radius: 4px; }

/* ---- layout ---- */
.shell { max-width: 520px; margin: 0 auto; padding: 0 20px 48px; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.stack-sm > * + * { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- top bar ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 14px; }
.brand { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.brand__dot { color: var(--amber-400); }
.nav { display: flex; align-items: center; gap: 14px; font-size: .9375rem; }
.nav a { color: var(--n-600); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.nav a:hover { color: var(--green-600); }
.inline-form { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--n-600); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.linklike:hover { color: var(--green-600); }

.icon { flex: none; vertical-align: -3px; }

/* ---- cards ---- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 20px; transition: box-shadow 220ms var(--ease); }
.card--green { border-top: 3px solid var(--green-500); }
.card--amber { border-top: 3px solid var(--amber-400); }
.card--blue { border-top: 3px solid var(--blue); }
.card--plum { border-top: 3px solid var(--plum); }
.card--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); border-radius: var(--r-lg); padding: 24px 22px; box-shadow: none; }
.card--dark .overline { color: var(--green-400); }
.card--dark p { color: var(--muted-on-dark); }
.card--dark h1, .card--dark h2 { color: var(--cream); }
.card--dark a:not(.btn) { color: var(--green-300); }

.overline { font-family: "JetBrains Mono", monospace; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--n-500); }
.lede { font-size: 1.0625rem; color: var(--n-600); }
.card--dark .lede { color: var(--muted-on-dark); }

/* ---- buttons: pills are the signature ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid transparent; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background 120ms var(--ease), transform 120ms var(--ease), box-shadow 120ms var(--ease); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--green-500); color: var(--cream); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--green-600); color: var(--cream); }
.btn--amber { background: var(--amber-400); color: var(--ink); box-shadow: var(--shadow-md); }
.btn--amber:hover { background: var(--amber-500); color: var(--ink); }
.btn--secondary { background: var(--paper); color: var(--green-600); border-color: var(--n-300); }
.btn--secondary:hover { border-color: var(--green-500); color: var(--green-700); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn--disabled { background: var(--n-100); color: var(--n-400); border-color: var(--line); box-shadow: none; cursor: not-allowed; }

/* ---- forms ---- */
.field { display: block; }
.field label, .legend { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 6px; }
.hint { color: var(--n-500); font-size: .875rem; margin: -2px 0 6px; }
.input, .select { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r-sm); border: 1px solid var(--n-300); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; }
.input:focus, .select:focus { outline: 3px solid rgba(19,122,99,.30); border-color: var(--green-500); }
.field--error .input, .field--error .select { border-color: var(--danger); background: var(--danger-50); }
.error { color: var(--danger); font-size: .875rem; font-weight: 500; margin-top: 6px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--n-300); background: var(--paper); font-family: "JetBrains Mono", monospace; font-size: .8125rem; font-weight: 600; color: var(--n-600); }
.chip input:checked + span { background: var(--green-50); border-color: var(--green-500); color: var(--green-600); }
.chip input:focus-visible + span { outline: 3px solid rgba(19,122,99,.45); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--green-500); flex: none; }
.check label { font-weight: 400; margin: 0; font-size: .9375rem; }

/* ---- messages and pills ---- */
.alert { border-radius: var(--r-md); padding: 12px 16px; font-size: .9375rem; border: 1px solid var(--line); margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.alert--ok { background: var(--green-50); border-color: var(--green-100); color: var(--green-700); }
.alert--info { background: #EAF1F6; border-color: #D3E1EC; color: #2C5878; }
.alert--error { background: var(--danger-50); border-color: #F2D0C7; color: #8F3220; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 4px 12px; font-family: "JetBrains Mono", monospace; font-size: .75rem; font-weight: 600; background: var(--green-50); color: var(--green-600); }
.pill--amber { background: var(--amber-50); color: var(--amber-600); }

/* ---- steps and lists ---- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--green-50); color: var(--green-600); font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: .875rem; }
.steps strong { display: block; font-family: "Space Grotesk", sans-serif; font-weight: 600; }
.legal h2 { margin-top: 24px; }
.legal p, .legal li { margin-top: 8px; color: var(--n-600); }
.legal ul { padding-left: 20px; }

.footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 16px; justify-content: center; font-size: .875rem; }
.footer a { color: var(--n-500); }

@media (min-width: 640px) {
  .shell { padding-top: 12px; }
  h1 { font-size: 2.25rem; }
}
.price { font-size: 2rem; font-weight: 600; }

/* ---- upload, review and analysis ---- */
.card--danger { border-top: 3px solid var(--danger); }
.pill--blue { background: #EAF1F6; color: #2C5878; }
.pill--danger { background: var(--danger-50); color: #8F3220; }
.list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.list li { color: var(--n-600); }
.list strong { color: var(--ink); }
.stat { font-size: 2.25rem; font-weight: 600; line-height: 1.1; margin: 0; }
.stat--green { color: var(--green-400); }
.compare .small { color: var(--muted-on-dark); margin-top: 4px; }
.input.file { padding: 12px; background: var(--n-50); }
.details summary { cursor: pointer; font-weight: 600; color: var(--green-600); }
.details[open] summary { margin-bottom: 8px; }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th { text-align: left; font-family: "JetBrains Mono", monospace; font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--n-500); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.table td { padding: 10px 6px; border-bottom: 1px solid var(--line); }
.table .num { text-align: right; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: 0; }

.bar { width: 100%; height: 8px; display: block; }
.bar__bg { fill: var(--n-100); }
.bar__fill--green { fill: var(--green-500); }
.bar__fill--amber { fill: var(--amber-400); }
.bar__fill--muted { fill: var(--green-200); }
.bars { display: grid; gap: 10px; }
.bars__row { display: grid; grid-template-columns: 36px 1fr 64px; align-items: center; gap: 10px; font-size: .875rem; }
.bars__row--wide { grid-template-columns: minmax(80px, 120px) 1fr 44px; }
.bars__label { font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--n-500); text-transform: uppercase; letter-spacing: .06em; }
.bars__label--item { text-transform: none; letter-spacing: 0; font-family: "Hanken Grotesk", sans-serif; font-size: .9375rem; color: var(--ink); }
.bars__value { text-align: right; color: var(--n-600); font-size: .8125rem; }

.effects { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.effects li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.effects__label { font-weight: 600; }
.effects__value { font-size: 1.125rem; font-weight: 600; }
.effects__value--down { color: var(--danger); }
.effects__value--up { color: var(--green-600); }
.effects__days { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* ---- bottom navigation ---- */
body.has-nav { padding-bottom: 84px; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 0; background: var(--paper); border-top: 1px solid var(--line); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); z-index: 10; }
.tabbar__item { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: var(--r-md); color: var(--n-500); text-decoration: none; font-size: .75rem; font-weight: 600; }
.tabbar__item--active { color: var(--green-600); background: var(--green-50); }
.tabbar__item:hover { color: var(--green-600); }
.tabbar--wide-only { display: none; }

/* ---- today ---- */
.hero-row { display: flex; align-items: center; gap: 8px; color: var(--muted-on-dark); font-size: .9375rem; }
.items { display: grid; gap: 12px; }
.item { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--green-500); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.item--amber { border-left-color: var(--amber-400); }
.item__name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.0625rem; }
.item__meta { color: var(--n-500); font-size: .8125rem; grid-column: 1; }
.item__num { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
.item__qty { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--ink); }
.item__unit { font-size: .75rem; color: var(--n-500); display: block; }
.input--qty { width: 96px; min-height: 52px; text-align: right; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.5rem; padding: 6px 10px; }
.chip-delta { display: inline-block; border-radius: var(--r-pill); padding: 2px 10px; font-family: "JetBrains Mono", monospace; font-size: .75rem; font-weight: 600; background: var(--n-100); color: var(--n-600); }
.chip-delta--up { background: var(--amber-50); color: var(--amber-600); }
.chip-delta--down { background: #EAF1F6; color: #2C5878; }
.item__why { grid-column: 1 / -1; font-size: .8125rem; color: var(--n-500); }
.item__why summary { cursor: pointer; color: var(--green-600); font-weight: 600; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); border-left: 3px solid var(--green-500); font-size: .9375rem; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow-sm); }
.tile--amber { border-left-color: var(--amber-400); }
.tile--blue { border-left-color: var(--blue); }
.tile--plum { border-left-color: var(--plum); }
.sticky-cta { position: sticky; bottom: 76px; padding-top: 8px; background: linear-gradient(to top, var(--cream) 70%, rgba(251,248,243,0)); }

/* ---- week ---- */
.daylist { display: grid; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.dayrow { display: grid; grid-template-columns: 78px 1fr auto; gap: 8px 12px; padding: 16px; border-bottom: 1px solid var(--line); align-items: start; }
.dayrow:last-child { border-bottom: 0; }
.dayrow--today { background: var(--green-50); }
.dayrow__day { font-family: "Space Grotesk", sans-serif; font-weight: 600; }
.dayrow__date { font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--n-500); display: block; }
.dayrow__total { text-align: right; font-family: "JetBrains Mono", monospace; font-weight: 600; }
.dayrow__range { display: block; font-size: .75rem; color: var(--n-500); font-weight: 400; white-space: nowrap; }
.dayrow__bars { display: grid; gap: 4px; }
.dayrow__tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { border-radius: var(--r-pill); padding: 3px 10px; font-size: .75rem; background: var(--amber-50); color: var(--amber-600); border: 1px solid var(--amber-100); font-weight: 600; }
.legend-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8125rem; color: var(--n-600); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot--0 { background: var(--green-500); } .dot--1 { background: var(--amber-400); } .dot--2 { background: var(--blue); }
.bar__fill--blue { fill: var(--blue); }

/* ---- drivers ---- */
.signal { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.signal__icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--green-50); color: var(--green-600); display: grid; place-items: center; }
.signal--amber .signal__icon { background: var(--amber-50); color: var(--amber-600); }
.signal--blue .signal__icon { background: #EAF1F6; color: #2C5878; }
.signal--plum .signal__icon { background: #F3EBF3; color: var(--plum); }
.choices { display: grid; gap: 8px; }
.choices .btn { justify-content: flex-start; text-align: left; min-height: 44px; padding: 10px 18px; }
.radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--n-300); border-radius: var(--r-md); background: var(--paper); }
.radio input { margin-top: 4px; accent-color: var(--green-500); width: 20px; height: 20px; flex: none; }
.radio label { font-weight: 400; margin: 0; }
.radio strong { display: block; }


/* ---- learning loop and impact ---- */
.badge-big { text-align: right; }
.badge-big .stat { color: var(--green-400); }
.entry { display: grid; gap: 10px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--green-500); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.entry__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.entry__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.entry__fields label { font-size: .75rem; font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--n-500); display: block; margin-bottom: 4px; font-weight: 600; }
.input--num { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.25rem; text-align: center; }
.chip--wide { grid-column: 1 / -1; }
.chip--wide span { width: 100%; }
.dates { display: flex; flex-wrap: wrap; gap: 8px; }
.dates a { border-radius: var(--r-pill); padding: 6px 12px; border: 1px solid var(--n-300); background: var(--paper); color: var(--n-600); text-decoration: none; font-size: .8125rem; font-weight: 600; }
.dates a[aria-current="date"] { background: var(--green-50); border-color: var(--green-500); color: var(--green-600); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.statcard { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--green-500); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-sm); display: grid; gap: 4px; align-content: start; }
.statcard--amber { border-top-color: var(--amber-400); } .statcard--blue { border-top-color: var(--blue); } .statcard--plum { border-top-color: var(--plum); }
.statcard .stat { font-size: 2rem; }
.statcard--empty .stat { color: var(--n-300); }
.accbars { width: 100%; height: auto; }
.accbars__bar { fill: var(--green-200); }
.accbars__bar--now { fill: var(--green-500); }
.accbars__val { font-family: "JetBrains Mono", monospace; font-size: 9px; fill: var(--n-500); }
.accbars__lbl { font-family: "JetBrains Mono", monospace; font-size: 9px; fill: var(--n-500); }
.amber-number { color: var(--amber-400); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split > div + div { border-left: 1px solid rgba(255,255,255,.12); padding-left: 16px; }


/* ---- plan banner ---- */
.banner { border-radius: var(--r-md); padding: 10px 14px; font-size: .875rem; margin-bottom: 14px; border: 1px solid var(--line); }
.banner--green { background: var(--green-50); border-color: var(--green-100); color: var(--green-700); }
.banner--amber { background: var(--amber-50); border-color: var(--amber-100); color: var(--amber-600); }
.banner a { font-weight: 700; }


/* ---- insights page: three sections, and the influence symbols ---- */
.section-head { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; margin-top: 40px; scroll-margin-top: 16px; }
.section-head:first-of-type { margin-top: 28px; }
.section-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--green-500); color: #fff; font-family: "JetBrains Mono", monospace; font-size: .8125rem; font-weight: 600; flex: none; }
.section-head + .section-lede { margin-top: 10px; }
.jump { display: grid; gap: 8px; margin-top: 6px; }
.jump a { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: var(--r-md); background: rgba(255,255,255,.08); }
.jump a:hover { background: rgba(255,255,255,.16); }
.jump .section-num { background: var(--green-400); }
.infl-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.infl-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 6px; box-shadow: var(--shadow-sm); align-content: start; }
.infl-tile__head { display: flex; align-items: center; gap: 10px; }
.infl-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--green-50); color: var(--green-600); }
.infl-tile__label { font-family: "Space Grotesk", sans-serif; font-weight: 600; }
.infl-tile__value { font-size: 1.5rem; font-weight: 600; margin: 0; }
.infl-tile__value--up { color: var(--green-600); }
.infl-tile__value--down { color: var(--danger); }
.infl-tile__value--text { font-family: "Space Grotesk", sans-serif; color: var(--green-600); }
.infl-tile--unknown .infl-tile__icon, .infl-tile--flat .infl-tile__icon { background: var(--n-100); color: var(--n-500); }
.infl-tile--unknown .infl-tile__value, .infl-tile--flat .infl-tile__value { color: var(--n-500); font-size: 1.0625rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-infl { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 4px 10px 4px 8px; font-size: .75rem; font-weight: 600; background: var(--amber-50); color: var(--amber-600); border: 1px solid var(--amber-100); }
.chip-infl .icon { flex: none; }
.card--dark .chip-infl { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.16); }
.wkrow { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: start; }
.wkrow:last-child { border-bottom: 0; }
.wkrow__chips { grid-column: 1 / -1; }
.table--insights td { vertical-align: top; }
.table--insights th:nth-child(2), .table--insights td:nth-child(2) { width: 22%; }
.table--insights th:nth-child(3), .table--insights td:nth-child(3) { width: 24%; }
@media (min-width: 640px) { .infl-grid { grid-template-columns: 1fr 1fr; } .jump { grid-template-columns: repeat(3, 1fr); } }


/* =============================================================================
   Desktop (1024px and wider): the same pages and features, laid out for a big screen.
   Phones keep the single column and the bottom tab bar.
   ============================================================================= */
@media (min-width: 1024px) {
  body.is-app { padding-bottom: 0; padding-left: 232px; }
  body.is-app .shell { max-width: 1160px; padding: 0 48px 64px; }
  body.is-app .brand { position: fixed; left: 28px; top: 22px; z-index: 11; font-size: 1.5rem; }

  /* the five screens become a sidebar */
  .tabbar--wide-only { display: flex; }
  .tabbar { top: 0; bottom: 0; right: auto; left: 0; width: 232px; flex-direction: column; justify-content: flex-start;
            align-items: stretch; gap: 4px; padding: 88px 16px 24px; border-top: 0; border-right: 1px solid var(--line); }
  .tabbar__item { flex: none; max-width: none; flex-direction: row; justify-content: flex-start; gap: 12px;
                  padding: 12px 14px; font-size: .9375rem; }

  /* the page's top-level blocks sit in two columns */
  body.is-app main > .stack-lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; align-items: start; }
  body.is-app main > .stack-lg > * { margin-top: 0; min-width: 0; }
  body.is-app main > .stack-lg > :first-child,
  body.is-app main > .stack-lg > .card--dark,
  body.is-app main > .stack-lg > .alert,
  body.is-app main > .stack-lg > .section-head,
  body.is-app main > .stack-lg > .section-lede,
  body.is-app main > .stack-lg > .infl-grid,
  body.is-app main > .stack-lg > .daylist,
  body.is-app main > .stack-lg > .dates,
  body.is-app main > .stack-lg > .stats,
  body.is-app main > .stack-lg > .legend-row,
  body.is-app main > .stack-lg > p,
  body.is-app main > .stack-lg > .span-all,
  body.is-app main > .stack-lg > .card:has(.table-wrap),
  body.is-app main > .stack-lg > form:has(.entry) { grid-column: 1 / -1; }
  body.is-app main > .stack-lg > .section-head { margin-top: 24px; }
  body.is-app main > .stack-lg > .btn { justify-self: start; }

  /* the insights page */
  .infl-grid { grid-template-columns: repeat(3, 1fr); }
  .list--cols { columns: 2; column-gap: 32px; }
  .list--cols li { break-inside: avoid; margin-bottom: 8px; }
  body.is-app main > .stack-lg > .s3-left { grid-column: 1; }
  body.is-app main > .stack-lg > .s3-side { grid-column: 2; grid-row: span 4; }

  /* today: the summary cards side by side, then the whole plan below in two columns */
  .today-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; align-items: start; grid-auto-flow: row dense; }
  .today-cols > * { margin-top: 0; min-width: 0; }
  .today-cols > #nudge, .today-cols > .today-plan { grid-column: 1 / -1; }
  .today-plan .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
  .sticky-cta { bottom: 16px; }

  /* settings: the four setting cards in two columns, the save button underneath */
  .settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; align-items: start; }
  .settings-form > * { margin-top: 0; min-width: 0; }
  .settings-form > .btn { grid-column: 1 / -1; justify-self: start; width: auto; min-width: 240px; }
  .stack:has(> .entry) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .stack:has(> .entry) > * { margin-top: 0; }
  .daylist .wkrow, .daylist .dayrow { padding: 16px 20px; }
  .dayrow__bars { max-width: 460px; }
}
@media (min-width: 1400px) { body.is-app .shell { max-width: 1280px; } }


/* ---- public pages: landing, sign in, sign up, legal ---- */
.hero-sample .stat { margin: 0; }
.sample-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.sample-rows li { display: grid; grid-template-columns: 1fr auto 8.5rem; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.landing-hero, .landing-two { display: grid; gap: 28px; }
.auth-aside { display: none; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.ticks .icon { color: var(--green-300); margin-top: 2px; }

@media (min-width: 768px) {
  .shell { max-width: 720px; }
  .card--narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 1024px) {
  body:not(.is-app) .shell { max-width: 1160px; padding: 0 48px 72px; }
  body:not(.is-app) .topbar { padding-top: 28px; padding-bottom: 28px; }

  .landing-hero { grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: stretch; }
  .landing-hero .hero-copy { padding: 56px 52px; justify-content: center; }
  .landing-hero h1 { font-size: 3.5rem; }
  .landing-hero .lede { font-size: 1.25rem; max-width: 36rem; }
  .landing-hero .btn--block { width: auto; align-self: flex-start; padding-left: 40px; padding-right: 40px; }
  .landing-hero .stack-sm .small { text-align: left; }
  .landing-hero .hero-sample { padding: 32px; align-self: center; box-shadow: var(--shadow-md); }
  .landing-steps .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .landing-steps .steps li { grid-template-columns: 1fr; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
  .landing-two { grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }

  /* sign in, forgot, reset: a message panel on the left, the form on the right */
  .auth-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; min-height: 520px; }
  .auth-aside { display: flex; flex-direction: column; justify-content: center; gap: 22px; background: var(--ink); color: var(--cream); border-radius: var(--r-lg); padding: 56px 48px; align-self: stretch; }
  .auth-aside .overline { color: var(--green-400); }
  .auth-aside h2 { font-size: 2.25rem; color: var(--cream); }
  .auth-main { width: 100%; max-width: 480px; justify-self: center; }

  /* sign up: the two cards side by side, the button underneath */
  .signup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; align-items: start; }
  .signup-grid > * { margin-top: 0; min-width: 0; }
  .signup-grid > .signup-submit { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; width: 100%; }

  /* terms and privacy: a comfortable reading width, centred */
  .legal { max-width: 780px; margin: 0 auto; font-size: 1.0625rem; }
  .legal h1 { font-size: 2.5rem; }
}


/* ============================================================================
   The logo, the top message, and the photo pages (landing and sign in)
   ============================================================================ */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 30px; height: 30px; flex: none; background: url("/static/logomark.svg") center / contain no-repeat; }

.flash { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60; margin: 0;
         width: max-content; max-width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow-md);
         animation: flash-out .5s ease 6s forwards; }
@keyframes flash-out { to { opacity: 0; visibility: hidden; } }

.btn--lg { min-height: 56px; padding: 14px 34px; font-size: 1.0625rem; }
.bar__fill--blue { fill: var(--blue); }

body.landing { background: #0A1311; color: var(--cream); }
body.landing::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url("/static/img/hero-shop-small.jpg") 62% center / cover no-repeat; }
body.landing::after { content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(8,17,15,.92) 0%, rgba(8,17,15,.0) 38%), linear-gradient(95deg, rgba(8,17,15,.94) 0%, rgba(8,17,15,.8) 40%, rgba(8,17,15,.4) 74%, rgba(8,17,15,.62) 100%); }
body.landing .shell { max-width: 1280px; min-height: 100vh; display: flex; flex-direction: column; padding: 0 20px 20px; }
body.landing main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding-bottom: 12px; }
body.landing .brand { color: var(--cream); }
body.landing .brand__mark { background-image: url("/static/logomark-cream.svg"); }
body.landing .nav a { color: #12201C; background: var(--cream); font-weight: 600; border: 1px solid var(--cream); border-radius: var(--r-pill); padding: 9px 24px; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
body.landing .nav a:hover { background: #fff; color: #0A1311; }
body.landing .footer { border-top: 0; margin-top: 0; padding-top: 0; }
body.landing .footer a { color: rgba(251,248,243,.6); }
body.landing h1, body.landing h2 { color: var(--cream); }

.lp { display: grid; gap: 36px; align-items: center; padding-top: 16px; }
.lp-kicker { font-family: "JetBrains Mono", monospace; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green-300); margin: 0; }
.lp h1 { font-size: clamp(2.5rem, min(5.2vw, 8vh), 4.75rem); line-height: 1.02; letter-spacing: -0.035em; margin: 14px 0 18px; }
.lp-lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: rgba(251,248,243,.84); max-width: 34rem; margin: 0; }
.lp-cta { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin-top: 28px; }
.lp-note { color: rgba(251,248,243,.74); font-size: .9375rem; }
.lp-trust { margin: 24px 0 0; max-width: 33rem; padding-left: 14px; border-left: 2px solid var(--amber-400); color: rgba(251,248,243,.66); font-size: .9375rem; }
.lp-trust strong { color: var(--cream); }

.plan-card { background: rgba(251,248,243,.97); color: var(--ink); border-radius: 22px; padding: 24px 26px; display: grid; gap: 14px; width: 100%; max-width: 520px;
             box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1); }
.plan-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan-card__eyebrow { font-family: "JetBrains Mono", monospace; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--n-500); }
.plan-card__wx { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--n-600); }
.plan-card__total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan-card__total .mono { font-size: 3rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.plan-card__total span:last-child { color: var(--n-500); }
.range svg { width: 100%; height: 22px; display: block; }
.range__track { fill: var(--n-100); }
.range__band { fill: var(--green-200); }
.range__mark { fill: var(--green-600); }
.range__labels { display: flex; justify-content: space-between; font-size: .75rem; color: var(--n-500); margin-top: 4px; }
.plan-card .chips { margin: 0; }
.plan-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan-items li { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; gap: 12px; align-items: center; font-size: .9375rem; }
.plan-items .mono { text-align: right; font-weight: 600; }
.plan-card__foot { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-card__foot b { display: block; font-family: "JetBrains Mono", monospace; font-size: 1.5rem; line-height: 1; color: var(--green-600); }
.plan-card__foot small { color: var(--n-500); font-size: .75rem; }

.lp-strip { display: grid; gap: 22px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }
.lp-steps { display: contents; list-style: none; margin: 0; padding: 0; }
.lp-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.lp-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.35); font-family: "JetBrains Mono", monospace; font-size: .875rem; font-weight: 600; }
.lp-steps strong { display: block; font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--cream); }
.lp-steps span:not(.lp-num) { color: rgba(251,248,243,.66); font-size: .875rem; }
.lp-price { display: grid; gap: 4px; align-content: start; }
.lp-price .mono { font-size: 2.5rem; color: var(--cream); line-height: 1; }
.lp-price span:last-child { color: rgba(251,248,243,.66); font-size: .875rem; }

/* sign in, forgot, reset: the same photo, the form on a white card */
body.landing .auth-split { min-height: 0; }
body.landing .auth-aside { background: none; padding: 0; border-radius: 0; }
body.landing .auth-aside h2 { font-size: clamp(2.25rem, min(4.4vw, 7vh), 3.75rem); line-height: 1.04; letter-spacing: -0.03em; }
body.landing .auth-aside .ticks { color: rgba(251,248,243,.84); }
body.landing .auth-main { max-width: 460px; }
body.landing .auth-main > p, body.landing .auth-main > .muted { color: rgba(251,248,243,.78); }
body.landing .auth-main > p a { color: var(--amber-400); }
body.landing .auth-main > .btn--secondary { background: rgba(255,255,255,.1); color: var(--cream); border-color: rgba(255,255,255,.3); }
body.landing .auth-main .card { box-shadow: 0 30px 80px rgba(0,0,0,.5); border-radius: 20px; padding: 28px; }

@media (min-width: 900px) { body.landing::before { background-image: url("/static/img/hero-shop.jpg"); } }
@media (min-width: 1024px) {
  body.landing .shell { padding: 0 56px 24px; }
  body.landing .topbar { padding-top: 30px; padding-bottom: 14px; }
  .lp { grid-template-columns: 1.08fr .92fr; gap: 72px; }
  .plan-card { justify-self: end; }
  .lp-strip { grid-template-columns: repeat(3, 1fr) .9fr; gap: 40px; align-items: start; }
}

/* short desktop windows (small laptops): tighten the spacing so the front page still fits one screen */
@media (min-width: 1024px) and (max-height: 820px) {
  body.landing .topbar { padding-top: 16px; padding-bottom: 6px; }
  body.landing main { gap: 18px; padding-bottom: 4px; }
  .lp { padding-top: 0; }
  .lp h1 { margin: 10px 0 12px; }
  .lp-lede { font-size: 1rem; }
  .lp-cta { margin-top: 18px; }
  .lp-trust { margin-top: 14px; font-size: .875rem; }
  .plan-card { padding: 16px 20px; gap: 9px; }
  .plan-card__total .mono { font-size: 2.25rem; }
  .plan-items { gap: 6px; }
  .plan-card__foot { padding-top: 9px; }
  .lp-strip { padding-top: 14px; gap: 28px; }
  .lp-steps span:not(.lp-num) { font-size: .8125rem; }
  .lp-price .mono { font-size: 2rem; }
}
body.landing .card { color: var(--ink); }
body.landing .card .muted, body.landing .card .hint { color: var(--n-500); }

/* ---- sign up: one wide white panel on the photo ---- */
body.landing .signup-wrap { max-width: 980px; width: 100%; margin: 0 auto; }
body.landing .signup-head .lede { color: rgba(251,248,243,.8); max-width: 38rem; }
.signup-head h1 { font-size: clamp(2rem, min(4vw, 6.5vh), 3.25rem); letter-spacing: -0.03em; margin: 8px 0 8px; }
.signup-panel { display: grid; gap: 22px; padding: 24px; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.signup-panel .field { margin: 0; }
.signup-hint { margin: -6px 0 0; }
.signup-panel .stack > * + * { margin-top: 20px; }
.signup-panel legend { padding: 0; }
.signup-panel .check + .signup-hint { margin: 4px 0 0 34px; }
.signup-panel .grid-2 { align-items: start; }
.signup-submit { display: grid; gap: 14px; }
.signup-submit .btn { width: 100%; }
.signup-foot { text-align: center; margin: 0; color: rgba(251,248,243,.78); font-size: .9375rem; }
.signup-foot a { color: var(--amber-400); }

@media (min-width: 1024px) {
  body.landing .signup-wrap > * { margin-top: 0; }
  body.landing .signup-wrap { display: grid; gap: 18px; }
  .signup-panel { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
  .signup-col { padding: 28px 32px; gap: 14px; }
  .signup-col + .signup-col { border-left: 1px solid var(--line); }
  .signup-submit { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 18px 32px; border-top: 1px solid var(--line); background: var(--n-50); border-radius: 0 0 20px 20px; }
  .signup-submit .btn { width: auto; min-width: 280px; }
}
@media (min-width: 1024px) and (max-height: 900px) {
  .signup-col { padding: 16px 28px; gap: 9px; }
  .signup-head h1 { margin: 4px 0 4px; }
  body.landing .signup-wrap { gap: 12px; }
  .signup-submit { padding: 12px 28px; }
  body.landing .topbar { padding-top: 16px; padding-bottom: 4px; }
}


/* ============================================================================
   The menu groups, and the dashboard (home): everything on one screen on a desktop
   ============================================================================ */
.tabbar__group { display: none; }
.tabbar__item--wide-only { display: none; }   /* the phone bar only has the everyday entries */
.lbl-full { display: none; }
.btn--sm { min-height: 38px; padding: 8px 14px; font-size: .875rem; }

.dash { display: grid; gap: 12px; }
.dash > * { margin: 0; min-width: 0; }
.dash-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 20px 22px; color: var(--cream); display: grid; gap: 14px;
             background: linear-gradient(95deg, rgba(8,17,15,.96) 0%, rgba(8,17,15,.84) 45%, rgba(8,17,15,.5) 100%), url("/static/img/hero-shop-small.jpg") 70% 55% / cover no-repeat; }
.dash-hero h1 { color: var(--cream); font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; margin: 2px 0 2px; }
.dash-hero__shop { margin: 0; color: rgba(251,248,243,.82); font-size: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dash-hero__shop strong { color: var(--cream); font-weight: 600; }
.dash-trial { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--r-pill); background: rgba(19,122,99,.35); border: 1px solid rgba(159,208,194,.5); color: #fff; font-size: .8125rem; font-weight: 600; text-decoration: none; }
.dash-trial--warn { background: rgba(224,138,54,.3); border-color: rgba(224,138,54,.7); }
.dash-meta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dash-meta li { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-size: .8125rem; line-height: 1.2; overflow: hidden; }
.dash-meta li span { overflow: hidden; text-overflow: ellipsis; }
.dash-meta .icon { color: var(--green-300); flex: none; }

.dash-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; box-shadow: var(--shadow-sm); display: grid; gap: 8px; align-content: start; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.dash-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dash-card p { margin: 0; }
.dash-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .875rem; color: var(--green-600); text-decoration: none; }
.dash-card__more::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }   /* the whole card is a link */
.dash-front { position: relative; z-index: 1; }   /* buttons and links inside a card stay clickable */
a.dash-front { color: var(--green-600); font-weight: 600; }

/* yesterday, today, tomorrow: three cards with the same shape */
.dash-days { display: grid; gap: 12px; }
.dash-days > *, .dash-learn > * { min-width: 0; }
.day-card { grid-template-rows: auto auto auto auto 1fr; padding: 14px 18px 12px; gap: 6px; }
.day-card--today { background: linear-gradient(180deg, var(--green-50) 0, var(--paper) 55%); }
.day-card__head { display: flex; justify-content: space-between; align-items: baseline; }
.day-card__label { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.0625rem; }
.day-card--today .day-card__label { color: var(--green-600); }
.day-card__date { font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--n-500); }
.day-card__big { font-size: clamp(1.875rem, min(3vw, 5vh), 2.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 2px 0 0; }
.day-card__big--text { font-family: "Space Grotesk", sans-serif; font-size: clamp(1.5rem, 2.2vw, 1.875rem); letter-spacing: -0.02em; }
.day-card__sub { color: var(--n-600); font-size: .9375rem; min-height: 1.4em; }
.day-card__sub b.is-up { color: var(--green-600); }
.day-card__sub b.is-down { color: var(--danger); }
.day-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.day-card__chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; min-height: 26px; }
.day-card__make { font-size: .8125rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.day-card__make b { margin-left: 4px; }
.day-card .dash-card__more { align-self: end; }
.chip-infl--wx { background: var(--n-50); color: var(--n-600); border-color: var(--line); }
.chip-infl--ok { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.range--sm svg { width: 100%; height: 14px; display: block; }
.range--sm .range__labels { margin-top: 2px; }

.dash-week { gap: 6px; }
.dash-sub { font-family: "Hanken Grotesk", sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--n-500); font-size: .8125rem; }
.wk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; }
.wk__day { display: grid; justify-items: center; gap: 3px; padding: 5px 2px 3px; border-radius: 12px; }
.wk__day--today { background: var(--green-50); }
.wk__val { font-size: .625rem; font-weight: 600; text-align: center; white-space: nowrap; letter-spacing: -0.03em; }
.wk__bar { width: 62%; max-width: 38px; height: clamp(40px, 7.4vh, 76px); display: block; }
.wk__track { fill: var(--n-100); }
.wk__fill { fill: var(--green-500); }
.wk__day--today .wk__fill { fill: var(--green-600); }
.wk__day--closed .wk__val { color: var(--n-500); font-weight: 400; }
.wk__lbl { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--n-600); }
.wk__flag { height: 14px; color: var(--amber-500); }

.dash-learn { display: grid; gap: 12px; }
.dtiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dtile { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 1px; align-items: center; padding: 10px 12px; background: var(--n-50); border: 1px solid var(--line); border-radius: 14px; }
.dtile__icon { grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--green-50); color: var(--green-600); align-self: start; }
.dtile__label { font-size: .75rem; color: var(--n-500); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dtile__value { font-family: "Space Grotesk", sans-serif; font-size: 1.1875rem; font-weight: 600; line-height: 1.15; }
.dtile__value.mono { font-family: "JetBrains Mono", monospace; font-size: 1.375rem; }
.dtile__note { font-size: .75rem; color: var(--n-600); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dtile .is-up { color: var(--green-600); }
.dtile .is-down { color: var(--danger); }

@media (min-width: 640px) {
  .dtiles--3, .dtiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  body.is-app .topbar { justify-content: flex-end; padding-top: 10px; padding-bottom: 2px; }
  body.is-app .footer { margin-top: 18px; padding-top: 10px; }
  .dash-hero { grid-template-columns: 1fr auto; align-items: center; padding: 12px 24px; gap: 10px; }
  .dash-meta li { white-space: nowrap; padding: 0 14px; font-size: .875rem; }
  .day-card__make { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .wk { gap: 8px; }
  .wk__val { font-size: .75rem; letter-spacing: 0; }
  .dash-meta { grid-template-columns: repeat(2, 210px); gap: 6px; }
  .dash-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-learn { grid-template-columns: 1fr 1.25fr; }
  .dtiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dtiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* the left menu: headings, and every entry with its full name */
  .tabbar__group { display: block; padding: 16px 14px 4px; font-family: "JetBrains Mono", monospace; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--n-500); }
  .tabbar__item--wide-only { display: flex; }
  .lbl-full { display: inline; }
  .lbl-short { display: none; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .dash { gap: 10px; }
  .dash-hero { padding: 12px 22px; }
  .dash-meta li { min-height: 32px; }
  .dash-card { padding: 12px 16px; gap: 7px; }
  .day-card { padding: 12px 16px 10px; }
  .dtile { padding: 8px 10px; }
}


/* ============================================================================
   The banner header, the week cards, today's plan, and the trial pill
   ============================================================================ */
.trial-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-700) !important; font-size: .8125rem; font-weight: 600; }
.nav .trial-pill:hover { background: var(--green-100); }

.page-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px; color: var(--cream); display: grid; gap: 14px;
             background: linear-gradient(95deg, rgba(8,17,15,.96) 0%, rgba(8,17,15,.84) 48%, rgba(8,17,15,.5) 100%), url("/static/img/hero-shop-small.jpg") 70% 55% / cover no-repeat; }
.page-hero h1 { color: var(--cream); font-size: clamp(1.625rem, 2.6vw, 2.375rem); letter-spacing: -0.03em; margin: 4px 0 2px; }
.page-hero p { color: rgba(251,248,243,.84); margin: 0; }
.page-hero .lp-kicker { color: var(--green-300); }
.page-hero .overline { color: var(--green-300); }
.page-hero__lede { max-width: 46rem; font-size: 1.0625rem; }
.page-hero .lede { color: rgba(251,248,243,.84); }
.page-hero .hero-row { display: flex; align-items: center; gap: 8px; }
.page-hero .chips { margin-top: 10px; }
.page-hero .chip-infl { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }
.page-hero .badge-big p { color: var(--cream); }
.page-hero .jump a { background: rgba(255,255,255,.1); }
.page-hero--stack { gap: 10px; }
.hero-stat { display: grid; gap: 8px; align-content: center; }
.hero-stat__label { font-family: "JetBrains Mono", monospace; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-300) !important; }
.hero-stat__num { font-size: clamp(2.5rem, 4.4vw, 3.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; color: var(--cream) !important; }
.hero-stat__sub { font-size: .9375rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-why { color: rgba(251,248,243,.8); font-size: .875rem; }
.hero-why summary { cursor: pointer; color: var(--green-300); font-weight: 600; }

.week-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.wcard { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow-sm); }
.wcard--today { border-top: 3px solid var(--green-500); background: linear-gradient(180deg, var(--green-50) 0, var(--paper) 45%); }
.wcard--closed { background: var(--n-50); box-shadow: none; }
.wcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.wcard__day { font-size: 1.125rem; display: inline-flex; align-items: center; gap: 6px; }
.wcard__date { display: block; }
.wcard__total { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0; white-space: nowrap; }
.wcard__range { font-size: .8125rem; color: var(--n-500); margin: 0; }
.wcard__closed { color: var(--n-500); font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; margin: 6px 0; }
.wcard__bars { display: grid; gap: 6px; margin-top: 4px; }
.wcard .bars__row { grid-template-columns: 1fr 40px; }

.page-hero + .alert, .page-hero + .stack-lg { margin-top: 0; }
.item { padding: 14px 16px; }
.item__qty { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 2rem; line-height: 1; }
.input--qty { font-size: 1.5rem; font-weight: 700; text-align: right; }

@media (min-width: 640px) { .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .page-hero { grid-template-columns: 1fr auto; align-items: center; padding: 22px 30px; gap: 28px; }
  .page-hero--stack { grid-template-columns: 1fr; }
  .hero-stat { justify-items: end; text-align: right; min-width: 280px; }
  .hero-stat__sub { justify-content: flex-end; }
  .hero-why { text-align: right; }
  .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* today and tomorrow: the plan on the left, the notes on the right */
  .today-cols { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; grid-auto-flow: row; }
  .today-cols > #nudge { grid-column: 2; grid-row: 1; }
  .today-cols > .today-plan { grid-column: 1; grid-row: 1 / span 4; }
  .today-cols > .today-aside { grid-column: 2; }
  .today-cols > .card:not(#nudge) { grid-column: 1 / -1; }
  .today-plan .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-aside .tiles { grid-template-columns: 1fr; }
}


/* phones: the trial pill gets its own row under the logo instead of squeezing the header */
.trial-pill { white-space: nowrap; }
@media (max-width: 1023px) {
  .topbar { flex-wrap: wrap; gap: 8px 14px; }
  .brand { margin-right: auto; }
  .nav { display: contents; }
  .nav a, .nav .linklike { white-space: nowrap; }
  .nav .trial-pill { order: 5; flex: 1 0 100%; justify-content: center; }
}


/* drivers: the reasons behind each item, as chips */
.movers { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.movers li { display: grid; gap: 6px; }
.factors { display: flex; flex-wrap: wrap; gap: 6px; }
.factor { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--n-50); border: 1px solid var(--line); font-size: .8125rem; color: var(--n-600); }
.factor b { font-family: "JetBrains Mono", monospace; font-weight: 600; }
.factor .is-up { color: var(--green-600); }
.factor .is-down { color: var(--danger); }

/* billing: the price card */
.plan-feature { border-top: 3px solid var(--green-500); display: grid; gap: 18px; padding: 22px; }
.plan-feature .stat { font-size: 2.75rem; }
.plan-feature .ticks { color: var(--ink); }
.plan-feature .ticks .icon { color: var(--green-500); }

@media (min-width: 1024px) {
  .plan-feature { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 26px 32px; }
  .plan-feature__list { padding-left: 40px; border-left: 1px solid var(--line); }
  /* settings: the shop card is tall, so it sits on the right beside the three shorter ones */
  .settings-form > .s-left { grid-column: 1; }
  .settings-form > .s-shop { grid-column: 2; grid-row: 1 / span 3; }
}


/* wide screens: use the room; tile rows share the width however many tiles there are */
@media (min-width: 1700px) { body.is-app .shell { max-width: 1560px; } }
@media (min-width: 1024px) {
  .dtiles { display: flex; gap: 10px; }
  .dtiles > .dtile { flex: 1 1 0; min-width: 0; }
}


/* settings: plan, test email and password in one row; drivers: the reasons in two columns */
.settings-extra { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .settings-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
  .movers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
}

.card--narrow { width: 100%; box-sizing: border-box; }


/* the card you point at (or tab to) gets a green outline */
.dash-card:hover, .dash-card:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 1px var(--green-500), var(--shadow-md); }
.range__actual { fill: var(--amber-500); stroke: #fff; stroke-width: 1; }
.range__dot { color: var(--amber-500); }


/* week cards: the whole card opens that day */
.wcard { position: relative; transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.wcard:hover, .wcard:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 1px var(--green-500), var(--shadow-md); }
.wcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .8125rem; font-weight: 600; color: var(--green-600); text-decoration: none; }
.wcard__more::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }

.wcard__items { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.wcard__items li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.wcard__items .mono { font-weight: 600; }


/* settings: one account card with a row for each thing */
.account-card { padding: 20px 24px; gap: 0; }
.account-card > .overline { margin-bottom: 8px; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); margin: 0; }
.account-row p { margin: 2px 0 0; max-width: 46rem; }
.account-row .btn { flex: none; white-space: nowrap; }
.account-row--details { display: block; padding: 0; }
.account-row--details > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; cursor: pointer; list-style: none; }
.account-row--details > summary::-webkit-details-marker { display: none; }
.account-row--details[open] > summary .btn { background: var(--green-50); }
.account-pw { padding: 0 0 18px; }
@media (max-width: 639px) { .account-row, .account-row--details > summary { flex-direction: column; align-items: flex-start; gap: 10px; } }


/* sign-up: pick the shop from the register */
.find { position: relative; }
.find__list { position: absolute; z-index: 20; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--n-200); border-radius: 12px; box-shadow: var(--shadow-md); max-height: 320px; overflow-y: auto; }
.find__list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.find__list li span { font-size: .8125rem; color: var(--n-500); }
.find__list li:hover, .find__list li.is-active { background: var(--green-50, #ECF6F2); }
.find__picked { margin: 6px 0 0; font-size: .8125rem; color: var(--green-600); }


/* what's on near you */
.event-list { display: grid; gap: 0; }
.event-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--n-200); }
.event-row:first-child { border-top: 0; }
.event-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-row__main strong { overflow-wrap: anywhere; }
.event-row form { flex: none; }


/* ============================================================
   The first-time reveal: "we're reading your sales" and "here's what we found".
   Dark, big type, one finding at a time. Without JavaScript every step simply shows, stacked.
   (No element here sets `display` on something that gets the hidden attribute, so the browser's own hiding works.)
   ============================================================ */
body.reveal-page .shell { max-width: 1040px; }
body.reveal-page main { justify-content: flex-start; padding-top: 3vh; gap: 0; }
.rv { width: 100%; max-width: 860px; margin: 0 auto; position: relative; }
.rv h1, .rv h2 { color: var(--cream); font-size: clamp(2rem, 5.4vw, 3.75rem); line-height: 1.04; letter-spacing: -0.035em; margin: 10px 0 14px; }
.rv-hl { color: var(--amber-400); }
.rv h1:focus, .rv h2:focus { outline: none; }
.rv-lede { font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); color: rgba(251,248,243,.86); max-width: 40rem; margin: 0; }
.rv-lede strong { color: var(--cream); }
.rv-lede svg { vertical-align: -4px; margin-right: 6px; color: var(--green-300); }
.rv-note { color: rgba(251,248,243,.7); font-size: .9375rem; margin: 14px 0 0; }
.rv-note a { color: var(--amber-400); }
.rv-range { font-family: "JetBrains Mono", monospace; font-size: .8125rem; letter-spacing: .06em; color: rgba(251,248,243,.6); margin: 4px 0 0; }

.rv-step { padding: 7vh 0 28px; min-height: 64vh; }
.rv-step > * + * { margin-top: 18px; }
.rv-step > .lp-kicker, .rv-step > h1, .rv-step > h2 { margin-top: 0; }

/* facts and big numbers */
.rv-facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 720px; }
.rv-fact { background: rgba(251,248,243,.08); border: 1px solid rgba(251,248,243,.16); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; backdrop-filter: blur(6px); }
.rv-fact__num { font-size: clamp(1.75rem, 4.6vw, 2.75rem); font-weight: 600; color: var(--cream); letter-spacing: -0.03em; line-height: 1.05; }
.rv-fact__lbl { font-size: .875rem; color: rgba(251,248,243,.7); }
.rv-big { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
.rv-big__num { font-size: clamp(3.25rem, 12vw, 7.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--amber-400); }
.rv-big__lbl { font-size: clamp(1rem, 2vw, 1.3125rem); color: rgba(251,248,243,.82); }

/* bars */
.rv-bars { display: grid; gap: 10px; max-width: 640px; margin-top: 26px; }
.rv-bar { display: grid; grid-template-columns: 56px 1fr 84px; align-items: center; gap: 12px; }
.rv-bar--wide { grid-template-columns: minmax(96px, 168px) 1fr 56px; }
.rv-bar__lbl { font-size: .9375rem; color: rgba(251,248,243,.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bar__val { font-size: .9375rem; color: var(--cream); text-align: right; }
.rv-bar .bar { height: 14px; }
.rv-bar .bar__bg { fill: rgba(251,248,243,.12); }
.rv-bar .bar__fill--muted { fill: var(--green-300); }

/* what moves your sales */
.rv-movers { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rv-mover { background: rgba(251,248,243,.08); border: 1px solid rgba(251,248,243,.16); border-radius: 18px; padding: 16px 18px; display: grid; gap: 2px; }
.rv-mover__icon { color: var(--green-300); }
.rv-mover--down .rv-mover__icon { color: var(--amber-400); }
.rv-mover__lbl { color: rgba(251,248,243,.86); font-size: 1rem; }
.rv-mover__num { font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; letter-spacing: -0.04em; color: var(--green-300); line-height: 1.1; }
.rv-mover--down .rv-mover__num { color: var(--amber-400); }
.rv-mover__sub { font-size: .8125rem; color: rgba(251,248,243,.6); }

/* the honest test */
.rv-versus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; margin-top: 26px; }
.rv-vs { background: rgba(251,248,243,.08); border: 1px solid rgba(251,248,243,.16); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.rv-vs--win { background: rgba(47,149,128,.22); border-color: var(--green-300); }
.rv-vs__lbl { font-size: .9375rem; color: rgba(251,248,243,.84); }
.rv-vs__num { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--cream); }
.rv-vs--win .rv-vs__num { color: var(--green-200); }
.rv-vs__sub { font-size: .8125rem; color: rgba(251,248,243,.62); }

.rv-items { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; max-width: 460px; }
.rv-items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-radius: 14px; background: rgba(251,248,243,.08); border: 1px solid rgba(251,248,243,.14); color: rgba(251,248,243,.9); }
.rv-items strong { color: var(--cream); }

.rv-next { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; max-width: 620px; }
.rv-next li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; color: rgba(251,248,243,.88); font-size: 1.0625rem; }
.rv-next svg { color: var(--green-300); margin-top: 2px; }
.rv-next strong { color: var(--cream); }
.rv-finish { margin-top: 30px; }
.rv-finish .btn { min-height: 60px; font-size: 1.125rem; }

/* progress, controls, skip (only shown when JavaScript runs) */
.rv-progress { position: sticky; top: 0; z-index: 5; padding: 14px 0 6px; }
.rv-progress__in { display: flex; gap: 6px; }
.rv-dot { flex: 1; height: 4px; border-radius: 4px; background: rgba(251,248,243,.2); transition: background .3s var(--ease); }
.rv-dot.is-done { background: var(--green-300); }
.rv-dot.is-current { background: var(--amber-400); }
.rv-controls { position: sticky; bottom: 0; z-index: 5; padding: 14px 0 10px; background: linear-gradient(0deg, rgba(8,17,15,.94) 60%, rgba(8,17,15,0)); }
.rv-controls__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-count { font-family: "JetBrains Mono", monospace; font-size: .8125rem; color: rgba(251,248,243,.65); }
.rv-btn { min-width: 120px; }
.rv .btn--secondary { background: transparent; color: var(--cream); border-color: rgba(251,248,243,.4); }
.rv .btn--secondary:hover { background: rgba(251,248,243,.12); }
.rv .btn--secondary:disabled { opacity: .35; cursor: default; }
.rv-skip { text-align: center; padding: 4px 0 14px; }
.rv-skip .linklike { color: rgba(251,248,243,.62); font-size: .875rem; }
.rv-skip .linklike:hover { color: var(--cream); }

/* the waiting screen */
.rv--wait { padding: 6vh 0 24px; }
.rv--wait > * + * { margin-top: 18px; }
.rv-steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 10px; max-width: 520px; }
.rv-step-item { position: relative; padding: 11px 16px 11px 48px; border-radius: 14px; background: rgba(251,248,243,.05); border: 1px solid rgba(251,248,243,.1); color: rgba(251,248,243,.5); font-size: 1rem; transition: all .4s var(--ease); }
.rv-step-item::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid rgba(251,248,243,.25); }
.rv-step-item.is-active { color: var(--cream); background: rgba(251,248,243,.1); border-color: rgba(251,248,243,.3); }
.rv-step-item.is-active::before { border-color: var(--amber-400); border-top-color: transparent; animation: rv-spin .9s linear infinite; }
.rv-step-item.is-done { color: rgba(251,248,243,.85); }
.rv-step-item.is-done::before { border-color: var(--green-300); background: var(--green-400) url("/static/icons/check.svg") center / 12px no-repeat; }
.rv-step-note { font-size: .8125rem; color: rgba(251,248,243,.55); }
.rv-note--fail { color: var(--amber-400); }

@keyframes rv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-step.is-active .rv-rise { animation: rv-rise .8s var(--ease) both; }
.rv-step.is-active .rv-rise:nth-child(2) { animation-delay: .08s; }
.rv-step.is-active .rv-rise:nth-child(3) { animation-delay: .18s; }
.rv-step.is-active .rv-rise:nth-child(4) { animation-delay: .3s; }
.rv-step.is-active .rv-rise:nth-child(5) { animation-delay: .42s; }
.rv-step.is-active .bar__fill { animation: rv-grow 1.1s var(--ease) .35s both; transform-box: fill-box; transform-origin: left center; }
@keyframes rv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .rv-step.is-active .rv-rise, .rv-step.is-active .bar__fill, .rv-step-item.is-active::before { animation: none; }
  .rv-step-item, .rv-dot { transition: none; }
}
@media (min-width: 720px) {
  .rv-facts { grid-template-columns: repeat(4, 1fr); }
  .rv-step { padding-top: 9vh; }
}


/* outdoor seating outlook */
.hero-row--outdoor strong { font-weight: 700; }
.hero-row--great svg { color: var(--green-300); }
.hero-row--poor svg { color: var(--amber-400); }
.wcard__outdoor { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: .8125rem; font-weight: 600; }
.wcard__outdoor--great { color: var(--green-600); }
.wcard__outdoor--mixed { color: var(--n-600); }
.wcard__outdoor--poor { color: var(--amber-600); }
.chip-infl--out-great { background: var(--green-50); color: var(--green-700); }
.chip-infl--out-poor { background: var(--amber-50); color: var(--amber-600); }

/* the order plan and recipes */
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.order-table th.num, .order-table td.num { text-align: right; white-space: nowrap; }
.order-table td:first-child { min-width: 150px; }
.order-date { display: block; font-size: .6875rem; font-weight: 400; color: var(--n-500); }
.recipe-example { background: var(--n-50); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-family: "JetBrains Mono", monospace; font-size: .875rem; width: max-content; max-width: 100%; margin: 0; }
.recipe-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.recipe-grid textarea { width: 100%; resize: vertical; font-family: "JetBrains Mono", monospace; font-size: .875rem; }
@media print {
  .topbar, .tabbar, .footer, .no-print, .flash { display: none !important; }
  body, body.is-app { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .order-table { font-size: 11px; }
}