:root {
  --bg: #f4f6f9;
  --bg-elevated: #ffffff;
  --border: #dbe2ea;
  --border-strong: #c3ccd8;
  --text: #0d1117;
  --text-muted: #5a6472;
  --text-faint: #98a1ac;
  --accent: #a16207;
  --accent-soft: #fef9c3;
  /* White, not near-black: near-black-on-#a16207 (this light theme's mid-
     brightness gold) measures ~3.73:1, failing WCAG AA's 4.5:1 for the
     text/icons that sit directly on a solid --accent fill (the FAB, solid
     buttons, the date-picker's selected day) — white gives ~4.92:1.
     Dark theme's much brighter accent doesn't have this problem (11.99:1
     either way), so only this value changed. */
  --accent-contrast: #ffffff;
  --danger: #dc2626;
  --shadow: 0 1px 2px rgba(10, 14, 22, 0.07), 0 1px 1px rgba(10, 14, 22, 0.05);
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --bg: #08090b;
    --bg-elevated: #141519;
    --border: #24262c;
    --border-strong: #34363e;
    --text: #eef1f5;
    --text-muted: #8b909c;
    --text-faint: #585c67;
    --accent: #facc15;
    --accent-soft: #3f330d;
    --accent-contrast: #1a1400;
    --danger: #f0473f;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --bg: #08090b;
  --bg-elevated: #141519;
  --border: #24262c;
  --border-strong: #34363e;
  --text: #eef1f5;
  --text-muted: #8b909c;
  --text-faint: #585c67;
  --accent: #facc15;
  --accent-soft: #3f330d;
  --accent-contrast: #1a1400;
  --danger: #f0473f;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* --- top bar --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wraps to a second row instead of squeezing/overflowing off-screen —
     the .topbar-left group and the button cluster each get flex:none
     below so neither one shrinks; the row just grows taller instead. */
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.logo {
  flex: none;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  /* .logo became an <a href="index.html"> when the homepage was added, so
     it now needs its own color/underline — otherwise it falls back to the
     browser's default link styling (blue, underlined) instead of the
     site's text color. */
  color: var(--text);
  text-decoration: none;
}

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

.topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.icon-btn, .pill-btn, .switch-btn {
  flex: none;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 0;
}

.pill-btn, .switch-btn {
  padding: 6px 12px;
  font-weight: 500;
}

.icon-btn:hover, .pill-btn:hover, .switch-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.icon-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.logo svg {
  width: 19px;
  height: 19px;
  flex: none;
  vertical-align: -4px;
  margin-right: 2px;
  color: var(--accent);
}

/* --- agenda list --- */

.agenda-list {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.past-hidden-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
}

.past-hidden-bar button {
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 13px;
}

.past-hidden-bar button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.load-more-wrap {
  display: flex;
  justify-content: center;
}

.load-more-wrap button {
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 12.5px;
  padding: 6px 10px;
}

.load-more-wrap button:hover {
  color: var(--accent);
}

.sentinel {
  height: 1px;
}

/* --- day box --- */

.day-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  /* Keeps scrollIntoView({block:'start'}) (jump-to-today, jump-to-date)
     from landing a box's top edge underneath the sticky topbar — --topbar-h
     is kept current by js/app.js's syncTopbarHeightVar() (64px is just a
     sane fallback for the split second before that first runs). Plus a
     small breathing-room gap so the header isn't flush against the topbar. */
  scroll-margin-top: calc(var(--topbar-h, 64px) + 12px);
}

/* Past days used to get a flat opacity:0.72 dim, but that drags every
   text/border color on the card below WCAG AA together — removed rather
   than tuned to a milder value, since there's no opacity that dims the
   card without also dimming its contrast. */

.day-box-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}

.notes-box {
  /* A slight gold tint (same accent as the rest of the theme, just very
     low-strength) so the Notes box reads as a distinct kind of card at a
     glance, not just another day. */
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 24px 10px;
}

.day-header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.day-weekday {
  font-weight: 650;
  font-size: 14.5px;
}

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

.day-badge {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 999px;
}

.day-blocks {
  padding: 2px 24px 18px;
  min-height: 40px;
  cursor: text;
}

/* --- blocks ---
   Plain text (paragraph/heading/quote) always starts flush with the day
   header — both share the same left padding above. A checkbox/bullet/
   number/toggle marker sits ON that same line (in normal flex flow, not
   hanging out in the margin) and the block's own title text indents past
   it, same as any ordinary list. The ⠿ handle is the one thing that still
   hangs in the margin, since it's hover-only UI chrome, not content. */

.block-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 2px 4px 2px 0;
  border-radius: 6px;
  transition: background 0.1s ease;
}

.block-row.is-selected {
  background: var(--accent-soft);
}

.block-handle {
  position: absolute;
  left: -20px;
  top: 1px;
  width: 16px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  color: var(--text-faint);
  opacity: 0;
  border-radius: 4px;
  transition: opacity 0.1s ease, background 0.12s ease, color 0.12s ease;
}

.block-row:hover .block-handle,
.block-row.is-selected .block-handle {
  opacity: 1;
}

/* A hover-only reveal is unreachable on touch — there's no hover state to
   land in before the tap itself, so the handle (and its "..." menu /
   drag-reorder) was effectively unusable on phones/tablets. Keep it
   dimly visible by default on any device without real hover. */
@media (hover: none) {
  .block-handle {
    opacity: 0.5;
  }
}

.block-handle:hover,
.block-handle:focus-visible {
  background: var(--border);
  color: var(--text-muted);
}

.block-handle:focus-visible {
  opacity: 1;
}

.block-handle::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 4px 0 currentColor,
    0 8px 0 currentColor,
    6px 0 0 currentColor,
    6px 4px 0 currentColor,
    6px 8px 0 currentColor;
}

.indent-1 { margin-left: 24px; }
.indent-2 { margin-left: 48px; }
.indent-3 { margin-left: 72px; }
.indent-4 { margin-left: 96px; }

.block-gutter {
  flex: none;
  width: 20px;
  margin-right: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 7px;
  user-select: none;
}

.block-checkbox {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.block-bullet {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 15px;
}

.block-number {
  color: var(--text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 15px;
}

.block-toggle-btn {
  width: 18px;
  height: 18px;
  margin-top: -2px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  border-radius: 4px;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.block-toggle-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.block-toggle-btn.is-open {
  transform: rotate(90deg);
}

.block-toggle .block-content {
  font-weight: 550;
}

.event-time {
  flex: none;
  align-self: center;
  font-size: 11px;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 6px;
  margin-right: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.block-event .block-content {
  font-weight: 550;
}

.block-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 4px 3px 0;
  line-height: 1.55;
  /* 16px, not 14.5px: anything under 16px makes mobile Safari auto-zoom
     the page on focus, which then has to be manually zoomed back out. */
  font-size: 16px;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 5px;
}

.block-content:focus {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: 0 0 0 2px var(--accent);
}

.block-content:focus:not(:focus-visible) {
  /* A mouse/touch click into a block is already visually obvious (caret +
     tint) — reserve the accent ring for keyboard navigation, where it's
     the only indicator of where focus landed. */
  box-shadow: none;
}

.block-content:empty:before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}

.block-h1 .block-content { font-size: 21px; font-weight: 680; padding-top: 10px; }
.block-h2 .block-content { font-size: 17.5px; font-weight: 650; padding-top: 6px; }

.block-quote {
  border-left: 3px solid var(--border-strong);
  padding-left: 10px;
}

.block-quote .block-content {
  font-style: italic;
  color: var(--text-muted);
}

.block-checked {
  color: var(--text-faint);
  text-decoration: line-through;
}

.block-content code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.block-row-divider {
  padding: 10px 4px 6px;
}

.block-divider-line {
  flex: 1 1 auto;
  align-self: center;
  border: none;
  border-top: 1px solid var(--border-strong);
  margin: 0;
}

/* --- slash menu --- */

.slash-menu {
  position: absolute;
  z-index: 100;
  width: 240px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
}

.slash-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.slash-item.active, .slash-item:hover {
  background: var(--accent-soft);
}

.slash-item-label {
  font-size: 13.5px;
  font-weight: 550;
}

.slash-item-hint {
  font-size: 11.5px;
  color: var(--text-muted);
}

.slash-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

/* --- block options menu (Duplicate / Delete), opened from the handle --- */

.block-menu {
  position: absolute;
  z-index: 100;
  min-width: 150px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
}

.block-menu-item {
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  cursor: pointer;
}

.block-menu-item:hover {
  background: var(--accent-soft);
}

.block-menu-item[data-action="delete"]:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

/* --- floating jump-to-today --- */

.fab {
  position: fixed;
  /* env(...) falls back to 24px on devices with no notch/home-indicator
     inset; on ones that do (iPhone home bar, etc.) it keeps the button
     clear of it instead of sitting underneath. */
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  z-index: 30;
}

.fab:hover {
  filter: brightness(1.06);
}

/* --- Google Calendar modal --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}

.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  /* Without this, scrolling past the top/bottom of the modal's own
     content hands the scroll off to the page behind it (the agenda list),
     which on mobile also drags the overlay's backdrop around visibly. */
  overscroll-behavior: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.modal-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: 15.5px;
}

.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gcal-help {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.gcal-help summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 550;
}

.gcal-help ol {
  margin: 8px 0 0;
  padding-left: 18px;
}

.gcal-help li {
  margin-bottom: 4px;
}

.gcal-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--mono);
}

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

.gcal-primary-btn,
.gcal-secondary-btn {
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.gcal-primary-btn {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
}

.gcal-primary-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.gcal-secondary-btn {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
}

.gcal-cal-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 240px;
  overflow-y: auto;
}

/* Short viewports (a phone in landscape) don't have 85vh of height to
   spare — shrink the scrollable calendar list so the Sync/Disconnect
   buttons below it stay within reach instead of sitting off-screen. */
@media (max-height: 500px) {
  .gcal-cal-list {
    max-height: 120px;
  }
}

.gcal-cal-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 4px 2px;
  font-size: 13.5px;
  cursor: pointer;
}

.gcal-cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.gcal-status {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.gcal-error {
  font-size: 12.5px;
  color: var(--danger);
  margin: 0;
}

/* --- mini month-grid calendar (jump-to-date / move-to-day) --- */

.modal-narrow {
  /* Capped higher than it needs to be on a typical phone width (the
     .modal-overlay's own 20px side padding still constrains it there) —
     this just lets each day cell grow a bit larger on roomier screens. */
  max-width: 380px;
}

.minical-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.minical-title {
  font-weight: 650;
  font-size: 14px;
}

.minical-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.minical-dow {
  margin-bottom: 4px;
}

.minical-dow-cell {
  text-align: center;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-muted);
}

.minical-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
  background: none;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.minical-day:hover:not(:disabled) {
  background: var(--accent-soft);
}

.minical-day:disabled {
  color: var(--text-faint);
  cursor: default;
}

.minical-dim {
  color: var(--text-faint);
}

.minical-today {
  border-color: var(--accent);
  font-weight: 700;
}

.minical-selected {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}

/* Today's border and the selected fill are both var(--accent) — on the
   very common case of opening the picker with today already selected,
   the border became invisible against its own fill. Give the combined
   state a border that actually shows up against the fill. */
.minical-today.minical-selected {
  border-color: var(--accent-contrast);
}

@media (max-width: 620px) {
  .agenda-list { padding: 16px 12px 100px; }
  .topbar { padding: 10px 14px; }
  .topbar-right { gap: 8px; }
  /* Was ".switch-btn span, .pill-btn" — .switch-btn's own label isn't
     wrapped in a <span>, so that half of the rule never matched
     anything and the button text stayed full-size on narrow screens. */
  .switch-btn, .switch-btn span, .pill-btn { font-size: 12.5px; }
}

/* --- toast notifications (replaces blocking alert()) --- */

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}

.toast {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--text-faint);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  border-left-color: var(--accent);
}

.toast-error {
  border-left-color: var(--danger);
  color: var(--danger);
}

/* --- account panel (sign-in / sync) — reuses .block-menu's popover chrome --- */

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
}

.status-dot.signed-out { background: var(--text-faint); }
.status-dot.synced { background: #2eb872; }
.status-dot.syncing { background: #e2b93b; animation: ag-pulse 1s ease-in-out infinite; }
.status-dot.error { background: var(--danger); }

@keyframes ag-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.account-panel {
  width: 280px;
  padding: 14px;
}

.account-panel-title {
  font-size: 13.5px;
  font-weight: 650;
  word-break: break-all;
}

.account-panel-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 6px 0 12px;
  line-height: 1.45;
}

.account-panel-msg {
  font-size: 12px;
  color: var(--danger);
  min-height: 1em;
  margin-top: 6px;
}

.account-email {
  margin-bottom: 8px;
}

.account-panel .gcal-primary-btn,
.account-panel .gcal-secondary-btn {
  width: 100%;
}

.account-signout {
  margin-bottom: 8px;
}

.account-delete {
  width: 100%;
  border: none;
  background: none;
  color: var(--danger);
  font-size: 12px;
  opacity: 0.75;
  padding: 4px 0;
  cursor: pointer;
}

.account-delete:hover {
  opacity: 1;
  text-decoration: underline;
}

.account-legal {
  font-size: 11.5px;
  color: var(--text-faint);
  margin: 12px 0 0;
  line-height: 1.5;
}

.account-legal a {
  color: var(--text-faint);
  text-decoration: underline;
}

/* --- marketing homepage (index.html) --- */

.landing-body {
  min-height: 100vh;
}

.landing-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.landing-brand svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.landing-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14.5px;
}

.landing-nav a:hover {
  color: var(--text);
}

.landing-nav a.nav-cta {
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
}

.landing-nav a.nav-cta:hover {
  filter: brightness(1.06);
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 56px 0 64px;
}

.hero-eyebrow {
  font-size: 13px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: 2.5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.hero h1 em {
  color: var(--accent);
  font-style: normal;
}

.hero-sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 46em;
  margin: 0 0 28px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.start-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 650;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.start-btn:hover {
  filter: brightness(1.06);
}

.hero-hint {
  font-size: 13px;
  color: var(--text-faint);
}

.hero-preview {
  display: flex;
  justify-content: center;
}

.preview-window {
  width: 100%;
  max-width: 360px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border);
}

.preview-weekday {
  font-weight: 650;
  font-size: 14.5px;
}

.preview-date {
  color: var(--text-muted);
  font-size: 13px;
  margin-left: 8px;
}

.preview-badge {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 999px;
}

.preview-body {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.preview-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--text);
}

.preview-row.preview-indent {
  padding-left: 22px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.preview-check {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 3px;
  border: 1.5px solid var(--border-strong);
}

.preview-check.is-checked {
  background: var(--accent);
  border-color: var(--accent);
}

.preview-bullet {
  width: 15px;
  flex: none;
  text-align: center;
  color: var(--text-muted);
}

.preview-strike {
  text-decoration: line-through;
  color: var(--text-faint);
}

.preview-time {
  font-size: 11px;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.preview-callout {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.preview-callout code {
  background: var(--accent-soft);
  color: var(--text);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-family: var(--mono);
}

.features {
  padding: 20px 0 64px;
}

.section-title {
  text-align: center;
  font-size: 1.7em;
  margin: 0 0 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.feature-icon {
  font-size: 22px;
  margin-bottom: 10px;
}

.feature-card h3 {
  margin: 0 0 8px;
  font-size: 1.05em;
}

.feature-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.faq {
  padding: 20px 0 70px;
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.faq-item h3 {
  margin: 0 0 6px;
  font-size: 1.05em;
}

.faq-item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.faq-item a {
  color: var(--accent);
}

.cta-band {
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 44px 24px;
  margin-bottom: 64px;
}

.cta-band h2 {
  margin: 0 0 22px;
  font-size: 1.6em;
}

.landing-footer {
  text-align: center;
  padding: 24px 0 40px;
  border-top: 1px solid var(--border);
}

.footer-links {
  margin-bottom: 8px;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  margin: 0 6px;
  font-size: 13.5px;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-copy {
  color: var(--text-faint);
  font-size: 12.5px;
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 40px 0 48px; }
  .hero-preview { order: -1; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .landing-nav { gap: 14px; }
  .landing-nav a:not(.nav-cta) { display: none; }
  .hero h1 { font-size: 1.9em; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* --- legal pages (privacy / terms) --- */

.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

.legal-header {
  padding: 20px 0;
}

.legal-header .back-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}

.legal-header .back-link:hover {
  color: var(--text);
}

.legal-main {
  padding: 20px 0 60px;
}

.legal-main h1 {
  margin: 0 0 6px;
}

.legal-updated {
  color: var(--text-faint);
  font-size: 13.5px;
  margin-bottom: 30px;
}

.legal-content h2 {
  font-size: 1.25em;
  margin: 34px 0 10px;
}

.legal-content h3 {
  font-size: 1.05em;
  margin: 20px 0 8px;
}

.legal-content p, .legal-content li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

.legal-content ul {
  padding-left: 22px;
}

.legal-content a {
  color: var(--accent);
}

.legal-content .callout {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
}

.legal-toc {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
}

.legal-toc > div:first-child {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  font-size: 14px;
}

.legal-toc a {
  color: var(--text-muted);
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--accent);
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  overflow-x: auto;
  display: block;
}

.legal-content table > tbody {
  display: table;
  width: 100%;
  min-width: 480px;
  table-layout: fixed;
}

.legal-content th, .legal-content td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
}

.legal-content th {
  background: var(--bg);
}

@media (max-width: 600px) {
  .legal-toc ol { columns: 1; }
}