/* memtale — landing.
 *
 * The Vellum pack, lifted verbatim from web/style.css so the marketing page and
 * the product are the same object rather than a likeness of one. If those
 * tokens change, change them here too; a landing page in last season's colours
 * is worse than none.
 *
 * Light and dark follow the system with no toggle. The app has a toggle because
 * you live in it; a page you read once should simply match what you already
 * chose. */

@font-face { font-family:'Spectral'; src:url('assets/fonts/spectral-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('assets/fonts/spectral-400i.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Spectral'; src:url('assets/fonts/spectral-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('assets/fonts/worksans-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('assets/fonts/worksans-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('assets/fonts/worksans-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }

:root {
  --serif:'Spectral',Georgia,serif;
  --sans:'Work Sans',system-ui,-apple-system,sans-serif;

  --bg:#f6f2ea; --surface:#efe9df; --panel:#fbf8f2; --line:#e6dfd2; --chip:#ece5d9; --track:#ded5c5;
  --ink:#2c2822; --ink2:#5c564d; --ink3:#a09788;
  --accent:#b4552e; --accent2:#7d8a5c; --accent3:#8a6f9c;
  --shadow:rgba(44,40,34,.16);

  --measure:34rem;
  color-scheme:light dark;
}

/* Dark, twice over. A selector cannot precede an @media in one rule, so these
   are separate blocks that happen to carry the same tokens.
   - the media query is the requirement: follow the system
   - [data-theme] is an explicit override, which exists so both themes can be
     inspected without changing an OS setting, and leaves room for a toggle
   :not([data-theme="light"]) lets an explicit light choice win over a dark
   system, which is the whole point of having an override at all. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#191713; --surface:#211e19; --panel:#232019; --line:#332f27; --chip:#2b2721; --track:#3a352d;
    --ink:#efe8da; --ink2:#b6ada0; --ink3:#7d7467;
    --accent:#d4794c; --accent2:#9aa87a; --accent3:#ac90bd;
    --shadow:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:#191713; --surface:#211e19; --panel:#232019; --line:#332f27; --chip:#2b2721; --track:#3a352d;
  --ink:#efe8da; --ink2:#b6ada0; --ink3:#7d7467;
  --accent:#d4794c; --accent2:#9aa87a; --accent3:#ac90bd;
  --shadow:rgba(0,0,0,.5);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
a { color:inherit; }

.wrap { width:min(72rem, calc(100% - 3rem)); margin-inline:auto; }
.prose { max-width:var(--measure); }

/* ---- nav ---- */

.nav {
  display:flex; align-items:center; gap:.7rem;
  padding:1.4rem 0; font-size:.95rem;
}
.mark { width:26px; height:26px; border-radius:6px; }
.wordmark { font:600 1.05rem/1 var(--serif); letter-spacing:.01em; }
.nav-spacer { flex:1; }
.nav a { color:var(--ink2); text-decoration:none; }
.nav a:hover { color:var(--ink); }
/* The way in should look like a way in, without shouting over the hero. */
.nav-cta {
  border:1px solid var(--line); border-radius:8px; padding:.34rem .8rem;
  background:var(--panel); color:var(--ink) !important;
}
.nav-cta:hover { border-color:var(--ink3); }

/* ---- buttons ---- */

.btn {
  display:inline-block; padding:.72rem 1.25rem; border-radius:10px;
  font:500 .98rem/1 var(--sans); text-decoration:none; border:1px solid transparent;
  transition:transform .12s ease, background .12s ease;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); }
.btn-quiet { border-color:var(--line); color:var(--ink2); background:var(--panel); }
.btn-quiet:hover { color:var(--ink); }

/* ---- hero ---- */

.hero { padding:4.5rem 0 3rem; }
.hero h1 {
  font:400 clamp(2.4rem, 6vw, 3.9rem)/1.1 var(--serif);
  letter-spacing:-.015em; margin:0 0 1.1rem; max-width:20ch; text-wrap:balance;
}
.hero .lede { font-size:1.2rem; color:var(--ink2); max-width:38ch; margin:0 0 2rem; }
.hero .actions { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.hero .aside { margin-top:1.4rem; font-size:.9rem; color:var(--ink3); }

/* ---- section rhythm ---- */

section { padding:3.5rem 0; }
.eyebrow {
  font:500 .75rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3); margin:0 0 .9rem;
}
h2 { font:400 clamp(1.7rem,3.4vw,2.3rem)/1.2 var(--serif); letter-spacing:-.01em; margin:0 0 .9rem; }
h3 { font:600 1.02rem/1.35 var(--sans); margin:0 0 .35rem; }
p { margin:0 0 1rem; }
.muted { color:var(--ink2); }

/* ---- the shot: a real UI rendered in CSS, not a PNG ---- */

.shot {
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  box-shadow:0 18px 44px -24px var(--shadow); overflow:hidden;
}
.shot-bar {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-bottom:1px solid var(--line); background:var(--surface);
}
.dot { width:9px; height:9px; border-radius:50%; background:var(--track); }
.shot-title { margin-inline:auto; font:400 .9rem/1 var(--serif); color:var(--ink2); }
.shot-body { padding:1.5rem; }

.cards {
  display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  align-items:stretch;
}
.card {
  border:1px solid var(--line); border-radius:11px; background:var(--bg);
  padding:.95rem 1.05rem;
  display:flex; flex-direction:column;
}
/* line-height 1.35 rather than 1: these labels wrap on narrow cards and set
   solid they collide. align-items:baseline keeps the dot on the FIRST line
   rather than centred against a two-line block. */
.card .tag {
  font:500 .66rem/1.35 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink3); display:flex; align-items:baseline; gap:.42rem; margin-bottom:.6rem;
  text-wrap:balance;
}
.tag::before {
  content:''; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--accent); transform:translateY(-1px);
}
.card.g .tag::before { background:var(--accent2); }
.card.v .tag::before { background:var(--accent3); }
.card p { font:400 .95rem/1.5 var(--serif); margin:0; color:var(--ink); }
.card p.quote { font-style:italic; }

/* density grid, as in "four years of days" */
.years { display:grid; gap:.5rem; margin-top:1.1rem; }
.year-row { display:flex; align-items:center; gap:.5rem; }
.year-label { font:400 .72rem/1 var(--sans); color:var(--ink3); width:2.4rem; flex:none; }
.days { display:flex; gap:2px; flex:1; }
.day { flex:1; height:14px; border-radius:3px; background:var(--chip); }
.day.l1 { background:color-mix(in srgb, var(--accent) 28%, var(--chip)); }
.day.l2 { background:color-mix(in srgb, var(--accent) 62%, var(--chip)); }
.day.l3 { background:var(--accent); }

/* ---- features ---- */

.grid3 { display:grid; gap:2rem 2.4rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.feature p { color:var(--ink2); font-size:.97rem; margin:0; }

/* ---- the promise block ---- */

.promise {
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface);
}
.promise .lead { font:400 1.35rem/1.5 var(--serif); max-width:38ch; margin:0 0 1.4rem; }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
/* A real tick, made from two borders of a rotated box.
   The previous version crossed two gradients through the centre, which draws an
   X — so a list of things the product DOES read as a list of things it does
   not. Worth the extra four lines. */
.checks li {
  position:relative; padding-left:1.75rem;
  color:var(--ink2); font-size:.97rem; line-height:1.55;
}
.checks li::before {
  content:''; position:absolute; left:.2rem; top:.45rem;
  width:.7rem; height:.38rem;
  border-left:2px solid var(--accent2);
  border-bottom:2px solid var(--accent2);
  transform:rotate(-45deg);
}

/* ---- imports ---- */

.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip {
  border:1px solid var(--line); background:var(--chip); color:var(--ink2);
  border-radius:999px; padding:.4rem .85rem; font-size:.88rem;
}

/* ---- footer ---- */

footer { padding:3rem 0 4rem; color:var(--ink3); font-size:.88rem; }
footer a { color:var(--ink2); text-decoration:none; }
footer a:hover { color:var(--ink); }
.foot-row { display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; }
.foot-spacer { flex:1; }

@media (max-width:34rem) {
  .hero { padding:2.75rem 0 2rem; }
  section { padding:2.5rem 0; }
  .shot-body { padding:1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
}

/* ---- utilities ----
 *
 * These exist because the CSP is style-src 'self' with no 'unsafe-inline', so a
 * style="" attribute is blocked outright. Seven were in the markup and worked
 * only because the security headers were not reaching the browser at all — two
 * faults cancelling, where fixing either alone breaks the page. */
.cards-wide { grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.mt-lg { margin-top:1.3rem; }
.mt-xl { margin-top:2.6rem; }
.pt-sm { padding-top:1rem; }
.mb-sm { margin-bottom:.5rem; }
.cta { padding:2.2rem 1.6rem; text-align:center; }
.cta-lede { max-width:36ch; margin:0 auto 1.5rem; }

/* ---- non-Latin locales ----
 *
 * Spectral and Work Sans carry Latin and Cyrillic but no CJK, so Japanese and
 * Chinese fall through to a system face. That is the right outcome — a CJK
 * webfont is megabytes, and every system already has a good one — but the
 * fallback should be named rather than left to whatever `serif` resolves to.
 *
 * Italics are removed for CJK. There is no italic in Japanese or Chinese
 * typography; a browser asked for one synthesises a slant, which looks like a
 * rendering fault rather than emphasis. The quotes keep their quotation marks,
 * which is how the distinction is actually made in those scripts. */
:lang(ja) {
  --serif:'Spectral','Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:'Work Sans','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
}
:lang(zh-Hans) {
  --serif:'Spectral','Songti SC','Noto Serif CJK SC',serif;
  --sans:'Work Sans','PingFang SC','Noto Sans CJK SC',system-ui,sans-serif;
}
:lang(ja) .card p.quote,
:lang(zh-Hans) .card p.quote { font-style:normal; }

/* Cyrillic sits inside Spectral, so Russian needs no substitution — but the
   headline tracking tuned for Latin is a touch tight for it. */
:lang(ru) .hero h1 { letter-spacing:-.005em; }