:root {
  --green-dark: #0f3d2e;
  --green: #1a7f5a;
  --green-hover: #16694b;
  --ink: #1d2733;
  --muted: #5a6a7a;
  --line: #e4e9ee;
  --bg: #f6f8fa;
  --card: #ffffff;
  --chip-bg: #f2f6f9;
  --btn-secondary: #eef2f5;
  --btn-secondary-hover: #e0e7ec;
  --input-border: #c9d3db;
  --heading: #0f3d2e;
  --shadow: rgba(15, 61, 46, 0.07);
  /* Brand accents — the ONE gold and the ONE red. Every gold/danger in the
     app pulls from these; don't introduce new hex neighbors. --gold-text is
     the darker gold for text on light backgrounds (the sparkle gold itself
     fails contrast on white). */
  --gold: #e2b23c;
  --gold-text: #a97d20;
  --cream: #f2ede1;
  --danger: #c0392b;
}

/* Dark palette. The theme attribute is set by a head script (system
   preference) and by the 🌙 toggle (persisted override). */
:root[data-theme="dark"] {
  --green: #2ea577;
  --green-hover: #38bd8a;
  --ink: #e6ebe8;
  --muted: #94a49c;
  --line: #263a32;
  --bg: #0e1513;
  --card: #161f1b;
  --chip-bg: #1e2b26;
  --btn-secondary: #223028;
  --btn-secondary-hover: #2b3d33;
  --input-border: #34493f;
  --heading: #7ed4ae;
  --shadow: rgba(0, 0, 0, 0.3);
  --gold-text: #e2b23c;
  --danger: #ea8f8f;
}

* { box-sizing: border-box; }

/* Type: warm serif for headings and hero numbers, system sans for everything
   else. Fraunces carries the cream-and-gold "vault" feel; body text stays fast. */
h1, h2, nav .brand, .stat .n, .best-value, .proof .proof-n {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
}

/* In-content links: without this they fall back to browser defaults — blue,
   and purple once visited, which is unreadable on the dark theme. */
main a, footer a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  text-decoration-color: color-mix(in srgb, var(--green) 45%, transparent);
  transition: color 0.12s, text-decoration-color 0.12s;
}
main a:hover, footer a:hover { color: var(--green-hover); text-decoration-color: currentColor; }

/* Keyboard focus: one consistent green ring everywhere. */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* display:flex would silently defeat the hidden attribute the app toggles
   while signed out — [hidden] must win or the nav shows on the landing page. */
nav[hidden] { display: none; }

nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 24px;
  background: var(--green-dark);
  color: #fff;
}

nav .brand { font-weight: 700; margin-right: 12px; }
nav a { color: #d5e8df; text-decoration: none; font-weight: 500; position: relative; padding: 3px 0; }
nav a:hover, nav a.active { color: #fff; }
/* Gold thread under the active tab — same gold as the icon's sparkles. */
nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}
nav .spacer { flex: 1; }
nav .muted { color: #9dbcae; font-size: 13px; }

.link-btn {
  background: none;
  border: none;
  color: #d5e8df;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
}

main { flex: 1; max-width: 860px; width: 100%; margin: 0 auto; padding: 28px 20px; }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  padding: 18px;
}

h1 { font-size: 22px; margin: 0 0 6px; color: var(--heading); }
h2 { font-size: 16px; margin: 22px 0 10px; }
.sub { color: var(--muted); margin: 0 0 20px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px var(--shadow);
}

.center { text-align: center; padding: 60px 0; }
.muted { color: var(--muted); }

.badge {
  background: var(--gold);
  color: #3a2d10;
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 7px;
  vertical-align: 2px;
}

button.primary, button.secondary {
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s, transform 0.06s;
}
button.primary { background: var(--green); color: #fff; box-shadow: 0 1px 2px var(--shadow); }
button.primary:hover { background: var(--green-hover); box-shadow: 0 3px 10px var(--shadow); }
button.primary:active { transform: translateY(1px); box-shadow: none; }
button.secondary { background: var(--btn-secondary); color: var(--ink); }
button.secondary:hover { background: var(--btn-secondary-hover); }
button.small { padding: 5px 12px; font-size: 13px; }

input[type="email"], input[type="text"], input[type="date"], input[type="number"],
input[type="password"], input[type="tel"], textarea {
  border: 1px solid var(--input-border);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  max-width: 360px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.signin-box { max-width: 420px; margin: 60px auto; text-align: center; }
.signin-box h1 { font-size: 26px; }
.signin-box form { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
/* Multi-field forms (request an invite, password sign-in): the side-by-side
   layout above is for the single email+button pair only. */
.signin-box form.stacked { flex-direction: column; align-items: stretch; }
.signin-box form.stacked input, .signin-box form.stacked textarea { max-width: none; }

/* Vault search + sort toolbar */
.vault-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; }
.vault-toolbar input[type="search"] {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--input-border);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.vault-toolbar select {
  border: 1px solid var(--input-border);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  font-family: inherit;
}
.vault-toolbar .muted { font-size: 12.5px; white-space: nowrap; }
.exp-soon { color: var(--gold-text); font-weight: 600; }

code.addr {
  background: var(--chip-bg);
  border: 1px dashed var(--green);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  user-select: all;
}

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }

.code-chip {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--chip-bg);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.pill.active { background: #e3f4ec; color: var(--green); }
.pill.possibly_used { background: #fdf3d7; color: #8a6d1a; }
.pill.expired, .pill.used { background: #eceff2; color: var(--muted); }
.pill.needs_review { background: #fde3e3; color: #a33333; }
.pill.trialing { background: #e3f0f4; color: #1a6a7f; }
.pill.beta { background: #f7ecd3; color: #8a6512; }
.pill.lapsed, .pill.canceled { background: #fde3e3; color: #a33333; }

.merchant-group { margin-bottom: 4px; }
.merchant-group summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 4px;
}

.review-item .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.review-item label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 3px; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; }
.stat {
  flex: 1;
  min-width: 140px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.stat .n { font-size: 26px; font-weight: 700; color: var(--heading); }
.stat .l { font-size: 12px; color: var(--muted); }

/* Insights. Bars are plain divs on purpose — a chart library would be more
   bytes than the whole dashboard, and these are six bars. */
.insights-caveat {
  font-size: 12.5px;
  margin: 10px 2px 0;
  line-height: 1.5;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  margin-top: 6px;
}
.chart-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
/* The bars measure against this track, not against the column. Without it the
   bars are flex siblings of the label and the tall ones get shrunk to make room
   for it — a 2-code month then renders only 1.7x a 1-code month, which is a
   chart that lies. */
.chart-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
}
.chart-bar {
  width: 100%;
  flex: none;
  background: var(--green);
  border-radius: 6px 6px 0 0;
  min-height: 3px;
  position: relative;
  transition: opacity 0.15s;
}
.chart-col:hover .chart-bar { opacity: 0.82; }
.chart-val {
  position: absolute;
  top: -17px;
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.chart-label { text-align: center; font-size: 11.5px; color: var(--muted); }

.rank-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.rank-name {
  width: 34%;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-track { flex: 1; background: var(--chip-bg); border-radius: 5px; height: 9px; }
.rank-fill { background: var(--green); border-radius: 5px; height: 100%; min-width: 3px; }
.rank-n { width: 24px; text-align: right; font-size: 12px; }

.best-catch { text-align: center; }
.best-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.best-value { font-size: 34px; font-weight: 700; color: var(--heading); margin: 4px 0 6px; }

/* Honeypot: off-screen rather than display:none, since some bots skip hidden
   fields but happily fill this one. Never shown to a human, never focusable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.req-note { font-size: 12px; margin-top: 2px; font-style: italic; }

.notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.notice.ok { background: #e3f4ec; color: #14563e; }
.notice.warn { background: #fdf3d7; color: #6d5410; }
.notice.err { background: #fde3e3; color: #7c2626; }

/* Email-provider picker on the Setup page */
.provider-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.provider-tabs button {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
}
.provider-tabs button:hover { border-color: var(--green); color: var(--ink); }
.provider-tabs button.active {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}
.setup-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.setup-subnav a {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
}
.setup-subnav a:hover { border-color: var(--green); color: var(--ink); }
.setup-subnav a.active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.provider-panel { display: none; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 12px; }
.provider-panel.active { display: block; }
.provider-panel h3 { font-size: 14px; margin: 0 0 8px; color: var(--heading); }

/* Mock of Google's "unverified app" warning, shown BEFORE users hit the
   real one so it reads as expected instead of alarming. */
.mock-warning { margin: 10px 0 4px; max-width: 480px; }
.mock-warning-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #14563e;
  background: #e3f4ec;
  border-radius: 8px 8px 0 0;
  padding: 8px 12px;
}
.mock-warning-body {
  border: 1px solid #dadce0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 18px 20px;
  background: #fff;
  font-family: Roboto, Arial, sans-serif;
}
.mock-triangle { color: #d93025; font-size: 34px; line-height: 1; }
.mock-headline { font-size: 18px; color: #202124; margin: 10px 0 6px; }
.mock-sub { font-size: 12.5px; color: #5f6368; margin-bottom: 14px; line-height: 1.5; }
.mock-row { margin: 8px 0; }
.mock-link { color: #5f6368; text-decoration: underline; font-size: 13px; }
.mock-annotation {
  color: #1a7f5a;
  font-weight: 700;
  font-size: 13px;
  margin-left: 10px;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Screen two of Google's consent flow renders dark */
.mock-warning-body.mock-dark { background: #202124; border-color: #3c4043; }
.mock-dark .mock-annotation { color: #7ee2b8; }
.mock-amber {
  background: #4a3a12;
  color: #fdd663;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.mock-btn-blue {
  display: inline-block;
  background: #8ab4f8;
  color: #202124;
  font-size: 13px;
  font-weight: 600;
  border-radius: 18px;
  padding: 7px 20px;
}

/* Tinted components, dark variants */
:root[data-theme="dark"] .pill.active { background: #14382a; color: #5bd3a1; }
:root[data-theme="dark"] .pill.possibly_used { background: #3a3012; color: #e2c060; }
:root[data-theme="dark"] .pill.expired, :root[data-theme="dark"] .pill.used { background: #232c27; color: var(--muted); }
:root[data-theme="dark"] .pill.needs_review, :root[data-theme="dark"] .pill.lapsed, :root[data-theme="dark"] .pill.canceled { background: #3a1d1d; color: #ea8f8f; }
:root[data-theme="dark"] .pill.trialing { background: #14303a; color: #6fc3dd; }
:root[data-theme="dark"] .pill.beta { background: #3d3418; color: #e8c766; }
:root[data-theme="dark"] .notice.ok { background: #12352a; color: #7fdcb0; }
:root[data-theme="dark"] .notice.warn { background: #3a3012; color: #eecf7f; }
:root[data-theme="dark"] .notice.err { background: #3a1d1d; color: #f2a3a3; }
:root[data-theme="dark"] .mock-warning-label { background: #12352a; color: #7fdcb0; }
/* Google-dialog mocks stay literal in both themes: they depict Google's screens. */

/* Floating theme toggle, visible signed in or out */
#theme-toggle {
  position: fixed;
  bottom: 14px;
  right: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  z-index: 10;
}

/* Bug report button + panel (beta) */
#bug-btn {
  position: fixed;
  bottom: 14px;
  right: 62px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  z-index: 10;
}
#bug-form {
  position: fixed;
  bottom: 64px;
  right: 14px;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  z-index: 11;
  font-size: 13.5px;
  color: var(--ink);
}
#bug-form textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--input-border);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}
#bug-form .bug-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
#bug-status { font-size: 12px; color: var(--green); }

/* Phone layout: the standing-in-line-at-checkout experience */
.code-chip { cursor: pointer; }
@media (max-width: 640px) {
  nav { gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
  nav .brand { margin-right: 2px; }
  #nav-email { display: none; }
  main { padding: 18px 12px; }
  h1 { font-size: 20px; }
  .card { padding: 14px; }
  .stat-row { gap: 10px; }
  .stat { min-width: 110px; padding: 12px; }
  .stat .n { font-size: 22px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  td, th { padding: 8px 6px; font-size: 13px; }
  .code-chip { font-size: 14px; padding: 4px 10px; }
  .provider-tabs button { padding: 8px 12px; font-size: 13px; }
  .signin-box { margin: 30px auto; }
  .signin-box form { flex-direction: column; align-items: stretch; }
  input[type="email"], input[type="text"], input[type="date"], input[type="number"] { max-width: none; }
  #bug-form { width: calc(100vw - 28px); }
  pre { font-size: 11px !important; }
}

/* ---------- Inline SVG icons (replace emoji: crisp at any size, both themes) */

.icon { display: inline-block; vertical-align: -0.15em; }
.icon .gold { stroke: var(--gold); }
nav .brand img { width: 22px; height: 22px; border-radius: 5px; vertical-align: -5px; margin-right: 7px; }
.h1-logo { width: 34px; height: 34px; border-radius: 8px; vertical-align: -7px; margin-right: 8px; }
.step .step-icon { width: 44px; height: 44px; color: var(--green); }
.feature h3 .icon { width: 19px; height: 19px; margin-right: 7px; color: var(--green); vertical-align: -4px; }
.beta-ribbon .icon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--gold-text); }
.landing-cta .icon { width: 16px; height: 16px; margin-left: 6px; vertical-align: -2.5px; }

/* ---------- Landing page (signed-out) ---------- */

/* Split hero: brand panel left, task panel right. The landing gets a wider
   container than the app pages so the split has room to breathe. */
main:has(.landing) { max-width: 1100px; }

.split {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 14px 44px var(--shadow);
  background: var(--card);
  min-height: 560px;
}
/* First screen = the whole split. Cap it to the viewport (minus the page's
   top padding and a little breathing room) so nothing hides below the fold;
   the brand-frame above shrinks to absorb the difference. */
@media (min-width: 881px) {
  .split {
    height: min(calc(100vh - 76px), 880px);
    /* Without this the single grid row sizes to its content and quietly
       overflows the fixed height (clipped by overflow:hidden) — the row must
       be locked to the box so the brand-frame's flex-shrink actually engages. */
    grid-template-rows: minmax(0, 1fr);
  }
  .split-brand, .split-signin { min-height: 0; }
}

.split-brand {
  position: relative;
  background: var(--green-dark);
  color: var(--cream);
  padding: 26px 34px 30px;
  display: flex;
  flex-direction: column;
}
.brand-mark {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 36px;
}
.brand-lock { width: 21px; height: 21px; color: var(--cream); }
.signin-logo {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 3px 12px var(--shadow);
}
.eyebrow {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.split-brand h1.brand-h {
  font-size: 36px;
  line-height: 1.14;
  color: #fdfaf2;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
}
.split-brand h1.brand-h em { color: var(--gold); }
.brand-sub {
  color: #c9dcd2;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 400px;
}
.gold-cta {
  border: none;
  border-radius: 10px;
  background: var(--gold);
  color: #2a2008;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.08s, box-shadow 0.12s;
}
.gold-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.gold-cta:active { transform: translateY(0); box-shadow: none; }
.split-brand .beta-ribbon {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: #c9dcd2;
  align-self: flex-start;
  margin-bottom: 26px; /* keeps air above the shot; margin-top:auto on the
                          shot absorbs any extra panel height */
}
/* A straight, framed product shot. The frame shrinks with the viewport so the
   whole split always lands above the fold; the art letterboxes onto a cream
   that matches its own background, so shrinking is invisible. */
.brand-frame {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #f6efdc; /* sampled from the art's cream — letterbox bands vanish */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.brand-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* keep the ratio no matter what height the frame gets */
}
.split-brand .deco { position: absolute; color: var(--gold); }
.deco-1 { top: 26px; right: 30px; width: 22px; height: 22px; animation: bob 5s ease-in-out infinite; }
.deco-2 { top: 44%; right: 12%; width: 14px; height: 14px; opacity: 0.8; animation: bob 6s ease-in-out 1.2s infinite; }
@keyframes bob { 50% { transform: translateY(-7px); } }

.split-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 34px;
  background: var(--card);
}
.signin-inner { width: 100%; max-width: 350px; }
.signin-inner h2 { font-size: 23px; margin: 0 0 6px; color: var(--heading); }
.signin-inner .sub { margin-bottom: 0; }
.signin-inner form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.signin-inner input, .signin-inner textarea { max-width: none; }
.signin-inner form .primary { padding: 12px 18px; font-size: 15px; }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split-brand { padding: 22px 22px 24px; }
  .brand-mark { margin-bottom: 22px; }
  .split-brand h1.brand-h { font-size: 29px; }
  .split-signin { padding: 30px 22px; }
}

.landing-hero { text-align: center; padding: 34px 0 4px; }
.landing-hero .logo-lock {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: 0 6px 24px rgba(15, 61, 46, 0.35);
}
.landing-hero h1 { font-size: 34px; margin: 16px 0 10px; letter-spacing: -0.5px; }
.landing-hero .tagline {
  font-size: 18px;
  color: var(--ink);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.55;
}
.landing-hero .tagline b { color: var(--heading); }
.hero-ctas { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.hero-ctas button.primary { font-size: 15px; padding: 12px 26px; }
.hero-shot {
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 34px var(--shadow);
  margin-top: 28px;
}

/* Illustration tiles: the art is dark-green line work on transparency, which
   would vanish on the dark theme — so it always sits on a cream tile. */
.step-art {
  background: var(--cream);
  border-radius: 14px;
  width: 148px;
  height: 106px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.step-art img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.empty-art {
  display: block;
  margin: 0 auto 14px;
  width: 210px;
  max-width: 75%;
  height: auto !important; /* beats the height attr; keeps the art's ratio */
  background: var(--cream);
  border-radius: 18px;
  padding: 14px 18px;
  box-sizing: content-box;
}
.beta-ribbon {
  display: inline-block;
  margin-top: 14px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
}

.landing .signin-box { margin: 26px auto 10px; }

.landing h2.section {
  text-align: center;
  font-size: 22px;
  color: var(--heading);
  margin: 44px 0 18px;
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { text-align: center; padding: 22px 16px; }
.step h3 { font-size: 15.5px; margin: 10px 0 6px; color: var(--heading); }
.step p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

.features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feature { margin-bottom: 0; }
.feature h3 { font-size: 15px; margin: 0 0 6px; color: var(--heading); }
.feature p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

.proof {
  text-align: center;
  background: var(--green-dark);
  color: #f2ede1;
  border: none;
  padding: 30px 22px;
}
.proof .proof-n { font-size: 40px; font-weight: 800; color: var(--gold); letter-spacing: -1px; }
.proof p { margin: 8px auto 0; max-width: 480px; font-size: 14.5px; line-height: 1.6; color: #d5e8df; }

/* FAQ: native details/summary so it works in the static (no-JS) landing too. */
.faq { max-width: 720px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { margin-bottom: 0; padding: 14px 18px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--heading); }
.faq details p { margin: 10px 0 2px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.privacy-strip {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  max-width: 560px;
  margin: 26px auto 0;
  line-height: 1.65;
}

.landing-cta { text-align: center; margin: 34px 0 18px; }
.landing-cta button { font-size: 15px; padding: 12px 26px; }
.landing-cta .muted { margin-top: 10px; font-size: 13px; }

@media (max-width: 640px) {
  .steps, .features { grid-template-columns: 1fr; }
  .landing-hero h1 { font-size: 28px; }
  .landing-hero .tagline { font-size: 16px; }
}

/* ---------- Component layer: toast, modal, spinner, skeleton ---------- */

/* Toasts: quick confirmations that don't demand a click. One at a time,
   bottom-center, out of the way of the floating buttons. */
#toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--green-dark);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  max-width: min(420px, calc(100vw - 28px));
  text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: #5c1f1f; color: #f2c9c9; }

/* Modal: replaces prompt()/confirm()/alert() so dialogs match the product
   instead of the operating system. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 16, 0.45);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: modal-fade 0.14s ease-out;
}
.modal {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  animation: modal-pop 0.14s ease-out;
}
.modal h3 { margin: 0 0 8px; font-size: 16px; color: var(--heading); }
.modal p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.modal .modal-note { font-size: 12.5px; color: var(--muted); }
.modal input { max-width: none; margin-top: 10px; }
.modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal button.danger {
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--danger);
  color: #fff;
}
:root[data-theme="dark"] .modal button.danger { color: #2a0f0f; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: scale(0.97) translateY(4px); } }

/* Button busy state: a real spinner instead of '…' */
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton loading: content-shaped shimmer instead of "Loading…" text. */
.skel { animation: skel-pulse 1.2s ease-in-out infinite; }
/* Boot swap (index.html): with a session flagged before first paint, show the
   skeleton and hide the static landing; without one, the landing paints as
   plain HTML. app.js replaces #app's contents either way. */
#boot-skel { display: none; }
.has-session #boot-skel { display: block; }
.has-session #static-landing { display: none; }
.skel-line, .skel-card {
  background: color-mix(in srgb, var(--muted) 14%, var(--bg));
  border-radius: 8px;
}
.skel-line { height: 14px; margin: 10px 0; }
.skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; }
.skel-card { height: 110px; border-radius: 14px; margin: 14px 0; }
@keyframes skel-pulse { 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Icon sizing for the emoji-replacement sweep */
#theme-toggle .icon, #bug-btn .icon { width: 19px; height: 19px; vertical-align: -4px; color: var(--ink); }
.li-icon { width: 16px; height: 16px; margin-right: 6px; color: var(--green); vertical-align: -3px; }
.h2-icon { width: 17px; height: 17px; margin-right: 7px; color: var(--green); vertical-align: -2.5px; }
.h1-icon { width: 20px; height: 20px; margin-right: 8px; color: var(--green); vertical-align: -3px; }
.fp-icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; color: var(--gold-text); }
.check-icon { width: 16px; height: 16px; color: var(--green); vertical-align: -3px; }
.btn-icon { width: 14px; height: 14px; vertical-align: -2.5px; }
button .btn-icon { margin-right: 4px; }
button.danger-x .btn-icon, button[data-gift] .btn-icon { margin-right: 0; }

/* Small destructive action (delete code) */
button.danger-x {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 6px;
}
button.danger-x:hover { color: var(--danger); background: var(--chip-bg); }