/* Hallmark stamp (2026-11-05, v2.0.0): kept in docs/design/03, "Hallmark stamp". */
/* Hallmark · waive 38ii · the hero head only, once, on the home page · the owner circles "one place." by hand in the home hero as Tend's signature */
/* Hallmark · waive 38iii · the hero head only, once, on the home page · the leaf pen marks the same home hero phrase the owner kept */
/* Hallmark · waive 7b · --bg-surface comes from the synced tend-design tokens · Tend's card and register surfaces are the design system's white */

/* tend.net.au: the site layer over tokens.css (synced from the tend-design skill). Design: docs/design/01–04.
   Sections: 1 tokens · 2 base · 3 layout · 4 header and navs · 5 type patterns · 6 components · 7 page pieces
   · 8 utilities. Drawn UI cards: ui.css. The house rules (AA buttons, no text under stone-600 bar the two-tone
   continuation at 24 px+, one ink field per page, mark colours, no red, motion only under no-preference) are
   CLAUDE.md rules 4, 6 and 12 and design 02. */

/* 1. tokens --------------------------------------------------------------- */
:root {
  --step-h1: clamp(2.5rem, 1.2rem + 4.4vw, 4.75rem);      /* 40 → 76 */
  --step-h2: clamp(1.625rem, 1.33rem + 1.1vw, 2.125rem);  /* 26 → 34 */
  --step-h3: 1.1875rem;                                    /* 19 */
  --step-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.25rem); /* 18 → 20 */
  --step-body: 1.0625rem;                                  /* 17 */
  --step-small: 0.9375rem;                                 /* 15 */
  --step-eyebrow: 0.8125rem;                               /* 13 */
  --muted: var(--stone-600);
  --rule: rgba(20, 26, 23, 0.10);
  --rule-faint: rgba(20, 26, 23, 0.06);
  --forest: var(--leaf-900);                      /* ink-forest: the one dark field */
  --forest-rule: rgba(255, 255, 255, 0.14);
  --paper-rule: rgba(36, 106, 65, 0.09);          /* register ruling, leaf-tinted */
  --paper-line: var(--leaf-300);                  /* the register's double margin line */
  --space-24: 96px; /* the section step (design 08); tokens.css is imported */
  --sec: var(--space-12);
  --wrap: 1180px;
  --header-h: 72px;
  /* Type and marks on the ink-forest field and the leaf buttons: a paper white
     tinted toward the leaf, never a pure #fff. */
  --on-ink: #FAFCFA;
  --on-ink-line: rgba(250, 252, 250, 0.28);
  --focus-on-ink: var(--leaf-300);                /* leaf-700's ring vanishes on the forest */
  --scrim: rgba(20, 26, 23, 0.6);
  --mask-solid: #000;                             /* an alpha mask, not a colour anyone sees */
}

/* 2. base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--leaf-700); text-underline-offset: 0.18em; }
a:hover { color: var(--leaf-800); }
:focus-visible { outline: 3px solid var(--leaf-700); outline-offset: 3px; border-radius: 2px; }
:is(.sec-ink, .plan-ink) :focus-visible { outline-color: var(--focus-on-ink); }
h1, h2, h3 { color: var(--ink); text-wrap: balance; margin: 0; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-h2); line-height: 1.18; letter-spacing: -0.015em; }
h3 { font-size: var(--step-h3); font-weight: 600; line-height: 1.3; }
p, ul, ol { margin: 0 0 var(--space-4); }
p { max-width: 30em; text-wrap: pretty; }
[id] { scroll-margin-top: var(--space-16); }
@media (min-width: 960px) { [id] { scroll-margin-top: calc(var(--header-h) + var(--space-16)); } }

/* 3. layout --------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 720px) { .wrap { padding-inline: var(--space-8); } }

.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--on-ink); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: 50; }
.skip:focus { top: 8px; color: var(--on-ink); }

/* The margin rule: one hairline down the page at the container's left edge,
   like the margin of a register. Section numbers hang from it. */
main { position: relative; }
@media (min-width: 1100px) {
  main::before { content: ''; position: absolute; top: 0; bottom: 0; left: max(12px, calc((100% - var(--wrap)) / 2 + 12px)); border-left: 1px solid var(--rule); pointer-events: none; z-index: 1; }
}

.sec { padding-block: var(--sec); }
.sec-tight { padding-block: var(--space-8); }
@media (min-width: 720px) { :root { --sec: var(--space-16); } .sec-tight { padding-block: var(--space-12); } }
@media (min-width: 1040px) { :root { --sec: var(--space-24); } .sec-tight { padding-block: var(--space-16); } }
/* Two sections on the same ground share one gap: the first's foot (design 08, rule 4). */
:is(.sec, .sec-tight):not(.sec-mist, .sec-ink) + :is(.sec, .sec-tight):not(.sec-mist, .sec-ink) { padding-top: 0; }
.sec-mist { background: var(--mist); border-block: 1px solid var(--rule-faint); }
.sec-ink { background: var(--forest); color: var(--stone-200); }
.sec-ink a:not(.btn) { color: var(--leaf-300); }
.sec-ink a:not(.btn):hover { color: var(--on-ink); }

/* The section frame: a two-tone head (with its buttons) on the left, a short
   proof paragraph on the right, then the content. */
.sec-head { display: grid; gap: var(--space-5) 56px; margin-bottom: clamp(28px, 4vw, var(--space-12)); }
@media (min-width: 960px) { .sec-head { grid-template-columns: 7fr 5fr; align-items: end; } }
.sec-head .aside { color: var(--muted); margin: 0; }
.sec-ink .sec-head .aside { color: var(--stone-200); }
/* A head with nothing beside it runs the full measure. */
@media (min-width: 960px) { .sec-head:not(:has(> :nth-child(2))) { grid-template-columns: 1fr; } }
.sec-head .actions { margin-top: var(--space-5); }

/* 4. header and navs ------------------------------------------------------ */
/* flow-root keeps the row's margin inside the header, so it's 73 px from the top of the page and, stuck, meets the
   section bar (owner, 2026-11-08: the margin collapsed out, and the stuck header stopped 3 px short of the bar). */
.site-header { display: flow-root; position: relative; z-index: 30; background: var(--bg-page); border-bottom: 1px solid var(--rule-faint); }
@media (min-width: 960px) {
  .site-header { position: sticky; top: 0; }
  .site-header.is-floating { background: transparent; border-bottom-color: transparent; }
  .site-header.is-floating .header-row { background: var(--bg-surface); box-shadow: var(--shadow-md); border-color: var(--rule-faint); }
}
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: 64px; margin-block: var(--space-1); border: 1px solid transparent; border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: no-preference) { .header-row { transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; } }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); }
.brand .mark { position: relative; top: -3px; } /* centred on the capitals, as the brand lockup is (owner, 2026-11-06) */
.wordmark { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; color: var(--leaf-700); }
.primary-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-block; padding: var(--space-2) 0; color: var(--stone-700); text-decoration: none; font-size: var(--step-small); font-weight: 500; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--leaf-500); }
.nav-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }

/* The toggle ships hidden and display:none; the nav collapses only under .nav-js (site.js). Just the
   three lines (owner, 2026-11-06), "Menu" kept for screen readers, a 44 px target. */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: calc(-1 * var(--space-3)); padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
@media (hover: hover) { .nav-toggle:hover { background: var(--leaf-50); } }
.nav-toggle-bars { position: relative; display: block; width: 18px; height: 2px; background: currentColor; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: transform .18s ease, background-color .18s ease; }
}
/* The phone menu fills the screen under a header row that never moves, unrolling from the header's
   line (73 px, its height); the page holds still. Closed, it's hidden, not removed, so it can move. */
@media (max-width: 959.98px) {
  .nav-js .nav-toggle, .nav-early .nav-toggle { display: inline-flex; }
  .nav-early #primary-nav { display: none; }
  .site-header { border-bottom-color: transparent; }
  .nav-js .brand, .nav-js .nav-toggle { position: relative; z-index: 2; }
  .site-header.nav-js #primary-nav { display: flex; position: fixed; inset: 0; z-index: 1; flex-flow: column; align-items: stretch; overflow-y: auto; overscroll-behavior: contain; padding: 73px var(--space-4) var(--space-6); background: var(--bg-page); visibility: hidden; clip-path: inset(0 0 calc(100% - 73px)); }
  .nav-js .nav-links { flex-flow: column; padding-top: var(--space-2); border-top: 1px solid var(--rule-faint); }
  .nav-js .nav-links a { padding: var(--space-3) 0; font-size: var(--step-body); }
  .nav-js .nav-actions { flex-direction: column; margin-top: auto; padding-top: var(--space-6); }
  .site-header.nav-open #primary-nav { visibility: visible; clip-path: inset(0); }
  html:has(.nav-open) { overflow: hidden; scrollbar-gutter: stable; }
}
@media (min-width: 960px) { .nav-home { display: none; } }
@media (max-width: 959.98px) and (prefers-reduced-motion: no-preference) {
  .site-header.nav-js #primary-nav { transition: clip-path .2s cubic-bezier(.4, 0, 1, 1), visibility 0s .2s; }
  .site-header.nav-open #primary-nav { transition: clip-path .4s cubic-bezier(.2, .8, .2, 1); }
  .nav-js li, .nav-js .nav-actions { opacity: 0; transform: translateY(-8px); transition: opacity .1s, transform 0s .1s; }
  .nav-open li, .nav-open .nav-actions { opacity: 1; transform: none; transition: opacity .26s .05s, transform .34s cubic-bezier(.2, .8, .2, 1) .05s; }
  .nav-open li:nth-child(2) { transition-delay: .08s; }
  .nav-open li:nth-child(3) { transition-delay: .11s; }
  .nav-open li:nth-child(4) { transition-delay: .14s; }
  .nav-open li:nth-child(5) { transition-delay: .17s; }
  .nav-open li:nth-child(6) { transition-delay: .2s; }
  .nav-open .nav-actions { transition-delay: .26s; }
}
/* A menu link leaves the menu up until the next page can paint, then it fades off. Only an open menu
   is captured, so other navigations swap as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  :root { view-transition-name: none; }
  :root:has(.nav-open) { view-transition-name: root; }
  ::view-transition-old(root) { animation-duration: .2s; }
}

/* The on-page nav: sticky under the header, plain links, works with JS off. */
.localnav { position: sticky; top: 0; z-index: 20; background: var(--bg-page); border-bottom: 1px solid var(--rule-faint); }
@media (min-width: 960px) { .localnav { top: var(--header-h); } }
.localnav .wrap { display: flex; align-items: center; gap: var(--space-1) var(--space-6); }
.localnav-title { margin: 0; font-weight: 600; font-size: var(--step-small); color: var(--ink); white-space: nowrap; }
.localnav ul { display: flex; gap: 0 var(--space-5); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.localnav a { display: inline-block; padding: var(--space-3) 0; white-space: nowrap; color: var(--muted); text-decoration: none; font-size: var(--step-small); border-bottom: 2px solid transparent; }
.localnav a:hover { color: var(--ink); border-bottom-color: var(--leaf-300); }
@media (max-width: 719.98px) { .localnav-title { display: none; } }
/* On phones the links scroll sideways: fade the right edge so it shows. */
@media (max-width: 959.98px) { .localnav ul { padding-right: var(--space-8); -webkit-mask-image: linear-gradient(to right, var(--mask-solid) calc(100% - 40px), transparent); mask-image: linear-gradient(to right, var(--mask-solid) calc(100% - 40px), transparent); } }

/* 5. type patterns -------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 380; font-size: var(--step-h1); line-height: 1.02; letter-spacing: -0.028em; color: var(--ink); margin: 0 0 var(--space-6); }
.lead { font-size: var(--step-lead); line-height: 1.5; color: var(--stone-700); max-width: 38em; margin: 0 0 28px; }
.small { font-size: var(--step-small); color: var(--muted); }

/* The two-tone sentence (design 01 §A2.2): a dark statement and a muted
   continuation, one paragraph, one size. The h2 stays the statement alone. */
.tt { font-family: var(--font-display); font-size: var(--step-h2); line-height: 1.2; letter-spacing: -0.015em; max-width: 24em; margin: 0; }
.tt > h2, .tt > h3, .tt > p { display: inline; font: inherit; letter-spacing: inherit; margin: 0; }
.tt > h2, .tt > h3 { color: var(--ink); }
.tt > p { color: var(--stone-500); }
.sec-ink .tt > h2, .sec-ink .tt > h3, .sec-ink h2, .sec-ink h3 { color: var(--on-ink); }
.sec-ink .feature-n { color: var(--leaf-200); }
.sec-ink .feature p { color: var(--stone-200); }
.sec-ink > .wrap > .feature { padding-block: 0; }

.sec-ink .tt > p { color: var(--leaf-200); }

/* Bold run-ins: "Statement. Detail." Lists or single paragraphs. */
.runins { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6) var(--space-10); }
@media (min-width: 720px) { .runins { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .runins-3 { grid-template-columns: repeat(3, 1fr); } }
.runins > li { border-top: 1px solid var(--rule); padding-top: var(--space-4); color: var(--muted); }
.runins > li > :last-child { margin-bottom: 0; }
.runins strong, .runin strong { color: var(--ink); font-weight: 600; }
.runins + .small, .ticks + .small { margin-top: var(--space-6); }
.sec-ink .runins > li { border-top-color: var(--forest-rule); color: var(--stone-200); }
.sec-ink .runins strong { color: var(--on-ink); }

/* Links that lead somewhere: leaf, a quiet underline that firms on hover
   (no glued chevron). */
.more { display: inline-flex; align-items: center; min-height: 24px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--leaf-300); text-underline-offset: 0.22em; }
.more:hover { text-decoration-color: currentColor; }

/* 6. components ----------------------------------------------------------- */
/* buttons: 10px radius (brand), never pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-5); border-radius: 10px; font: 500 1rem/1.2 var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--leaf-700); color: var(--on-ink); }
.btn-primary:hover { background: var(--leaf-800); color: var(--on-ink); }
.btn-quiet { color: var(--leaf-700); border-color: var(--border-default); background: var(--bg-surface); }
.btn-quiet:hover { border-color: var(--leaf-700); color: var(--leaf-800); }
.btn-on-ink { color: var(--on-ink); border-color: var(--on-ink-line); background: transparent; }
.btn-on-ink:hover { border-color: var(--on-ink); color: var(--on-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: 0; }
@media (max-width: 479.98px) { .actions .btn { flex: 1 1 100%; } }

/* The ruled stage (design 01 §B2): register paper behind every drawn card. */
.stage { position: relative; display: grid; place-items: center; background-color: var(--leaf-50); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--paper-rule) 27px, var(--paper-rule) 28px); border: 1px solid var(--leaf-100); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-3) var(--space-5) var(--space-8); overflow: hidden; }
.stage::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--space-3); width: 5px; border-left: 1px solid var(--paper-line); border-right: 1px solid var(--paper-line); }
@media (min-width: 720px) { .stage { padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12); } .stage::before { left: var(--space-5); } }
@media (min-width: 960px) { .stage { padding: var(--space-10) var(--space-10) var(--space-10) var(--space-16); } .stage::before { left: var(--space-8); } }
.stage > * { position: relative; width: 100%; }
.stage { container: ui / inline-size; }

/* A figure with a drawn card: the stage, the caption, the real-screen link. */
.figure-ui { margin: 0; display: grid; gap: var(--space-3); }
.figure-ui figcaption { font-size: var(--step-small); color: var(--muted); max-width: 46em; }
.real-screen { font-size: var(--step-small); }
.screen-dialog { width: min(1120px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: var(--space-4); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--bg-surface); }
.screen-dialog::backdrop { background: var(--scrim); }
.screen-dialog img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--rule); }
.screen-close { float: right; margin: 0 0 var(--space-3) var(--space-3); }
.screen-caption { font-size: var(--step-small); color: var(--muted); margin: var(--space-3) 0 0; }
/* A film in place (film.js): the same dialog, with the video. */
.film-dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--ink); }

/* Honest numbers (design 01 §B2): verified claims set as figures. */

.sec-ink .numbers { margin-block: var(--space-2) var(--space-10); }
@media (min-width: 960px) { .sec-ink .numbers { margin-block: var(--space-2) var(--space-16); } }
.sec-ink .numbers > li { border-top-color: var(--forest-rule); }
.sec-ink .num { color: var(--on-ink); font-weight: 340; font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem); }
.sec-ink .num-label { color: var(--stone-200); }


.bcard-head .more { margin-top: var(--space-2); }

/* Ticked lists: a leaf tick means done or included. */

.included { display: grid; gap: var(--space-6) var(--space-10); }
@media (min-width: 720px) { .included { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .included { grid-template-columns: repeat(4, 1fr); } }
.included h3 { margin-bottom: 10px; font-size: 1rem; }

/* The limits block: the honesty position, set apart. */
.limits { border-left: 3px solid var(--leaf-700); padding: var(--space-1) 0 var(--space-1) var(--space-6); max-width: 46em; }
.limits p { font-size: var(--step-lead); line-height: 1.5; color: var(--stone-700); }
.limits p:last-child { margin-bottom: 0; }

/* Content gaps: visible on purpose, gold because a gap is a question. */
.gap { display: block; border: 1px dashed var(--marigold-500); background: var(--marigold-50); color: var(--marigold-700); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--step-small); margin: 0 0 var(--space-4); }
span.gap { display: inline; padding: 2px var(--space-2); margin: 0; }

/* The quote slot. Empty until the register holds a named, written,
   permissioned quote (C13); see design 01 §B3. */
.quote { margin: 0; max-width: 40em; }
.quote p { font-family: var(--font-display); font-size: var(--step-h2); line-height: 1.25; color: var(--ink); }
.quote figcaption { color: var(--muted); }

/* Closing call to action. */
.cta { position: relative; display: grid; gap: var(--space-6); background-color: var(--leaf-50); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--paper-rule) 27px, var(--paper-rule) 28px); border: 1px solid var(--leaf-200); color: var(--stone-700); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-10); overflow: hidden; }
.cta::before { content: ''; position: absolute; top: 0; bottom: 0; left: var(--space-3); width: 5px; border-left: 1px solid var(--paper-line); border-right: 1px solid var(--paper-line); }
@media (min-width: 720px) { .cta { gap: var(--space-8); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12); } .cta::before { left: var(--space-5); } }
@media (min-width: 960px) { .cta { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--space-8) var(--space-12); padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16); } .cta::before { left: var(--space-8); } }
.cta .tt { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); }
.cta .actions { margin-top: var(--space-6); }
.cta .actions + .cta-links { margin-top: var(--space-8); }
.cta-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cta-links li { border-top: 1px solid var(--rule); padding-top: var(--space-3); }
.cta-links strong { display: block; color: var(--ink); font-weight: 600; }
/* In the CTA the card sits straight on the CTA's own register paper. */
.cta .stage { background: none; border: 0; padding: 0; }
.cta .stage::before { display: none; }

/* Film band. */
/* The film band (design 08): media-led, the poster two thirds and the link one; padding and gap on the scale,
   the gap never wider than the padding (internal ≤ external). */
.band { display: grid; gap: var(--space-4); align-items: center; background: var(--mist); border: 1px solid var(--rule-faint); border-radius: var(--radius-xl); padding: var(--space-4); }
@media (min-width: 720px) { .band { gap: var(--space-6); padding: var(--space-6); } }
@media (min-width: 960px) { .band { grid-template-columns: 2fr 1fr; } }
.band img { border-radius: var(--radius-md); border: 1px solid var(--rule); }
/* The band's poster plays the film (film.js), or goes to /watch/ with JS off; the mark says so. */
.band-play { position: relative; display: block; border-radius: var(--radius-md); }
.band-play .play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: var(--leaf-700); box-shadow: var(--shadow-md); }
.band-play .play::before { content: ''; position: absolute; left: 26px; top: 21px; border-left: 18px solid var(--on-ink); border-block: 11px solid transparent; }
.band-play:hover .play { background: var(--leaf-800); }
.band .tt { font-size: var(--step-lead); }
.band .tt a { display: inline-flex; align-items: center; min-height: 24px; } /* rule 6: a standalone link is 24 px tall */

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 0.98rem; background: var(--bg-surface); }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
.table thead th { font-size: var(--step-small); color: var(--stone-700); font-weight: 600; background: var(--mist); }
.table td.ref { white-space: nowrap; }

/* 7. page pieces ---------------------------------------------------------- */
.hero { display: grid; gap: var(--space-10); padding-block: clamp(var(--space-8), 6vw, 88px) clamp(var(--space-8), 6vw, 72px); align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: 7fr 5fr; gap: var(--space-12); } }
/* The hero h1 is sized to its column. */
.hero > div:first-child { container-type: inline-size; }
.hero .display { font-size: min(var(--step-h1), 10.9cqi); text-wrap: balance; }
/* The longer headline (owner, 2026-11-06) sits on three lines from 960 px, not five. */
@media (min-width: 960px) { .hero .display { font-size: min(var(--step-h1), 9cqi); } }
/* The hero's stat line is the countdown alone, without "What falls due" (phones, owner after Stripe; every width
   since 2026-11-08). Phones: stat line, headline in 3 lines, buttons, content. */
.hero .ammp .more { display: none; }
@media (max-width: 599.98px) {
  .hero .display { font-size: min(2.25rem, 10cqi); } /* three lines: upright "one place." is wider than the italic was */
  .hero .actions, .page-head .actions { margin-top: calc(var(--space-6) + var(--space-12)); }
}
@keyframes tf-failsafe { to { opacity: 1; } }
.ammp { display: inline-flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; font-size: var(--step-small); color: var(--muted); margin: 0 0 var(--space-5); }
.ammp strong { color: var(--ink); font-weight: 600; }
.ammp time { color: var(--marigold-700); font-weight: 500; font-variant-numeric: tabular-nums; }

.page-head { padding-block: clamp(var(--space-10), 7vw, 88px) clamp(var(--space-6), 4vw, var(--space-12)); }
/* Phones: the page starts close beneath the header (owner, 2026-11-06). */
@media (max-width: 959.98px) { .hero, .page-head { padding-top: calc(var(--space-12) + var(--space-6)); } } /* every head as the home's (owner, 2026-11-07) */

/* Feature rows: the question, the words, then the drawn card. */
.feature { display: grid; gap: var(--space-6); padding-block: var(--space-10); border-top: 1px solid var(--rule); }
.feature:first-of-type { border-top: 0; }
@media (min-width: 960px) {
  .feature { grid-template-columns: 5fr 7fr; gap: var(--space-12); align-items: center; padding-block: var(--space-16); }
  .feature-solo { grid-template-columns: 7fr 5fr; }
  .feature-solo > .runins:last-child { grid-template-columns: 1fr; gap: var(--space-5); }
}

.feature h2 { margin-bottom: var(--space-4); }
.feature p { color: var(--stone-700); }
.feature .figure-ui p.vh { color: inherit; }

/* Homes and Land (design 03 B10, after Stripe's Payment Links hero): the words on the left, the story on the
   right, both on the hero's own ground, with the sweep beneath. Phones stack them. */

.hero-story .display { font-size: min(var(--step-h1), 11cqi); }

.hold { padding-block: clamp(56px, 12vw, 140px); }
.prose { max-width: 46em; }
.prose h2 { font-size: 1.5rem; margin: 36px 0 var(--space-3); }

/* footer */
.site-footer { border-top: 1px solid var(--rule); background: var(--mist); padding-block: var(--space-12); font-size: var(--step-small); color: var(--stone-700); position: relative; z-index: 2; }
.site-footer p { max-width: 62em; margin: 0 0 var(--space-4); }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: 0 0 var(--space-6); margin: 0 0 var(--space-6); border-bottom: 1px solid var(--rule); }
/* Targets (design 08, rule 6): 24 px at least, and 44 px rows on phones. */
.footer-nav a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 719.98px) { .footer-nav ul { row-gap: 0; } .footer-nav a { min-height: 44px; } }
.acknowledgement { color: var(--ink); }

/* 8. utilities ------------------------------------------------------------ */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* plain surface (contact) */
.card { background: var(--bg-surface); border: 1px solid var(--rule); border-radius: var(--radius-xl); padding: var(--space-4); }
@media (min-width: 720px) { .card { padding: var(--space-6); } }
.card h2 { font-size: 1.5rem; margin-bottom: var(--space-3); }
.card ul { padding-left: 1.1em; }

/* the home page's price figure */

.nowrap { white-space: nowrap; }

/* Motion controls (design 03 B; rule 4): they ship hidden; motion.js reveals them. */
.story-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-2) var(--space-3); border-radius: 10px; border: 1px solid var(--rule); background: var(--bg-surface); color: var(--stone-700); font: 500 0.875rem/1.2 var(--font-body); cursor: pointer; }
.story-btn[hidden] { display: none; }
.story-btn:hover { border-color: var(--leaf-700); color: var(--leaf-800); }
.story-btn svg { width: 14px; height: 14px; fill: currentColor; }
.story-btn .i-pause, .story-btn[data-state="playing"] .i-play { display: none; }
.story-btn[data-state="playing"] .i-pause { display: block; }
.motion-ctl { display: flex; justify-content: flex-end; }
.motion-ctl .story-btn { min-height: 32px; padding: var(--space-1) var(--space-2); color: var(--stone-600); background: transparent; border-color: transparent; }
.motion-ctl .story-btn:hover { border-color: var(--rule); }

/* The ambient register light (design 03 B1, B6, B9). The washes are set by contrast: where both overlap,
   marigold-700 text keeps 4.59:1. Moves only under .motion-ok and no-preference; no gold or leaf marks (rule 6). */
.ambient-host { position: relative; isolation: isolate; }
.ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background-color: var(--paper); }
/* A paper fade covers the washes (a mask over them cost Land 2.3 s, design 06). */
.ambient-fade { position: absolute; inset: 0; background: linear-gradient(var(--paper), transparent 14%, transparent 72%, var(--paper)); }
/* The ruling is the title's paper (owner, 2026-11-07): drawn from the title's own box in its own em, so a rule
   runs on every line's baseline at any size. The title's line is 1.02em and its baseline 0.73em down (Newsreader
   display, measured in Chromium). It spans the screen (--to-edge: the title's distance from the left edge, in
   .wrap), fades in over the 2 lines above the title and out over the last 2 below, and the host clips it. Only this still layer
   is masked. */
.ambient-host { overflow: clip; }
.ambient-host h1 { position: relative; --to-edge: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--space-4)); }
@media (min-width: 720px) { .ambient-host h1 { --to-edge: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--space-8)); } }
.ambient-host h1::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -3.06em; bottom: -4.08em; left: calc(-1 * var(--to-edge)); width: 100vw;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(.73em - 1px), var(--paper-rule) 0 .73em, transparent 0 1.02em);
  -webkit-mask: linear-gradient(to right, #000 34%, transparent 66%) 0 0 / 250% 100% no-repeat, linear-gradient(transparent, #000 2.04em, #000 calc(100% - 2.04em), transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, #000 34%, transparent 66%) 0 0 / 250% 100% no-repeat, linear-gradient(transparent, #000 2.04em, #000 calc(100% - 2.04em), transparent);
  mask-composite: intersect;
}
.ambient::before, .ambient::after { content: ''; position: absolute; border-radius: 50%; mix-blend-mode: multiply; }
.ambient::before { width: 120vw; height: 54vh; left: -10vw; top: -12vh; background: radial-gradient(closest-side, var(--leaf-200), transparent); opacity: 0.6; }
.ambient::after { width: 58vw; height: 58vw; max-height: 70vh; right: -14vw; top: 24%; background: radial-gradient(closest-side, var(--leaf-100), transparent); opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ok .ambient-host h1::before { animation: ambient-in 2.6s cubic-bezier(.4, .1, .3, 1) both; }
  .motion-ok .ambient-sweep { animation: ambient-sweep 2.8s cubic-bezier(.4, .1, .3, 1) both; }
  .motion-ok .ambient::before { animation: ambient-band 16s ease-in-out infinite alternate; }
  .motion-ok .ambient::after { animation: ambient-wash 20s ease-in-out infinite alternate; }
  .motion-paused .ambient::before, .motion-paused .ambient::after, .ambient.idle::before, .ambient.idle::after { animation-play-state: paused; }
}
@keyframes ambient-band { from { transform: translate3d(-6vw, 0, 0) scale(1); } to { transform: translate3d(8vw, 62vh, 0) scale(1.15); } }
@keyframes ambient-wash { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-46vw, -20vh, 0); } }
/* on arrival the ruling draws in from the margin, once */
@keyframes ambient-in { from { -webkit-mask-position: 100% 0, 0 0; mask-position: 100% 0, 0 0; } }
@keyframes ambient-sweep { from { transform: translate3d(-70vw, 0, 0); } }

/* The sweep (design 03 B9): a pale light crosses once, on arrival, behind a soft-edged reveal. */
.ambient-sweep { position: absolute; top: -10%; bottom: -10%; left: 0; width: 70vw; background: radial-gradient(closest-side, var(--leaf-100), transparent); opacity: 0.7; mix-blend-mode: multiply; transform: translate3d(110vw, 0, 0); }

/* The live AM&MP countdown (design 03 B6): tabular digits; a changed digit rolls up. */
.ammp-clock { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Nothing moves when the clock arrives (Lighthouse CLS): it takes the place of "327 days to go." on the same line,
   and a link after it (the AMF page's "Your pace to it") always starts its own line, a zero-height break. */
.ammp::before { content: ''; flex-basis: 100%; order: 1; }
.ammp .more { order: 2; }
@media (max-width: 599.98px) { .ammp { font-size: .875rem; line-height: 1.375rem; margin-bottom: var(--space-4); } }

.ammp-clock b { font-weight: 600; }
/* DM Sans has no tabular figures, so each digit gets a box one '0' wide: the clock never changes width as
   it ticks, and the line never rewraps (Lighthouse: up to 1.0 of layout shift on a phone). */
.ammp-clock i { display: inline-block; width: 1ch; text-align: center; font-style: normal; }
@media (prefers-reduced-motion: no-preference) { .motion-ok .ammp-clock i.roll { animation: ammp-roll .32s cubic-bezier(.2, .7, .3, 1); } }
@keyframes ammp-roll { from { transform: translateY(.45em); opacity: 0; } }

/* The chapters as an accordion (design 03 B7, B12): only under .steps-js, which steps.js adds. Rows read as
   controls: numbered, compact, in body type, with a hover wash; the open one is a leaf-50 card ending in Next. */
.steps-js { padding-block: var(--space-8); }
@media (min-width: 960px) { .steps-js { padding-block: var(--space-12); } }
.steps-js > .step.feature { display: block; padding: 0; border: 0; border-radius: var(--radius-lg); }

.steps-js > .step.is-open { background: var(--leaf-50); box-shadow: inset 0 0 0 1px var(--leaf-100); }

.step-toggle { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; width: 100%; min-height: 56px; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-lg); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.step-toggle:hover { background: var(--mist); }
.step-toggle[aria-disabled="true"] { background: none; cursor: default; }
.step-toggle .feature-n { display: grid; place-items: center; width: 28px; height: 28px; margin: 0; border: 1px solid var(--stone-300); border-radius: 50%; color: var(--stone-700); font: 600 0.8125rem/1 var(--font-body); }
.is-open .step-toggle .feature-n { background: var(--leaf-700); border-color: var(--leaf-700); color: var(--on-ink); }
@media (min-width: 1100px) { .step-toggle .feature-n::before { left: -35px; top: 50%; width: 34px; } .is-open .step-toggle .feature-n::before { border-top: 2px solid var(--leaf-700); } }
.step-toggle svg { width: 18px; height: 18px; fill: none; stroke: var(--stone-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step-toggle:hover svg { stroke: var(--leaf-800); }
.is-open .step-toggle svg { transform: rotate(180deg); }
.step-panel { padding: 0 var(--space-4) var(--space-5) calc(var(--space-4) + 28px + var(--space-3)); }
.step-panel > :last-child { margin-bottom: 0; }
.step-next { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; margin-top: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--leaf-300); border-radius: 10px; background: var(--bg-surface); color: var(--leaf-800); font: 600 var(--step-small)/1.2 var(--font-body); cursor: pointer; }
.step-next:hover { border-color: var(--leaf-600); }
.step-next svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.steps-show { display: none; }
@media (min-width: 960px) {
  .steps-js { display: grid; grid-template-columns: 5fr 7fr; gap: 0 var(--space-12); align-items: start; }
  .steps-js > :not(.steps-show) { grid-column: 1; }
  /* One frame whichever step is open (steps.js sets --open-h): the open step fills the column, its Next sits at
     its foot, and the card's stage stretches to the column's height. */
  .steps-js > .step.is-open { position: relative; min-height: var(--open-h, auto); }
  .steps-js .step:not(:last-child) .step-panel { padding-bottom: calc(var(--space-5) + 40px + var(--space-4)); }
  .steps-js .step-next { position: absolute; left: calc(var(--space-4) + 28px + var(--space-3)); bottom: var(--space-5); margin: 0; }
  .steps-show { display: grid; grid-column: 2; grid-row: 1 / span 8; align-self: stretch; }
  .steps-show > figure { grid-area: 1 / 1; grid-template-rows: 1fr auto; }
  .steps-js .steps-show > figure:not(.is-shown) { visibility: hidden; }
}
@media (max-width: 599.98px) { .step-panel { padding-left: var(--space-4); } }
@media (max-width: 959.98px) { .step-panel > .figure-ui { margin-top: var(--space-6); } }
/* On desktop only the card moves in: its paper (the stage) is the same for every chapter, so it swaps in the same
   frame and stays put (owner, 2026-11-08: fading the whole figure flashed the page's white through it). */
@media (prefers-reduced-motion: no-preference) {
  .motion-ok .steps-js .step-anim .step-panel, .motion-ok .steps-js .steps-show > figure.step-anim .stage > * { animation: step-in .35s cubic-bezier(.2, .7, .3, 1); }
  .step-toggle svg { transition: transform .2s ease; }
}
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }

/* Elements for the text below the hero (design 07, after Stripe's product pages). Each section has one. */
/* Stat row: a number, and a few words on what it counts (register facts only, rule 7). */
.numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .numbers { grid-template-columns: repeat(4, 1fr); } .numbers-3 { grid-template-columns: repeat(3, 1fr); } }
.numbers > li { border-top: 1px solid var(--rule); padding-top: var(--space-5); }
.num { display: block; font-family: var(--font-display); font-size: clamp(3.25rem, 2.2rem + 4vw, 5.25rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: lining-nums; margin-bottom: var(--space-3); }
.num-label { display: block; color: var(--muted); max-width: 13em; }

/* Ticks: a leaf tick is done or included (rule 6). Nots: what Tend doesn't do, a quiet dash, never red. */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.ticks li { position: relative; padding-left: var(--space-6); }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 0.45em; width: 11px; height: 6px; border-left: 2px solid var(--leaf-600); border-bottom: 2px solid var(--leaf-600); transform: rotate(-45deg); }
.ticks.nots li::before { top: 0.7em; width: 12px; height: 0; border: 0; border-top: 2px solid var(--stone-500); transform: none; }
.sec-ink .ticks li::before { border-color: var(--leaf-300); }
.sec-ink .nots li::before { border-color: var(--stone-200); }
.flow-down { grid-auto-flow: row; }
.flow-down > li + li::before { left: var(--space-8); top: calc(-1 * var(--space-6)); width: 0; height: var(--space-6); border-top: 0; border-left: 2px solid var(--leaf-500); }
.trio + .small, .nots + .limits { margin-top: var(--space-6); }
.kept .num { margin-bottom: var(--space-2); }
@media (min-width: 720px) { .ticks-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-10); } }
/* Flow: who does what, in order (Trust). Across on desktop, down on phones, joined by a leaf line. */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.flow > li { position: relative; padding: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--muted); }
.flow > li + li::before { content: ''; position: absolute; left: var(--space-8); top: calc(-1 * var(--space-6)); height: var(--space-6); border-left: 2px solid var(--leaf-500); }
.flow strong { display: block; margin-bottom: var(--space-1); font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; color: var(--ink); }
@media (min-width: 720px) { .flow:not(.flow-down) { grid-auto-flow: column; grid-auto-columns: 1fr; } .flow:not(.flow-down) > li + li::before { left: calc(-1 * var(--space-6)); top: var(--space-8); width: var(--space-6); height: 0; border-left: 0; border-top: 2px solid var(--leaf-500); } }
/* Stages: a record's path, in chips; the last is leaf, because it's done (Land). Chips: the measures. */
.stages, .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.stages li, .chips li { padding: var(--space-1) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-surface); font-size: var(--step-small); color: var(--ink); }
.stages li:not(:last-child)::after { content: '' / ''; display: inline-block; width: 6px; height: 6px; margin-left: var(--space-3); border-top: 1.5px solid var(--stone-500); border-right: 1.5px solid var(--stone-500); transform: rotate(45deg) translateY(-2px); }
.stages li:last-child { border-color: var(--leaf-300); background: var(--leaf-50); color: var(--leaf-700); font-weight: 600; }
.feature .stages, .feature .chips, .feature .ticks { margin-block: var(--space-5); }
.numbers.numbers-gap { margin-block: var(--space-10) var(--space-6); }
@media (max-width: 719.98px) { .numbers-3 { grid-template-columns: 1fr; gap: var(--space-5); } .numbers-3 > li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: var(--space-4); } .numbers-3 .num { margin: 0; } }
/* Trio: three parallel points, a short title and one line each. */
.trio { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-10); }
@media (min-width: 720px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio > li { border-top: 2px solid var(--leaf-300); padding-top: var(--space-4); color: var(--muted); }
.trio strong { display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; color: var(--ink); }