/* Oakrule look (2026-10-05, Isaac: "luma.com / america.gov, liquid glass built into the UI, bubbly squircle icons").
   Loaded LAST on every page (app, answer/SEO pages via seo_html.css(), legal, account, /pro), so it wins over the older
   layers without touching their layout. Tokens first, then the glass material, then the components that wear it.
   Rules: glass only where something floats (header, menus, search pills, tiles, the answer card); text on glass over a
   photo uses --glass-strong (readable); one black pill per screen for the main action; green = brand, links, focus. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Inter Fallback", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Inter Fallback", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --display-sans: var(--display); --serif: var(--display); --sans: var(--font); --ask-serif: var(--display);

  --label: #111614;                    /* ink: 18.3:1 on white */
  --label-2: rgb(17 22 20 / .66);      /* muted: >= 5.0:1 on every surface below */
  --label-3: rgb(17 22 20 / .62);      /* faint: >= 4.6:1 */
  --sep: rgb(17 22 20 / .12);
  --sep-2: rgb(17 22 20 / .07);
  --canvas: #f7f9f8;                   /* page, under a soft mesh of green / sky / peach */
  --bg: #fff;
  --cool: #eef3f0; --cool-2: #e4ebe7; --fill: #f2f5f3; --warm: var(--cool); --muted: var(--fill);
  --ink-btn: #111614; --ink-btn-edge: #000;   /* the main action: a black pill */
  --accent: #0a6b44;                   /* brand green for links, focus, active controls: 6.6:1 on white */
  --accent-hover: #075a39; --link: #0a6b44; --navy: var(--accent);
  --brand-1: #3fd08a; --brand-2: #0c8a52;     /* the mark and app icon gradient */
  --ring: rgb(10 107 68 / .28);
  --applies: #116b34; --ok: var(--applies);
  --danger: #c42b1c; --over: var(--danger);

  --glass: linear-gradient(180deg, rgb(255 255 255 / .74), rgb(255 255 255 / .52));
  --glass-strong: linear-gradient(180deg, rgb(255 255 255 / .94), rgb(255 255 255 / .88));  /* over photos */
  --glass-blur: blur(24px) saturate(180%);
  --glass-edge: rgb(255 255 255 / .8);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 1px rgb(255 255 255 / .35), 0 10px 30px rgb(16 40 28 / .10), 0 1px 2px rgb(16 40 28 / .06);
  --r-card: 28px; --r-in: 18px;
  --shadow-card: var(--glass-shadow);
}

html { background: var(--canvas); }
body {
  font-family: var(--font); letter-spacing: -.011em; font-feature-settings: normal; color: var(--label);
  background:
    radial-gradient(70vw 46vh at 0% 0%, rgb(63 208 138 / .20), transparent 70%),
    radial-gradient(60vw 40vh at 100% 0%, rgb(120 170 255 / .16), transparent 70%),
    radial-gradient(70vw 40vh at 50% 100%, rgb(255 190 130 / .10), transparent 70%),
    var(--canvas);
  background-repeat: no-repeat;
}
h1, h2, h3, .big, .wh h1 { letter-spacing: -.035em; }
h1 { font-weight: 700; }
::selection { background: rgb(63 208 138 / .28); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- glass material */
.glass, .sit a, .nav-s, .big-search .box, .ans-card,
.lp-links {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
}

/* ---------------------------------------------------------------- header: a floating glass pill */
html body .nav, html.scrolled body .nav, html body .nav.is-scrolled, html.is-home:not(.scrolled) body .nav {
  position: sticky; top: 0; z-index: 60; background: transparent; border: 0; box-shadow: none;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0; pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* legal pages have their own top bar: same floating pill */
.lg-top { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: calc(env(safe-area-inset-top) + 10px) 12px 0; pointer-events: none; }
.lg-top-in {
  pointer-events: auto; max-width: 1100px; height: 60px; border-radius: 999px; padding: 0 8px 0 9px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
}
html body .nav::after, html body .nav::before { display: none; }
html body .nav-in, html body .nav-inner {
  pointer-events: auto; max-width: 1180px; margin: 0 auto; height: 60px; border-radius: 999px;
  padding: 0 8px 0 9px; gap: 10px; position: relative; isolation: isolate; background: none; box-shadow: none;
}
/* the glass sits on a layer behind the bar, not on the bar itself: a backdrop-filter on the bar would trap its
   fixed menu sheet inside the 60 px pill and stop the dropdowns from blurring what is under them */
html body .nav-in::before, html body .nav-inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
}
/* menus over text: nearly opaque glass, so what is underneath never fights the words */
.dd-p, .menu-p {
  background: rgb(255 255 255 / .97); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), 0 24px 60px rgb(16 40 28 / .14);
}
/* phone menu: a floating glass sheet under the header pill */
@media (max-width: 899px) {
  html body .menu[open] > summary::after { content: ""; position: fixed; inset: 0; z-index: 60; background: rgb(17 22 20 / .18); pointer-events: none; }
  /* solid white above its backdrop (a blur under an opaque sheet only costs frames) */
  html body .menu-p { z-index: 61; -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 76px); bottom: auto; max-height: calc(100svh - env(safe-area-inset-top) - 96px); border-radius: 28px; padding: 8px 20px 20px; }
}
.brand { gap: 10px; }
.brand-mark, .nav .brand-mark, .footer .brand-mark, .foot .brand-mark, .mark {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; padding: 0;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2)); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 3px 10px rgb(12 138 82 / .28);
}
.brand-mark svg, .mark svg { width: 74%; height: 74%; display: block; }
.brand:hover .brand-mark { transform: scale(1.05) rotate(-4deg); }
.brand-word, .nav .brand-word, .footer .brand-word, .foot .brand-word, .word {
  font: 700 22px/1 var(--display); letter-spacing: -.035em; color: var(--label);
}
.dd summary, .nav-d a, .nav-sign, .nav-lang { font-weight: 560; }
.dd-p, .menu-p { border-radius: 26px; }
.nav-sign { background: var(--ink-btn); color: #fff !important; border-radius: 999px; padding: 10px 16px; text-decoration: none; }
.nav-sign:hover { text-decoration: none; opacity: .9; }
.nav-s { border-radius: 999px; }
.nav-ic { border-radius: 50%; }

/* ---------------------------------------------------------------- buttons: black pill for the main action */
.btn.primary, .pill.primary, .go, .big-search .go, .nav-s-go, .nav-s button {
  --edge: transparent; background: var(--ink-btn); color: #fff; border: 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 6px 16px rgb(17 22 20 / .18);
}
.btn.primary:hover, .pill.primary:hover, .go:hover, .big-search .go:hover, .nav-s button:hover { background: #26302b; }
.btn, .pill { border-radius: 999px; }
.btn-2, .pill:not(.primary) {
  --edge: transparent; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); border: 1px solid var(--glass-edge); color: var(--label);
}

/* ---------------------------------------------------------------- cards and fields */
.card, .sec, .rule, .help-l li, .r-body { border-radius: var(--r-card); }
.card { background: rgb(255 255 255 / .8); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
input[type=text], input[type=search], input[type=email], input[type=date], input[type=number], select, textarea {
  border-radius: 16px;
}
.big-search .box { border-radius: 999px; }

/* ---------------------------------------------------------------- home: headline, photo with the search, four tiles */
.wh { text-align: center; }
.wh h1 { font: 700 clamp(2.6rem, 1.8rem + 4vw, 4.6rem)/1.02 var(--display); letter-spacing: -.045em; }
.wh .lead { margin-left: auto; margin-right: auto; max-width: 30ch; }
.wh .lead .grad, .grad {
  background: linear-gradient(90deg, #0c8a52, #0b7a8f); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 650;
}
/* the photo carousel (hackathon look): the search sits on its top edge, one street photo per covered city crossfades
   every 6 s with a slow push-in; a glass chip opens that city's example address; prev / dots / pause / next */
.wh-ph {
  position: relative; z-index: 2; margin: 64px auto 0; max-width: 880px; aspect-ratio: 3 / 2; height: auto; border-radius: 48px;
  background: #cfd8d3; box-shadow: 0 30px 60px rgb(16 40 28 / .18);
}
.wh-ph .slides { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.slide {
  position: absolute; inset: 0; display: block; overflow: hidden; background-color: #cfd8d3;
  opacity: 0; pointer-events: none; transition: opacity .8s cubic-bezier(.22, 1, .36, 1); color: var(--label);
}
/* the slow push-in only with a mouse: on iOS a long transform transition on the slide stops its photo from painting */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .slide { transform: scale(1.06); transition: opacity .9s ease, transform 7s linear; }
  .slide.on { transform: scale(1); }
}
.slide picture, .slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a slow phone sees a blurred tiny copy of the first photo (San Francisco) until the photo itself arrives, never a plain grey box */
.slide[data-i="0"]::before { content: ""; position: absolute; inset: -24px; filter: blur(16px);
  background: url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAACQBACdASogABIAPu1mqk2ppaQvMAgB4B2JQBUkeBA5XTRTkFwhYtVum1fB1GAA/peUPmUfS7rirTpQOqh8yMHGugFdCqSzyjNSZP9UXi+rWHcOws1B80BjcT+a7F9Db0xHrQf5EOemWROjbha4jAEVleCCxf4IXt3gttZSTDwnA1Bg1XABxX+2e48PsKFteYo3pZDcKApPQXVrkVAMAAAA) 50% 70% / cover; }
@media (max-width: 699px) { .slide[data-i="0"]::before { background-image: url(data:image/webp;base64,UklGRugAAABXRUJQVlA4INwAAACQBgCdASoYAB4APu1srlEppaQiqAqpMB2JYgCdMuu3wnAPADGXq1/UrvWRJ/ZnwnJPVqmmMItUkOos8VIAAP7nGn6GHvmxdkh7NO8UQnoqaSazD7vPzekoN2o2G54JnDyjYW8Gb08oN/jS10/1dxAhBXBbUCbIemr7k/+Ov3Sa9FjeeXdUZiX9ZaKcJpFXP1btjW7p1d9FzUYYTN4i2v3a71rTrJd+mEd81EPUtStCyeFxwf2qYyZsZCoIZ2Ngl0CbSkq2ylJ8fv9OXo/yzDFOBJ9Raq7kcGla/gAA); } }
.slide img { object-fit: cover; object-position: center 60%; opacity: 0; transition: opacity .4s ease; }
.slide img.ld { opacity: 1; }
.slide.on { opacity: 1; pointer-events: auto; }
.slide:hover { text-decoration: none; }
.slide-cap {
  position: absolute; left: 16px; bottom: 16px; height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 18px;
  border-radius: 999px; font-size: 15px; white-space: nowrap; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgb(255 255 255 / .9); box-shadow: 0 10px 24px rgb(0 0 0 / .16); transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.slide-cap b { font-weight: 650; } .slide-cap > span { color: var(--label-2); } .slide-cap .ico { width: 17px; height: 17px; }
.slide:hover .slide-cap { transform: translateX(3px); }
.slide:active .slide-cap { transform: scale(.97); }
/* prev / pause / next: three round buttons centred under the card, never on the photo (america.gov) */
.car-ctl { display: flex; justify-content: center; gap: 10px; margin: 16px auto 0; }
.car-b {
  width: 56px; height: 56px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--label);
  background: rgb(17 22 20 / .05); transition: background-color .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1);
}
.car-b:hover { background: rgb(17 22 20 / .09); } .car-b:active { transform: scale(.95); } .car-b .ico { width: 20px; height: 20px; }
html body .wh .wh-ph .big-search { position: absolute; left: 50%; right: auto; top: -31px; bottom: auto; width: min(640px, calc(100% - 24px)); margin: 0; max-width: none; z-index: 5; transform: translateX(-50%); }
html body .wh .wh-ph .big-search .box {
  height: 62px; padding: 0 7px 0 24px; background: #fff; border: 0; box-shadow: inset 0 0 0 2px var(--label), 0 10px 40px rgb(1 14 36 / .08);
  transition: box-shadow .7s cubic-bezier(.22, 1, .36, 1);
}
html body .wh .wh-ph .big-search .box:focus-within { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--ring), 0 10px 40px rgb(1 14 36 / .08); }
.home-ask .bs-f { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.home-ask .bs-f input { width: 100%; }
/* the example is readable at once (Isaac 2026-10-06, like america.gov): no sideways ticker; a long one wraps onto a second
   line (at most two) and the box grows to hold it, back to one line as soon as you type */
.hq-ph { position: absolute; left: 0; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: rgb(17 22 20 / .58); font-size: 17px; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: opacity .15s cubic-bezier(.22, 1, .36, 1), transform .15s cubic-bezier(.22, 1, .36, 1); }
.home-ask .box { transition: height .2s cubic-bezier(.22, 1, .36, 1), border-radius .2s, box-shadow .2s cubic-bezier(.22, 1, .36, 1); }
html .home-ask:not(.has-v) .box:has(.hq-ph.two) { height: 86px; border-radius: 32px; }
.hq-ph.out { opacity: 0; transform: translateY(-4px); }
.home-ask.has-v .hq-ph { visibility: hidden; }
/* the home has one ask box: no second search in the header there */
@media (min-width: 900px) { html.is-home .nav .nav-s { display: none; } }
html body .wh .wh-ph .big-search .go { width: 48px; height: 48px; transform: none; }
html body .wh .wh-ph .bs-f input { font-size: 17px; color: var(--label); }
html body .wh .wh-ph .bs-f input::placeholder { color: rgb(17 22 20 / .58); }
.wh .wh-ph .suggest { top: calc(100% + 8px); z-index: 30; }
@media (min-width: 900px) { html body .wh { max-width: 1100px; } }
.wh-start { margin: 44px 0 0; font-size: 17px; font-weight: 650; text-align: center; }
@media (prefers-reduced-motion: reduce) { .slide { transition: opacity .2s; } }

/* the statement: the words fill in as it scrolls by; the small pictures pop in their place and can be grabbed */
/* not pinned (Isaac 2026-10-06): the sentence scrolls like any text; each word lights as it rises out of the bottom quarter of the screen */
.stm { margin: 112px 0 0; position: relative; }
.stm-in { max-width: 1180px; margin: 0 auto; padding: 0 var(--inset, 24px); display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 40px; align-items: center; min-height: 420px; }
.stm-p { margin: 0; font: 700 clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem)/1.18 var(--display); letter-spacing: -.04em; color: var(--label); }
.stm .w { color: rgb(17 22 20 / .16); transition: color .35s ease; }
.stm .w.on { color: var(--label); }
.ob {
  display: inline-grid; place-items: center; width: 1em; height: 1em; border-radius: .3em; vertical-align: -.14em; margin: 0 .04em;
  background: #fff center / cover no-repeat; box-shadow: 0 0 0 3px #fff, 0 8px 18px rgb(16 40 28 / .16); cursor: grab; touch-action: none;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.stm .w:not(.on) .ob, .stm .ob.w:not(.on) { opacity: .28; filter: grayscale(1); }
.obs { display: inline-flex; vertical-align: -.14em; } .obs .ob { vertical-align: 0; } .ob.ov { margin-left: -.42em; }
.ob .ico, .ob img { width: 62%; height: 62%; pointer-events: none; } .ob img { width: 76%; height: 76%; }
.stm .ob.ink, .stm .ob.ink.on { background: var(--ink-btn); color: #fff; } .ob.ink .ico { stroke-width: 2.4; }
.stm .ob.ok, .stm .ob.ok.on { background: linear-gradient(180deg, var(--brand-1), var(--brand-2)); color: #fff; } .ob.ok .ico { stroke-width: 2.8; }
.ob.lj { background-image: url("/static/img/hero-justice.webp"); background-size: 260%; background-position: 58% 12%; }
.stm-art { position: relative; margin: 0; height: 540px; }
.stm-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: grab;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.stm-n { position: absolute; right: 0; bottom: 24px; border-radius: 24px; padding: 16px 20px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid #fff; box-shadow: var(--glass-shadow); }
.stm-n b { display: block; font: 700 40px/1 var(--display); letter-spacing: -.04em; }
.stm-n span { color: var(--label-2); font-size: 14px; }
@media (max-width: 899px) { .stm { margin-top: 64px; } .stm-in { grid-template-columns: 1fr; min-height: 0; } .stm-art { display: none; } }
.wh-or { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px auto 0; max-width: 1180px; text-align: left; }
@media (min-width: 900px) { .sit { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; } }
.sit a {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; min-height: 0; height: 100%;
  padding: 16px; border-radius: 26px; color: var(--label);
  transition: transform .25s var(--spring, cubic-bezier(.34, 1.56, .64, 1)), box-shadow .2s;
}
.sit a:hover { box-shadow: var(--glass-shadow), 0 0 0 2px rgb(10 107 68 / .35); text-decoration: none; }
.sit a:active { transform: scale(.97); }
.sit .t { font-size: 16px; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; }
.sit .t small { font-size: 14px; margin-top: 4px; line-height: 1.35; }
@media (max-width: 899px) { .sit .t small { display: none; } }
/* squircle icon tiles, one friendly colour per situation (order: rent, move, deposit, apply) */
.sit-i {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #3fd08a, #0c8a52);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 4px 10px rgb(12 138 82 / .25);
}
.sit li:nth-child(2) .sit-i { background: linear-gradient(180deg, #ffad6b, #f0702e); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 4px 10px rgb(240 112 46 / .25); }
.sit li:nth-child(3) .sit-i { background: linear-gradient(180deg, #6cb6ff, #2f74f0); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 4px 10px rgb(47 116 240 / .25); }
.sit li:nth-child(4) .sit-i { background: linear-gradient(180deg, #b49cff, #7b55ee); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 4px 10px rgb(123 85 238 / .25); }
.sit-i .ico { width: 25px; height: 25px; stroke: #fff; stroke-width: 1.9; }
.wh-own { margin-top: 22px; }

/* ---------------------------------------------------------------- footer */
.foot, .footer { background: transparent; }

@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgb(255 255 255 / .97); --glass-strong: #fff; }
}
@media (max-width: 640px) {
  html body .nav, html.scrolled body .nav, html body .nav.is-scrolled, html.is-home:not(.scrolled) body .nav { padding: calc(env(safe-area-inset-top) + 8px) 10px 12px; }
  html body .nav-in, html body .nav-inner { height: 56px; padding: 0 6px 0 8px; }
  .brand-mark, .nav .brand-mark { width: 38px; height: 38px; border-radius: 11.5px; }
  .brand-word, .nav .brand-word { font-size: 21px; }
  .wh-ph { border-radius: 32px; margin-top: 52px; aspect-ratio: 4 / 5; max-height: 72svh; }
  html body .wh .wh-ph .big-search { top: -29px; width: calc(100% - 24px); }
  html body .wh .wh-ph .big-search .box { height: 58px; padding-left: 20px; }
  html body .wh .wh-ph .big-search .go { width: 44px; height: 44px; }
  .slide-cap { left: 12px; bottom: 12px; height: 46px; }
  .hq-ph { font-size: 16px; }
  .wh-start { margin-top: 34px; }
}

/* /pro: same floating header as the app */
html body.lp .nav { border-bottom: 0; }
html body.lp .nav-inner { max-width: 1180px; height: 60px; }

/* the situations on an address page sit in a narrow column: two per row */
@media (min-width: 900px) { .sit.sit-s { grid-template-columns: 1fr 1fr; } }

/* answer pages: the verdict's number lands with a small pop (answers.py CHROME_JS); it never counts up, a half-way figure reads as the answer (#153) */
h1.big em.pop { display: inline-block; animation: oak-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes oak-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.how .ico, .r-line .ico { animation: oak-tick .5s .75s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes oak-tick { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { h1.big em.pop, .how .ico, .r-line .ico { animation: none; } }

/* ================================================================ forms (one style everywhere, 2026-10-05 sweep)
   Fields: soft filled (ink 4 %), 54 px, radius 16, no box; focus = white + 2 px ink ring, colour animated (quint-out).
   Segmented "I rent / I own": a recessed track with a white thumb. Radios and checkboxes: green fill when chosen. */
.in, .mp-field input, .aa-field input, .lp-field input[type=email], .lp-field select, .ac-select, .calc-in {
  min-height: 54px; border: 0; border-radius: 16px; background: rgb(17 22 20 / .045);
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s cubic-bezier(.22, 1, .36, 1), background-color .2s cubic-bezier(.22, 1, .36, 1);
}
.mp-field input, .aa-field input, .lp-field input[type=email], .lp-field select { padding: 0 16px; font-size: 17px; }
.in:hover, .mp-field input:hover, .aa-field input:hover, .lp-field input:hover { background: rgb(17 22 20 / .07); }
.in:focus-within, .mp-field input:focus, .aa-field input:focus, .lp-field input:focus-visible, .lp-field select:focus-visible, .ac-select:focus, .calc-in:focus-within {
  outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--label), 0 0 0 4px rgb(17 22 20 / .06);
}
.in input::placeholder, .mp-field input::placeholder, .aa-field input::placeholder, .lp-field input::placeholder { color: rgb(17 22 20 / .45); }
.fld[data-need] .in { background: #fff8eb; box-shadow: inset 0 0 0 2px var(--unk); }
.fld > span:first-child, .fld-l > span:first-child { font-weight: 600; color: var(--label); }
.calc-f, .ck.card, form.ck { border-radius: 28px; }
.calc-f { background: rgb(255 255 255 / .86); border: 1px solid var(--glass-edge); box-shadow: 0 10px 40px rgb(1 14 36 / .08); }
/* segmented control */
/* radios as calm rows; the chosen one gets a green dot */
.radio { border-top: 0; gap: 8px; }
.radio label { min-height: 56px; padding: 0 16px; border: 0; border-radius: 16px; background: rgb(17 22 20 / .045); transition: background-color .2s cubic-bezier(.22, 1, .36, 1); }
.radio label:hover { background: rgb(17 22 20 / .07); }
.radio label:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--label); }
.radio input, .chk input { box-shadow: inset 0 0 0 2px rgb(17 22 20 / .3); transition: box-shadow .2s cubic-bezier(.22, 1, .36, 1); }
.radio input:checked { box-shadow: inset 0 0 0 7px var(--accent); }
.radio input:focus-visible, .chk input:focus-visible { outline: 2px solid var(--label); outline-offset: 2px; }

/* ================================================================ motion + focus rules (docs/product/ux-reference.md)
   1 state changes 200 ms quint-out; 2 press = scale .98 (.95 small round), no hover lifts; 3 focus = 2 px ink ring. */
:root { --ease-ui: cubic-bezier(.22, 1, .36, 1); --ease-move: cubic-bezier(.32, .72, 0, 1); }
:focus-visible { outline: 2px solid var(--label); outline-offset: 2px; }
a:focus-visible { outline-offset: 4px; border-radius: 4px; }
.btn, .pill, .sit a, .go, .nav-sign, .car-b, .slide-cap, .ask-chip, .ask-send {
  transition: transform .2s var(--ease-ui), background-color .2s var(--ease-ui), box-shadow .2s var(--ease-ui), color .2s var(--ease-ui);
}
.btn:hover, .pill:hover, .sit a:hover, .ask-chip:hover { transform: none; }
.btn:active, .pill:active, .sit a:active, .ask-chip:active, .nav-sign:active { transform: scale(.98); }
.go:active, .ask-send:active, .nav-ic:active { transform: scale(.95); }
.sit a:hover { box-shadow: var(--glass-shadow); background: rgb(255 255 255 / .9); }
/* route changes: the main area crossfades, header and footer stay still (rule 14) */
#main { animation: oak-in .26s var(--ease-ui); }
@keyframes oak-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #main { animation: none; } }

/* Ask: the send button is the black main action like every other */
.ask-send { background: var(--ink-btn) !important; color: #fff !important; }
.ask-send:hover { background: #26302b !important; }
/* menu (rule 8): backdrop black 20 % with blur, the sheet and its links move in one after another. They never start
   transparent: when WebKit stalls a frame the menu must still be there (#110: the X showed, the sheet stayed invisible) */
@media (max-width: 899px) {
  html body .menu[open] > summary::after { background: rgb(0 0 0 / .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: oak-in .35s ease; }
  html body .menu[open] .menu-p { animation: oak-sheet .3s var(--ease-move); transform-origin: top right; }
  html body .menu[open] .menu-p > * { animation: oak-item .48s cubic-bezier(.22, 0, .2, 1) both; }
  html body .menu[open] .menu-p > *:nth-child(2) { animation-delay: .03s; } html body .menu[open] .menu-p > *:nth-child(3) { animation-delay: .06s; }
  html body .menu[open] .menu-p > *:nth-child(4) { animation-delay: .09s; } html body .menu[open] .menu-p > *:nth-child(5) { animation-delay: .12s; }
  html body .menu[open] .menu-p > *:nth-child(6) { animation-delay: .15s; } html body .menu[open] .menu-p > *:nth-child(n+7) { animation-delay: .18s; }
}
@keyframes oak-sheet { from { transform: scale(.96) translateY(-6px); } to { transform: none; } }
@keyframes oak-item { from { transform: translateY(6px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html body .menu[open] .menu-p, html body .menu[open] .menu-p > * { animation: none; } }

/* asking from the home: the hero fades out (260 ms) before Ask takes over */
.home.leaving .wh, .home.leaving .stm { opacity: 0; transition: opacity .26s cubic-bezier(.22, 1, .36, 1); }
/* header: sticky on every page (Isaac 2026-10-05); the page fades out under the floating pill, so no text shows above
   or around it */
html body .nav, html.scrolled body .nav, html body .nav.is-scrolled { padding-bottom: 12px; }
/* the backdrop is its own layer with a long soft fade (no edge through the page's glow, Isaac 2026-10-06); on the home
   it grows in with the first ~90 px of scroll (--nav-o from the scroll handler in app.js) instead of switching on */
html body .nav::before { content: ""; display: block; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--canvas) 0, var(--canvas) 42%, color-mix(in srgb, var(--canvas) 72%, transparent) 68%, transparent 100%); }
html.is-home body .nav::before { opacity: var(--nav-o, 0); }
/* the home's top: no fade over the hero; the fade strip overlaps the page (-12 px) so the hero sits where it did when
   the header was not sticky, and the header box is the same height scrolled or not (no jump at the first scroll) */
html.is-home:not(.scrolled) body .nav { padding-bottom: 12px; }
html.is-home body .nav { margin-bottom: -12px; }
@media (max-width: 640px) { html.is-home body .nav { margin-bottom: -10px; } }
:root { --label-3: rgb(17 22 20 / .65); }

/* ================================================================ UX study round 3 (2026-10-05) */
/* 3 follow box: no eyebrow, a 54 px email field */
.fol-k { display: none; }
.fol .in, .fol input[type=email] { min-height: 54px; }
.fol h2 { margin-top: 0; }
/* 4 phone hero: balanced lines, never one word alone */
.wh h1, .wh .lead, h1.big, .lp-hero h1 { text-wrap: balance; }
@media (max-width: 640px) { .wh h1 { font-size: 2.45rem; } }
/* 8 no "In short" / "On this page" labels on legal pages */
.lg-short h2, .lg-toc h2 { display: none; }
/* 11 every tap target at least 44 px */
.fc a, .footer .fc a, .foot-legal a, .feeds a, .fol-feeds a, .lp-billing button, .lp-nav-cta, .menu-f a, .menu-f .linkish {
  min-height: 44px; display: inline-flex; align-items: center;
}
.feeds a, .fol-feeds a { padding: 0 8px; }
.foot-legal a { padding: 0 4px; }
/* 13 tiles: no overshoot, 200 ms ease-out, press .98 */
.sit a { transition: transform .2s var(--ease-ui), box-shadow .2s var(--ease-ui), background-color .2s var(--ease-ui); }
.sit a:active { transform: scale(.98); }
/* 5 /pro rows: real street photos fill the square (no icon on grey) */
.lp-art { border-radius: 48px; background: #cfd8d3; }
.lp-art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .lp-art { border-radius: 32px; } }
/* 6 address photo on phones: one small answer chip, so the building stays visible */
@media (max-width: 640px) {
  .spot-2, .spot-3 { display: none !important; }
  .spot small { display: none; }
  .spot { max-width: 72%; padding: 8px 12px !important; }
  .spot b { font-size: 14px; line-height: 1.3; }
}
/* 7 city lists: a city without a photo shows its initials */
.cities .ci-ini { grid-area: i; width: 44px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgb(17 22 20 / .06); color: var(--label-2); font: 700 13px/1 var(--font); letter-spacing: .02em; }

/* ================================================================ the stadium wave (Isaac 2026-10-05): "5 states", "32 cities" and
   "10 million" in the statement are links; when the scroll fill reaches one, its characters rise one after another
   (45 ms apart) and settle, like a crowd standing up. Transform only, no layout shift. */
.stm a.wave { position: relative; white-space: nowrap; text-decoration: none; color: inherit; cursor: pointer; }
.stm .w.wave { color: rgb(17 22 20 / .16); }
.stm .w.wave.on { color: var(--label); }
.stm a.wave::before { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: 2px; border-radius: 1px; background: currentColor; opacity: .3; transition: opacity .2s var(--ease-ui); }
.stm a.wave::after { content: ""; position: absolute; inset: -.12em -.1em; min-height: 44px; }
.stm .w.wave:hover, .stm .w.wave:focus-visible { color: var(--accent); text-decoration: none; }
.stm .w.wave:hover::before, .stm .w.wave:focus-visible::before { opacity: 1; }
.stm a.wave:focus-visible { outline: 2px solid var(--label); outline-offset: 4px; border-radius: 6px; }
.wave .ch { display: inline-block; }
.wave.waving .ch { animation: oak-wave .7s both; animation-delay: calc(var(--w, 0ms) + var(--i) * 45ms); }
@keyframes oak-wave {
  0% { transform: none; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  30% { transform: translateY(-.28em) scale(1.06); color: var(--accent); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
  60% { transform: translateY(.04em); }
  100% { transform: none; }
}
@keyframes oak-wave-c { 30% { color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .wave.waving .ch { animation-name: oak-wave-c; } }
/* /coverage: calm list rows */
.cov-page .cov-l li > div { display: grid; gap: 2px; }
.cov-page .cov-l small { color: var(--label-2); font-size: 13px; }
.cov-page .sec { scroll-margin-top: 96px; }

/* ================================================================ UX study round 4 */
/* /coverage: plain rows (no numbers), cities as a two-column list of 44 px rows */
.cov-page .cov-l { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.cov-page .cov-l li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--sep-2); }
.cov-page .cov-l li b { font-size: 18px; }
.cov-page .cov-l li span { color: var(--label-2); }
.cov-page .cov-g { margin-top: 18px; }
.cov-page .cov-g h3 { font-size: 16px; margin: 0 0 4px; }
.cov-page .cov-cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); column-gap: 16px; }
.cov-page .cov-cities li { min-height: 44px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--sep-2); }
.cov-page .cov-cities a { flex: 1; min-height: 44px; display: flex; align-items: center; }
/* place pages: help links and "All changes" are whole 44 px rows */
.sec-help .help-l li { position: relative; min-height: 56px; justify-content: center; }
.sec-help .help-l a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a.more-l, .more-l a, p.more > a, .mini a { display: inline-flex; align-items: center; min-height: 44px; }
/* RSS / Atom: plain text links */
.fol-feeds a, .feeds a { background: none; padding: 0 4px; border-radius: 0; color: var(--link); font-weight: 600; }
.fol-feeds a:hover, .feeds a:hover { background: none; text-decoration: underline; }
/* city cards without a photo: the name starts at the edge (no empty picture column) */
.cities a:not(:has(img)) { grid-template-columns: 1fr; grid-template-areas: "n" "a"; }

/* ================================================================ UX study round 5 */
/* one accent: dates are ink, only links are green */
.ev-up .ev-d time, .ev-d time, .nl-d, .new-laws time { color: var(--label); }
/* phones: every small link is a 44 px row (breadcrumbs, legal footer, feeds) */
@media (max-width: 899px) {
  .crumbs a, .lg-foot a, .lg-tabs a, a[href$=".atom"], a[href$=".rss"], a[href$=".xml"] { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { min-width: 44px; justify-content: center; padding: 0 4px; }
  .crumbs ol { row-gap: 0; align-items: center; }
  .crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ================================================================ the Oakrule wordmark (Isaac 2026-10-05: concept 4, "a rule under
   the rule"): Plus Jakarta Sans Bold outlined (web/static/brand/oakrule-wordmark.svg), inline as svg.wm in currentColor.
   Pixel grid (web/DESIGN.md, Logo): the inline svg's viewBox is the cap band only (cap top to baseline, 757 units), so
   its box is --cap whole pixels tall and centring it in the pill centres the letters; the rule is drawn here, not in
   the svg, as a --rule px line --gap px under the baseline, so it lands on whole pixels at any zoom and density. The rule
   hangs below like a descender (negative margin): it does not count in the centring. The O sits concentric with the
   pill's round end (its centre one corner radius in), like the last button on the right.
   Intro, once per visit (html.wm-intro, set by the header's script): the O is there first, then the line grows to the
   right and the rest of the name comes out with it. Clip only: the layout never moves. */
.brand-mark { display: none !important; }
.brand:hover { text-decoration: none; }
.brand, .fc-brand, .lp-foot { --cap: 22px; --gap: 4px; --rule: 2px; }
.foot .brand, .footer .brand, .fc-brand, .lp-foot { --cap: 24px; }
html body .brand-word {
  display: block; position: relative; flex: none; box-sizing: content-box; height: var(--cap); width: calc(var(--cap) * 4.8164);
  padding-bottom: calc(var(--gap) + var(--rule)); margin-bottom: calc(-1 * (var(--gap) + var(--rule))); color: var(--label);
}
.brand-word svg.wm { display: block; height: var(--cap); width: calc(var(--cap) * 4.8164); max-width: none; color: inherit; overflow: visible; }
.brand-word::after {
  content: ""; position: absolute; left: 0; top: calc(var(--cap) + var(--gap)); height: var(--rule); width: calc(var(--cap) * 4.8164);
  border-radius: var(--rule); background: currentColor;
}
/* header: a fixed slot for the full wordmark (nothing next to it moves when it collapses), the O's centre one corner
   radius (30 px; 28 on phones) from the pill's left edge */
html body .nav .brand, html body .lg-top-in .brand { flex: none; width: calc(var(--cap) * 4.8164); margin-left: 10px; }
@media (max-width: 640px) { .brand { --cap: 20px; --gap: 3px; } }
@media (max-width: 359px) { .brand { --cap: 18px; } }
html.wm-intro .nav .brand-word { animation: wm-in .8s .2s cubic-bezier(.22, 1, .36, 1) both; clip-path: inset(0 78.63% 0 0); }
@keyframes wm-in { from { clip-path: inset(0 78.63% 0 0); } to { clip-path: inset(0 0 0 0); } }
html.wm-intro .nav .brand-word svg.wm { animation: wm-o .3s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wm-o { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.wm-intro .nav .brand-word, html.wm-intro .nav .brand-word svg.wm { animation: none; } }

/* scrolled: the wordmark collapses into its O on its rule (the app icon); back at the top it opens again. Done with the
   box's width, not a clip: WebKit does not repaint clip-path transitions reliably. The rule shortens with it, so its
   end stays round. */
html body .nav .brand-word { overflow: hidden; max-width: calc(var(--cap) * 4.8164); transition: max-width .45s cubic-bezier(.32, .72, 0, 1); }
html body .nav .brand-word::after { transition: width .45s cubic-bezier(.32, .72, 0, 1); }
html.logo-min body .nav .brand-word { max-width: calc(var(--cap) * 1.0291 + 1px); }
html.logo-min body .nav .brand-word::after { width: calc(var(--cap) * 1.0291); }
@media (prefers-reduced-motion: reduce) { html body .nav .brand-word, html body .nav .brand-word::after { transition: none; } }

/* /pro: the same pill as the app (8 px ends, 56 px on phones; on desktop the tagline above it is its top gap); the call
   to action sits concentric in the right end like Sign in does */
html body.lp .nav { padding: env(safe-area-inset-top) 12px 12px; }
html body.lp .nav-inner { padding: 0 8px 0 9px; }
html body.lp .lp-nav-cta { margin-bottom: 0; }
@media (max-width: 640px) {
  html body.lp .nav { padding: calc(env(safe-area-inset-top) + 8px) 10px 12px; }
  html body.lp .nav-inner { height: 56px; padding: 0 8px; }
}

/* ---------------------------------------------------------------- dark (#75): follows the phone/computer setting, no
   toggle. Same system, night materials: green-black canvas, smoked glass, light ink at the same contrast (body text
   >= 15:1, muted >= 7:1, faint >= 5:1 on every surface), brand green lifted for links; the main pill stays green with
   white text (5.4:1). Colours that sit under white text keep a deep tone (--on-*). */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --label: #eef3f0;
    --label-2: rgb(238 243 240 / .74);
    --label-3: rgb(238 243 240 / .64);
    --sep: rgb(238 243 240 / .14);
    --sep-2: rgb(238 243 240 / .08);
    --canvas: #0c100e;
    --bg: #151b18;
    --cool: #1b231f; --cool-2: #242e29; --fill: #1d2521; --stage: #1d2521;
    --ink-btn: #0f7a4e; --ink-btn-edge: #05301e;
    --accent: #5fd49a; --accent-hover: #86e2b4; --link: #5fd49a; --accent-edge: #05301e;
    --ring: rgb(95 212 154 / .32);
    --applies: #5fd49a; --ok: #5fd49a; --unknown: #f2b45c; --unk: #f2b45c; --soon: #93b4ff; --pending: #c6a6ff; --pen: #c6a6ff;
    --st-muted: #a9b1bd; --mut: #a9b1bd; --danger: #ff8f80; --over: #ff8f80;
    --status-failed: #8a919c; --chart-grid: rgb(238 243 240 / .08);
    --ok-tint: rgb(95 212 154 / .14); --unk-tint: rgb(242 180 92 / .14); --soon-tint: rgb(147 180 255 / .14);
    --pen-tint: rgb(198 166 255 / .14); --mut-tint: rgb(169 177 189 / .12); --over-tint: rgb(255 143 128 / .14);
    --ok-bg: var(--ok-tint); --unk-bg: var(--unk-tint); --soon-bg: var(--soon-tint); --pen-bg: var(--pen-tint); --mut-bg: var(--mut-tint); --over-bg: var(--over-tint);
    --on-accent: #0a6b44; --on-ok: #13703f; --on-danger: #b4231a;

    --glass: linear-gradient(180deg, rgb(34 42 38 / .72), rgb(24 30 27 / .58));
    --glass-strong: linear-gradient(180deg, rgb(26 33 30 / .94), rgb(20 26 23 / .9));
    --glass-edge: rgb(238 243 240 / .1);
    --glass-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 10px 30px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .3);
    --shadow-card: var(--glass-shadow);
    --shadow: 0 0 0 1px rgb(238 243 240 / .08), 0 8px 28px rgb(0 0 0 / .4);
    --shadow-lift: 0 0 0 1px rgb(238 243 240 / .08), 0 20px 44px rgb(0 0 0 / .5);
  }
  body {
    background:
      radial-gradient(70vw 46vh at 0% 0%, rgb(63 208 138 / .11), transparent 70%),
      radial-gradient(60vw 40vh at 100% 0%, rgb(120 170 255 / .09), transparent 70%),
      radial-gradient(70vw 40vh at 50% 100%, rgb(255 190 130 / .05), transparent 70%),
      var(--canvas);
    background-repeat: no-repeat;
  }
  ::selection { background: rgb(95 212 154 / .32); }
  img { color-scheme: light; }
}
/* dark: the surfaces the layers above paint white by hand (same selectors, so these win by coming last) */
@media (prefers-color-scheme: dark) {
  :root { --field: #1a221e; --sheet: #161d1a; }
  .card, .rule, .r-law .law, .lp-plan, .lp-join, .lp-steps li, .lp-kicker, .lp-billing button[aria-pressed="true"], .cities a,
  .ahero .addr-stack > span:not(.sep):not(.city), .ahero .facts .st-i, html .topics.group > .topic { background: var(--bg); }
  .card { background: rgb(21 27 24 / .8); }
  .in, .cu-f .in, .lp-quick input[type="email"], html .calc-in, .nav-lang, .ask-bar, .nav-s, .ob,
  html .big-search .box, html .wh .big-search .box, html body .wh .wh-ph .big-search .box { background-color: var(--field); }
  .fld .in:focus, .fld .in:focus-within, .radio label:has(input:checked) { background: var(--field); }
  .fld[data-need] .in { background: rgb(242 180 92 / .1); }
  .calc-f { background: rgb(21 27 24 / .86); }
  .dd-p, .menu-p, .dd-p, html body .menu-p { background: var(--sheet); }
  .spot, .lp-ans, html .topic.mv4-lead:not([open]) .mv4-src { background: rgb(22 29 26 / .94); }
  .spot:hover { background: var(--fill); }
  .spot::after { background: var(--label); box-shadow: 0 0 0 4px rgb(22 29 26 / .9); }
  .stm-n { border-color: var(--glass-edge); }
  /* dark: the statue is a cut-out on transparent (hero-justice-dark.webp, Isaac 2026-10-06), no white oval behind it */
  .stm-art img { -webkit-mask-image: none; mask-image: none; }
  .sit a:hover { background: rgb(34 42 38 / .9); }
  .lp-art, .wh-ph, .slides a, .slide, .cities img, .cities .ph { background-color: var(--stage); }
  .mp-knob { background: #3a4540; }
  .ahero { background: radial-gradient(120% 90% at 30% 0%, #1f2824 0%, var(--cool) 60%, #151c19 100%); }
  .lp-hero { background: radial-gradient(120% 80% at 50% 0%, #1f2824 0%, var(--cool) 55%, #151c19 100%); }
  .lp-panel { background: radial-gradient(120% 90% at 50% 0%, #1f2824 0%, var(--cool) 60%, #151c19 100%); }
  .lp-mini { background: radial-gradient(120% 80% at 50% 0%, #1f2824 0%, var(--cool) 70%); }
  .hero { background: linear-gradient(180deg, var(--cool) 0%, #161d1a 100%); }
  .ac-auth { background: none; }
  .ac-dash { background: linear-gradient(180deg, var(--cool) 0%, #161d1a 60%, var(--cool) 100%); }
  .ac-pricing { background: linear-gradient(180deg, var(--cool) 0%, #161d1a 55%, var(--canvas) 100%); }
  .mp-dhead { background: linear-gradient(180deg, var(--cool), #161d1a); }
  .ac-skel .sk { background: rgb(238 243 240 / .06); }
  .hub { background: var(--bg); } .hub-ph { background-color: var(--stage); } .hub-ph .hub-up a { background: rgb(22 29 26 / .9); }
  html .ask-dock { background: linear-gradient(180deg, rgb(12 16 14 / 0) 0, var(--canvas) 20px); }
  .ce-sk-x, .ce-sk .gal { background-image: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .06) 50%, transparent 70%); }

  /* colours under white text keep their deep tone */
  .skip, .ra-q .chip.on, .mp-undo { background: var(--ink-btn); color: #fff; }
  .chips a[aria-current], .cta, .brand-mark, .nav .brand-mark, .footer .brand-mark, .nav-s button, .nav-s-go, .lp-badge,
  .ac-bill button[aria-pressed="true"] { background: var(--on-accent); color: #fff; }
  .chk input:checked { box-shadow: inset 0 0 0 13px var(--on-accent); background-color: var(--on-accent); }
  .ce-sp-copy.is-done, .lp-tick, .pwa-done-ico > b { background: var(--on-ok); color: #fff; }
  .btn.danger, .pill.danger, .rv-count, .mp-ics-cal i { background: var(--on-danger); color: #fff; }
  .btn.primary:hover, .pill.primary:hover, .go:hover, .big-search .go:hover, .nav-s button:hover, .ask-send:hover { background: #12895a !important; }
  .stm .w, .stm .w.wave { color: rgb(238 243 240 / .18); }
  .stm .w.wave.on { color: var(--label); }
  .stm .w.wave:hover, .stm .w.wave:focus-visible { color: var(--accent); }
  html .legal .m { background: var(--on-accent); }
  :root { --mv4-line: rgb(238 243 240 / .12); --mv4-card-line: rgb(238 243 240 / .11); --mv4-press: #202925; --mv4-lead: #16211c; --mv4-lead-line: rgb(95 212 154 / .22); }
  html .topics.group > .topic.mv4-lead:not([open]):has(> summary:active) { background: #1c2a23; }
  .tv-dot { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--sep-2); }
  .hq-ph, html body .wh .wh-ph .bs-f input::placeholder { color: rgb(238 243 240 / .58); }
  .in input::placeholder, .mp-field input::placeholder, .aa-field input::placeholder, .lp-field input::placeholder { color: rgb(238 243 240 / .5); }
  .cities .ci-ini { background: rgb(238 243 240 / .08); }
  .page .btn:not(.btn-2) { background: var(--ink-btn); }
  .btn:hover, .pill:hover { background: var(--fill); }
  .btn, .pill { --edge: #050806; } /* the pressed-in bottom edge: the light one (#d8dfdb) read as a white line (#151) */
  .btn-2 { background: rgb(34 42 38 / .8); color: var(--label); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px var(--sep), 0 6px 16px rgb(0 0 0 / .3); }
  .cta .btn, .page .cta .btn { background: #fff; color: #0a6b44; }
  html .sh-addr:has(.sh-ph) > span { background: rgb(22 29 26 / .94); }
  .ce-seg-b[aria-pressed="true"] { background: var(--cool-2); }
  .s-nav, .s-ok { box-shadow: 0 0 0 4px var(--bg); }
  .ask-step[data-step="thinking"] .lbl, .ask-step[data-step="now"] .lbl { background-image: linear-gradient(90deg, rgb(238 243 240 / .45) 0%, rgb(238 243 240 / .95) 45%, rgb(238 243 240 / .45) 90%); }
  .hr, .rl, .ns, .fol, .ra-sug, .ra-q .chip, .ll-tabs, .pwa-card, .pwa-nudge, .pwa-refresh, .lp-askq, .lp-optout-f input,
  .ask-a, .ask-steps, .ask-qitem, .ask-share, .ask-full-ico, .ask-chip, .ask-chip--line:hover, .ask-ichip,
  html .topics.group > .topic[open], html .ask-chips .ask-chip, html .ask-chips .ask-chip:nth-child(n+4), html .sh-cite > span:first-child,
  html .sh-cite > a, html .sh-share, html .tv > .tv-i, html .sr-g, html .mp-card, .mp-ics-cal, .lp-links a:hover { background: var(--bg); }
  .in:focus-within, .mp-field input:focus, .aa-field input:focus, .lp-field input:focus-visible, .lp-field select:focus-visible,
  .calc-in:focus-within, .ask-where:focus-within, .lf:focus, .radio input, .chk input, .rv-form textarea:focus, .rv-signin input:focus { background-color: var(--field); }
  .thumb, .how3-i { background-color: var(--stage); }
  .matrix tr.state th, .icon-btn:hover, .sh-prev-t, .mp-seg, .aa-seg { background: var(--fill); }
  .mp-seg button[aria-checked="true"], .aa-seg button[aria-checked="true"] { background: #2e3934; }
  .float-stat { background: rgb(22 29 26 / .95); }
  .mp-exbar { background: rgb(22 29 26 / .7); } .mp-ex { background: rgb(22 29 26 / .8); } .mp-addc { background: rgb(22 29 26 / .6); }
  .ac-tabs a:hover { background: rgb(238 243 240 / .06); }
  .rv-head { background: rgb(12 16 14 / .94); }
  .fixture-banner, .lf { background: var(--unk-tint); }
  .doc-text mark { background: rgb(242 180 92 / .3); color: var(--label); }
  /* the letter preview (and the install guide's drawn phone and browser) stay white paper, with the light ink on it */
  .lt-sheet, .pm-phone, .pm-desk { color-scheme: light; color: var(--label); --label: #111614; --label-2: rgb(17 22 20 / .66); --label-3: rgb(17 22 20 / .62);
    --sep: rgb(17 22 20 / .12); --sep-2: rgb(17 22 20 / .07); --accent: #0a6b44; --link: #0a6b44; --danger: #b4231a; --over-tint: #fdeceb; --cool: #eef3f0; --bg: #fff; }
  .sdot.sd-check { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #d98a00; }
}