/* rentbloque.com — shared kit (look D, "from block to app"). Tokens, type,
   buttons, header, cards, FAQ, form, footer. One file for every page; the
   home page's own layout and motion live beside it in home.css, and the
   markdown paper (/privacy, /terms) sits in .prose. One light family
   (Hanken Grotesk) for everything, Barlow Condensed 800 only on small
   labels. One accent, mango, only on things you tap. */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Hanken"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Hanken"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Hanken Fallback"; src: local("Roboto"), local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 102%; ascent-override: 100%; descent-override: 30%; line-gap-override: 0%; }  /* Hanken's own 1.00 / 0.303 em (advisor 3.6) */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --paper: #F7F1E6;          /* warm paper ground (B/C) */
  --paper2: #EFE6D6;
  --mortar: #DDD2BE;         /* the wall's joints */
  --card: #FFFFFF;
  --ink: #0E2B25;            /* palm ink */
  --ink2: #5A6963;
  --hair: rgba(14,43,37,.12);
  --hair2: rgba(14,43,37,.26);
  --palm: #085041;           /* brand */
  --palm-mid: #0B4A3C;
  --palm-deep: #06382E;      /* the dark panels: dark palm, never black */
  --palm-ink: #04241C;       /* phone bezel */
  --mint: #5DCAA5;           /* the door block; data on dark */
  --mint-soft: #B7EEDB;
  --door: #0B6B54;           /* positive / links on light (5.8:1 on paper) */
  --on-dark: #EFFAF5;
  --soft-dark: #A9CFC1;
  --hair-dark: rgba(239,250,245,.14);
  --late: #B5392A;           /* 5.2:1 on paper */
  --late-dark: #FFB7A6;
  --clay: #E8A070;           /* expense bars */
  /* THE accent: only on things you tap. One token. MANGO is final and the only accent (Anthony, 2026-10-13).
     Text on mango is dark ink: 9.3:1. */
  --accent: #F4A83A; --accent-deep: #E8951F; --accent-text: #9A5A00; --on-accent: #1A1206;
  --accent-ring: rgba(244,168,58,.45);
  --accent-edge: rgba(14,43,37,.6);  /* mango on paper is 1.8:1, so every mango pill carries an ink edge (5.8:1 on paper) */

  --font: "Hanken", "Hanken Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --r1: 8px; --r2: 14px; --r3: 24px; --r4: 40px;
  --gutter: 20px;
  --pad: var(--s8);
  --course: 48px;            /* one block course: 16x8 in at 6 px/in */
  --built: 100%;             /* how much wall is laid; JS steps it */
  --ease: cubic-bezier(.22,1,.36,1);
}
@media (min-width: 768px) { :root { --gutter: 40px; --pad: var(--s9); } }
@media (min-width: 1200px) { :root { --pad: var(--s10); } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x on <html>: body's clip does not reach the viewport, and the ribbon's -34% inset and the
   diving house both run past a phone's edge (advisor 6.2). Sticky children are unaffected by clip. */
html { -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--font); font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
@media (min-width: 768px) { body { font-size: 17px; } }
/* the margin reset is for the composed page only; markdown paper (/privacy, /terms) sits in .prose and owns its own rhythm (advisor 6.1) */
:where(h1, h2, h3, p, ul):where(:not(.prose *)) { margin: 0; }
.prose :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; max-width: none; margin-top: var(--s7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s5); }
.prose p, .prose li { color: var(--ink2); max-width: 64ch; }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s1); }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 em, h2 em { font-style: normal; font-weight: inherit; color: inherit; }
a { color: var(--door); text-decoration-thickness: 1px; text-underline-offset: .14em; }
/* focus: ONE two-tone ring everywhere — a 2px mango ring hugging the control, a 3px ink ring outside it
   (advisor 4.1, mango final). On paper/white the ink carries it (13.9:1); inside the dark panels the mango
   carries it (5.1:1 on palm-mid, 8.3:1 on the bezel) and the outer ring turns off-white (ink is invisible there). */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--accent); }
:is(.panel, .dark, .close, .foot) :is(a, button, summary):focus-visible { outline-color: var(--on-dark); }
.close .form :is(a, button):focus-visible { outline-color: var(--ink); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 80px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.num, .fig { font-variant-numeric: tabular-nums; }

/* type: light, large, calm */
.display { font-size: clamp(40px, 7vw, 100px); line-height: .96; letter-spacing: -.04em; font-weight: 300; max-width: 11ch; }  /* 7vw: the CTA pair lands in the first screen at 1440 and 1024 (advisor 5.2) */
@media (max-width: 479px) { .display { max-width: none; } }  /* 3 lines, not 4, on a phone (advisor 1.7) */
.display em { font-weight: 500; }
.h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1; letter-spacing: -.035em; font-weight: 300; max-width: 16ch; }
h2 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -.035em; font-weight: 300; max-width: 22ch; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.01em; font-weight: 500; }
.lede { font-size: 18px; line-height: 1.5; color: var(--ink2); max-width: 44ch; font-weight: 400; }
@media (min-width: 768px) { .lede { font-size: 20px; } }
.lede b, .body b { color: var(--ink); font-weight: 600; }
.body { color: var(--ink2); max-width: 60ch; }
.small { font-size: 14px; line-height: 1.45; color: var(--ink2); }
/* the one condensed voice: a small job-site eyebrow with the door block in front of it */
.eyebrow { font-family: var(--cond); font-weight: 800; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--mint); flex: none; }
.eyebrow + h1, .eyebrow + h2 { margin-top: var(--s4); }
.label { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--ink2); }

/* ---------- buttons: the accent lives here ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease; }
@media (min-width: 768px) { .btn { min-height: 46px; font-size: 15px; } }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); }
.btn--primary:hover { background: var(--accent-deep); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--hair2); }
.btn--secondary:hover { border-color: var(--ink); }
/* FROSTED GLASS: the "Try live demo" button. One class, two grounds. It sits second to the mango on purpose:
   low-chroma tint, no mango, a quiet shadow. Paper ground = palm-tinted glass with ink text; dark ground
   (.btn--glass-dark) = light glass with off-white text. The @supports block gives a solid colour where
   backdrop-filter is missing, so the button never goes invisible. */
.btn--glass { color: var(--ink); background: rgba(8,80,65,.16); border-color: rgba(14,43,37,.32);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.3), 0 6px 18px rgba(14,43,37,.14); }
.btn--glass:hover { background: rgba(8,80,65,.26); border-color: var(--ink); }
.btn--glass-dark { color: var(--on-dark); background: rgba(239,250,245,.18); border-color: rgba(239,250,245,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.28); }
.btn--glass-dark:hover { background: rgba(239,250,245,.3); border-color: rgba(239,250,245,.75); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn--glass { background: #D5DCCF; }
  .btn--glass:hover { background: #C3CFC4; }
  .btn--glass-dark { background: #2E6153; }
  .btn--glass-dark:hover { background: #3B7261; }
}
/* GET THE SHEET (Free sheets cards): solid palm with off-white text and a faint running-bond block pattern
   (the wall's own bond, made of gradients: no image). It is a quiet second to the mango primary: no mango,
   no glow. Texture = course lines on the button, plus the vertical joints on two masked pseudo-layers that
   sit behind the label (isolate + z-index -1). Hover: deeper palm and a diagonal sheen sweeps across. */
.btn--sheet { --bond: rgba(239,250,245,.11); --bond-h: 12px; --bond-w: 24px;
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-dark); background-color: var(--palm); border-color: var(--palm-deep);
  background-image:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%),
    linear-gradient(var(--bond) 1px, transparent 1px);
  background-size: 260% 100%, var(--bond-w) var(--bond-h);
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat, repeat;
  box-shadow: inset 0 1px 0 rgba(239,250,245,.18), 0 6px 16px -6px rgba(8,80,65,.55);
  transition: transform .15s var(--ease), background-color .2s ease, background-position .6s var(--ease), box-shadow .2s ease; }
.btn--sheet::before, .btn--sheet::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, var(--bond) 1px, transparent 1px);
  background-size: var(--bond-w) calc(var(--bond-h) * 2);
  -webkit-mask-size: var(--bond-w) calc(var(--bond-h) * 2); mask-size: var(--bond-w) calc(var(--bond-h) * 2); }
.btn--sheet::before { -webkit-mask-image: linear-gradient(#000 50%, transparent 50%); mask-image: linear-gradient(#000 50%, transparent 50%); }
.btn--sheet::after { background-position: calc(var(--bond-w) / 2) 0;
  -webkit-mask-image: linear-gradient(transparent 50%, #000 50%); mask-image: linear-gradient(transparent 50%, #000 50%); }
.btn--sheet:hover { background-color: var(--palm-deep); background-position: -30% 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(239,250,245,.22), 0 10px 22px -8px rgba(8,80,65,.6); }
.btn--sheet .arr { font-weight: 700; }
.btn .arr { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn:not(:disabled):active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.pair { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.pair .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .pair .btn { flex: 0 0 auto; } }


:where(body > *:not(.wall)) { position: relative; z-index: 1; }  /* :where — at (0,1,1) this rule out-specified .hdr's sticky and the bar never pinned */

/* ---------- header (A): thin, blurs once scrolled; the link row scrolls sideways on a phone ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: rgba(247,241,230,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease; }
.hdr.is-scrolled { background: rgba(247,241,230,.84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--hair); }
.hdr .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 64px; }
@media (max-width: 419px) { .hdr .wrap { gap: var(--s2); } .hdr .btn--sm { padding: 0 12px; font-size: 13px; } }  /* brand + CTA fit a 360px bar (the CTA ran 14px past the edge) */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.brand svg { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.wordmark { font-weight: 800; font-size: 22px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.wordmark b { color: var(--door); font-weight: 800; }
.spacer { flex: 1; }
.topnav { display: none; gap: 2px; margin-left: var(--s6); }
.topnav a { color: var(--ink2); text-decoration: none; font-size: 14px; font-weight: 600; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; transition: color .2s ease, background-color .2s ease; }
.topnav a:hover { color: var(--ink); background: rgba(14,43,37,.06); }
.hdr .demo-hdr { display: none; }
@media (min-width: 1024px) { .topnav, .hdr .demo-hdr { display: inline-flex; } }
.subnav { border-bottom: 1px solid var(--hair); background: rgba(247,241,230,.6); }
.subnav .wrap { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }  /* "more" cue (advisor 5.6) */
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; color: var(--ink2); text-decoration: none; font-size: 14px; font-weight: 600; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; }
.subnav a:hover { color: var(--ink); background: rgba(14,43,37,.06); }
@media (min-width: 1024px) { .subnav { display: none; } }

/* ---------- cards: white paper on the wall ---------- */
.card { background: var(--card); border: 1px solid rgba(14,43,37,.06); border-radius: var(--r3); box-shadow: 0 24px 60px -30px rgba(14,43,37,.3); }

.faqsec { padding: var(--pad) 0; }
.faq { max-width: 760px; }
.faq-list { margin-top: var(--s6); }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; padding: var(--s4) 0; font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-weight: 400; font-size: 24px; line-height: 1; flex: none; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline-offset: 4px; border-radius: var(--r1); }
.faq details p { padding: 0 var(--s7) var(--s5) 0; color: var(--ink2); font-size: 16px; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- page sections, figures, panels, cards, tables ---------- */
.fig { font-size: 44px; line-height: 1; letter-spacing: -.04em; font-weight: 300; color: var(--ink); }
@media (min-width: 768px) { .fig { font-size: 56px; } }
.fig small { font-size: .5em; font-weight: 400; letter-spacing: 0; color: var(--ink2); }
.fig + .label { margin-top: var(--s2); }
/* ---------- feature rows ---------- */
.feat { padding: var(--pad) 0; }
.feat--hair { border-top: 1px solid var(--hair); }
.feat .row { display: grid; gap: var(--s6); align-items: center; }
.feat .row .copy .body { margin-top: var(--s5); }
@media (min-width: 900px) {
  .feat .row { grid-template-columns: repeat(12, 1fr); gap: var(--s9); }
  .feat .row .copy { grid-column: 1 / 7; }
  .feat .row .viz { grid-column: 7 / -1; }
  .feat .row--flip .viz { grid-column: 1 / 7; grid-row: 1; }
  .feat .row--flip .copy { grid-column: 7 / -1; grid-row: 1; }
}
.dark { background: var(--palm-deep); color: var(--on-dark); border-radius: 28px; padding: var(--s7) var(--s5); position: relative; overflow: hidden; }
@media (min-width: 768px) { .dark { border-radius: var(--r4); padding: var(--s9) var(--s8); } }
.dark::after { content: ""; position: absolute; inset: auto -20% -40% 30%; height: 70%; background: radial-gradient(closest-side, rgba(93,202,165,.22), transparent); pointer-events: none; filter: blur(30px); }
.dark .eyebrow { color: var(--soft-dark); }
.dark h2 { color: var(--on-dark); }
.dark .lede, .dark .small, .dark .label { color: var(--soft-dark); }
.dark .lede b, .dark .body b { color: var(--on-dark); }
.fig--xl { font-size: clamp(48px, 7vw, 84px); color: var(--mint); }
.cta-band { margin-top: var(--s6); position: relative; z-index: 1; }
.table { margin-top: var(--s6); overflow: hidden; }
.tbl table { border-collapse: collapse; width: 100%; }
.tbl th, .tbl td { padding: 16px var(--s4); text-align: left; font-size: 15px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl thead th { font-size: 13px; font-weight: 600; color: var(--ink2); padding-top: 18px; }
.tbl thead th.rb { color: var(--ink); }
.tbl thead th.rb::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--mint); margin-right: 8px; vertical-align: 1px; }
.tbl td.rb, .tbl th.rb { background: rgba(93,202,165,.1); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td.y { color: var(--ink); font-weight: 600; }
.tbl td.n { color: var(--ink2); }
.tbl td.rb { font-weight: 600; }
@media (max-width: 767px) {
  .table { padding: 0 var(--s4); }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl table, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl tr { padding: var(--s4) 0; border-bottom: 1px solid var(--hair); }
  .tbl tbody tr:last-child { border-bottom: none; }
  .tbl td { border: 0; padding: 0; font-size: 15px; background: none !important; }
  .tbl td:first-child { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: var(--s2); letter-spacing: -.01em; }
  .tbl td[data-h] { display: flex; justify-content: space-between; gap: var(--s4); padding: 3px 0; }
  .tbl td[data-h]::before { content: attr(data-h); color: var(--ink2); font-weight: 400; }
  .tbl td.rb { color: var(--door); }
  .tbl td.n { color: var(--ink); font-weight: 400; }
}
.sheets { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 768px) { .sheets { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.sheet { padding: var(--s5); display: grid; gap: var(--s3); align-content: start; }
.sheet .body { font-size: 16px; }
.sheet .btn { justify-self: start; margin-top: var(--s2); }
.sheet { transition: transform .25s var(--ease), box-shadow .25s ease; }
@media (hover: hover) { .sheet:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -28px rgba(14,43,37,.42); } }

/* ---------- form: white fields, sentence-case labels; the toasts the trial form shows after it sends ---------- */
.form { display: grid; gap: var(--s4); color: var(--ink); }
.form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: var(--s2); }
.form input, .form textarea { width: 100%; background: var(--card); color: var(--ink); border: 1px solid rgba(14,43,37,.5); border-radius: var(--r2); padding: 14px 16px; font: inherit; font-size: 16px; line-height: 1.4; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent); }
.form .btn { width: 100%; }
.form .small a { color: var(--door); }
.toast { display: none; border-left: 3px solid var(--door); background: rgba(8,80,65,.08); padding: var(--s3) var(--s4); border-radius: var(--r1); font-size: 14px; color: var(--ink); }
.toast.show { display: block; }
.toast--err { border-left-color: var(--late); }
.toast a { color: var(--door); }

/* ---------- footer ---------- */
.foot { background: var(--palm-deep); color: var(--soft-dark); border-top: 1px solid var(--hair-dark); padding: var(--s7) 0; font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6); align-items: center; justify-content: space-between; }
.foot .brand { color: var(--on-dark); }
.foot .wordmark b { color: var(--mint); }
.foot .foot-brand { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.foot nav a { color: var(--soft-dark); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.foot nav a:hover, .foot nav a:focus-visible { color: var(--on-dark); }

/* ---------- reduced motion: nothing moves on its own ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .btn:not(:disabled):active { transform: none; }
  .sheet:hover { transform: none; }
  .btn--sheet:hover { background-position: 130% 0, 0 0; }
}