:root {
  --paper-outer: #e3dccd;
  --paper-ground: #f7f4ee;
  --paper-card: #ffffff;
  --ink: #26241f;
  --ink-subtle: #6d675a;
  --ink-muted: #9b937f;
  --ink-faint: #c4bca8;
  --crossed-text: #a49b86;
  --accent: #5f7a68;
  --hairline: rgba(38,36,31,.08);
  --hairline-card: rgba(38,36,31,.07);
  --hairline-accent: rgba(95,122,104,.12);
  --chip-wash: rgba(38,36,31,.05);
  --blueprint-chrome: #42566b;
  --blueprint-text: #e8edf2;
  --blueprint-text-muted: rgba(232,237,242,.6);
  --blueprint-ground: #eef2f4;
  --blueprint-grid: rgba(66,86,107,.03);
  --blueprint-meta: #6e7f90;
  --night-accent: #b8d2c0;
  --radius-card: 14px;
  --radius-pill: 99px;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  /* Page-only additions, as in direction C: the brief's muted-on-chrome value reads 3.4:1, so running
     text on blueprint uses the stronger step. --accent-ink is sage darkened for small text on paper
     (plain --accent on --paper-ground is about 4.3:1). --bp-meta-ink is the container label on the grid. */
  --blueprint-text-soft: rgba(232,237,242,.84);
  --chrome-grid: rgba(232,237,242,.05);
  --chrome-line: rgba(232,237,242,.14);
  --accent-ink: #4b6354;
  --bp-meta-ink: #566575;
  --seam: 48px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper-ground);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.on-chrome :focus-visible, .nav.on-bp :focus-visible { outline-color: var(--night-accent); }

.wrap { width: min(1080px, 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }
@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (min-width: 900px) { :root { --seam: 56px; } }
.aside { font: italic 400 15px/1.5 var(--sans); color: var(--ink-subtle); }
.on-chrome .aside { color: var(--blueprint-text-soft); }
/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--sans);
  padding: 15px 28px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--paper-card);
  text-decoration: none; border: 0; cursor: pointer;
}
.btn:hover { filter: brightness(1.06); }
.btn-night { background: var(--night-accent); color: var(--ink); }
.btn-sm { padding: 10px 16px; font-size: 13.5px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid rgba(38,36,31,.22); font-weight: 500; padding: 13px 22px; }
.btn-ghost:hover { background: var(--chip-wash); filter: none; }
.btn[disabled] { cursor: not-allowed; background: transparent; color: var(--blueprint-text-soft); border: 1px dashed rgba(232,237,242,.45); filter: none; }

/* ---------- wordmark: one SVG, geometry of undue-logo-light.svg, stroke over "due" only ---------- */
.wm { display: inline-block; text-decoration: none; line-height: 0; --wm-ink: var(--ink); --wm-stroke: var(--accent); }
.wm-svg { height: 26px; width: auto; overflow: visible; }
.wm-svg text { font: 600 100px/1 var(--serif); fill: var(--wm-ink); }
.wm-svg path { stroke: var(--wm-stroke); stroke-width: 11px; stroke-linecap: round; fill: none; }
.nav.on-bp .wm { --wm-ink: var(--paper-ground); --wm-stroke: var(--night-accent); }
@media (min-width: 700px) { .wm-nav .wm-svg { height: 30px; } }
/* ---------- nav: paper by default, blueprint while the blueprint section is under it ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,244,238,.96);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.nav.on-bp { background: var(--blueprint-chrome); border-bottom-color: var(--chrome-line); color: var(--blueprint-text); }
.nav-in { width: min(1080px, 100% - 2 * var(--gutter)); margin-inline: auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-links { display: flex; align-items: center; gap: 12px; }
.nav-links a:not(.btn) { font: 500 13.5px/1 var(--sans); text-decoration: none; padding: 10px 6px; }
.nav-links a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.nav.on-bp .btn { background: var(--night-accent); color: var(--ink); }
@media (min-width: 700px) {
  .nav-links { gap: 22px; }
  .nav-links a:not(.btn) { font-size: 15px; }
}
/* The nav must stay on one line at phone width, so Pricing drops out and nothing wraps. */
.nav-links a { white-space: nowrap; }
@media (max-width: 479px) { .nav-links a.nl-pricing { display: none; } }
@media (max-width: 639px) { .nav-links a.nl-way { display: none; } }
footer { background: var(--paper-outer); border-top: 1px solid rgba(38,36,31,.1); padding: 36px 0 44px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot nav a { font: 500 14.5px/1 var(--sans); text-decoration: none; padding: 8px 0; color: var(--ink); }
.foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot small { font: 400 13.5px/1.4 var(--sans); color: var(--ink-subtle); }

/* store button not yet live (links.json value empty): same shape as .btn-ghost, muted, no hover */

/* ---------- article pages: the-undue-way, privacy, terms, support, 404 ---------- */
.article { max-width: 40em; margin: 0 auto; padding: 56px var(--gutter) 96px; font: 400 20px/1.65 var(--serif); }
@media (min-width: 900px) { .article { padding-top: 88px; } }
.article h1 { font: italic 600 clamp(42px, 7.6vw, 68px)/1.08 var(--serif); letter-spacing: -.016em; text-wrap: balance; margin-bottom: 18px; }
.article h2 { font: 500 clamp(24px, 3.6vw, 30px)/1.25 var(--serif); margin: 2.2em 0 .6em; text-wrap: balance; }
.article p, .article ul, .article ol { margin: 0 0 1.1em; }
.article ul { list-style: disc; padding-left: 1.4em; }
.article ol { list-style: decimal; padding-left: 1.6em; }
.article li { margin-bottom: .45em; padding-left: .2em; }
.article a { color: var(--accent-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.article a.btn { color: var(--paper-card); text-decoration: none; }
.article .subtitle { font: italic 400 22px/1.4 var(--serif); color: var(--ink-subtle); margin-bottom: 1.6em; }
.article .sig { font-style: italic; }
.article .in-undue { font: italic 400 16.5px/1.55 var(--sans); color: var(--ink-subtle); border-left: 2px solid var(--accent); padding: 2px 0 2px 18px; margin: 1.4em 0; }
.article .note { font: 400 17px/1.55 var(--sans); background: rgba(95,122,104,.13); border-radius: 12px; padding: 16px 20px; margin: 1.6em 0; }
.article .btn { margin: .6em 0 0; }
.article details { border-bottom: 1px solid var(--hairline); }
.article .faq-list { border-top: 1px solid var(--hairline); margin-top: 1.4em; }
.article summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font: 500 20px/1.3 var(--serif); }
.article summary::-webkit-details-marker { display: none; }
.article summary::after { content: "+"; flex: none; font: 300 28px/1 var(--sans); color: var(--accent-ink); width: 28px; text-align: center; }
.article details[open] summary::after { content: "\2212"; }
.article details p { padding: 0 44px 22px 0; margin: 0; font: 400 17px/1.6 var(--sans); }

/* ---------- /the-undue-way: the method page ----------
   Same tokens and section rhythm as the home page (home.css): .label eyebrows, italic serif display
   headings, the deep sage band (#wont there), the tan ground and speech-bubble letter (#why there).
   home.css is not loaded on this page, so the pieces it shares are ported here under .way. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.way section, .way nav.way-index { padding: 72px 0; }
@media (min-width: 900px) { .way section, .way nav.way-index { padding: 112px 0; } }
.way-col { width: min(40em, 100% - 2 * var(--gutter)); margin-inline: auto; }
.way .label { font: 600 11.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 16px; }
.way h1, .way h2 { text-wrap: balance; }
.way h2 { font: italic 600 clamp(35px, 5vw, 58px)/1.12 var(--serif); letter-spacing: -.012em; margin-bottom: .6em; }
.way p { font: 400 20px/1.65 var(--serif); margin-bottom: 1.1em; text-wrap: pretty; }
.way a { color: var(--accent-ink); text-underline-offset: 3px; }
.way a.btn { color: var(--paper-card); text-decoration: none; }

.way .way-hero { padding-bottom: 24px; }
.way .way-hero { padding-top: 64px; }
@media (min-width: 900px) { .way .way-hero { padding-top: 104px; } }
.way-hero h1 { font: italic 600 clamp(42px, 7vw, 78px)/1.08 var(--serif); letter-spacing: -.018em; margin-bottom: 22px; }
.way .promise { font: italic 400 clamp(20px, 2.6vw, 24px)/1.4 var(--serif); color: var(--ink-subtle); margin: 0; }

/* The founder note: the home page's speech bubble and oversized quotation mark, on the tan ground. */
.way .way-note { background: var(--paper-outer); position: relative; overflow: hidden; padding-bottom: 132px; margin-top: 48px; }
.way-note::before {
  content: "\201C"; position: absolute; z-index: 0; pointer-events: none;
  left: max(-12px, calc(50% - 640px)); top: 0;
  font: 600 clamp(340px, 46vw, 620px)/1 var(--serif); color: rgba(38,36,31,.07);
}
.way-note .wrap { z-index: 1; }
.way-note .letter {
  position: relative; max-width: 640px; margin: 0 auto; background: var(--paper-card); border-radius: 30px;
  padding: 36px 24px 40px; font: 400 clamp(18px, 2.2vw, 20px)/1.65 var(--serif);
  filter: drop-shadow(0 1px 1px rgba(38,36,31,.08)) drop-shadow(0 10px 24px rgba(38,36,31,.07));
}
@media (min-width: 700px) { .way-note .letter { padding: 56px 64px 60px; } }
.way-note .letter::after {
  content: ""; position: absolute; left: 56px; top: calc(100% - 1px); width: 44px; height: 34px;
  background: var(--paper-card); clip-path: polygon(0 0, 100% 0, 12% 100%);
}
@media (min-width: 700px) { .way-note .letter::after { left: 84px; } }
.way-note .letter p { font: inherit; margin: 0; }
.way-note .letter p + p { margin-top: 1.1em; }
.way-note .letter .sig { font-style: italic; margin-top: 1.6em; }

.way .pull { font: italic 400 clamp(28px, 4vw, 40px)/1.2 var(--serif); letter-spacing: -.01em; margin: 1.1em 0; padding-left: 20px; border-left: 3px solid var(--accent); text-wrap: balance; }
.way .pull strong { font-weight: 400; }

/* The question as a band on the deep sage ground. */
.way .way-question { background: #33473b; color: #eef2ec; }
.way-question h2 { color: #f4f6f1; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; }
.way-question p { color: rgba(238,242,236,.86); }
.way-question :focus-visible { outline-color: var(--night-accent); }

.way nav.way-index { padding: 56px 0 8px; }
.way-index ol { counter-reset: h; border-top: 1px solid var(--hairline); }
.way-index li { counter-increment: h; border-bottom: 1px solid var(--hairline); }
.way-index a {
  display: flex; align-items: baseline; gap: 16px; min-height: 48px; padding: 14px 0;
  font: 500 clamp(19px, 2.4vw, 22px)/1.3 var(--serif); color: var(--ink); text-decoration: none;
}
.way-index a::before { content: counter(h); flex: none; width: 1.4em; font: italic 400 1.3em/1 var(--serif); color: var(--accent-ink); }
.way-index a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }

.way .habit { padding: 64px 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 900px) { .way .habit { padding: 88px 0; } }
.habit-in { width: min(46em, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: 8px; }
@media (min-width: 760px) { .habit-in { grid-template-columns: 104px minmax(0, 40em); gap: 24px; } }
.way .habit .num { font: italic 400 clamp(64px, 10vw, 104px)/1 var(--serif); color: var(--accent); margin: 0; }
.habit h2 { scroll-margin-top: 88px; font-size: clamp(28px, 3.8vw, 40px); }
.habit-body h2 { margin-top: 0; }
.way .step-lead { font: 600 17px/1.4 var(--sans); margin: 1.8em 0 .8em; }
.way ol.steps { counter-reset: s; margin: 0 0 1.4em; }
.way ol.steps li { counter-increment: s; position: relative; padding: 0 0 0 44px; margin: 0 0 .9em; font: 400 19px/1.55 var(--serif); }
.way ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: .1em; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 600 14px/1 var(--sans); color: var(--accent-ink); background: rgba(95,122,104,.13);
}
.way .in-undue { background: var(--paper-card); border: 1px solid var(--hairline-card); border-radius: var(--radius-card); padding: 18px 22px 6px; margin-top: 1.8em; }
.way .in-undue .label { color: var(--accent-ink); margin-bottom: 6px; }
.way .in-undue p:not(.label) { font: 400 16.5px/1.55 var(--sans); color: var(--ink); }

.way .way-close { background: var(--paper-outer); }
.way-close .btn { margin-top: .4em; }
.way-close .aside { margin-top: 14px; font: italic 400 15px/1.5 var(--sans); }

/* "Coming soon" stand-ins for links whose target does not exist yet (see dataLinks in build.mjs).
   A filled button loses its fill, so it cannot be mistaken for something to press. */
.is-soon { cursor: default; }
.btn.is-soon, .btn.is-soon:hover { background: transparent; color: var(--ink-subtle); border: 1px solid rgba(38,36,31,.18); box-shadow: none; filter: none; }
.is-soon small { font: italic 400 12px/1 var(--sans); margin-left: 8px; color: inherit; opacity: .8; }
.nav-links span { white-space: nowrap; }
.nav-links span.is-soon:not(.btn) { font: 500 13.5px/1 var(--sans); padding: 10px 6px; color: var(--ink-subtle); }
@media (max-width: 639px) { .nav-links span.is-soon:not(.btn) { display: none; } }