/* Memento Mori as the app looks today (apps/mementomori/src/assets/main.css, dark "noir codex"): near-black vellum,
   warm parchment ink that is never pure white, terracotta for actions and margin rules, gold for this week.
   EB Garamond for words that matter, Inter for the interface, JetBrains Mono for numbers. */
:root {
  --bg: #07070a;
  --paper: #0e0e12;
  --surface: #14141a;
  --surface-2: #1c1c24;
  --hairline: rgba(239, 231, 207, 0.08);
  --hairline-strong: rgba(239, 231, 207, 0.22);
  --ink: #efe7cf;
  --ink-soft: rgba(239, 231, 207, 0.74);
  --ink-mute: rgba(239, 231, 207, 0.58);
  --accent: #c45a3a;
  --on-accent: #f5efe0;
  --gold: #c9a961;
  --future: rgba(239, 231, 207, 0.14);
  --serif: 'EB Garamond', 'Times New Roman', serif;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --gutter: clamp(20px, 5vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 18px/1.5 var(--serif);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--ink); text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: 0; text-wrap: balance; }
p { margin: 0; }
button, input, output { font: inherit; color: inherit; }

/* The app's small type: rubric labels, numerals, pill buttons. */
.rubric { font: 600 11px/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-mute); }
.rubric-gold { color: var(--gold); }
.rubric-accent { color: var(--accent); }
.numeral { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 14px 26px; border-radius: 9999px; border: 1px solid transparent;
  font: 500 15px/1.2 var(--sans); font-feature-settings: "ss01" on, "cv11" on; text-decoration: none; cursor: pointer;
  transition: opacity .15s ease, background-color .2s ease, border-color .2s ease;
}
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { opacity: .9; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn-ghost:hover { background: var(--surface); }
.btn-sm { padding: 10px 18px; font-size: 13px; }

.bar, main, .foot { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: 18px; }
.bar .home { font: 600 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; padding: 14px 0; }
.bar .home:hover { color: var(--ink); }
.bar .store { font: 500 13px/1 var(--sans); color: var(--ink); text-decoration: none; padding: 13px 18px; border: 1px solid var(--hairline-strong); border-radius: 9999px; }
.bar .store:hover { background: var(--surface); }
main { max-width: 1200px; margin: 0 auto; }

/* Hero: the pitch on the left, the live grid on the right. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(32px, 6vw, 96px); align-items: start; padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 104px); }
.pitch { position: sticky; top: 40px; padding-top: 8px; }
.pitch h1 { margin-top: 18px; font-size: clamp(46px, 5.6vw, 68px); line-height: 1.04; }
.lede { margin-top: 22px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; color: var(--ink-soft); max-width: 36ch; }
.cta { margin-top: 32px; }
.fine { margin-top: 16px; font: 400 14px/1.5 var(--sans); color: var(--ink-mute); }

.demo { margin: 0; }
/* The readout is the app's this-week card: flat paper, hairline border, a terracotta margin rule. */
.readout { position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; padding: 22px 24px 22px 28px; }
.readout::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; border-radius: 9999px; background: var(--accent); }
.readout .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pct { font-size: 13px; color: var(--ink-mute); }
.remain { margin-top: 12px; font: 500 clamp(34px, 3.3vw, 42px)/1.08 var(--serif); font-variant-numeric: tabular-nums; }
.sub { margin-top: 8px; font-size: 17px; line-height: 1.4; color: var(--ink-soft); min-height: 2.8em; }
.fields { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > span, .field label { font: 400 12px/1.2 var(--sans); color: var(--ink-mute); }
.field .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.field output { font-size: 13px; color: var(--ink-soft); }
.mm-input {
  width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none;
}
/* 16px keeps iOS from zooming on focus, as in the app. iOS centres date values unless told otherwise. */
.mm-input::-webkit-date-and-time-value { text-align: left; }
.mm-input:hover { border-color: var(--hairline-strong); }
.mm-input:focus-visible { border-color: var(--hairline-strong); }
.mm-input::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.mm-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; margin: 0; background: transparent; cursor: pointer; touch-action: none; }
.mm-slider::-webkit-slider-runnable-track { height: 1px; background: var(--hairline-strong); }
.mm-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7.5px; border: 0; border-radius: 9999px; background: var(--accent); box-shadow: 0 0 0 5px var(--paper); }
.mm-slider::-moz-range-track { height: 1px; background: var(--hairline-strong); border: 0; }
.mm-slider::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 9999px; background: var(--accent); box-shadow: 0 0 0 5px var(--paper); }

/* The grid sits on the page itself, as it does in the app. */
.weeks { position: relative; margin-top: 28px; }
.weeks canvas { display: block; width: 100%; }
.now { position: absolute; background: var(--gold); border-radius: 1px; pointer-events: none; animation: pulse-current 2.4s ease-in-out infinite; }
@keyframes pulse-current { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 8px; height: 8px; border-radius: 1px; }
.legend .k-past { background: var(--ink); }
.legend .k-now { background: var(--gold); }
.legend .k-ahead { border: 1px solid var(--ink-mute); }
.demo figcaption { margin-top: 14px; font: 400 13px/1.5 var(--sans); color: var(--ink-mute); }

/* Sections below the hero: rubric, serif heading, quiet text. */
.features, .plans, .help { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--hairline); }
.features h2, .plans h2, .help h2 { margin-top: 12px; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1; }
.grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 56px; }
.grid h3 { font-size: 23px; line-height: 1.2; }
.grid p { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--ink-soft); max-width: 38ch; }

.plan-cols { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; align-items: start; }
.plan { position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; padding: 28px 28px 30px; }
.plan.pro::before { content: ''; position: absolute; left: 0; top: 28px; bottom: 28px; width: 2px; border-radius: 9999px; background: var(--accent); }
.plan h3 { font-size: 24px; }
.plan ul { list-style: none; margin: 16px 0 0; padding: 0; }
.plan li { position: relative; padding: 9px 0 9px 20px; border-top: 1px solid var(--hairline); font-size: 17px; line-height: 1.4; color: var(--ink-soft); }
.plan li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; border-radius: 1px; background: var(--ink); opacity: .85; }
.plan p { margin-top: 18px; font: 400 14px/1.5 var(--sans); color: var(--ink-mute); }

.help-cols { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.faq details { border-top: 1px solid var(--hairline); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 500 21px/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 300 22px/1 var(--sans); color: var(--accent); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin-top: 12px; font-size: 17.5px; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.faq details p + p { margin-top: 10px; }
.faq b { color: var(--ink); font-weight: 500; }
.contact { position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px; padding: 26px 26px 26px 30px; }
.contact::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px; border-radius: 9999px; background: var(--accent); }
.contact-lede { margin-top: 12px; font-size: 19px; line-height: 1.4; }
.contact .mail { margin-top: 18px; font: 500 16px/1.4 var(--sans); overflow-wrap: anywhere; }
.copy { margin-top: 16px; }

.foot { max-width: 1200px; margin: 0 auto; padding-bottom: max(36px, env(safe-area-inset-bottom)); font: 400 14px/1.5 var(--sans); color: var(--ink-mute); }
.foot-in { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.foot nav { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.foot a { color: var(--ink-soft); text-decoration: none; padding: 4px 0; }
.foot a:hover { color: var(--ink); }

/* Legal pages: one reading column, in the app's serif. */
.legal { padding-top: clamp(24px, 5vw, 64px); padding-bottom: 80px; }
.legal > * { max-width: 720px; }
.legal h1 { font-size: clamp(42px, 6vw, 60px); line-height: 1.05; }
.legal .updated { margin-top: 14px; font: 400 13px/1.4 var(--sans); color: var(--ink-mute); }
.legal .intro { margin-top: 28px; font-size: 23px; line-height: 1.4; max-width: 40ch; }
.legal section { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.legal h2 { font-size: 25px; line-height: 1.2; }
.legal section p { margin-top: 10px; font-size: 18.5px; line-height: 1.55; color: rgba(239, 231, 207, 0.8); max-width: 64ch; }
.legal b { color: var(--ink); font-weight: 500; }
.legal a { text-decoration-color: rgba(196, 90, 58, 0.7); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .pitch { position: static; }
  .demo { max-width: 600px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-cols { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .grid, .plan-cols { grid-template-columns: 1fr; }
  .grid { gap: 30px; }
  .fields { grid-template-columns: 1fr; gap: 14px; }
  .readout { padding: 20px 20px 20px 24px; }
  .plan { padding: 24px 22px 26px; }
  .bar .home { letter-spacing: .26em; }
}
@media (prefers-reduced-motion: reduce) {
  .now { animation: none; opacity: 1; }
  .btn { transition: none; }
}