/* jarmer.app: the Desert palette from the app (ios/DibsKit/Theme/Theme.swift), light and dark.
   Shared by the static pages in public/ and the pages the server renders (guides, the blog,
   invites, account): the header and footer markup lives in src/site/chrome.ts. */

@font-face {
  font-family: "Fredoka";
  src: url("/assets/fredoka-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ground: #F4EBE1;
  --surface: #FDF9F4;
  --fill: #EFE1D3;
  --fill2: #E8D8C8;
  --line: #E3D2C1;
  --ink: #2A1F26;
  --ink2: #66545A;
  --sage: #E6EADB; --sage-ink: #5A6E4C;
  --apricot: #F3E2D3; --apricot-ink: #93603F;
  --lavender: #E7E1EC; --lavender-ink: #66577E;
  --sky: #DAE6EF; --sky-ink: #35607F;
  --rose: #F4DCE1; --rose-ink: #9A3F57;
  --honey: #F5E7C4; --honey-ink: #7E6119;
  --ember: #E0703F;
  /* Ripeness: sage → ochre → ember as a chore gets due. Never red. */
  --fresh: #A3AD86; --getting-due: #DDA74E; --due: #C0562D;
  --radius: 22px;
  --display: "Bricolage Grotesque", ui-rounded, system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1F1622;
    --surface: #2B1F2D;
    --fill: #3A2B3B;
    --fill2: #45344A;
    --line: #4B3A4D;
    --ink: #F4EBE1;
    --ink2: #C9B5B3;
    --sage: #2F3A2A; --sage-ink: #C3D1AE;
    --apricot: #45302A; --apricot-ink: #E8C4A6;
    --lavender: #352E48; --lavender-ink: #CBBFDF;
    --sky: #26333F; --sky-ink: #A9CBE6;
    --rose: #45293A; --rose-ink: #F1B3C4;
    --honey: #41381F; --honey-ink: #EBD08A;
    --texture: 0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* Paper grain under everything (the same tile as support-audit): fixed, so the page moves over it
   like a page over a desk. Light only; cards and panels are solid, so text never sits on it. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/paper.png") repeat; background-size: 300px 300px; opacity: var(--texture, 1);
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sage-ink); }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
[id] { scroll-margin-top: 24px; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(720px, 100% - 32px); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Arrived from functioninghuman.com (top.js) ──────────────────────── */
.fh-note {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; margin-bottom: 8px;
  padding: 14px 16px 14px 20px; border-radius: 18px; background: var(--honey); color: var(--ink);
}
.fh-note p { margin: 0; flex: 1; font-size: 16px; line-height: 1.45; }
.fh-note strong { font-weight: 700; }
.fh-note button {
  flex: none; width: 32px; height: 32px; margin: -4px -4px -4px 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--honey-ink); font: 600 22px/1 var(--body); cursor: pointer;
}
.fh-note button:hover { background: color-mix(in srgb, var(--honey-ink) 12%, transparent); }

/* ── Header (src/site/chrome.ts) ─────────────────────────────────────── */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 22px 0; position: relative;
}
.top .logo { display: inline-flex; border-radius: 8px; }
.top .logo img { height: 34px; width: auto; }
.top nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; font-size: 16px; }
.top nav a { text-decoration: none; color: var(--ink2); }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); }
.top nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.top nav a.button, .top nav a.button:hover { color: var(--ground); text-decoration: none; }
.top nav a:not(.button) { display: inline-flex; align-items: center; gap: 7px; }
.top nav .i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; transition: color 0.2s ease, opacity 0.2s ease; }
.top nav a:hover .i { opacity: 1; }
/* The page you're on: its icon takes the dot's colour. */
.top nav a[aria-current] .i { color: var(--ember); opacity: 1; }
/* Reading (Guides, Tools) on one side of a hairline, the app (Features, Help) on the other. */
.top nav .sep { width: 1px; height: 18px; background: var(--line); }
/* The header stays with you: pinned on a wide screen, and on a phone it tucks away while you read
   down and comes back as soon as you scroll up (assets/top.js; without script it simply pins).
   It spans the window; its contents keep to the column. A hairline appears once you've scrolled. */
.top.wrap {
  position: sticky; top: 0; z-index: 50; width: auto;
  padding-inline: max(16px, calc((100% - 1080px) / 2));
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.3s ease;
}
.top.scrolled { border-bottom-color: var(--line); }
/* The same paper grain as the page (body::before), fixed to the window so the two line up. */
.top.wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/paper.png") repeat fixed; background-size: 300px 300px; opacity: var(--texture, 1);
}
/* "Add to Jarmer" on guides and calculators (assets/add.js). */
.cta-actions .add[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.cta-actions .add-note, .cta-actions .add-signin { margin: 12px 0 0; font-size: 15px; color: var(--ink2); }
.cta-actions .add-note:empty { margin: 0; }
.band .cta-actions .add-note, .band .cta-actions .add-signin { color: inherit; opacity: 0.85; }
/* Signed in: your initial in the dot's colour where Get Jarmer was. */
.top nav a.button.me { gap: 8px; padding-left: 8px; }
.top nav a.me .initial { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ember); color: #FDF9F4; font-size: 13px; font-weight: 700; line-height: 1; }
.top nav a.me .initial:empty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FDF9F4; }
/* Jumps to a section land clear of the header. */
html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { .top.wrap { transition: none; } }
@media (max-width: 640px) {
  .top { flex-wrap: wrap; padding: 18px 0 10px; }
  .top nav { order: 3; width: 100%; gap: 6px 14px; font-size: 15px; }
  .top nav a:not(.button) { gap: 5px; }
  .top nav .i { width: 16px; height: 16px; }
  .top.wrap nav a.button { right: 16px; }
  .top.tucked { transform: translateY(-100%); }
  html { scroll-padding-top: 16px; }
  /* The button rides up beside the logo; the links get the second row to themselves. */
  .top nav a.button { position: absolute; right: 0; top: 15px; }
}

/* ── Footer (src/site/chrome.ts) ─────────────────────────────────────── */
footer {
  margin-top: 88px; padding: 40px 0 44px; border-top: 1px solid var(--line);
  color: var(--ink2); font-size: 15px;
}
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; color: var(--ink); }
/* The older one-row footer, until every page has the new one. */
footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer .row nav { display: flex; gap: 18px; flex-wrap: wrap; }

.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px 24px; }
.footer-brand .logo { display: inline-flex; border-radius: 8px; }
.footer-brand .logo img { height: 28px; width: auto; }
.footer-brand p { margin: 14px 0 0; max-width: 30ch; line-height: 1.5; }
.footer-brand p a { text-decoration: underline; }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.site-footer nav h2 {
  font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 8px; line-height: 1.3;
}
.site-footer nav a { padding: 4px 0; color: var(--ink2); }
.site-footer nav a:hover { color: var(--ink); }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px;
}
.footer-legal a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Type ────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 800; }
h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.2; }
p { text-wrap: pretty; }
.eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); margin: 0 0 14px; }
.lede { font-size: clamp(19px, 2.2vw, 22px); color: var(--ink2); max-width: 40ch; margin: 20px 0 0; }
.muted { color: var(--ink2); }
.small { font-size: 15px; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-top: 18px; text-decoration: none; color: var(--ink); }
.more::after { content: "→"; transition: transform 0.15s; }
.more:hover { color: var(--ink); text-decoration: underline; }
.more:hover::after { transform: translateX(3px); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 16px;
  background: var(--ink); color: var(--ground); font-weight: 700; text-decoration: none; line-height: 1.2;
}
.button:hover { color: var(--ground); opacity: 0.92; }
.button.soft { background: var(--fill); color: var(--ink); }
.button.soft:hover { color: var(--ink); background: var(--fill2); opacity: 1; }
.button.small { min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
button.button { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* On a phone the hero's two buttons stack at one width, the main one on top. */
@media (max-width: 480px) { .home-hero .actions .button { flex: 1 1 100%; justify-content: center; } }

/* ── Home: the hero ──────────────────────────────────────────────────── */
.home-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 32px 0 8px; }
.home-hero .lede { max-width: 38ch; }
.home-hero .fine { color: var(--ink2); font-size: 15px; margin: 16px 0 0; }
@media (max-width: 860px) { .home-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 20px; } }

/* The lock screen, drawn at dusk (Theme.skyGradient): the widget with the dot, and a notification
   with its buttons. The same in light and dark, like a wallpaper. */
.phone {
  --ink: #2A1F26; --ink2: #66545A; --surface: #FDF9F4; --line: #E3D2C1; --sage-ink: #5A6E4C;
  color: #FDF9F4;
  background: linear-gradient(180deg, #2B1D2E 0%, #4A2A45 32%, #8C3F55 62%, #C8664E 86%, #E39A63 100%);
  border-radius: 46px; padding: 30px 18px 22px; max-width: 360px; margin-inline: auto; width: 100%;
  box-shadow: 0 34px 70px -34px rgba(42, 31, 38, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone .date { text-align: center; color: rgba(253, 249, 244, 0.88); font-size: 15px; font-weight: 700; margin: 0; }
.phone .clock { text-align: center; font-family: var(--display); font-weight: 700; font-size: 76px; letter-spacing: -0.03em; line-height: 1; margin: 2px 0 18px; }
/* The lock screen widget as the app draws it (ios/DibsWidgets/NextWidget.swift): the dot and
   "Next", the thing, its first step, in the lock screen's own type, centered under the clock. */
.lock-widget {
  display: grid; gap: 1px; width: fit-content; min-width: 62%; max-width: 100%; margin: 0 auto 18px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: rgba(253, 249, 244, 0.94); line-height: 1.25;
}
.lock-widget .label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(253, 249, 244, 0.8); }
.lock-widget .dot { width: 7px; height: 7px; box-shadow: none; }
.lock-widget strong { font-size: 17px; font-weight: 600; }
.lock-widget small { font-size: 13px; color: rgba(253, 249, 244, 0.72); }
.notif {
  color: var(--ink);
  background: rgba(253, 249, 244, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 24px; overflow: hidden;
}
.notif .head { display: flex; gap: 12px; padding: 14px; align-items: center; }
.notif .icon { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.notif strong { display: block; font-size: 16px; line-height: 1.3; }
.notif small { display: block; color: var(--ink2); font-size: 14px; line-height: 1.35; }
.notif .when { margin-left: auto; align-self: flex-start; color: var(--ink2); font-size: 13px; }
.notif .btn { border-top: 1px solid var(--line); text-align: center; padding: 10px; font-size: 16px; }
.notif .btn.done { color: var(--sage-ink); font-weight: 700; }

/* The dot: the logo's ember, "your one next thing". */
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 5px rgba(224, 112, 63, 0.25); flex: none; }
.dot.fresh { background: var(--fresh); box-shadow: none; }
.dot.getting-due { background: var(--getting-due); box-shadow: none; }
.dot.due { background: var(--due); box-shadow: none; }

/* The trust line: what Jarmer never does. */
/* A line of plain words with quiet dots between them: a promise, not buttons. */
.trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; margin: 40px auto 0; padding: 0; list-style: none; max-width: 900px; color: var(--ink2); font-size: 15px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.trust li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sage-ink); opacity: 0.7; }
.nos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.nos span { background: var(--fill); border-radius: 999px; padding: 8px 14px; font-size: 15px; }

/* ── Sections ────────────────────────────────────────────────────────── */
section { padding: 64px 0 0; }
.section-head { max-width: 46ch; }
.section-head .lede { margin-top: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 22px; }
.card h3 { font-size: 20px; }
.card p { margin: 8px 0 0; color: var(--ink2); font-size: 16px; }
.card p + p { margin-top: 8px; }
.card .tag { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ink2); background: var(--fill); border-radius: 999px; padding: 3px 10px; }
.tint { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px; font-size: 22px; }
.tint svg { width: 22px; height: 22px; }
.tint.sage { background: var(--sage); color: var(--sage-ink); }
.tint.apricot { background: var(--apricot); color: var(--apricot-ink); }
.tint.lavender { background: var(--lavender); color: var(--lavender-ink); }
.tint.sky { background: var(--sky); color: var(--sky-ink); }
.tint.rose { background: var(--rose); color: var(--rose-ink); }
.tint.honey { background: var(--honey); color: var(--honey-ink); }

/* A feature, told once: words on one side, a small picture of it on the other. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; align-items: center; }
.feature.flip > :first-child { order: 2; }
.feature .lede { font-size: 19px; max-width: 44ch; }
.feature ul.ticks { margin-top: 18px; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .feature.flip > :first-child { order: 0; }
}
ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.ticks li { position: relative; padding-left: 28px; color: var(--ink2); font-size: 17px; }
ul.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--sage-ink); border-bottom: 2.5px solid var(--sage-ink); transform: rotate(-45deg);
}

/* Small drawings of the app: a stack of cards. */
.stack { display: grid; gap: 10px; background: var(--surface); border-radius: 28px; padding: 20px; }
.mini { background: var(--ground); border-radius: 18px; padding: 14px 16px; border: 1px solid var(--line); }
.mini strong { display: block; font-size: 16px; line-height: 1.3; }
.mini small { display: block; color: var(--ink2); font-size: 14px; margin-top: 2px; }
.mini > span { display: block; color: var(--sage-ink); font-size: 14px; font-weight: 700; margin-top: 10px; }
.mini .row { display: flex; align-items: center; gap: 12px; }
.mini .row > div { flex: 1; min-width: 0; }
.mini .who { margin: 0 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ink2); white-space: nowrap; }
.mini .buttons { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mini .buttons b { font-size: 14px; background: var(--fill); border-radius: 10px; padding: 6px 12px; }
.mini .buttons b:first-child { background: var(--ink); color: var(--ground); }
.mini .label { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink2); margin: 0 0 6px; display: block; }
.stack .caption { font-size: 14px; color: var(--ink2); margin: 2px 4px 0; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.stack .caption span { display: inline-flex; align-items: center; gap: 6px; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 28px; padding: 0; }
.steps li { list-style: none; background: var(--surface); border-radius: var(--radius); padding: 22px; position: relative; }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; margin-bottom: 14px;
  background: var(--fill); font-weight: 700;
}
.steps li h3 { font-size: 20px; }
.steps li p { margin: 6px 0 0; color: var(--ink2); font-size: 16px; }

.band { background: var(--surface); border-radius: 30px; padding: 44px; margin-top: 64px; }
@media (max-width: 600px) { .band { padding: 28px 22px; border-radius: 24px; } }
.band.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }
@media (max-width: 760px) { .band.split { grid-template-columns: 1fr; } }
.band h3, .band .h3 { font-size: 24px; font-weight: 700; line-height: 1.2; }
.band p { color: var(--ink2); margin: 10px 0 0; }

/* The way in: #get on the home page. */
.get { text-align: center; background: var(--ink); color: var(--ground); border-radius: 32px; padding: 56px 28px; margin-top: 72px; }
.get .eyebrow { color: color-mix(in srgb, var(--ground) 78%, var(--ink)); }
.get h2 { max-width: 20ch; margin-inline: auto; }
.get p { max-width: 46ch; margin: 16px auto 0; color: color-mix(in srgb, var(--ground) 84%, var(--ink)); }
.get .actions { justify-content: center; }
.get .button { background: var(--ground); color: var(--ink); }
.get .button:hover { color: var(--ink); }
.get .button.soft { background: transparent; color: var(--ground); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ground) 55%, var(--ink)); }
.get .button.soft:hover { color: var(--ground); background: color-mix(in srgb, var(--ground) 12%, var(--ink)); }
.get .fine { font-size: 15px; margin-top: 18px; }
.get a:not(.button) { color: inherit; }
.get :focus-visible { outline-color: var(--ground); }
@media (max-width: 600px) { .get { padding: 40px 20px; border-radius: 26px; } }

/* ── Inner pages: the page head and the tour ─────────────────────────── */
.page-head { padding: 32px 0 0; }
.page-head > :not(nav) { max-width: 780px; }
.page-head h1 { font-size: clamp(38px, 6vw, 62px); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-block; text-decoration: none; font-size: 15px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--surface); }
.toc a:hover { color: var(--ink); border-color: var(--ink2); }
.tour { padding-top: 72px; }
.tour > .section-head { max-width: 52ch; }
.tour .eyebrow { display: flex; align-items: center; gap: 12px; }
.tour .eyebrow .tint { width: 36px; height: 36px; border-radius: 12px; margin: 0; flex: none; }
.tour .eyebrow .tint svg { width: 19px; height: 19px; }
.tour .grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.tour-sub { font-size: 24px; margin: 44px 0 0; }
.callout { border-left: 3px solid var(--ember); padding: 4px 0 4px 18px; margin: 22px 0 0; color: var(--ink); font-size: 19px; max-width: 52ch; }
.callout p { margin: 0; }
.callout p + p { margin-top: 6px; color: var(--ink2); font-size: 17px; }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-top: 36px; align-items: stretch; }
.plan { background: var(--surface); border-radius: 26px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); }
.plan.plus { border: 2px solid var(--ink); }
.plan h2, .plan h3 { font-size: 26px; font-weight: 800; }
.plan .price { font-family: var(--display); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin: 18px 0 0; }
.plan .price small { font-family: var(--body); font-size: 17px; font-weight: 400; color: var(--ink2); letter-spacing: 0; }
.plan .or { margin: 8px 0 0; color: var(--ink2); font-size: 16px; }
.plan .or strong { color: var(--ink); }
.plan .save { display: inline-block; font-size: 13px; font-weight: 700; background: var(--sage); color: var(--sage-ink); border-radius: 999px; padding: 3px 10px; margin-left: 4px; vertical-align: 2px; }
.plan .for { margin: 14px 0 0; font-size: 16px; color: var(--ink2); }
.plan ul.ticks { margin: 20px 0 0; }
.plan .foot { margin-top: auto; padding-top: 22px; font-size: 15px; color: var(--ink2); }
.plan .foot p { margin: 0; }
.plan .foot p + p { margin-top: 4px; }
@media (max-width: 520px) { .plan { padding: 24px 20px; } }

.table-wrap { margin-top: 28px; background: var(--surface); border-radius: var(--radius); padding: 6px 22px; overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare caption { text-align: left; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 13px 10px 13px 0; border-bottom: 1px solid var(--line); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); }
.compare tbody th { font-weight: 700; width: 38%; }
.compare tbody th small { display: block; font-weight: 400; color: var(--ink2); font-size: 14px; }
.compare td { color: var(--ink2); width: 31%; }
.compare .yes { color: var(--sage-ink); font-weight: 700; }
.compare .group th { padding-top: 22px; font-family: var(--display); font-size: 19px; color: var(--ink); border-bottom: 1px solid var(--line); }
@media (max-width: 520px) {
  .table-wrap { padding: 4px 14px; }
  .compare { font-size: 15px; }
  .compare tbody th { width: 40%; }
}

.free-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; list-style: none; padding: 0; margin: 24px 0 0; }
.free-list li { position: relative; padding-left: 28px; color: var(--ink); }
.free-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 12px; height: 7px;
  border-left: 2.5px solid var(--sage-ink); border-bottom: 2.5px solid var(--sage-ink); transform: rotate(-45deg);
}

/* ── FAQ and text pages: help, legal, contact ────────────────────────── */
.faq > details, .faq > p { max-width: 760px; margin-inline: auto; }
.faq > h2 { margin-bottom: 24px; text-align: center; }
.faq > p { text-align: center; }
.page { padding: 24px 0 0; }
.page h1 { font-size: clamp(36px, 6vw, 56px); }
.page .updated { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink2); margin: 0 0 12px; }
.page .intro { font-size: 20px; color: var(--ink2); margin: 16px 0 8px; }
.page section { padding: 22px 0; border-top: 1px solid var(--line); }
.page section:first-of-type { margin-top: 24px; }
.page h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.page p, .page li { color: var(--ink2); font-size: 17px; }
.page ul { padding-left: 22px; margin: 8px 0; }
.page p { margin: 0 0 10px; }
.page .group { font-size: 15px; font-family: var(--body); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink2); margin: 36px 0 4px; }
details { background: var(--surface); border-radius: 18px; padding: 0; margin-top: 10px; }
details summary { cursor: pointer; font-weight: 700; list-style: none; padding: 16px 52px 16px 20px; position: relative; border-radius: 18px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 20px; top: 14px; font-size: 22px; line-height: 1.2; color: var(--ink2); }
details[open] summary::after { content: "–"; }
/* The answer sits inside the card, lined up with the question (one rule for the margins, so a
   later one can't undo the sides). */
details[open] { padding-bottom: 20px; }
details[open] summary { padding-bottom: 8px; }
details > :not(summary) { margin: 0 52px 10px 20px; }
details > :last-child:not(summary) { margin-bottom: 0; }
details p { color: var(--ink2); font-size: 17px; line-height: 1.55; }
@media (max-width: 600px) { details > :not(summary) { margin-right: 20px; } }
details summary:focus-visible { outline-offset: -3px; }
.mailboxes { display: grid; gap: 12px; margin-top: 24px; }
.mailboxes a { display: block; background: var(--surface); border-radius: 18px; padding: 18px 20px; text-decoration: none; border: 1px solid transparent; }
.mailboxes a:hover { border-color: var(--line); color: var(--ink); }
.mailboxes strong { display: block; }
.mailboxes span { color: var(--ink2); font-size: 16px; }

/* About: principles, numbered by what they do. */
.principles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-top: 24px; padding: 0; list-style: none; }
.principles li { background: var(--surface); border-radius: var(--radius); padding: 20px 22px; }
.principles h3 { font-size: 20px; }
.principles p { margin: 6px 0 0; color: var(--ink2); font-size: 16px; }
.prose p { color: var(--ink2); font-size: 18px; max-width: 62ch; }
.prose p strong { color: var(--ink); }

:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .more::after { transition: none; } }

/* Guides (/guides): the article body */
.guide article { font-size: 18px; }
.guide article h2 { margin-top: 1.6em; }
.guide article img, .guide .hero img { max-width: 100%; height: auto; border-radius: 16px; }
.guide figure { margin: 1.2em 0; }
.guide blockquote { margin: 1em 0; padding-left: 16px; border-left: 3px solid var(--line); color: var(--ink2); }
.guide pre { overflow-x: auto; background: var(--fill); padding: 12px; border-radius: 12px; }
.guide-list { list-style: none; padding: 0; }
.guide-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.guide .muted { color: var(--ink2); }

/* "What's going on right now?": the moments, one at a time. With script it plays on its own (and
   stops for good once someone picks one); every panel shares one grid cell, so the page never
   moves when the moment changes. Without script, every moment shows, one after another. */
.right-now .section-head { max-width: 52ch; }
.moments { margin-top: 26px; background: var(--surface); border-radius: 32px; padding: 10px; }
.picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.picker button {
  position: relative; text-align: left; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--ink2); background: transparent; border: 0; border-radius: 22px; padding: 16px 18px 24px; cursor: pointer;
}
.picker button:hover { color: var(--ink); background: color-mix(in srgb, var(--ground) 60%, transparent); }
.picker button[aria-selected="true"] { background: var(--ground); color: var(--ink); }
.picker button:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 2px; }
.picker button i { position: absolute; left: 18px; right: 18px; bottom: 12px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.picker button i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.picker button[aria-selected="true"] i::after { transform: scaleX(1); }
.moments.playing .picker button[aria-selected="true"] i::after { animation: fill-bar var(--dwell, 7s) linear forwards; }
@keyframes fill-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.panels { display: grid; margin-top: 6px; }
.moment { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 28px; align-items: center; background: var(--ground); border-radius: 24px; padding: 30px; }
.moment + .moment { margin-top: 6px; }
.js .panels > .moment { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s; }
.js .panels > .moment.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s; }
.moment h3 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25; margin: 0; }
.moment p { color: var(--ink2); font-size: 17px; margin: 12px 0 0; max-width: 56ch; }
.moment .eyebrow { font-size: 13px; margin-bottom: 10px; }
.moment .mini { background: var(--surface); }
@media (max-width: 760px) {
  .picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moment { grid-template-columns: 1fr; padding: 22px; }
}
.family { color: var(--ink2); font-size: 16px; text-align: center; max-width: 60ch; margin: 8px auto 0; }

/* 404 and the holding page */
.lost { padding: 56px 0 0; }
.lost .toc { margin-top: 32px; }
.holding { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0 32px; }
.holding .logo img { height: 44px; width: auto; }
.holding .eyebrow { margin-top: 40px; }
.holding .fine { margin-top: 56px; font-size: 15px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.holding .fine a { text-decoration: none; }
.holding .fine a:hover { text-decoration: underline; }

/* Invite links (/j/<code>): one screen, the code big enough to read aloud. */
.invite { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.invite .logo img { height: 40px; width: auto; }
.invite .eyebrow { margin-top: 36px; }
.invite h1 { font-size: clamp(36px, 7vw, 56px); }
.invite .logo + h1 { margin-top: 36px; }
.handed { background: var(--surface); border-radius: var(--radius); padding: 18px 22px; margin-top: 28px; }
.handed small { display: block; color: var(--sage-ink); font-size: 15px; font-weight: 700; }
.handed strong { display: block; font-size: 21px; line-height: 1.3; margin-top: 4px; overflow-wrap: anywhere; }
.handed p { margin: 8px 0 0; color: var(--ink2); font-size: 16px; }
.code {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  background: var(--surface); border-radius: var(--radius); padding: 18px 18px 18px 22px; margin-top: 16px;
}
.code button[hidden] { display: none; }
.code small { display: block; color: var(--ink2); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.code .value { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 8vw, 40px); letter-spacing: 0.08em; line-height: 1.2; user-select: all; -webkit-user-select: all; }
.invite .actions { margin-top: 20px; }
.invite .fine { color: var(--ink2); font-size: 16px; margin: 16px 0 0; max-width: 52ch; }
.invite .foot { margin-top: 40px; font-size: 15px; }

/* How it works: four steps, each with a glimpse of the app. */
.how-steps { counter-reset: step; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; }
.how-steps li { list-style: none; background: var(--surface); border-radius: var(--radius); padding: 24px; display: grid; gap: 6px; align-content: start; }
.how-steps li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; margin-bottom: 8px;
  background: var(--fill); font-weight: 700;
}
.how-steps h3 { font-size: 21px; line-height: 1.25; }
.how-steps p { margin: 0; color: var(--ink2); font-size: 16px; }
.how-steps .mini { margin-top: 12px; }
@media (max-width: 760px) { .how-steps { grid-template-columns: 1fr; } }

/* Things rise into place as they scroll into view (assets/site.js adds .in). Only with script, so
   nothing is ever hidden without it; never with Reduce Motion. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal-stagger.in > * { opacity: 1; transform: none; }
.js .reveal-stagger.in > :nth-child(2) { transition-delay: 0.1s; }
.js .reveal-stagger.in > :nth-child(3) { transition-delay: 0.2s; }
.js .reveal-stagger.in > :nth-child(4) { transition-delay: 0.3s; }

/* The hero's lock screen at work: the dot breathes, a nudge arrives, Done is tapped, "One less
   thing." drops from the top; then a step toward a long goal, then someone takes the dishwasher
   and gets a thanks. The cards share one grid cell, so nothing below moves. */
.phone { position: relative; overflow: hidden; }
.phone .drop {
  position: absolute; top: 14px; left: 50%; z-index: 2; margin: 0; white-space: nowrap;
  transform: translate(-50%, -170%); background: rgba(253, 249, 244, 0.96); color: #2A1F26;
  border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 700;
  box-shadow: 0 12px 28px -12px rgba(42, 31, 38, 0.5); transition: transform 0.5s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.phone .drop .tick { color: #5A6E4C; }
.phone.drop-on .drop { transform: translate(-50%, 0); }
/* A finish gets the app's burst (ConfettiBurst in ios/Dibs/Views/Motion.swift): a few bits of the
   house colours, out from the toast and gone in under a second. */
.drop .bit {
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--h); border-radius: var(--br);
  background: var(--c); transform: translate(calc(-50% + var(--x0)), calc(-50% + var(--y0))); pointer-events: none;
  animation: burst 0.75s ease-out forwards;
}
@keyframes burst {
  from { transform: translate(calc(-50% + var(--x0)), calc(-50% + var(--y0))); }
  45% { opacity: 1; }
  to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); opacity: 0; }
}
.notifs { display: grid; }
.notif:not([data-card="trash"]) { display: none; }
.js .notifs > .notif { grid-area: 1 / 1; align-self: start; }
.js .notif:not([data-card="trash"]) { display: block; }
.js .phone[data-phone] .notif { opacity: 0; transform: translateY(-18px) scale(0.98); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 1.1, 0.3, 1); }
.js .phone[data-phone] .notif.show { opacity: 1; transform: none; }
.js .phone[data-phone] .notif.leave { opacity: 0; transform: translateY(-10px) scale(0.96); transition: opacity 0.35s ease, transform 0.35s ease; }
.phone .btn { transition: background-color 0.2s ease; }
.phone .btn.press { background: rgba(90, 110, 76, 0.18); }
.phone .lock-widget .dot { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(224, 112, 63, 0.32); }
  50% { box-shadow: 0 0 0 4px rgba(224, 112, 63, 0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .js .panels > .moment { transition: none; transform: none; }
  .moments.playing .picker button[aria-selected="true"] i::after { animation: none; }
  .phone .lock-widget .dot { animation: none; }
  .js .phone[data-phone] .notif[data-card="trash"] { opacity: 1; transform: none; transition: none; }
  .js .notif:not([data-card="trash"]) { display: none; }
}

/* Pricing on the home page: one quiet line, the full comparison a click away. */
.price-note { margin-top: 64px; max-width: 760px; text-align: center; }
.price-note h2 { font-size: 22px; }
.price-note p { color: var(--ink2); font-size: 17px; margin: 8px auto 0; }
.price-note a { white-space: nowrap; }

/* ── Colour with meaning, and the dot ───────────────────────────────────
   The ember dot is the logo's, and in the app it's "your one next thing". Each family keeps its
   one soft tint from the app (chores sage, goals apricot, Moments lavender): colour that means
   something, never a rainbow. */

/* The headline ends on the dot. Screen readers still read a full stop. */
.stop { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.05em; border-radius: 50%; background: var(--ember); color: transparent; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .stop { animation: dot-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 0.5s both; }
}
@keyframes dot-in { from { transform: scale(0); } to { transform: scale(1); } }

/* The calls to "Get Jarmer" carry the dot too. */
.button[href$="#get"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); flex: none; }
.button[href$="#get"] { display: inline-flex; align-items: center; }

/* A warm glow behind the hero's lock screen: dawn in light, dusk in dark. The home page clips it
   at the sides (only there: a guide's head is wider than its column on purpose). */
main.home { overflow-x: clip; }
.home-hero { position: relative; isolation: isolate; }
.home-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -12% -18% -12% 38%;
  background:
    radial-gradient(closest-side at 62% 40%, rgba(224, 112, 63, 0.42), transparent 74%),
    radial-gradient(closest-side at 80% 72%, rgba(154, 63, 87, 0.26), transparent 74%),
    radial-gradient(closest-side at 44% 80%, rgba(227, 154, 99, 0.36), transparent 74%);
}
@media (max-width: 860px) { .home-hero::before { inset: 38% -30% -6% -30%; } }

/* The three families on the home page. */
#chores { --fam: var(--sage); --fam-ink: var(--sage-ink); }
#goals { --fam: var(--apricot); --fam-ink: var(--apricot-ink); }
#moments { --fam: var(--lavender); --fam-ink: var(--lavender-ink); }
.feature[id] .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--fam-ink, var(--ink2)); }
.feature[id] .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.feature[id] .stack { background: var(--fam, var(--surface)); }
.feature[id] .stack .mini { background: var(--surface); border-color: transparent; }
.feature[id] .more { color: var(--fam-ink, inherit); }

/* "What's going on right now?": the bar under the chosen moment ripens while it waits, sage to
   ochre to ember, the way a chore does in the app. */
.picker button[aria-selected="true"] i::after { background: var(--ember); }
.moments.playing .picker button[aria-selected="true"] i::after {
  animation: fill-bar var(--dwell, 7s) linear forwards, ripen var(--dwell, 7s) linear forwards;
}
@keyframes ripen { 0% { background: var(--fresh); } 55% { background: var(--getting-due); } 100% { background: var(--ember); } }

/* How it works: round markers in a soft sky tint. */
.how-steps li::before { border-radius: 50%; background: var(--sky); color: var(--sky-ink); }

/* The pricing line sits in a warm honey band, still quiet. */
.price-note { background: var(--honey); border-radius: 28px; padding: 28px 32px; }
.price-note h2 { color: var(--honey-ink); }
.price-note p { color: color-mix(in srgb, var(--honey-ink) 55%, var(--ink)); }
.price-note a { color: var(--ink); }

/* The closing invitation, on the lock screen's sky. */
.get {
  position: relative; overflow: hidden; isolation: isolate; color: #FDF9F4;
  background: linear-gradient(160deg, #2B1D2E 0%, #4A2A45 38%, #8C3F55 72%, #C8664E 100%);
}
.get::before {
  content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -90px; top: -110px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224, 112, 63, 0.55), transparent 70%);
}
.get .eyebrow, .get p { color: rgba(253, 249, 244, 0.86); }
.get .fine a { color: #FDF9F4; }
.get .button { background: #FDF9F4; color: #2A1F26; }

@media (prefers-reduced-motion: reduce) {
  .moments.playing .picker button[aria-selected="true"] i::after { animation: none; }
}