:root {
  --paper: #ffffff;
  --mist: #f3f3f1;
  --mist-2: #fafaf8;
  --ink: #1d1f20;
  --ink-2: #3b3e41;
  --muted: #6c6f78;
  --line: #e3e3df;
  --pine: #2d5447;
  --pine-deep: #183a2f;
  --pine-night: #102a22;
  --pine-ink: #ecf3ef;
  --pine-muted: #a6c0b5;
  --pine-line: rgba(236, 243, 239, 0.14);
  --pine-wash: #e6eee9;
  --ember: #e8664a;
  --ember-wash: #f8ebe5;
  --ember-ink: #6e2b1b;

  --font-sans: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  --h1: 80px;
  --h2: 44px;
  --h3: 18px;
  --lead: 16px;
  --body: 15px;
  --small: 13px;
  --addr: 28px;
  --code: 36px;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;

  --radius-panel: 16px;
  --radius-card: 10px;
  --radius-control: 999px;
  --pill: 999px;

  --wrap: 1360px;
  --gutter: 40px;
  --header-h: 60px;
  --control-h: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s3)); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--body)/1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
body.is-locked, body.reader-open, body.sheet-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1 {
  font-size: clamp(40px, 6.2vw, var(--h1));
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-synthesis: none;
}
.title-2 { font-size: clamp(30px, 3.6vw, var(--h2)); font-weight: 400; letter-spacing: -0.02em; line-height: 1.18; }
.title-3 { font-size: var(--h3); font-weight: 500; line-height: 1.4; }
.lead { font-size: var(--lead); line-height: 1.6; color: var(--ink-2); }
.eyebrow { margin: 0 0 var(--s3); font-size: var(--small); color: var(--muted); letter-spacing: 0.04em; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  height: var(--control-h); padding: 0 var(--s3);
  border-radius: var(--pill); font-size: var(--body); font-weight: 400; line-height: 1;
  white-space: nowrap; transition: background-color .2s, color .2s;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--pine-deep); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--pine-wash); color: var(--ink); }
.btn-sm { height: 32px; padding: 0 var(--s2); font-size: var(--small); }
.btn-quiet { background: var(--mist); color: var(--ink); }
.btn-quiet:hover { background: var(--line); color: var(--ink); }
.link-under {
  display: inline-flex; align-items: center; height: var(--control-h);
  font-size: var(--body); color: inherit;
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.link-under:hover { text-decoration-color: var(--pine); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--body); }
.link-arrow svg { width: 14px; height: 14px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }
.text-btn { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.text-btn:hover { color: var(--ink); text-decoration-color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.actions.is-center { justify-content: center; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--paper); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; gap: var(--s4); }
.brand { display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink); }
.brand img { width: 28px; height: 28px; }
.brand-name { font-size: var(--h3); font-weight: 600; letter-spacing: -0.01em; }
.site-nav { display: flex; align-items: center; gap: var(--s4); }
.site-nav a { font-size: var(--body); color: var(--ink-2); white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { padding-block: var(--s1); border-radius: var(--pill); background: var(--pine-wash); color: var(--ink); }
[data-site-nav] a { white-space: nowrap; }
.header-end { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.nav-toggle { display: none; width: var(--control-h); height: var(--control-h); align-items: center; justify-content: center; border-radius: var(--pill); }
.nav-toggle span { display: block; width: 18px; height: 1px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
.nav-drawer { position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49; background: var(--paper); padding: var(--s3) var(--gutter) var(--s4); box-shadow: 0 1px 0 var(--line), 0 24px 40px -24px rgba(16, 42, 34, .25); }
.nav-drawer[hidden] { display: none; }
.nav-drawer a { display: block; padding: var(--s2) 0; font-size: var(--h3); border-bottom: 1px solid var(--line); }

/* language */
.lang { position: relative; }
.lang-trigger { display: inline-flex; align-items: center; gap: var(--s1); height: var(--control-h); font-size: var(--body); color: var(--ink-2); }
.lang-trigger:hover { color: var(--ink); }
.chev { flex: none; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-top: 0; transition: transform .2s; }
[aria-expanded="true"] > .chev { transform: translateY(2px) rotate(225deg); margin-top: 0; }
.lang-menu { position: absolute; right: 0; top: calc(100% + var(--s1)); min-width: 168px; padding: var(--s1); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 16px 40px -16px rgba(16, 42, 34, .22); }
.lang-menu[hidden] { display: none; }
.lang-menu a { display: block; padding: var(--s1) var(--s2); border-radius: var(--radius-control); font-size: var(--body); color: var(--ink-2); }
.lang-menu a:hover { background: var(--mist); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--ink); font-weight: 500; }

/* sections */
.section { padding: var(--s6) 0; }
.section-head { max-width: 760px; margin: 0 auto var(--s5); text-align: center; }
.section-head .lead { margin-top: var(--s3); }
.section-head.is-left { margin-left: 0; text-align: left; }

/* hero + stage */
.stage-hero { padding: var(--s5) 0 var(--s5); text-align: center; }
.stage-hero h1 { max-width: 1128px; margin: 0 auto; }
.stage-addr {
  display: block; max-width: 100%; margin: var(--s3) auto 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--addr); line-height: 1.3; letter-spacing: 0; color: var(--ink);
  transition: color .3s;
}
.stage-addr.address-highlight { color: var(--pine); }
.stage-meta { display: flex; justify-content: center; align-items: center; gap: var(--s1); margin-top: var(--s1); font-size: var(--body); color: var(--muted); }
.stage-meta .sep { color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pine); }
.stage-meta[data-low="true"] .live-dot { background: var(--ember); }
.stage-hero .actions { justify-content: center; margin-top: var(--s4); }
.stage-status { margin-top: var(--s2); font-size: var(--small); color: var(--ember-ink); }
.stage-status[hidden] { display: none; }

.media-row { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: var(--s3); }
.media-card { position: relative; overflow: hidden; border-radius: var(--radius-panel); }
.media-pine { padding: var(--s4); background: radial-gradient(120% 90% at 85% 0%, var(--pine) 0%, var(--pine-deep) 62%); }
.media-art { position: absolute; inset: 0; width: 100%; height: 100%; animation: drift 28s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.art-a { fill: var(--pine); opacity: .55; }
.art-b { fill: var(--pine-deep); opacity: .9; }
.art-c { fill: var(--pine-night); }
.art-route { fill: none; stroke: var(--pine-muted); stroke-width: 1.5; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .5; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.05); } }

.media-story { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s4); background: var(--ember-wash); color: var(--ink); }
.story-art { width: 100%; height: auto; margin-top: var(--s3); }
.story-art .s-line { fill: none; stroke: var(--pine); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.story-art .s-dash { fill: none; stroke: var(--pine); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.story-art .s-paper { fill: var(--paper); }
.story-art .s-stamp { fill: var(--ember); }
.media-story .eyebrow { color: var(--ember-ink); }
.media-story p:not(.eyebrow) { margin-top: var(--s1); color: var(--ink-2); }
.media-story .link-under { margin-top: var(--s2); }

/* mail window */
.mailwin {
  position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 640px;
  background: var(--paper); color: var(--ink); border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 32px 64px -28px rgba(8, 28, 22, .55);
}
.mail-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.list-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--s2) 0 var(--s3); border-bottom: 1px solid var(--line); }
.list-title { font-size: var(--body); font-weight: 500; }
.list-title span { margin-left: var(--s1); font-weight: 400; color: var(--muted); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--pill); color: var(--ink-2); }
.icon-btn:hover { background: var(--mist); color: var(--ink); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.is-spinning svg { animation: spin .8s linear; }
@keyframes spin { to { transform: rotate(360deg); } }
.list-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.mail-row {
  flex: none; align-self: stretch; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s2);
  height: 72px; padding: 0 var(--s3); text-align: left; border-bottom: 1px solid var(--line); background: var(--paper);
}
.mail-row:hover { background: var(--mist-2); }
.mail-row.is-active { background: var(--mist); box-shadow: inset 2px 0 0 var(--ink); }
.mail-row-main { min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.mail-row-from { font-size: var(--body); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.is-unread .mail-row-from { font-weight: 500; }
.mail-row-subject { font-size: var(--small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); font-size: var(--small); color: var(--muted); }
.mail-row .dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.mail-row.is-unread .dot { background: var(--ember); }
.badge { flex: none; display: inline-flex; width: 32px; height: 32px; border-radius: var(--radius-card); overflow: hidden; }
.badge svg { width: 100%; height: 100%; }
.badge-lg { width: 32px; height: 32px; }
.badge-letter { align-items: center; justify-content: center; background: var(--pine-wash); color: var(--pine-deep); font-weight: 500; }
.mail-empty, [data-inbox-empty], [data-reader-empty] {
  margin: auto;
  width: min(420px, calc(100% - 32px));
  height: auto;
  min-height: 0;
  padding: var(--s2);
  border-radius: var(--radius-card);
  background: var(--mist);
  color: var(--muted);
  text-align: center;
  font-size: var(--small);
}
.mail-empty-title { color: var(--ink); font-size: var(--body); font-weight: 500; margin-bottom: 4px; }

.reader { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--paper); color: var(--ink); }
.reader-head { padding: var(--s3) var(--s4) var(--s3); border-bottom: 1px solid var(--line); background: var(--paper); }
.reader-bar { display: flex; align-items: center; gap: var(--s2); min-height: 32px; }
.reader-bar [data-delete-mail] { margin-left: auto; }
.reader-back { display: none; align-items: center; gap: var(--s1); font-size: var(--body); color: var(--ink); }
.reader:not(.mobile-reader) [data-reader-close] { display: none; }
.reader.mobile-reader [data-reader-close] { display: inline-flex; }
.reader-back .chev { transform: rotate(135deg); margin-top: 0; }
.demo-pill {
  display: block;
  width: fit-content;
  align-items: center;
  height: 24px;
  margin-bottom: 24px;
  padding: 0 10px;
  border-radius: var(--pill);
  background: var(--pine-wash);
  color: var(--pine-deep);
  font-size: var(--small);
}
.reader-bar .demo-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}
.reader-subject .demo-pill {
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
}
.reader-head > .demo-pill {
  display: block !important;
  width: fit-content;
  margin-bottom: 24px !important;
}
.reader-bar + .reader-subject {
  margin-top: var(--s3);
}
.mailwin.is-real .demo-pill { display: none !important; }
.reader-subject { margin-top: var(--s2); font-size: var(--lead); font-weight: 500; line-height: 1.45; color: var(--ink); }
.reader-from { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.reader-from strong { display: block; font-size: var(--body); font-weight: 500; }
.reader-from .addr-line { display: block; font-size: var(--small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-from time { font-size: var(--small); color: var(--muted); }
.reader-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3) var(--s4); }
.reader-body iframe { width: 100%; border: 0; min-height: 320px; }
.reader-foot { display: flex; align-items: center; gap: var(--s2); height: 64px; padding: 0 var(--s4); border-top: 1px solid var(--line); }
.reader-foot[hidden] { display: none; }
.reader-foot .muted { font-size: var(--small); margin-left: auto; }

.mail-doc { max-width: 520px; color: var(--ink-2); }
.mail-doc p + p { margin-top: var(--s2); }
.mail-brand { display: flex; align-items: center; gap: var(--s1); color: var(--ink); font-weight: 500; }
.mail-brand svg { width: 20px; height: 20px; }
.mail-label { font-size: var(--small); color: var(--muted); }
.mail-doc .mail-label { margin-top: var(--s3); }
.mail-code { display: inline-block; margin-top: var(--s1) !important; padding: var(--s2) var(--s3); background: var(--mist); border-radius: var(--radius-card); font-family: var(--font-mono); font-size: var(--code); line-height: 1.1; letter-spacing: .14em; color: var(--ink); }
.mail-amount { font-size: var(--h2); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin-top: var(--s1) !important; }
.mail-table { width: 100%; margin-top: var(--s3); border-collapse: collapse; font-size: var(--small); }
.mail-table th, .mail-table td { padding: 10px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.mail-table th { width: 30%; color: var(--muted); }
.mail-table td { color: var(--ink); }
.mail-disclaimer { margin-top: var(--s3) !important; padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--small); color: var(--muted); }

/* three words */
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.tri-item .line-icon { width: 88px; height: 88px; color: var(--ink); margin-bottom: var(--s3); }
.line-icon * { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.tri-item p { margin-top: var(--s1); color: var(--muted); max-width: 400px; }
.tri-item .link-arrow { margin-top: var(--s2); }

/* mist panel timeline */
.panel-mist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s5); padding: var(--s5); background: var(--mist); border-radius: var(--radius-panel); }
.panel-mist .lead { margin-top: var(--s2); }
.events { display: flex; flex-direction: column; gap: var(--s1); }
.event { display: grid; grid-template-columns: 64px 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); min-height: 72px; padding: var(--s2) var(--s3); background: var(--paper); border-radius: var(--radius-card); }
.event-time { font-family: var(--font-mono); font-size: var(--small); color: var(--muted); }
.event-main { min-width: 0; line-height: 1.5; }
.event-main strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-main span { display: block; font-size: var(--small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pill); font-size: var(--small); background: var(--mist); color: var(--ink-2); white-space: nowrap; }
.status-pill.is-new { background: var(--ember-wash); color: var(--ember-ink); }
.status-pill.is-ok, .status-pill.is-active { background: var(--pine-wash); color: var(--pine-deep); }
.status-pill.is-paused { background: var(--line); color: var(--ink-2); }
.event-mark { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-card); background: var(--pine-wash); color: var(--pine-deep); }
.event-mark svg { width: 18px; height: 18px; }

/* pine band */
.band-pine { position: relative; overflow: hidden; padding: var(--s6) 0; background: var(--pine-deep); color: var(--pine-ink); }
.band-pine .media-art { animation-duration: 36s; }
.band-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s5); align-items: center; }
.band-pine .eyebrow { color: var(--pine-muted); }
.band-pine .lead { margin-top: var(--s2); color: var(--pine-muted); }
.band-pine .actions { margin-top: var(--s4); }
.band-pine .link-under { color: var(--pine-ink); }
.alias-panel { background: var(--pine-night); color: var(--pine-ink); border: 1px solid var(--pine-line); border-radius: var(--radius-card); overflow: hidden; }
.alias-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--s3); border-bottom: 1px solid var(--pine-line); font-weight: 500; }
.alias-head span { font-size: var(--small); font-weight: 400; color: var(--pine-muted); }
.alias-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; min-height: 72px; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--pine-line); }
.alias-row:last-child { border-bottom: 0; }
.alias-row .mono { display: block; color: var(--pine-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alias-row small { display: block; font-size: var(--small); color: var(--pine-muted); }
.alias-row .status-pill { background: rgba(236, 243, 239, .1); color: var(--pine-ink); }
.alias-row .status-pill.is-paused { background: transparent; color: var(--pine-muted); box-shadow: inset 0 0 0 1px var(--pine-line); }

/* scenarios */
.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.use-card { padding: var(--s4) var(--s3); background: var(--mist); border-radius: var(--radius-card); }
.use-card .use-no { font-family: var(--font-mono); font-size: var(--small); color: var(--muted); }
.use-card h3 { margin-top: var(--s5); }
.use-card p { margin-top: var(--s1); color: var(--muted); }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; gap: var(--s5); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; font-size: var(--lead); font-weight: 500; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .chev { width: 7px; height: 7px; margin-right: var(--s1); }
.faq-list details[open] summary .chev { transform: translateY(2px) rotate(225deg); margin-top: 0; }
.faq-list details p { padding: 0 var(--s5) var(--s3) 0; color: var(--ink-2); }

/* closing */
.closing { padding: var(--s6) 0 var(--s7); text-align: center; }
.closing .lead { max-width: 560px; margin: var(--s2) auto 0; }
.closing .actions { margin-top: var(--s4); }

/* footer */
.site-footer { background: var(--mist); color: var(--ink); padding: var(--s5) 0 var(--s4); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.footer-brand p { margin-top: var(--s2); max-width: 380px; color: var(--muted); }
.support-card { margin-top: var(--s3); max-width: 380px; padding: var(--s3); background: var(--paper); border-radius: var(--radius-card); }
.support-card p { margin: 0 0 var(--s2); color: var(--ink-2); }
.footer-col h2 { font-size: var(--small); font-weight: 400; color: var(--muted); margin-bottom: var(--s2); }
.footer-col li + li { margin-top: var(--s1); }
.footer-col a:hover { color: var(--pine); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--small); color: var(--muted); }
.footer-bottom nav { display: flex; gap: var(--s3); }
.footer-bottom a:hover { color: var(--ink); }

/* toast */
.toast { position: fixed; left: 50%; bottom: var(--s4); z-index: 90; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 10px var(--s3); border-radius: var(--pill); background: var(--ink); color: var(--paper); font-size: var(--body); transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--ember-ink); color: var(--paper); }

/* reveal */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .media-art { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1100px) {
  .media-row { grid-template-columns: minmax(0, 1fr); }
  .panel-mist, .band-inner, .faq { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  :root { --gutter: 20px; --addr: 22px; --code: 30px; }
  .site-nav, .header-end .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-end { gap: var(--s1); }
  .tri { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .section { padding: var(--s5) 0; }
  .band-pine { padding: var(--s5) 0; }
  .panel-mist { padding: var(--s4) var(--s3); }
}
@media (max-width: 760px) {
  .media-pine { padding: var(--s2); }
  .media-story { padding: var(--s3); }
  .mailwin { grid-template-columns: minmax(0, 1fr); height: auto; }
  .mail-list { border-right: 0; }
  .list-body { overflow: visible; }
  .reader { display: none; }
  .reader.is-open { display: flex; position: fixed; inset: 0; height: 100dvh; padding-top: var(--header-h); z-index: 90; overflow-y: auto; }
  .reader.is-open .reader-head { position: sticky; top: 0; z-index: 1; padding: var(--s2) var(--s3); }
  .reader.is-open .reader-body { flex: none; overflow: visible; padding: var(--s3); }
  .reader.is-open .reader-foot { padding: 0 var(--s3); }
  .reader-back { display: inline-flex; }
  .media-card, .media-row, .mail-stage { transform: none; animation: none; }
  .event { grid-template-columns: 32px minmax(0, 1fr); }
  .event-time { grid-column: 2; order: -1; }
  .event .status-pill { grid-column: 2; justify-self: start; }
  .uses { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-list details p { padding-right: 0; }
}


/* Shared component system */
[hidden] { display: none !important; }
input, textarea, button { font-family: var(--font-sans); }
input, textarea { min-width: 0; }
button:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
a, button, input, textarea { -webkit-tap-highlight-color: transparent; }
h1 em { font-style: normal; font-weight: inherit; }
section[id], [data-mail-stage] { scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.section-intro { margin-top: var(--s3); color: var(--muted); }
.stage-hero .eyebrow + h1,
.page-hero .eyebrow + h1,
.auth-story .eyebrow + h1,
section .eyebrow + h2 { margin-top: var(--s3); }
.stack { display: grid; gap: var(--s3); }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
.surface { padding: var(--s4); background: var(--mist); color: var(--ink); border-radius: var(--radius-panel); }
.surface-white { background: var(--paper); color: var(--ink); }
.surface-pine { background: var(--pine-deep); color: var(--pine-ink); }
.surface-pine .muted, .surface-pine .section-intro { color: var(--pine-muted); }
.surface-pine .btn-light { background: var(--paper); color: var(--ink); }
.surface-pine .btn-light:hover { background: var(--pine-wash); color: var(--pine-deep); }
.btn-outline { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--mist); color: var(--ink); }
.btn-danger { background: var(--ember-wash); color: var(--ember-ink); }
.btn-danger:hover { background: var(--ember-ink); color: var(--paper); }
.actions .btn { max-width: 100%; }
.site-nav a { padding-inline: var(--s1); }
.header-inner { gap: var(--s3); }
.site-nav { gap: var(--s2); }
.header-end { gap: var(--s2); }
.auth-entry { font-size: var(--body); line-height: 1.7; }
.x-short { display: none; }
.lang-trigger { position: relative; padding: 0 20px 0 0; gap: 0; white-space: nowrap; }
.lang-trigger > .chev {
  position: absolute;
  right: 2px;
  top: 50%;
  margin: 0;
  transform: translateY(-65%) rotate(45deg);
}
.lang-trigger[aria-expanded="true"] > .chev { margin: 0; transform: translateY(-20%) rotate(225deg); }
.nav-drawer { inset: auto; top: var(--header-h); left: var(--gutter); right: auto; width: min(360px, calc(100% - 2 * var(--gutter))); z-index: 80; border-radius: 0 0 var(--radius-panel) var(--radius-panel); text-align: left; }
.nav-drawer a { text-align: left; }
.stage-hero .stage-intro { margin: var(--s3) auto 0; max-width: 680px; color: var(--muted); }
.stage-hero .actions { row-gap: var(--s2); }
.stage-hero .actions a { max-width: 100%; }
.mail-row-meta { position: relative; flex-direction: row; align-items: center; padding-left: 10px; }
.mail-row-meta .dot { position: absolute; left: 0; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); }
.list-body:has(> .mail-empty), .reader-body:has(> .mail-empty) { display: grid; place-items: center; }
.reader.is-empty .reader-head, .reader.is-empty .reader-foot { display: none; }
.reader-letterhead { min-width: 0; }
.reader-body pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--body)/1.7 var(--font-mono); }
.reader-body iframe { display: block; background: var(--paper); color: var(--ink); }
.reader-head .btn { align-self: center; flex: none; }
.reader-foot { flex: none; }
.reader-from time { white-space: nowrap; }
.media-story .link-under { margin-top: var(--s4); }
.panel-mist .lead, .band-pine .lead, .closing .lead { margin-top: var(--s3); }
.use-card h3 { margin-top: var(--s4); }
.toast {
  display: block;
  width: max-content;
  max-width: min(430px, calc(100% - 32px));
  text-align: center;
  overflow-wrap: anywhere;
  visibility: hidden;
}
.toast.show, .toast.is-on { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.toast:not(.show):not(.is-on) { visibility: hidden; }
.footer-grid > *, .footer-col, .footer-brand { min-width: 0; }
.footer-col a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.footer-brand p { max-width: none; }
.footer-brand .support-card { max-width: none; }
.support-card .btn { max-width: 100%; height: auto; min-height: 32px; padding-block: var(--s1); line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }

/* Fields and custom menus */
.field { display: grid; gap: var(--s1); }
.field-label, .field > label { font-size: var(--small); font-weight: 500; color: var(--ink); }
.field-note { font-size: var(--small); color: var(--muted); }
.input, input[type="email"], input[type="text"], input[type="search"], input[type="number"], textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--small);
  line-height: 1.5;
  box-shadow: none;
}
textarea { min-height: 128px; border-radius: var(--radius-card); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; font-size: var(--small); }
input:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: none; }
input[aria-invalid="true"] { border-color: var(--ember-ink); }
.code-input { max-width: 240px; font-family: var(--font-mono); letter-spacing: .18em; }
.form-error { color: var(--ember-ink); font-size: var(--small); }
.form-notice { padding: var(--s2); background: var(--pine-wash); color: var(--pine-deep); border-radius: var(--radius-card); font-size: var(--small); }
.dropdown { position: relative; display: inline-block; max-width: 100%; }
.filter-trigger, .archive-filter, [data-filter-trigger] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: auto;
  min-height: 40px;
  margin-block: var(--s2);
  padding: var(--s1) 36px var(--s1) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--small);
}
.filter-trigger > .chev, [data-filter-trigger] > .chev {
  position: absolute;
  right: var(--s2);
  top: 50%;
  flex: none;
  margin: 0;
  transform: translateY(calc(-50% - 1px)) rotate(45deg);
}
[data-filter-trigger][aria-expanded="true"] > .chev {
  transform: translateY(calc(-50% + 2px)) rotate(225deg);
}
[data-filter-trigger]:not(:has(.chev))::after {
  content: "";
  position: absolute;
  right: var(--s2);
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(calc(-50% - 1px)) rotate(45deg);
}
[data-filter-trigger][aria-expanded="true"]:not(:has(.chev))::after {
  transform: translateY(calc(-50% + 2px)) rotate(225deg);
}
.filter-menu {
  position: absolute;
  left: 0;
  top: calc(100% + var(--s1));
  z-index: 20;
  min-width: 184px;
  max-width: min(320px, calc(100vw - 40px));
  padding: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
}
.filter-menu [role="option"], .filter-menu [data-filter-value] {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font-size: var(--small);
}
.filter-menu [aria-selected="true"], .filter-menu button:hover { background: var(--pine-wash); color: var(--pine-deep); }

/* General cards and comparison tables */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.content-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); min-width: 0; }
.content-card h3 { font-size: var(--h3); font-weight: 500; }
.content-card p { color: var(--muted); font-weight: 400; }
.content-card .actions { margin-top: var(--s3); }
.content-card .line-icon { width: 40px; height: 40px; margin-bottom: var(--s2); }
.table-scroll { width: 100%; margin: var(--s3) 0 var(--s4); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--small); }
.data-table th { font-weight: 500; color: var(--muted); }
.data-table th, .data-table td { padding: var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead { background: var(--mist); color: var(--ink); }
.empty-state { width: min(420px, 100%); height: auto; min-height: 0; padding: var(--s3); border-radius: var(--radius-card); background: var(--mist); color: var(--muted); }
.empty-state h3 { margin-bottom: var(--s1); font-size: var(--h3); font-weight: 500; color: var(--ink); }
.empty-state p { font-size: var(--small); }
.planner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); }
.planner fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.planner label { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.range-row { display: flex; align-items: center; gap: var(--s2); }
.range-row input { min-width: 0; flex: 1; accent-color: var(--pine); }
.range-row output { flex: none; font: 400 var(--small)/1.5 var(--font-mono); }
.planner-verdict { margin-top: var(--s3); }
.glossary-list { display: grid; gap: var(--s2); }
.glossary-list details { padding: var(--s2) var(--s3); border-radius: var(--radius-card); background: var(--mist); color: var(--ink); }
.glossary-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); list-style: none; cursor: pointer; font-weight: 500; }
.glossary-list summary::-webkit-details-marker { display: none; }
.glossary-list details[open] p { margin-top: var(--s3); margin-bottom: var(--s1); color: var(--muted); }

/* Access pages */
.page-hero { padding: var(--s5) 0; text-align: center; }
.page-hero h1 { max-width: 1128px; margin-inline: auto; }
.page-hero .eyebrow { margin-bottom: var(--s3); }
.page-hero .section-intro { max-width: 680px; margin-inline: auto; }
.auth-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: center; padding-block: var(--s6); }
.auth-story, .auth-panel { min-width: 0; }
.auth-story h1 { font-size: clamp(40px, 4.5vw, var(--h1)); line-height: 1.25; }
.auth-story .section-intro { max-width: 520px; }
.auth-panel { padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); }
.login-pane { display: grid; gap: var(--s3); }
.login-pane h2, .auth-card h2 { font-size: 18px; font-weight: 500; }
.login-pane .actions { gap: var(--s2); }
.login-pane .form-notice { margin-block: var(--s2); }
.login-pane .btn { height: var(--control-h); }
.login-pane [data-resend-code], .login-pane [data-change-email] { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.login-pane [data-resend-code]:hover, .login-pane [data-change-email]:hover { background: var(--pine-wash); color: var(--pine-deep); }

/* Forwarding workspace */
.desk-root { padding: var(--s4) 0 var(--s6); min-width: 0; }
.desk-mast { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.desk-mast h1 { font-size: var(--h2); line-height: 1.25; }
.session-email { margin-top: var(--s1); color: var(--muted); font-size: var(--small); overflow-wrap: anywhere; }
.desk-root > section + section { margin-top: var(--s5); }
.desk-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.desk-section-head h2 { font-size: var(--h2); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.alias-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: center; }
.alias-input-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--control-h);
  gap: var(--s1);
  padding-right: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
}
.alias-input-wrap:focus-within {
  border-color: var(--ink);
  outline: none;
}
.alias-input-wrap input, [data-alias-prefix] {
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: var(--control-h);
  padding-left: var(--s2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: none;
}
.alias-input-wrap input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}
.alias-suffix { flex: none; font: 400 var(--small)/1.5 var(--font-mono); color: var(--muted); }
.alias-compose button { font-size: var(--small); height: var(--control-h); }
[data-alias-form] { margin-bottom: var(--s3); }
.alias-list { display: grid; gap: var(--s1); }
.desk-alias-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--radius-card); background: var(--mist); color: var(--ink); }
.desk-alias-address { min-width: 0; overflow-wrap: anywhere; font: 400 var(--small)/1.5 var(--font-mono); }
.alias-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.alias-actions .btn { flex: none; font-size: var(--small); }
.alias-quota { font-size: var(--small); color: var(--muted); }
.archive-card { padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); }
.archive-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.archive-toolbar .field { flex: 1; min-width: min(220px, 100%); }
.archive-list { display: grid; gap: var(--s1); border-top: 0; }
.archive-row { display: block; width: 100%; padding: var(--s3); border: 0; border-radius: var(--radius-card); background: var(--paper); color: var(--ink); text-align: left; font-size: var(--body); }
.archive-row:hover { background: var(--pine-wash); color: var(--pine-deep); }
.archive-row-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
.archive-subject { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-sender { display: block; margin-top: var(--s1); font-size: var(--small); color: var(--muted); overflow-wrap: anywhere; }
.archive-row-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s2); font-size: var(--small); color: var(--muted); }
.archive-row-meta time { white-space: nowrap; }
[data-archive-empty] { margin-inline: auto; background: var(--paper); color: var(--muted); }
.archive-detail { min-width: 0; max-width: 100%; margin-top: var(--s3); border-radius: var(--radius-card); background: var(--paper); color: var(--ink); overflow: hidden; }
.archive-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s3); }
.archive-detail-head > div { min-width: 0; }
.archive-detail-head h3 { font-size: var(--h3); font-weight: 500; overflow-wrap: anywhere; }
.archive-detail-head .actions { align-items: center; flex: none; }
.archive-detail-head .btn { align-self: flex-start; height: 32px; }
.archive-detail .status-pill { margin-top: var(--s2); }
.archive-detail-body { min-width: 0; max-width: 100%; padding: var(--s3); overflow: auto; overflow-wrap: anywhere; }
.archive-detail-body iframe { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 360px; border: 0; background: var(--paper); color: var(--ink); }
.archive-detail-body pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--body)/1.7 var(--font-mono); }

/* Authenticator */
.surface-safety { padding: var(--s4); border-radius: var(--radius-panel); background: var(--pine-wash); color: var(--ink); }
.twofa-idle {
  display: grid;
  grid-template-columns: minmax(0, 36rem) auto;
  justify-content: space-between;
  align-items: start;
  column-gap: var(--s4);
  row-gap: var(--s2);
}
.twofa-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.twofa-copy h2 { font-size: var(--h3); font-weight: 500; }
.twofa-copy p { margin-top: var(--s1); color: var(--ink-2); }
.twofa-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  grid-column: 1;
  grid-row: 2;
  width: auto;
  margin: 0;
}
[data-2fa-badge] { margin: 0; background: var(--paper); color: var(--pine-deep); font-size: var(--small); }
[data-twofa-start] {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  flex: none;
  height: var(--control-h);
  white-space: nowrap;
}
.twofa-idle-steps { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); font-size: var(--small); color: var(--ink-2); }
.twofa-step { display: flex; align-items: flex-start; gap: var(--s2); }
.step-number { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--pine-muted); border-radius: 50%; font: 400 var(--small)/1 var(--font-mono); }
.twofa-setup, [data-twofa-setup] { margin-top: var(--s3); margin-bottom: var(--s3); color: var(--ink); }
.setup-grid { display: grid; grid-template-columns: 192px minmax(0, 1fr); align-items: start; gap: var(--s4); }
.twofa-qr, [data-twofa-qr] { display: block; width: 192px; height: 192px; aspect-ratio: 1; object-fit: contain; padding: var(--s1); background: var(--paper); color: var(--ink); border-radius: var(--radius-card); }
.twofa-steps { display: grid; gap: var(--s3); }
.secret-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.secret-value { max-width: 100%; color: var(--ink); font: 400 var(--small)/1.6 var(--font-mono); overflow-wrap: anywhere; }
.secret-row .btn { flex: none; width: auto; }
[data-twofa-confirm] { margin-top: var(--s3); }
.twofa-confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.twofa-confirm-row input { flex: 1; min-width: 144px; max-width: 240px; height: var(--control-h); }
.twofa-confirm-row .btn, .twofa-confirm-row [data-twofa-confirm] { height: var(--control-h); margin-top: 0; align-self: center; background: var(--ink); color: var(--paper); }
.twofa-confirm-row .btn:hover { background: var(--pine-deep); color: var(--paper); }
.twofa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }

/* Dialogs */
.modal-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s3); background: var(--pine-line); }
.modal-backdrop { position: absolute; inset: 0; background: var(--pine-night); opacity: .5; }
.dialog { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 48px); overflow: auto; padding: var(--s3); border-radius: var(--radius-panel); border: 0; background: var(--paper); color: var(--ink); }
dialog.dialog::backdrop { background: var(--pine-night); opacity: .5; }
.dialog-icon { width: 32px; height: 32px; margin-bottom: var(--s2); color: var(--ember-ink); }
.dialog h2 { font-size: var(--h3); font-weight: 500; }
.dialog p { margin-top: var(--s2); color: var(--muted); }
.dialog .actions { justify-content: flex-end; gap: var(--s2); margin-top: var(--s3); }

/* Editorial pages */
.article-hero { padding: var(--s6) 0 var(--s5); }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-bottom: var(--s3); color: var(--muted); font-size: var(--small); }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 4px; }
.article-hero h1 { max-width: 1128px; line-height: 1.15; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: var(--small); color: var(--muted); }
.article-layout { display: grid; width: min(1360px, calc(100% - 2 * var(--gutter))); max-width: 1360px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) 264px; gap: var(--s5); padding-bottom: var(--s6); align-items: start; }
.prose { min-width: 0; max-width: 800px; font-size: var(--body); line-height: 1.85; }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { margin-top: var(--s5); font-size: var(--h2); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.prose h3 { margin-top: var(--s4); font-size: var(--h3); font-weight: 500; }
.prose h2 + p, .prose h3 + p { margin-top: var(--s3); }
.prose p { font-weight: 400; }
.prose a:not(.btn) { color: var(--pine); text-decoration: underline; text-underline-offset: 4px; }
.prose .btn-ink { color: var(--paper); }
.prose ul, .prose ol { padding-left: var(--s3); list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--s1); }
.prose blockquote { margin-inline: 0; padding: var(--s3); border-radius: var(--radius-card); background: var(--mist); color: var(--ink-2); }
.prose pre { overflow-x: auto; padding: var(--s3); border-radius: var(--radius-card); background: var(--mist); color: var(--ink); font: 400 var(--small)/1.7 var(--font-mono); }
.prose .table-scroll { margin-block: var(--s3) var(--s4); }
.article-toc { position: sticky; top: calc(var(--header-h) + var(--s2)); padding: var(--s3); border-radius: var(--radius-card); background: var(--mist); color: var(--ink); }
.article-toc summary { font-size: var(--lead); font-weight: 500; cursor: pointer; }
.article-toc ol { margin-top: var(--s3); display: grid; gap: var(--s2); font-size: var(--small); }
.article-toc .status-pill { margin-top: var(--s2); background: var(--paper); color: var(--muted); }
.article-cta { margin-top: var(--s5); padding: var(--s4); border-radius: var(--radius-panel); background: var(--pine-deep); color: var(--pine-ink); }
.article-cta h2 { margin: 0; }
.article-cta p { color: var(--pine-muted); }
.article-cta .actions { margin-top: var(--s3); }
.article-cta .btn-light { background: var(--paper); color: var(--ink); }
.journal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.post-card { display: flex; flex-direction: column; min-width: 0; height: 100%; padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); transition: background-color .2s; }
.post-card:hover { background: var(--pine-wash); color: var(--pine-deep); }
.post-card h2 { margin-top: var(--s3); font-size: var(--h2); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; }
.post-card p { margin-top: var(--s2); color: var(--muted); }
.post-card time { margin-top: var(--s2); font-size: var(--small); color: var(--muted); }
.post-card .link-arrow { margin-top: var(--s4); }
.journal-count { margin: var(--s3) auto 0; }
.recommend-float { position: fixed; right: var(--s3); bottom: var(--s3); z-index: 40; width: min(336px, calc(100% - 32px)); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); overflow: hidden; }
.recommend-media { min-height: 96px; background: var(--pine-wash); color: var(--pine-deep); }
.recommend-media img { width: 100%; height: 144px; object-fit: cover; }
.recommend-content { padding: var(--s3); }
.recommend-content h2 { font-size: var(--h3); font-weight: 500; padding-right: var(--s3); }
.recommend-content p { margin-top: var(--s2); font-size: var(--small); color: var(--muted); }
.recommend-content .btn { margin-top: var(--s3); max-width: 100%; height: auto; min-height: var(--control-h); padding-block: var(--s1); line-height: 1.35; white-space: normal; }
.float-close { position: absolute; right: var(--s1); top: var(--s1); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--pill); background: var(--paper); color: var(--ink); }
.float-close:hover { background: var(--ink); color: var(--paper); }
.legal-layout { max-width: 960px; margin-inline: auto; padding-block: var(--s5) var(--s6); }
.legal-layout .surface { margin-block: var(--s3) var(--s4); }
.legal-layout h1 { line-height: 1.2; }
.legal-layout .prose { max-width: none; }
.final-cta { padding: var(--s5); background: var(--pine-deep); color: var(--pine-ink); border-radius: var(--radius-panel); text-align: center; }
.final-cta .section-intro { color: var(--pine-muted); }
.final-cta .actions { justify-content: center; margin-top: var(--s3); }

@media (max-width: 1100px) {
  .site-nav { gap: var(--s1); }
  .site-nav a { font-size: var(--small); }
  .article-layout { gap: var(--s4); grid-template-columns: minmax(0, 1fr) 224px; }
  .auth-layout { gap: var(--s4); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alias-compose { grid-template-columns: minmax(0, 1fr) auto; }
  .alias-input-wrap { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-panel { width: min(560px, 100%); }
  .auth-story h1 { max-width: 800px; }
}
@media (max-width: 860px) {
  .header-inner { position: relative; justify-content: space-between; gap: var(--s2); }
  .site-nav, .header-end > .btn, .header-end > .auth-entry { display: none; }
  .header-end { margin-left: 0; }
  .header-inner > .brand { margin-left: 48px; }
  .nav-toggle { position: absolute; left: 0; top: 10px; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-toc { position: static; grid-row: 1; }
  .article-toc:not([open]) { padding-block: var(--s2); }
  .journal-grid, .planner { grid-template-columns: minmax(0, 1fr); }
  .desk-alias-row { grid-template-columns: minmax(0, 1fr) auto; }
  .alias-actions { grid-column: 1 / -1; }
  .surface, .archive-card, .surface-safety { padding: var(--s3); }
}
@media (max-width: 760px) {
  .mailwin { height: 640px; min-height: 600px; }
  .list-body { min-height: 0; overflow-y: auto; }
  .mail-list { height: 100%; }
  .reader.is-open, .reader.mobile-reader {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding-top: var(--header-h);
    z-index: 90;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
  }
  .reader.is-open .reader-head, .reader.mobile-reader .reader-head { position: sticky; top: 0; flex: none; z-index: 2; padding: var(--s2) var(--s3); background: var(--paper); color: var(--ink); }
  .reader.is-open .reader-body, .reader.mobile-reader .reader-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3); }
  .reader.mobile-reader .reader-foot { padding-inline: var(--s3); }
  body.is-locked .media-art, body.reader-open .media-art { visibility: hidden; }
  .mail-stage, .media-row, .media-card, .mailwin { transform: none; animation: none; }
  .reader-from { grid-template-columns: 32px minmax(0, 1fr); }
  .reader-from time { grid-column: 2; }
  .desk-alias-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .desk-alias-address, .alias-actions { grid-column: 1; }
  .setup-grid { grid-template-columns: 192px minmax(0, 1fr); gap: var(--s3); }
}
@media (max-width: 560px) {
  .stage-hero { padding-top: var(--s4); padding-bottom: var(--s4); }
  .stage-hero h1 { font-size: 40px; line-height: 1.15; }
  .stage-hero .actions { gap: var(--s2); }
  .stage-addr { font-size: var(--lead); width: 100%; }
  .stage-meta { flex-wrap: wrap; font-size: var(--small); }
  .stage-hero .actions .link-under { white-space: normal; height: auto; min-height: var(--control-h); }
  .header-inner > .brand { margin-left: 40px; }
  .brand-name { font-size: var(--h3); }
  .lang .lang-trigger { width: 36px; height: 36px; padding: 0; border: 0; background: var(--paper); color: var(--ink); font-size: 0; overflow: hidden; }
  .lang-trigger .lang-name { display: none; }
  .lang-trigger::before { content: ""; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; }
  .lang-trigger > .chev { right: 1px; width: 5px; height: 5px; }
  .lang-menu { right: 0; }
  .card-grid, .auth-layout, .alias-compose, .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-layout { padding-block: var(--s4) var(--s5); }
  .auth-panel, .content-card, .post-card, .planner, .final-cta { padding: var(--s3); }
  .alias-input-wrap { grid-column: auto; flex-wrap: wrap; }
  .alias-input-wrap input { flex: 1; min-width: 160px; }
  .alias-compose .btn { width: 100%; }
  .twofa-idle { grid-template-columns: minmax(0, 1fr); justify-content: start; }
  .twofa-copy, .twofa-status, [data-twofa-start] { grid-column: 1; grid-row: auto; justify-self: start; }
  .twofa-status { width: auto; }
  .twofa-confirm-row { align-items: center; }
  .twofa-confirm-row input { flex: 1 1 144px; }
  .archive-row-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .archive-row-meta { justify-content: flex-start; }
  .archive-detail-head { flex-wrap: wrap; }
  .archive-detail-head .actions { width: 100%; justify-content: flex-start; }
  .article-hero { padding-block: var(--s6) var(--s4); }
  .page-hero { padding-block: var(--s4); }
  .article-hero h1, .page-hero h1 { font-size: 40px; line-height: 1.22; }
  .prose h2, .post-card h2 { font-size: 30px; }
  .article-cta { padding: var(--s3); }
  .recommend-float { right: var(--s2); bottom: var(--s2); }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .closing { padding-block: var(--s5); }
  .toast { bottom: var(--s3); }
  .actions .btn { white-space: normal; height: auto; min-height: var(--control-h); padding-block: var(--s1); line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms; transition-duration: .01ms; }
}


/* Access and address-route refinements */
.skip-link:focus {
  position: fixed;
  top: var(--s1);
  left: var(--s2);
  z-index: 120;
  width: auto;
  height: auto;
  clip: auto;
  padding: var(--s1) var(--s2);
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--paper);
}
.access-page {
  min-height: calc(100dvh - var(--header-h));
}
.access-page .auth-layout {
  align-items: start;
}
.access-page .auth-story {
  padding-top: var(--s3);
}
.access-page .auth-story .section-intro {
  max-width: 480px;
}
.access-note {
  max-width: 440px;
  margin-top: var(--s5);
  color: var(--muted);
  font-size: var(--small);
}
.access-route {
  width: min(320px, 100%);
  height: 72px;
  margin-bottom: var(--s2);
  color: var(--pine);
}
.access-note .link-under {
  margin-top: var(--s3);
  color: var(--ink);
}
.access-card-heading {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  font-size: var(--small);
  color: var(--muted);
}
.access-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-card);
  background: var(--pine-wash);
  color: var(--pine-deep);
  font-size: var(--h3);
  font-weight: 500;
}
.access-target {
  margin-block: var(--s2) var(--s3);
  overflow-wrap: anywhere;
}
.access-target strong {
  font-weight: 500;
}
.auth-panel > .form-error {
  margin-top: var(--s3);
}
.access-fine {
  margin-top: var(--s4);
  color: var(--muted);
  font-size: var(--small);
}
.access-fine a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.access-page .auth-panel input {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
.auth-panel input[type="email"] {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--muted);
}
.auth-panel input[type="email"]:focus {
  border-color: var(--ink);
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}
.auth-panel input[type="email"][aria-invalid="true"] {
  border-color: var(--ember-ink);
}
.login-pane[hidden] {
  display: none !important;
}
.access-page .login-pane .btn {
  min-height: var(--control-h);
}
.desk-root {
  padding-top: var(--s5);
}
.desk-mast {
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
}
.desk-mast h1 {
  font-weight: 400;
  letter-spacing: -.02em;
}
.address-yard {
  min-width: 0;
}
.yard-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: var(--s5);
  margin-bottom: var(--s4);
}
.yard-heading .section-intro {
  max-width: 720px;
}
.yard-route {
  width: 240px;
  height: 120px;
  color: var(--pine);
}
.yard-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s2);
  margin-bottom: var(--s3);
}
.address-yard .alias-compose {
  margin-bottom: 0;
}
.address-yard .alias-list:not(:empty) {
  margin-top: var(--s3);
}
.address-yard .empty-state {
  width: 100%;
  max-width: none;
  margin-top: var(--s3);
}
.alias-identity {
  min-width: 0;
}
.alias-address-open {
  display: block;
  max-width: 100%;
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
.alias-address-open:hover {
  background: transparent;
  color: var(--pine-deep);
  text-decoration-color: currentColor;
}
.alias-stats {
  margin-top: var(--s2);
  font-size: var(--small);
  color: var(--muted);
}
.desk-root .archive-card {
  margin-top: var(--s5);
}
.archive-card .desk-section-head {
  align-items: flex-start;
}
.archive-card .desk-section-head > div {
  min-width: 0;
  max-width: 820px;
}
.archive-card .desk-section-head > .btn {
  flex: none;
}
.archive-card [data-archive-empty] {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.archive-card .archive-list {
  border-top: none;
}
.archive-detail-head > .actions {
  align-self: flex-start;
}
.archive-detail-head [data-archive-status] {
  margin-top: var(--s2);
}
.archive-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.archive-attachments > p {
  flex-basis: 100%;
}
.archive-attachments .btn {
  max-width: 100%;
  height: auto;
  min-height: 32px;
  padding-block: var(--s1);
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.desk-root .surface-safety {
  margin-top: var(--s5);
}
.surface-safety .twofa-copy {
  flex-basis: 420px;
}
.surface-safety .twofa-idle {
  align-items: start;
}
.surface-safety .twofa-status {
  align-items: center;
  margin: 0;
}
.surface-safety [data-2fa-badge] {
  margin: 0;
}
.surface-safety .twofa-steps .twofa-step > div {
  min-width: 0;
  flex: 1;
}
.surface-safety .twofa-confirm-row {
  align-items: center;
}
.surface-safety .twofa-confirm-row .btn-outline {
  background: var(--paper);
  color: var(--ink);
}
.surface-safety .twofa-confirm-row .btn-outline:hover {
  background: var(--mist);
  color: var(--ink);
}
.surface-safety .twofa-confirm-row [data-twofa-confirm] {
  background: var(--ink);
  color: var(--paper);
}
.surface-safety .twofa-confirm-row [data-twofa-confirm]:hover {
  background: var(--pine-deep);
  color: var(--paper);
}
.twofa-disable-panel {
  margin-top: var(--s3);
  max-width: 800px;
}
.desk-boundary {
  margin-top: var(--s4);
  color: var(--muted);
  font-size: var(--small);
}
.dialog {
  margin: auto;
}
.dialog:not([open]) {
  display: none;
}
.mail-image-notice {
  margin-bottom: var(--s3);
  padding: var(--s2);
  border-radius: var(--radius-card);
  background: var(--mist);
  color: var(--muted);
  font-size: var(--small);
}
.reader.is-real .demo-pill {
  display: none !important;
}
.stage-addr {
  text-overflow: clip;
  overflow: visible;
  max-width: 100%;
  letter-spacing: 0;
}
.lang-trigger > .chev {
  transform: translateY(calc(-50% - 1px)) rotate(45deg);
}
.lang-trigger[aria-expanded="true"] > .chev {
  transform: translateY(calc(-50% + 2px)) rotate(225deg);
}
@media (min-width: 1101px) {
  .address-yard .alias-compose {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .address-yard .alias-input-wrap {
    grid-column: auto;
  }
}
@media (min-width: 961px) {
  .access-page .auth-panel {
    width: 100%;
    max-width: 560px;
    justify-self: end;
  }
}
@media (max-width: 1100px) {
  .yard-heading {
    grid-template-columns: minmax(0, 1fr) 192px;
    gap: var(--s4);
  }
  .yard-route {
    width: 192px;
  }
}
@media (max-width: 960px) {
  .access-page .auth-layout {
    gap: var(--s4);
    padding-top: var(--s4);
  }
  .access-page .auth-story {
    padding-top: 0;
  }
  .access-page .auth-story h1 {
    font-size: var(--h2);
    line-height: 1.25;
  }
  .access-page .auth-story h1 br {
    display: none;
  }
  .access-note {
    display: none;
  }
  .access-page .auth-panel {
    justify-self: start;
  }
}
@media (max-width: 720px) {
  .yard-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }
  .yard-route {
    display: none;
  }
  .address-yard .alias-compose {
    grid-template-columns: minmax(0, 1fr);
  }
  .address-yard .alias-input-wrap {
    grid-column: 1;
  }
  .address-yard .alias-compose > button {
    width: 100%;
  }
  .desk-alias-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
  .desk-alias-row .status-pill {
    justify-self: start;
  }
  .alias-identity,
  .desk-alias-row .alias-actions {
    grid-column: 1;
  }
  .desk-alias-address {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .desk-mast {
    gap: var(--s3);
  }
  .desk-mast [data-logout] {
    white-space: normal;
    height: auto;
    min-height: var(--control-h);
    padding-block: var(--s1);
    line-height: 1.35;
  }
}
@media (max-width: 760px) {
  body > .reader.mobile-reader {
    inset: 0;
    height: 100dvh;
    min-height: 100dvh;
    padding-top: var(--header-h);
    border-radius: 0;
    transform: none;
    animation: none;
  }
  body > .reader.mobile-reader .reader-head {
    position: sticky;
    top: 0;
  }
  body > .reader.mobile-reader .reader-body {
    overscroll-behavior: auto;
  }
  .reader.is-empty .reader-head {
    display: none;
  }
  .reader.mobile-reader.is-empty .reader-head {
    display: block;
  }
  .reader.mobile-reader.is-empty .reader-subject,
  .reader.mobile-reader.is-empty .reader-from,
  .reader.mobile-reader.is-empty .demo-pill,
  .reader.mobile-reader.is-empty [data-delete-mail] {
    display: none;
  }
}
@media (max-width: 560px) {
  .access-page {
    min-height: 0;
  }
  .access-card-heading {
    margin-bottom: var(--s3);
  }
  .access-page .auth-story h1 {
    font-size: 30px;
    line-height: 1.25;
  }
  .access-page .auth-story .section-intro {
    margin-top: var(--s3);
  }
  .access-page .auth-layout {
    padding-block: var(--s4) var(--s5);
  }
  .access-fine {
    margin-top: var(--s3);
  }
  .desk-root {
    padding-top: var(--s4);
  }
  .desk-mast h1 {
    font-size: 30px;
  }
  .yard-heading .title-2,
  .archive-card .desk-section-head h2 {
    font-size: 30px;
    line-height: 1.25;
  }
  .yard-caption {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .surface-safety .twofa-copy {
    flex-basis: auto;
    min-width: 0;
  }
  .surface-safety .twofa-idle {
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
    align-items: start;
  }
  .surface-safety .twofa-copy,
  .surface-safety .twofa-status,
  .surface-safety [data-twofa-start] {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .surface-safety .twofa-status {
    width: auto;
  }
  .surface-safety [data-twofa-start] {
    align-self: center;
  }
  .surface-safety .twofa-confirm-row {
    gap: var(--s2);
  }
  .surface-safety .twofa-confirm-row input {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .surface-safety .twofa-confirm-row .btn {
    flex: 0 1 auto;
    width: auto;
  }
  .surface-safety .secret-row {
    align-items: flex-start;
  }
  .surface-safety .secret-value {
    flex-basis: 100%;
  }
  .archive-toolbar .field {
    flex-basis: 100%;
  }
  .archive-detail-head .actions {
    gap: var(--s2);
  }
}


/* Privacy editorial layout */
.privacy-main {
  padding-bottom: var(--s6);
}
.privacy-hero {
  padding-block: var(--s6) var(--s5);
}
.privacy-hero .section-intro {
  max-width: 680px;
}
.privacy-legal-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
  text-align: left;
}
.privacy-glance-card {
  min-width: 0;
  padding: var(--s4);
  border-radius: var(--radius-panel);
  background: var(--mist);
  color: var(--ink);
}
.privacy-card-index {
  display: block;
  margin-bottom: var(--s4);
  font-size: var(--small);
  color: var(--muted);
}
.privacy-glance-card h2 {
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.privacy-glance-card p {
  margin-top: var(--s2);
  color: var(--ink-2);
  font-size: var(--body);
  font-weight: 400;
}
.privacy-reading-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 800px);
  justify-content: space-between;
  align-items: start;
  gap: var(--s5);
}
.privacy-directory {
  position: sticky;
  top: calc(var(--header-h) + var(--s3));
  padding-block: var(--s2);
  color: var(--ink);
}
.privacy-directory h2 {
  font-size: var(--small);
  font-weight: 500;
  line-height: 1.5;
}
.privacy-directory ol {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s3);
}
.privacy-directory a {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--small);
  color: var(--ink-2);
}
.privacy-directory a:hover {
  color: var(--pine);
}
.privacy-directory a span {
  color: var(--muted);
}
.privacy-directory > p {
  max-width: 200px;
  margin-top: var(--s4);
  font-size: var(--small);
  color: var(--muted);
}
.privacy-prose {
  width: 100%;
  max-width: 800px;
}
.privacy-prose h2 {
  margin-top: 0;
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.privacy-prose h3 {
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1.4;
}
.privacy-prose strong {
  font-weight: 500;
}
.privacy-topic {
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}
.privacy-topic + .privacy-topic {
  margin-top: var(--s5);
}
.privacy-topic > p:not(.eyebrow),
.privacy-topic > ul,
.privacy-topic > dl {
  margin-top: var(--s3);
}
.privacy-topic > .eyebrow {
  margin-bottom: var(--s3);
  font-size: var(--small);
  color: var(--muted);
}
.privacy-topic > h3 {
  margin-top: var(--s4);
}
.privacy-data-list {
  margin-bottom: 0;
}
.privacy-data-list > div {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.privacy-data-list > div:first-child {
  padding-top: 0;
}
.privacy-data-list dt {
  font-weight: 500;
  color: var(--ink);
}
.privacy-data-list dd {
  margin: 0;
  color: var(--ink-2);
}
.privacy-retention-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s3);
}
.privacy-retention-card {
  min-width: 0;
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.privacy-retention-value {
  font-size: var(--code);
  line-height: 1.2;
  letter-spacing: 0;
}
.privacy-retention-value span {
  font-family: var(--font-sans);
  font-size: var(--small);
}
.terms-prose .privacy-retention-card h3 {
  margin-top: var(--s3);
  font-size: var(--body);
  color: var(--pine-deep);
}
.privacy-retention-card > p:last-child {
  margin-top: var(--s1);
  font-size: var(--small);
  color: var(--pine-deep);
}
.terms-prose .privacy-table-scroll {
  margin-block: var(--s3) var(--s4);
}
.privacy-boundary-table {
  min-width: 560px;
}
.privacy-boundary-table caption {
  padding-bottom: var(--s2);
  color: var(--muted);
  font-size: var(--small);
  text-align: left;
}
.privacy-boundary-table tbody th {
  width: 24%;
  color: var(--ink);
}
.privacy-boundary-table td {
  width: 38%;
  color: var(--ink-2);
}
.privacy-note {
  margin-top: var(--s3);
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--mist);
  color: var(--ink);
}
.terms-prose .privacy-note h3 {
  margin-top: 0;
}
.privacy-note p {
  margin-top: var(--s2);
  color: var(--ink-2);
}
.privacy-request-card {
  margin-block: var(--s4);
  padding: var(--s4);
  border-radius: var(--radius-panel);
  background: var(--pine-wash);
  color: var(--ink);
}
.privacy-prose .privacy-request-card h3 {
  margin-top: 0;
}
.privacy-request-card p {
  margin-top: var(--s2);
  color: var(--ink-2);
}
.privacy-request-card .actions {
  margin-top: var(--s3);
}
.privacy-prose .privacy-request-card .btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.privacy-prose .privacy-request-card .btn-ink:hover {
  background: var(--pine-deep);
  color: var(--paper);
}
.privacy-prose .privacy-request-card .link-under {
  color: var(--ink);
}
@media (max-width: 860px) {
  .privacy-main {
    padding-bottom: var(--s5);
  }
  .privacy-hero {
    padding-block: var(--s4);
  }
  .privacy-legal-glance {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    margin-top: var(--s4);
  }
  .privacy-glance-card {
    padding: var(--s3);
  }
  .privacy-card-index {
    margin-bottom: var(--s3);
  }
  .privacy-reading-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
  .privacy-directory {
    position: static;
    padding: var(--s3);
    border-radius: var(--radius-card);
    background: var(--mist);
    color: var(--ink);
  }
  .privacy-directory ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .privacy-directory > p {
    max-width: none;
    margin-top: var(--s3);
  }
  .privacy-prose h2 {
    font-size: 30px;
    line-height: 1.25;
  }
  .privacy-data-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1);
  }
  .privacy-retention-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .privacy-retention-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--s1) var(--s2);
    align-items: center;
  }
  .privacy-retention-value {
    grid-row: 1 / 3;
  }
  .terms-prose .privacy-retention-card h3,
  .privacy-retention-card > p:last-child {
    margin-top: 0;
  }
  .privacy-request-card {
    padding: var(--s3);
  }
  .privacy-request-card .actions {
    gap: var(--s2);
  }
}


/* Address choice guide */
.choice-hero {
  padding-block: var(--s6) var(--s5);
}
.choice-hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.18;
  font-synthesis: none;
}
.choice-hero .eyebrow {
  margin-bottom: var(--s3);
}
.choice-hero .section-intro {
  max-width: 640px;
}
.choice-hero-actions {
  margin-top: var(--s4);
}
.choice-opening {
  padding-bottom: var(--s3);
}
.choice-opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s3);
}
.choice-summary {
  min-width: 0;
  padding: var(--s5);
  border-radius: var(--radius-panel);
  background: var(--mist);
  color: var(--ink);
}
.choice-summary-alias {
  background: var(--pine-wash);
  color: var(--ink);
}
.choice-summary .line-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--s4);
  color: var(--pine);
}
.choice-summary .eyebrow {
  margin-bottom: var(--s3);
  color: var(--muted);
}
.choice-summary .title-2 {
  max-width: 560px;
}
.choice-summary p:not(.eyebrow) {
  max-width: 560px;
  margin-top: var(--s3);
  color: var(--ink-2);
}
.choice-summary .link-under {
  margin-top: var(--s4);
  color: var(--ink);
}
.choice-decisions {
  align-items: stretch;
}
.choice-decision {
  gap: var(--s3);
  padding: var(--s4);
}
.choice-number {
  flex: none;
  font-size: var(--small);
  color: var(--pine);
}
.choice-decision h3 {
  margin-top: var(--s2);
}
.choice-decision > p {
  color: var(--ink-2);
}
.choice-answer {
  width: 100%;
  margin-top: var(--s2);
}
.choice-answer .status-pill {
  background: var(--paper);
  color: var(--pine-deep);
}
.choice-answer p {
  margin-top: var(--s2);
  font-size: var(--small);
  color: var(--muted);
}
.choice-decision > .link-under {
  height: auto;
  min-height: var(--control-h);
  margin-top: auto;
  padding-top: var(--s3);
  line-height: 1.5;
  white-space: normal;
}
.choice-comparison {
  padding-block: var(--s5);
  background: var(--mist-2);
  color: var(--ink);
}
.choice-table-wrap {
  margin-top: var(--s3);
}
.choice-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
  font-size: var(--body);
}
.choice-table th,
.choice-table td {
  padding: var(--s3);
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.choice-table thead th {
  background: var(--mist);
  color: var(--ink);
  font-size: var(--h3);
  font-weight: 500;
}
.choice-table thead th:first-child {
  width: 18%;
  font-size: var(--small);
  color: var(--muted);
}
.choice-table thead th span {
  display: block;
  margin-top: var(--s1);
  font-size: var(--small);
  font-weight: 400;
  color: var(--muted);
}
.choice-table tbody th {
  font-weight: 500;
  color: var(--ink);
}
.choice-table tbody td {
  color: var(--ink-2);
}
.choice-cell-label {
  display: none;
}
.choice-table-note {
  max-width: 880px;
  margin-top: var(--s4);
  color: var(--muted);
  font-size: var(--small);
}
.choice-use-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.choice-use {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--s4);
  border-radius: var(--radius-panel);
  background: var(--mist);
  color: var(--ink);
}
.choice-use-tinted {
  background: var(--pine-wash);
  color: var(--ink);
}
.choice-use-type {
  margin-bottom: var(--s3);
  color: var(--pine-deep);
  font-size: var(--small);
}
.choice-use > .title-3 + p {
  margin-top: var(--s2);
  color: var(--ink-2);
}
.choice-boundary {
  margin-top: var(--s3);
  color: var(--ink-2);
  font-size: var(--small);
}
.choice-boundary strong {
  font-weight: 500;
  color: var(--ink);
}
.choice-use .link-under {
  height: auto;
  min-height: var(--control-h);
  margin-top: var(--s4);
  line-height: 1.5;
  white-space: normal;
}
.choice-routing {
  padding-block: var(--s5);
  background: var(--mist);
  color: var(--ink);
}
.choice-routing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
  gap: var(--s5);
}
.choice-routing-copy {
  min-width: 0;
}
.choice-routing-copy .section-intro {
  max-width: 440px;
}
.choice-routing-copy .link-under {
  margin-top: var(--s4);
}
.choice-routes {
  display: grid;
  min-width: 0;
  gap: var(--s3);
}
.choice-route {
  min-width: 0;
  margin: 0;
  padding: var(--s4);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
}
.choice-route figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  font-weight: 500;
}
.choice-route figcaption > span {
  color: var(--muted);
  font-size: var(--small);
  font-weight: 400;
}
.choice-route-stops {
  display: flex;
  align-items: flex-start;
  margin-block: var(--s4);
}
.choice-route-stops li {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: var(--s1);
  padding-right: var(--s1);
  font-size: var(--small);
  color: var(--ink);
}
.choice-route-stops li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 40px;
  right: var(--s1);
  height: 1px;
  background: var(--pine-muted);
}
.choice-route-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-card);
  background: var(--pine-wash);
  color: var(--pine-deep);
  font: 400 var(--small)/1 var(--font-mono);
}
.choice-route > p {
  color: var(--muted);
  font-size: var(--small);
}
.choice-risk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
  gap: var(--s5);
}
.choice-risk-grid > div {
  min-width: 0;
}
.choice-risk-grid .section-intro {
  max-width: 440px;
}
.choice-risk-links {
  margin-top: var(--s3);
}
.choice-risk-list {
  display: grid;
  gap: var(--s4);
}
.choice-risk {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--s2);
  align-items: start;
}
.choice-risk > .choice-number {
  padding-top: 4px;
}
.choice-risk p {
  margin-top: var(--s2);
  color: var(--muted);
}
.choice-finish {
  padding-bottom: var(--s5);
}
.choice-finish .final-cta {
  padding: var(--s5);
}
.choice-finish-kicker {
  color: var(--pine-muted);
}
.choice-finish .section-intro {
  max-width: 640px;
  margin-inline: auto;
}
.choice-finish .actions {
  gap: var(--s2) var(--s3);
}
.choice-finish .actions .btn {
  max-width: 100%;
  height: auto;
  min-height: var(--control-h);
  padding-block: var(--s1);
  white-space: normal;
  line-height: 1.35;
}
.choice-finish-reading {
  padding-top: var(--s4);
  text-align: center;
  color: var(--muted);
}
.choice-finish-reading .actions {
  margin-top: var(--s2);
  color: var(--ink);
}

@media (max-width: 860px) {
  .choice-hero {
    padding-block: var(--s5) var(--s4);
  }
  .choice-opening-grid,
  .choice-decisions,
  .choice-use-grid,
  .choice-routing-grid,
  .choice-risk-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .choice-summary,
  .choice-decision,
  .choice-use,
  .choice-route,
  .choice-finish .final-cta {
    padding: var(--s3);
  }
  .choice-summary .line-icon {
    margin-bottom: var(--s3);
  }
  .choice-summary .title-2 {
    font-size: clamp(30px, 5vw, var(--h2));
  }
  .choice-routing-grid,
  .choice-risk-grid {
    gap: var(--s4);
  }
  .choice-comparison,
  .choice-routing {
    padding-block: var(--s5);
  }
  .choice-table-wrap {
    overflow: visible;
  }
  .choice-table,
  .choice-table tbody {
    display: block;
    width: 100%;
  }
  .choice-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .choice-table tbody {
    display: grid;
    gap: var(--s3);
  }
  .choice-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--s3);
    gap: var(--s2) var(--s3);
    border-radius: var(--radius-card);
    background: var(--mist);
    color: var(--ink);
  }
  .choice-table tbody th {
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
    font-size: var(--h3);
  }
  .choice-table tbody td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    font-size: var(--small);
  }
  .choice-cell-label {
    display: block;
    margin-bottom: var(--s1);
    color: var(--pine-deep);
    font-size: var(--small);
    font-weight: 500;
  }
  .choice-decision > .link-under {
    margin-top: var(--s2);
    padding-top: 0;
  }
  .choice-use .link-under {
    margin-top: var(--s4);
  }
  .choice-finish-reading .link-under {
    height: auto;
    min-height: var(--control-h);
    line-height: 1.5;
    white-space: normal;
  }
}
@media (max-width: 560px) {
  .choice-hero {
    padding-top: var(--s4);
  }
  .choice-hero h1 {
    font-size: 40px;
    line-height: 1.22;
  }
  .choice-hero-actions {
    gap: var(--s2);
  }
  .choice-table tbody tr {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }
  .choice-route-stops {
    margin-block: var(--s3);
  }
  .choice-route figcaption {
    flex-direction: column;
    align-items: flex-start;
  }
  .choice-risk {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--s2);
  }
  .choice-finish .title-2 {
    font-size: 30px;
    line-height: 1.25;
  }
}


/* Terms: editorial overview and service boundaries */
.terms-hero h1 {
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.18;
}
.terms-date {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: var(--small);
}
.terms-layout {
  padding-bottom: var(--s6);
}
.terms-glance.legal-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
.terms-glance-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--s4);
  border-radius: var(--radius-panel);
  background: var(--mist);
  color: var(--ink);
}
.terms-card-index {
  color: var(--muted);
  font-size: var(--small);
}
.terms-glance-card h2 {
  margin-top: var(--s3);
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1.5;
}
.terms-glance-card p {
  margin-top: var(--s2);
  color: var(--ink-2);
}
.terms-glance-card .link-under {
  margin-top: var(--s3);
  height: auto;
  min-height: var(--control-h);
  line-height: 1.6;
}
.terms-directory {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s4);
  margin-top: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.terms-directory-label {
  color: var(--muted);
  font-size: var(--small);
}
.terms-directory ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2) var(--s3);
  font-size: var(--small);
}
.terms-directory a {
  display: inline-block;
  text-underline-offset: 4px;
}
.terms-directory a:hover {
  color: var(--pine);
  text-decoration: underline;
}
.privacy-directory-note {
  max-width: 960px;
  margin: var(--s4) auto 0;
  color: var(--muted);
  font-size: var(--small);
  text-align: left;
}
.terms-prose .privacy-data-list,
.terms-prose .privacy-retention-grid,
.terms-prose .privacy-note,
.terms-prose .terms-topic > ul {
  margin-top: var(--s3);
}
.terms-prose.prose {
  max-width: 960px;
  margin-inline: auto;
}
.terms-topic {
  padding-top: var(--s5);
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}
.terms-prose.prose > .terms-topic + .terms-topic {
  margin-top: 0;
}
.terms-topic .eyebrow {
  margin-bottom: var(--s3);
}
.terms-prose.prose h2 {
  margin-top: 0;
  font-size: var(--code);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.terms-prose.prose h3 {
  margin-top: var(--s4);
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1.5;
}
.terms-prose.prose .privacy-note h3,
.terms-prose.prose .privacy-retention-card h3 {
  font-size: var(--body);
  font-weight: 500;
  line-height: 1.5;
}
.terms-prose.prose .privacy-note h3 {
  margin-top: 0;
}
.terms-prose.prose .privacy-retention-card h3 {
  margin-top: var(--s3);
  color: var(--pine-deep);
}
.terms-topic > p:not(.eyebrow) {
  margin-top: var(--s3);
}
.terms-prose strong {
  font-weight: 500;
}
.terms-table-caption {
  padding-bottom: var(--s2);
  color: var(--ink);
  font-size: var(--small);
  font-weight: 500;
  text-align: left;
  caption-side: top;
}
.terms-topic .data-table {
  min-width: 640px;
}
.terms-topic .data-table th[scope="row"] {
  width: 20%;
  color: var(--ink);
}
.terms-topic .data-table td {
  width: 40%;
}
.terms-use-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
  margin-bottom: var(--s4);
}
.terms-use-card {
  min-width: 0;
  padding: var(--s3);
  border-radius: var(--radius-panel);
  background: var(--pine-wash);
  color: var(--ink);
}
.terms-use-restricted {
  background: var(--mist);
  color: var(--ink);
}
.terms-use-heading {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.terms-use-heading .line-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--pine);
}
.terms-use-restricted .line-icon {
  color: var(--ink-2);
}
.terms-prose.prose .terms-use-heading h3 {
  margin: 0;
}
.terms-prose.prose .terms-use-card ul {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-left: var(--s3);
  color: var(--ink-2);
}
.terms-prose.prose .terms-use-card li + li {
  margin-top: 0;
}
.terms-contact {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--radius-panel);
  background: var(--mist);
  color: var(--ink);
}
.terms-prose.prose .terms-contact h3 {
  margin-top: 0;
}
.terms-contact p {
  margin-top: var(--s2);
  color: var(--ink-2);
}
.terms-contact .actions {
  margin-top: var(--s3);
}
.terms-contact .btn {
  max-width: 100%;
  height: auto;
  min-height: var(--control-h);
  padding-block: var(--s1);
  white-space: normal;
  line-height: 1.35;
}
.terms-endnote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s5);
  color: var(--muted);
  font-size: var(--small);
}
@media (max-width: 860px) {
  .terms-hero h1 {
    font-size: var(--h2);
    line-height: 1.25;
  }
  .terms-glance.legal-glance {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
  .terms-glance-card {
    padding: var(--s3);
  }
  .terms-directory {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
  .terms-directory ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .terms-prose.prose h2 {
    font-size: 30px;
  }
  .terms-prose.prose .privacy-retention-card h3,
  .privacy-retention-card > p:last-child {
    margin-top: 0;
  }
  .terms-use-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .terms-contact {
    padding: var(--s3);
  }
  .terms-layout {
    padding-bottom: var(--s5);
  }
}
@media (max-width: 560px) {
  .terms-hero h1 {
    font-size: 40px;
  }
  .terms-directory ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .terms-endnote {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Mailbox lifespan planning */
.lifespan-hero-actions { margin-top: var(--s4); }
.lifespan-answer { padding-block: var(--s3) var(--s4); }
.lifespan-answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); }
.lifespan-answer-grid > div { min-width: 0; }
.lifespan-number { display: block; margin-bottom: var(--s3); color: var(--pine-deep); font-size: var(--h2); line-height: 1.1; }
.lifespan-answer-grid p:not(.eyebrow) { margin-top: var(--s2); color: var(--muted); }
.lifespan-answer-note .eyebrow { margin-bottom: var(--s3); color: var(--pine-deep); }
.lifespan-tool { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); }
.lifespan-inputs { display: grid; align-content: start; gap: var(--s4); min-width: 0; padding: var(--s4); }
.lifespan-control { min-width: 0; }
.lifespan-control > label { display: block; margin-bottom: var(--s1); font-size: var(--h3); font-weight: 500; }
.lifespan-range-row { margin-top: var(--s3); }
.lifespan-range-row input { width: 100%; min-width: 0; height: var(--control-h); margin: 0; cursor: pointer; }
.lifespan-range-row input:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.lifespan-range-row output { min-width: 88px; text-align: right; white-space: nowrap; color: var(--pine-deep); }
.lifespan-range-scale { display: flex; justify-content: space-between; gap: var(--s2); margin-top: var(--s1); padding-right: 104px; font-size: var(--small); color: var(--muted); }
.lifespan-tool-note { font-size: var(--small); color: var(--muted); }
.lifespan-result { min-width: 0; padding: var(--s4); background: var(--pine-wash); color: var(--ink); }
.lifespan-result .eyebrow { color: var(--pine-deep); }
.lifespan-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.lifespan-metrics dt { margin-bottom: var(--s1); font-size: var(--small); color: var(--ink-2); }
.lifespan-metrics dd { margin: 0; font-size: var(--addr); line-height: 1.4; color: var(--pine-deep); overflow-wrap: anywhere; }
.lifespan-budget { font-size: var(--small); color: var(--ink-2); }
.lifespan-budget-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s1); }
.lifespan-budget-row progress { display: block; flex: 1; min-width: 0; width: 100%; height: 8px; border: 0; border-radius: var(--pill); overflow: hidden; appearance: none; background: var(--paper); color: var(--pine); }
.lifespan-budget-row progress::-webkit-progress-bar { border-radius: var(--pill); background: var(--paper); }
.lifespan-budget-row progress::-webkit-progress-value { border-radius: var(--pill); background: var(--pine); }
.lifespan-budget-row progress::-moz-progress-bar { border-radius: var(--pill); background: var(--pine); }
.lifespan-budget-row output { flex: none; min-width: 56px; text-align: right; color: var(--pine-deep); }
.lifespan-verdict { max-width: 100%; height: auto; min-height: 24px; margin-top: var(--s3); padding-block: var(--s1); background: var(--paper); color: var(--pine-deep); white-space: normal; line-height: 1.5; }
.lifespan-verdict-review { background: var(--pine-deep); color: var(--pine-ink); }
.lifespan-result-copy { margin-top: var(--s2); color: var(--ink-2); }
.lifespan-result-note { margin-top: var(--s3); font-size: var(--small); color: var(--ink-2); }
.lifespan-tool-caption { max-width: 800px; margin: var(--s3) auto 0; color: var(--muted); font-size: var(--small); text-align: center; }
.lifespan-tool-caption a, .lifespan-table-note a { color: var(--pine-deep); text-decoration: underline; text-underline-offset: 4px; }
.lifespan-noscript { margin-top: var(--s3); }
.lifespan-slices { background: var(--mist-2); color: var(--ink); }
.lifespan-task { gap: var(--s2); }
.lifespan-task-index { margin-bottom: var(--s2); font-size: var(--small); color: var(--pine-deep); }
.lifespan-task .link-under { margin-top: var(--s3); height: auto; min-height: var(--control-h); white-space: normal; }
.lifespan-event-table { min-width: 680px; }
.lifespan-event-table thead th:first-child { width: 18%; }
.lifespan-event-table thead th:nth-child(2) { width: 41%; }
.lifespan-event-table tbody th { color: var(--ink); }
.lifespan-table-note { max-width: 880px; color: var(--muted); font-size: var(--small); }
.lifespan-instructions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: var(--s5); }
.lifespan-instruction-link { margin-top: var(--s3); height: auto; min-height: var(--control-h); }
.lifespan-steps { display: grid; gap: var(--s4); padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); }
.lifespan-steps li { display: flex; align-items: flex-start; gap: var(--s2); }
.lifespan-steps li > div { flex: 1; min-width: 0; }
.lifespan-steps p { margin-top: var(--s2); color: var(--muted); }
.lifespan-closing-note { max-width: 680px; margin: var(--s3) auto 0; color: var(--muted); font-size: var(--small); text-align: center; }

@media (max-width: 860px) {
  .lifespan-answer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s3); }
  .lifespan-number { margin-bottom: var(--s2); }
  .lifespan-tool { grid-template-columns: minmax(0, 1fr); }
  .lifespan-inputs, .lifespan-result { padding: var(--s3); }
  .lifespan-metrics dd { font-size: var(--addr); }
  .lifespan-instructions { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .lifespan-steps { padding: var(--s3); }
  .lifespan-task { padding: var(--s3); }
  .lifespan-tool-caption { text-align: left; }
  .lifespan-hero-actions { gap: var(--s2); }
  .lifespan-range-row output { min-width: 80px; }
  .lifespan-range-scale { padding-right: 96px; }
}


/* Mail glossary */
.glossary-hero { padding-bottom: var(--s5); }
.glossary-hero .eyebrow { color: var(--pine); }
.glossary-opening { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); text-align: left; }
.glossary-definition { min-width: 0; padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); }
.glossary-definition:nth-child(2) { background: var(--pine-wash); color: var(--ink); }
.glossary-index { display: block; font: 400 var(--small)/1.5 var(--font-mono); letter-spacing: 0; color: var(--muted); }
.glossary-definition h2 { margin-top: var(--s3); }
.glossary-definition p { max-width: 560px; margin-top: var(--s2); color: var(--ink-2); }
.glossary-definition .link-under { margin-top: var(--s3); }
.glossary-directory { padding-block: 0 var(--s5); }
.glossary-search-panel { padding: var(--s4); background: var(--mist); color: var(--ink); border-radius: var(--radius-panel); }
.glossary-search-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.glossary-search-heading .field-note { margin-top: var(--s1); }
.glossary-result-count { flex: none; color: var(--muted); font-size: var(--small); }
.glossary-search-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.glossary-search-form .field { flex: 1; min-width: min(280px, 100%); }
.glossary-search-form input[type="search"] { background: var(--paper); color: var(--ink); }
.glossary-search-form .btn { flex: none; font-size: var(--small); }
.glossary-filters { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.glossary-filter { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: var(--s1) var(--s2); border-radius: var(--pill); background: var(--paper); color: var(--ink-2); font-size: var(--small); line-height: 1.5; }
.glossary-filter:hover { background: var(--pine-wash); color: var(--pine-deep); }
.glossary-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.glossary-filter[aria-pressed="true"]:hover { background: var(--pine-deep); color: var(--paper); }
.glossary-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; gap: var(--s5); padding-top: var(--s6); }
.glossary-group-intro { position: sticky; top: calc(var(--header-h) + var(--s4)); min-width: 0; }
.glossary-group-intro .eyebrow { color: var(--pine); }
.glossary-group-intro .title-2 { max-width: 400px; }
.glossary-group-intro .section-intro { max-width: 360px; }
.glossary-group-intro .link-under { margin-top: var(--s3); }
.glossary-entries { min-width: 0; display: grid; gap: var(--s2); }
.glossary-entry { min-width: 0; padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist-2); color: var(--ink); scroll-margin-top: calc(var(--header-h) + var(--s3)); }
.glossary-entry:target { background: var(--pine-wash); color: var(--ink); }
.glossary-term-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.glossary-term-head h3 { font-size: var(--h3); font-weight: 500; line-height: 1.4; }
.glossary-term-head > span { font-size: var(--small); color: var(--muted); }
.glossary-meaning { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: var(--s2); margin: var(--s3) 0 0; }
.glossary-meaning dt { font-size: var(--small); font-weight: 400; color: var(--muted); }
.glossary-meaning dd { min-width: 0; margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.glossary-route { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); align-items: center; gap: var(--s2); margin-top: var(--s3); padding: var(--s3); border-radius: var(--radius-card); background: var(--pine-wash); color: var(--pine-deep); }
.glossary-route > div { min-width: 0; }
.glossary-route-label { display: block; color: var(--pine); font-size: var(--small); }
.glossary-route strong { display: block; margin-top: var(--s1); font-size: var(--body); font-weight: 500; }
.glossary-route svg { width: 32px; height: 16px; }
.glossary-no-results { max-width: 560px; margin: var(--s5) auto 0; padding: var(--s4); background: var(--mist); color: var(--ink); border-radius: var(--radius-panel); text-align: center; }
.glossary-empty-art { width: 64px; height: 64px; margin: 0 auto var(--s3); color: var(--pine); }
.glossary-no-results p { margin-top: var(--s2); color: var(--muted); }
.glossary-no-results .btn { margin-top: var(--s3); }
.glossary-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.glossary-pair { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--s4); border-radius: var(--radius-panel); background: var(--mist); color: var(--ink); }
.glossary-pair h3 { margin-top: var(--s3); }
.glossary-pair p { margin-top: var(--s2); color: var(--ink-2); }
.glossary-pair .link-under { margin-top: var(--s3); }
.glossary-next { padding-block: 0 var(--s5); }
.glossary-next .final-cta { padding-block: var(--s5); }
.glossary-next .section-intro { max-width: 640px; margin-inline: auto; }
.glossary-next-link { display: inline-block; max-width: 100%; margin-top: var(--s3); color: var(--pine-ink); font-size: var(--small); text-decoration: underline; text-underline-offset: 4px; }
.glossary-support { max-width: 720px; margin: var(--s4) auto 0; text-align: center; color: var(--muted); font-size: var(--small); overflow-wrap: anywhere; }
.glossary-support a { color: var(--pine); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .glossary-opening { grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); }
  .glossary-definition, .glossary-search-panel, .glossary-entry, .glossary-pair { padding: var(--s3); }
  .glossary-group { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s5); }
  .glossary-group-intro { position: static; }
  .glossary-group-intro .title-2, .glossary-group-intro .section-intro { max-width: none; }
  .glossary-pairs { grid-template-columns: minmax(0, 1fr); }
  .glossary-route { gap: var(--s1); padding: var(--s2); }
  .glossary-next .final-cta { padding: var(--s4) var(--s3); }
}
@media (max-width: 560px) {
  .glossary-search-heading { gap: var(--s2); }
  .glossary-search-form { align-items: stretch; }
  .glossary-search-form .field { flex-basis: 100%; }
  .glossary-search-form .btn { align-self: flex-start; }
  .glossary-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glossary-filter { min-width: 0; white-space: normal; }
  .glossary-meaning { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .glossary-meaning dt:not(:first-child) { margin-top: var(--s2); }
  .glossary-route { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s2); padding: var(--s3); }
  .glossary-route svg { margin-left: var(--s1); transform: rotate(90deg); }
  .glossary-route strong { margin-top: 0; }
  .glossary-route > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
  .glossary-no-results { padding: var(--s3); }
  .glossary-next .actions { gap: var(--s2); }
  .glossary-next .link-under { max-width: 100%; height: auto; min-height: var(--control-h); white-space: normal; }
}


/* Hero overview spacing */
.overview-grid {
  margin-top: var(--s4);
}


/* Journal index and long-form reading */
.journal-index {
  padding-bottom: var(--s6);
}
.journal-hero {
  padding-block: var(--s6) var(--s5);
}
.journal-hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.02em;
  font-synthesis: none;
}
.journal-hero .eyebrow {
  margin-bottom: var(--s3);
}
.journal-hero .section-intro {
  max-width: 600px;
  margin-top: var(--s3);
}
.journal-hero .journal-count {
  display: table;
  width: auto;
  margin: var(--s3) auto 0;
  background: var(--mist);
  color: var(--muted);
  line-height: 24px;
}
.journal-list-wrap {
  min-width: 0;
}
.journal-index .journal-grid {
  align-items: stretch;
}
.journal-post {
  align-items: flex-start;
  padding: var(--s4);
  background: var(--mist);
  color: var(--ink);
}
.journal-post:hover {
  background: var(--pine-wash);
  color: var(--ink);
}
.journal-post:focus-visible {
  outline-offset: 4px;
}
.journal-post .journal-post-tag {
  height: auto;
  min-height: 24px;
  padding-block: 0;
  background: var(--paper);
  color: var(--pine-deep);
  white-space: normal;
}
.journal-post .journal-post-title {
  max-width: 560px;
  margin-top: var(--s4);
  font-size: var(--code);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.journal-post .journal-post-description {
  max-width: 560px;
  margin-top: var(--s3);
  color: var(--ink-2);
}
.journal-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  margin-top: var(--s3);
  font-size: var(--small);
  color: var(--muted);
}
.journal-post .journal-post-meta time {
  margin: 0;
  color: var(--muted);
}
.journal-post .journal-post-action {
  margin-top: auto;
  padding-top: var(--s4);
  color: var(--ink);
}
.journal-arrow {
  transition: transform .2s;
}
.journal-post:hover .journal-arrow {
  transform: translate(2px, -2px);
}
.journal-noscript {
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--mist);
  color: var(--ink-2);
}
.journal-article {
  padding-bottom: var(--s5);
}
.journal-article .article-hero {
  padding-block: var(--s6) var(--s5);
}
.journal-article .breadcrumbs {
  margin-bottom: var(--s4);
}
.journal-article .article-hero h1 {
  max-width: 1128px;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.02em;
  font-synthesis: none;
}
.journal-article .article-hero .section-intro {
  max-width: 760px;
  margin-top: var(--s3);
}
.journal-article .article-meta {
  gap: var(--s2) var(--s3);
  margin-top: var(--s3);
}
.journal-article .article-meta .status-pill {
  margin: 0;
  height: auto;
  min-height: 24px;
  background: var(--pine-wash);
  color: var(--pine-deep);
  white-space: normal;
}
.journal-article .article-layout {
  grid-template-columns: minmax(0, 800px) 264px;
  gap: var(--s4);
  justify-content: start;
  overflow: visible;
}
.journal-article .verification-layout {
  grid-template-columns: minmax(0, 880px) 264px;
}
.journal-article .prose {
  width: 100%;
  max-width: 800px;
  color: var(--ink-2);
}
.journal-article .verification-prose {
  max-width: 880px;
}
.journal-article .prose h2 {
  margin-top: var(--s5);
  color: var(--ink);
  font-size: var(--addr);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.journal-article .prose h3 {
  color: var(--ink);
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1.5;
}
.journal-article .prose > h2:first-child {
  margin-top: 0;
}
.journal-article .prose strong {
  font-weight: 500;
  color: var(--ink);
}
.journal-article .prose p {
  font-weight: 400;
}
.journal-article .prose section + section {
  margin-top: var(--s5);
}
.journal-article .prose section > h2:first-child {
  margin-top: 0;
}
.journal-article .prose section > p,
.journal-article .prose section > ul,
.journal-article .prose section > ol {
  margin-top: var(--s3);
}
.journal-article .prose .table-scroll {
  margin-block: var(--s3) var(--s4);
}
.journal-article .prose .data-table {
  min-width: 600px;
}
.journal-article .prose .data-table th,
.journal-article .prose .data-table td {
  color: var(--ink-2);
  border-color: var(--line);
}
.journal-article .prose .data-table thead th {
  color: var(--ink);
}
.journal-article .article-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--s2));
  padding: var(--s3);
  background: var(--mist);
  color: var(--ink);
}
.journal-article .article-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  list-style: none;
  font-size: var(--body);
}
.journal-article .article-toc summary::-webkit-details-marker {
  display: none;
}
.journal-article .article-toc ol {
  list-style: decimal;
  padding-left: var(--s2);
  margin-top: var(--s3);
}
.journal-article .article-toc a {
  display: inline-block;
  color: var(--ink-2);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.journal-article .article-toc a:hover {
  color: var(--pine-deep);
  text-decoration: underline;
}
.journal-article .article-toc [data-post-count] {
  display: inline-flex;
  margin-top: var(--s2);
  background: var(--paper);
  color: var(--muted);
}
.journal-article .article-toc[open] summary .chev {
  transform: translateY(2px) rotate(225deg);
}
.journal-note {
  margin-block: var(--s3) var(--s4);
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.journal-article .journal-note h3 {
  margin: 0;
  color: var(--pine-deep);
}
.journal-note p {
  margin-top: var(--s2);
}
/* Writer tips are a 24px icon with no width, so the block SVG stretches to the column. */
.journal-article .prose .call-box {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s3);
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.journal-article .prose .call-box svg {
  flex: none;
  width: 22px;
  height: 22px;
  max-width: 22px;
  margin-top: 2px;
}
.journal-article .prose .call-box > span {
  min-width: 0;
}
.journal-article .article-cta {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--pine-deep);
  color: var(--pine-ink);
}
.journal-article .prose .article-cta h2 {
  margin: 0;
  color: var(--pine-ink);
  font-size: var(--addr);
  line-height: 1.4;
}
.journal-article .article-cta p {
  margin-top: var(--s3);
  color: var(--pine-muted);
}
.journal-article .article-cta .actions {
  margin-top: var(--s3);
}
.journal-article .prose .article-cta .btn-light {
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.journal-article .prose .article-cta .btn-light:hover {
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.journal-article .prose .article-cta .link-under {
  color: var(--pine-ink);
}
.journal-article .article-cta .btn,
.journal-article .recommend-float .btn {
  max-width: 100%;
  height: auto;
  min-height: var(--control-h);
  padding-block: var(--s1);
  white-space: normal;
  line-height: 1.35;
}
.journal-article .recommend-float {
  background: var(--mist);
  color: var(--ink);
}
.journal-article .recommend-media {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--s3);
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.journal-article .recommend-media svg {
  width: 96px;
  height: 64px;
}
.journal-article .recommend-content {
  padding: var(--s3);
}
.journal-article .recommend-content .btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.journal-article .recommend-content .btn-ink:hover {
  background: var(--pine-deep);
  color: var(--paper);
}
.journal-article .float-close {
  background: var(--paper);
  color: var(--ink);
}
.journal-article .float-close:hover {
  background: var(--ink);
  color: var(--paper);
}
.journal-article .float-close svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 860px) {
  .journal-index {
    padding-bottom: var(--s5);
  }
  .journal-hero {
    padding-block: var(--s5) var(--s4);
  }
  .journal-index .journal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .journal-post {
    padding: var(--s3);
  }
  .journal-post .journal-post-title {
    margin-top: var(--s3);
    font-size: var(--addr);
  }
  .journal-post .journal-post-action {
    margin-top: var(--s4);
    padding-top: 0;
  }
  .journal-article .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
  .journal-article .article-toc {
    position: static;
    grid-row: 1;
  }
  .journal-article .article-toc:not([open]) {
    padding-block: var(--s2);
  }
  .journal-article .article-cta {
    padding: var(--s3);
  }
  .journal-article .article-hero {
    padding-block: var(--s6) var(--s4);
  }
  .journal-article .recommend-float {
    max-height: calc(100dvh - var(--header-h) - var(--s4));
    overflow-y: auto;
  }
}
@media (max-width: 560px) {
  .journal-hero {
    padding-top: var(--s4);
  }
  .journal-hero h1,
  .journal-article .article-hero h1 {
    font-size: 40px;
    line-height: 1.22;
  }
  .journal-post-meta {
    align-items: flex-start;
  }
  .journal-article .prose h2 {
    font-size: 24px;
    line-height: 1.4;
  }
  .journal-article .prose .article-cta h2 {
    font-size: 24px;
  }
  .journal-article .article-cta .actions {
    align-items: flex-start;
    gap: var(--s2);
  }
  .journal-article .article-cta .link-under {
    height: auto;
    min-height: var(--control-h);
    line-height: 1.5;
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .journal-arrow {
    transition: none;
  }
  .journal-post:hover .journal-arrow {
    transform: none;
  }
}


/* Receipt and aftercare article */
.receipt-hero {
  padding-top: var(--s6);
  padding-bottom: var(--s5);
}
.receipt-hero h1 {
  max-width: 960px;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.02em;
  font-synthesis: none;
}
.receipt-deck {
  max-width: 760px;
  margin-top: var(--s3);
  font-size: var(--lead);
  color: var(--muted);
}
.receipt-meta {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border-radius: var(--pill);
  background: var(--mist);
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.5;
}
.receipt-layout {
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: var(--s5);
  padding-bottom: var(--s6);
}
.receipt-prose {
  width: 100%;
  max-width: 800px;
}
.receipt-prose .receipt-topic {
  margin-top: var(--s5);
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}
.receipt-prose .receipt-topic h2 {
  margin-top: 0;
  font-size: var(--addr);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.receipt-topic > p,
.receipt-topic > ul,
.receipt-topic > ol {
  margin-top: var(--s3);
}
.receipt-prose strong {
  font-weight: 500;
}
.receipt-prose li + li {
  margin-top: var(--s1);
}
.receipt-prose .receipt-timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--radius-panel);
  list-style: none;
  background: var(--mist);
  color: var(--ink);
  margin-bottom: var(--s4);
}
.receipt-prose .receipt-timeline li {
  min-width: 0;
  margin: 0;
}
.receipt-stop {
  display: inline-block;
  color: var(--pine-deep);
  font-weight: 500;
}
.receipt-timeline p {
  margin-top: var(--s1);
  font-size: var(--small);
  color: var(--ink-2);
}
.receipt-table {
  margin-bottom: var(--s4);
}
.receipt-table table {
  min-width: 600px;
}
.receipt-table caption {
  padding-bottom: var(--s2);
  text-align: left;
  font-size: var(--small);
  color: var(--muted);
}
.receipt-table th[scope="row"] {
  width: 24%;
  color: var(--ink);
}
.receipt-route {
  margin: var(--s3) 0 var(--s4);
  padding: var(--s3);
  border-radius: var(--radius-panel);
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.receipt-route > svg {
  width: 100%;
  max-height: 104px;
}
.receipt-route figcaption {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s2);
  text-align: center;
  font-size: var(--small);
}
.receipt-prose .receipt-checklist {
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-radius: var(--radius-card);
  background: var(--mist);
  color: var(--ink-2);
  margin-bottom: var(--s4);
}
.receipt-toc {
  z-index: 3;
}
.receipt-toc nav ol {
  list-style: decimal;
  padding-left: var(--s2);
  gap: var(--s1);
  line-height: 1.7;
}
.receipt-toc li {
  padding-left: var(--s1);
}
.receipt-toc li::marker {
  color: var(--muted);
}
.receipt-toc a:not(.status-pill):hover {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.receipt-toc .status-pill {
  margin-top: var(--s2);
}
.receipt-cta-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--s3);
  color: var(--pine-muted);
}
.receipt-prose .receipt-cta h2 {
  font-size: var(--addr);
  font-weight: 400;
  line-height: 1.4;
}
.receipt-cta p {
  margin-top: var(--s3);
}
.receipt-prose .receipt-cta .btn-light {
  background: var(--paper);
  color: var(--ink);
  border: 0;
}
.receipt-prose .receipt-cta .btn-light:hover {
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.receipt-prose .receipt-cta .link-under {
  color: var(--pine-ink);
}
.receipt-recommend {
  z-index: 40;
  width: min(304px, calc(100% - 32px));
}
.receipt-recommend-media {
  min-height: 0;
  padding: var(--s2) var(--s3);
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.receipt-recommend-media svg {
  width: 100%;
  height: 48px;
}
.receipt-recommend .recommend-content {
  padding: var(--s2) var(--s3) var(--s3);
}
.receipt-recommend .recommend-content h2 {
  padding-right: 0;
}
.receipt-recommend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s2);
}
.receipt-recommend .receipt-recommend-actions .btn {
  max-width: 100%;
  height: auto;
  min-height: 32px;
  margin-top: 0;
  padding: var(--s1) var(--s2);
  white-space: normal;
  font-size: var(--small);
  line-height: 1.35;
}
.receipt-recommend .float-close {
  position: absolute;
  top: var(--s1);
  right: var(--s1);
  background: var(--paper);
  color: var(--ink);
}
.receipt-recommend .float-close:hover {
  background: var(--ink);
  color: var(--paper);
}
@media (max-width: 1100px) {
  .receipt-layout {
    grid-template-columns: minmax(0, 1fr) 224px;
    gap: var(--s4);
  }
}
@media (max-width: 860px) {
  .receipt-hero {
    padding-top: var(--s6);
    padding-bottom: var(--s4);
  }
  .receipt-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    padding-bottom: var(--s5);
  }
  .receipt-toc {
    position: static;
    grid-row: 1;
  }
  .receipt-prose {
    max-width: none;
  }
}
@media (max-width: 560px) {
  .receipt-hero h1 {
    font-size: 40px;
    line-height: 1.22;
  }
  .receipt-meta {
    gap: var(--s1);
  }
  .receipt-prose .receipt-timeline {
    grid-template-columns: minmax(0, 1fr);
  }
  .receipt-cta .actions {
    gap: var(--s2);
  }
  .receipt-recommend-media {
    padding-block: var(--s1);
  }
  .receipt-recommend-media svg {
    height: 32px;
  }
  .receipt-recommend .recommend-content {
    padding: var(--s2);
  }
}


/* Verification article */
.verification-hero {
  padding-block: var(--s6) var(--s5);
}
.verification-hero h1 {
  max-width: 1128px;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.02em;
  font-synthesis: none;
}
.verification-deck {
  max-width: 720px;
  margin-top: var(--s3);
  color: var(--muted);
  font-size: var(--lead);
  line-height: 1.7;
}
.verification-meta {
  display: inline-flex;
  max-width: 100%;
  gap: var(--s1) var(--s3);
  margin-top: var(--s3);
  padding: var(--s1) var(--s2);
  border-radius: var(--pill);
  background: var(--mist);
  color: var(--ink-2);
  font-size: var(--small);
}
.verification-meta time {
  white-space: nowrap;
}
.verification-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s4);
  border-radius: var(--radius-panel);
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.verification-overview > div {
  min-width: 0;
}
.verification-overview .mono {
  font-size: var(--small);
}
.verification-overview p {
  margin-top: var(--s2);
  font-size: var(--lead);
  font-weight: 400;
}
.verification-overview small {
  display: block;
  margin-top: var(--s1);
  color: var(--ink-2);
  font-size: var(--small);
}
.verification-overview > svg {
  width: 64px;
  height: 24px;
}
.verification-layout {
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: var(--s5);
}
.verification-prose {
  width: 100%;
  max-width: 880px;
}
.verification-opening {
  color: var(--ink-2);
}
.verification-prose > section {
  margin-top: var(--s5);
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}
.verification-prose section > h2 {
  margin-top: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.verification-prose section > h3 {
  margin-top: var(--s4);
  font-size: var(--h3);
  font-weight: 500;
}
.verification-prose section > p,
.verification-prose section > ul,
.verification-prose section > blockquote {
  margin-top: var(--s3);
}
.verification-prose li + li {
  margin-top: var(--s1);
}
.verification-prose strong {
  font-weight: 500;
}
.verification-definitions {
  display: grid;
  gap: var(--s2);
  margin-block: var(--s3) var(--s4);
}
.verification-definitions > div {
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--mist);
  color: var(--ink);
}
.verification-definitions dt {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 500;
}
.verification-definitions dt .mono {
  color: var(--pine);
  font-size: var(--small);
  font-weight: 400;
}
.verification-definitions dd {
  margin: var(--s2) 0 0;
  color: var(--ink-2);
}
.verification-record-table {
  min-width: 600px;
}
.verification-record-table caption {
  padding-bottom: var(--s2);
  text-align: left;
  font-size: var(--small);
  color: var(--muted);
}
.verification-record-table tbody th {
  width: 24%;
  color: var(--ink);
}
.verification-record-table td {
  color: var(--ink-2);
}
.verification-table-scroll + p {
  margin-top: var(--s4);
}
.verification-failures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  margin-block: var(--s3) var(--s4);
}
.verification-failures > div {
  min-width: 0;
  padding: var(--s3);
  border-radius: var(--radius-card);
  background: var(--mist);
  color: var(--ink);
}
.verification-prose .verification-failures h3 {
  margin-top: 0;
  font-size: var(--h3);
  font-weight: 500;
}
.verification-failures p {
  margin-top: var(--s2);
  color: var(--ink-2);
}
.verification-toc {
  z-index: 2;
}
.verification-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  list-style: none;
}
.verification-toc summary::-webkit-details-marker {
  display: none;
}
.verification-toc[open] summary > .chev {
  transform: translateY(2px) rotate(225deg);
}
.verification-toc ol {
  list-style: decimal;
  padding-left: var(--s3);
  gap: var(--s1);
}
.verification-toc li {
  padding-left: 0;
}
.verification-toc li + li {
  margin-top: 0;
}
.verification-toc li::marker {
  color: var(--muted);
}
.verification-toc li a {
  display: block;
  padding-block: 4px;
  color: var(--ink-2);
}
.verification-toc li a:hover {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.verification-toc .verification-count {
  margin-top: var(--s2);
  background: var(--paper);
  color: var(--ink-2);
}
.verification-count:hover {
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.verification-cta {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}
.verification-cta-icon {
  width: 64px;
  height: 64px;
  color: var(--pine-muted);
}
.verification-prose .verification-cta h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.35;
}
.verification-cta p {
  margin-top: var(--s3);
}
.verification-prose .verification-cta .btn-light {
  border: 0;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.verification-prose .verification-cta .btn-light:hover {
  background: var(--pine-wash);
  color: var(--pine-deep);
}
.verification-prose .verification-cta .link-under {
  color: var(--pine-ink);
}
.verification-cta .actions > a {
  max-width: 100%;
  height: auto;
  min-height: var(--control-h);
  padding-block: var(--s1);
  white-space: normal;
  line-height: 1.35;
}
.verification-recommend {
  z-index: 40;
  width: min(304px, calc(100% - 32px));
}
.verification-recommend-media {
  display: grid;
  place-items: center;
  min-height: 80px;
  padding: var(--s1) var(--s2);
  background: var(--pine-wash);
  color: var(--pine);
}
.verification-recommend-media svg {
  width: 100%;
  height: 64px;
}
.verification-recommend .recommend-content {
  padding: var(--s3);
}
.verification-recommend-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  margin-top: var(--s3);
}
.verification-recommend .verification-recommend-actions .btn {
  margin-top: 0;
  padding-inline: var(--s2);
}
.verification-recommend-actions > a {
  max-width: 100%;
  height: auto;
  min-height: var(--control-h);
  padding-block: var(--s1);
  white-space: normal;
  font-size: var(--small);
  line-height: 1.35;
}
@media (max-width: 1100px) {
  .verification-layout {
    grid-template-columns: minmax(0, 1fr) 224px;
    gap: var(--s4);
  }
  .verification-overview {
    gap: var(--s2);
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr);
  }
  .verification-overview > svg {
    width: 40px;
  }
}
@media (max-width: 860px) {
  .verification-hero {
    padding-top: var(--s6);
    padding-bottom: var(--s4);
  }
  .verification-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
  .verification-toc {
    grid-row: 1;
    position: static;
  }
  .verification-prose {
    max-width: none;
  }
  .verification-overview {
    padding: var(--s3);
  }
}
@media (max-width: 560px) {
  .verification-hero {
    padding-top: var(--s6);
  }
  .verification-hero h1 {
    font-size: 40px;
    line-height: 1.22;
  }
  .verification-meta {
    border-radius: var(--radius-card);
    gap: var(--s1) var(--s2);
  }
  .verification-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    margin-top: var(--s4);
  }
  .verification-overview > svg {
    display: none;
  }
  .verification-overview > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--s1) var(--s2);
    align-items: baseline;
  }
  .verification-overview p {
    margin: 0;
    font-size: var(--body);
  }
  .verification-overview small {
    grid-column: 2;
    margin-top: 0;
  }
  .verification-prose section > h2 {
    font-size: 30px;
  }
  .verification-failures {
    grid-template-columns: minmax(0, 1fr);
  }
  .verification-cta {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s3);
  }
  .verification-recommend {
    width: min(304px, calc(100% - 32px));
  }
  .verification-recommend-media {
    min-height: 48px;
    padding-block: 0;
  }
  .verification-recommend-media svg {
    height: 48px;
  }
  .verification-recommend .recommend-content {
    padding: var(--s2);
  }
  .verification-recommend-actions {
    margin-top: var(--s2);
  }
}


/* Article roots and timeline alignment */
.receipt-article {
  min-width: 0;
}
.verification-article {
  min-width: 0;
}
.timeline article {
  align-items: start;
}
.timeline article h2,
.timeline article h3 {
  margin-top: 0;
}