/* Spec 054 (27 Sept 2026) — the website in Replay's look. One family, Plus Jakarta Sans (spec 036), self-hosted: the
   file lives in web/public/fonts/ and build.py copies that folder here, so the app and the site never drift apart. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-display: swap; src: url(/fonts/PlusJakartaSans-variable.woff2) format("woff2"); }

/* ---- the brand's tokens (Branding/BRAND.md, 26 Sept 2026). Light, always.
   Every colour on the site is one of these. No colour literal below this block. ---- */
:root {
  --page: #F3F6FB; --page-2: #E9EEF6; --card: #FFFFFF; --edge: rgba(11,16,32,0.08); --edge-2: rgba(11,16,32,0.14);
  --ink: #0B1020; --text-2: #3F4A5E; --text-3: #66718A;
  --navy: #0B1020; --navy-edge: transparent; --on-navy: #F5F7FB; --on-navy-2: #B4BDCC; --on-navy-edge: rgba(180,189,204,0.35);
  --navy-2: #121A30; --on-navy-3: #939DAD; --shape: #7C90AE;   /* spec 078: the bars' track on navy, the quiet words on navy, the tool cards' small shapes */
  --orange: #EE6C1C; --orange-words: #B84A00; --on-orange: #0B1020; --on-orange-2: rgba(11,16,32,0.84); --on-orange-3: rgba(11,16,32,0.66);
  --solar: #FFCC00; --solar-words: #7D6000; --solar-bar: #A68400; --forecast: #596F90; --link: #5646C9; --warn: #C43E36; --grid: #197F3F; --idle: #D5DCE8;   /* spec 055: grid green (BRAND.md, light words) marks cheap hours; idle is the rest of the day on the tariff bar */
  --solar-glow: rgba(255,204,0,0.55); --pic: #DDE8F2; --shadow: 0 10px 30px rgba(11,16,32,0.08);
  --glow-a: rgba(255,204,0,0.16); --glow-b: rgba(78,157,255,0.14); --glow-c: rgba(238,108,28,0.12);
  --font: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
/* Light on every device (Munty, 27 Sept 2026: "default to light mode for landing page and all tools pages … on all devices").
   The dark tokens were removed with that decision; BRAND.md keeps them if a dark site is ever wanted. */

/* Nothing on the site is smaller than 0.8125rem, 13 px: BRAND.md's smallest size (6 Oct 2026). */
/* ---- the page. Sizes are fluid: a floor, a ceiling, and the screen's width or height between them. Every clamp keeps a
   rem part so the phone's text-size setting still counts, and no ceiling is over 2.5 × its floor (WCAG 1.4.4). Heights use
   svh, the small viewport, so a phone's browser bar never pushes the button off the first screen. ---- */
* { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.0625rem); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100svh; position: relative; }
/* the three faint glows: solar top left, house blue top right, orange at the foot — fixed behind everything */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(60vmax 40vmax at 8% 4%, var(--glow-a), transparent 65%),
  radial-gradient(60vmax 40vmax at 96% 10%, var(--glow-b), transparent 65%),
  radial-gradient(70vmax 45vmax at 60% 100%, var(--glow-c), transparent 65%), var(--page); }
a { color: var(--link); }
.wrap { max-width: 720px; margin: 0 auto; padding-block: clamp(10px, 1.6svh, 16px) 56px; padding-inline: clamp(14px, 4vw, 24px); }
.wrap.wide { max-width: 1100px; }

header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 clamp(8px, 1.5svh, 16px); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.125rem); color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand .mark { width: clamp(28px, 8vw, 36px); height: auto; border-radius: 9px; display: block; }
.brand .beta { font-weight: 600; font-size: 0.8125rem; color: var(--text-2);  vertical-align: middle; }
nav.top { display: flex; gap: clamp(14px, 3vw, 36px); white-space: nowrap; }
nav.top a { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1rem); display: inline-flex; align-items: center; min-height: 44px; }   /* 44 px tap height (6 Oct 2026) */
/* 14 Oct 2026: the last item was Replay in orange; Replay left the menu, so no item is orange now */
/* the phone profile: the four links on their own line under the mark, spread out, so none is cut off */
@media (max-width: 899px) { nav.top { width: 100%; gap: 0; justify-content: space-between; padding-top: 0; border-top: 1px solid var(--edge); margin-top: 4px; } }

h1 { font-weight: 800; font-size: clamp(1.55rem, 0.9rem + 4.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 8px; text-wrap: balance; }
h2 { font-weight: 700; font-size: clamp(1.2rem, 1rem + 1vw, 1.375rem); letter-spacing: -0.01em; margin: 32px 0 8px; text-wrap: balance; }
h3 { font-weight: 700; font-size: 1.0625rem; margin: 22px 0 6px; }
p, li { max-width: 62ch; }
p { margin: 0 0 12px; }
.lede { font-size: 1.0625rem; color: var(--text-2); margin-bottom: 14px; }
.number { margin: 4px 0 2px; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.625rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--solar-words); font-variant-numeric: tabular-nums; }
.number small { font-size: 1rem; font-weight: 600; color: var(--text-2); letter-spacing: 0; margin-left: 6px; }
.tag { display: inline-block; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--edge-2); border-radius: 999px; padding: 1px 7px; color: var(--text-2); vertical-align: middle; }
.period { color: var(--text-2); font-size: 0.95rem; margin: 6px 0 0; }

/* cards: white in light, glass in dark; one thin edge; a soft shadow in light only (BRAND.md §6) */
.card, .door, .list li, form.tool input, form.tool select, .tiles label { background: var(--card); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.card { border-radius: 18px; padding: 16px 18px; margin: 14px 0; }
.card.lead { border-color: var(--edge-2); }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 2vw, 12px); margin: 12px 0 6px; }
.door { display: grid; align-content: start; gap: 2px; text-decoration: none; color: var(--ink); border-radius: 18px; padding: clamp(10px, 1.6svh, 14px) clamp(12px, 3vw, 16px); }
.door b { font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.125rem); }
.door span { color: var(--text-2); font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 0.95rem); line-height: 1.4; }

/* the orange door: Replay's orange, flat, ink words (BRAND.md: the product's own colour for the one thing to do) */
.door.primary { grid-column: 1 / -1; gap: clamp(2px, 0.5svh, 6px); padding: clamp(12px, 1.9svh, 18px) clamp(14px, 4vw, 20px); background: var(--orange); border-color: var(--orange); color: var(--on-orange); box-shadow: none; }
.door.primary b { font-size: clamp(1.15rem, 0.8rem + 2.2vw, 1.5rem); letter-spacing: -0.01em; }
.door.primary b::after { content: " →"; }
.door.primary span { color: var(--on-orange-2); font-size: clamp(0.85rem, 0.75rem + 0.6vw, 1rem); }
.door.primary .free { font-style: normal; font-size: 0.8125rem; font-weight: 600; color: var(--on-orange-3); }

.btn { display: inline-block; background: var(--orange); color: var(--on-orange); font-weight: 700; text-decoration: none; border: 0; border-radius: 12px; padding: 12px 18px; font-size: 1rem; cursor: pointer; font-family: var(--font); min-height: 44px; }
.btn.quiet { background: transparent; color: var(--link); border: 1px solid var(--edge-2); }
figure { margin: 16px 0; }
figure svg { width: 100%; height: auto; display: block; }
figcaption { font-size: 0.9rem; color: var(--text-2); margin-top: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.9rem; color: var(--text-2); margin-top: 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.source { font-size: 0.9rem; color: var(--text-3); border-top: 1px solid var(--edge); padding-top: 10px; margin-top: 26px; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list li { border-radius: 18px; padding: 12px 14px; }
.list a { text-decoration: none; color: var(--ink); display: block; }
.list b { font-weight: 700; }
.list span { display: block; color: var(--text-2); font-size: 0.95rem; }
form.tool { display: grid; gap: 12px; margin: 10px 0 14px; }
form.tool label { display: block; font-weight: 600; font-size: 0.95rem; }
form.tool input, form.tool select { width: 100%; font: inherit; padding: 11px 12px; border-radius: 12px; color: var(--ink); box-shadow: none; min-height: 44px; }
form.tool input:focus, form.tool select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tiles label { border-radius: 12px; padding: 8px 10px; text-align: center; cursor: pointer; font-weight: 500; box-shadow: none; }
.tiles input { display: none; }
.tiles input:checked + span { color: var(--orange-words); font-weight: 700; }
.answer .row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--edge); }
.answer .row:first-child { border-top: 0; }
.answer .k { color: var(--text-2); }
.answer .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.answer .big { font-size: 1.7rem; color: var(--orange-words); font-weight: 800; }
.small { font-size: 0.9rem; color: var(--text-2); }
.problem { color: var(--warn); font-weight: 600; }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--navy); border-radius: 18px; overflow: hidden; margin: 14px 0; border: 1px solid var(--edge); }
.video img, .video iframe { position: absolute; top: 0; left: 0; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video button { position: absolute; inset: 0; margin: auto; width: 72px; height: 50px; border: 0; border-radius: 12px; background: var(--orange); cursor: pointer; }
.video button::after { content: ""; position: absolute; left: 29px; top: 15px; border-left: 18px solid var(--on-orange); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
footer { margin-top: clamp(16px, 3svh, 44px); border-top: 1px solid var(--edge); padding-top: 14px; font-size: 0.8125rem; color: var(--text-3); }
footer a { color: var(--text-3); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---- the front page — spec 078 stage 2, the Instrument look (Munty, 7 Oct 2026). A navy band holds the header, the
   heading, one line, the orange button, the house and the roof result. Then the tools and the finding on the light page.
   Text sizes are BRAND.md's six only. One column on a phone; two inside the band from 900 px. ---- */
.band { background: var(--navy); color: var(--on-navy); }
.band .wrap { padding-bottom: clamp(28px, 5svh, 56px); }
.band header.top { padding-bottom: 8px; }
.band .brand { color: var(--on-navy); font-size: 1.0625rem; }
.band .brand .beta { color: var(--on-navy-2); }
.band nav.top a { color: var(--on-navy-2); font-size: 0.9375rem; }
@media (max-width: 899px) { .band nav.top { border-top-color: var(--on-navy-edge); } }
.hero { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.hero h1 { margin: 0; font-size: 2.125rem; line-height: 1.1; letter-spacing: -0.02em; }
.hero .line { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--on-navy-2); }
.house { border-radius: 18px; overflow: hidden; background: var(--pic); display: grid; place-items: center; }
.house .pic { display: block; width: auto; max-width: 100%; height: auto; max-height: clamp(130px, 40vh - 110px, 400px); max-height: clamp(130px, 40svh - 110px, 400px); aspect-ratio: 860 / 596; }
.go { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 12px; background: var(--orange); color: var(--on-orange); font-size: 1.0625rem; font-weight: 700; text-decoration: none; }
.hero .free { margin: -6px 0 0; font-size: 0.8125rem; color: var(--on-navy-3); text-align: center; }
.roof { display: grid; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--on-navy-edge); }
.roof p { margin: 0; max-width: none; }
.roof-head { display: grid; gap: 8px; }
.roof .k { font-size: 0.9375rem; font-weight: 600; color: var(--on-navy-2); }
.roof .num { font-size: 3.625rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--solar); font-variant-numeric: tabular-nums; }
.roof .say { font-size: 0.9375rem; color: var(--on-navy-2); }
.roof-body { display: grid; gap: 16px; }
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--on-navy-2); }
.bar .track { height: 10px; border-radius: 999px; background: var(--navy-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; }
.bar i.model { background: var(--on-navy-2); }
.bar i.solar { background: var(--solar); }
.bar .kwh { font-variant-numeric: tabular-nums; color: var(--on-navy); }
.meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; font-size: 0.8125rem; color: var(--on-navy-3); }
.meta dt { font-size: 1.0625rem; font-weight: 700; color: var(--on-navy); }
.meta dd { margin: 0; }
.roof .note { font-size: 0.8125rem; color: var(--on-navy-3); }

.front { display: grid; gap: 40px; margin-top: 40px; }
.front section { display: grid; gap: 12px; }
.row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.row-head h2 { margin: 0; font-size: 1.375rem; font-weight: 800; }
.row-head p { margin: 0; font-size: 0.9375rem; color: var(--text-2); }
.row-head a { font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.cards { display: grid; gap: 12px; }
.tool, .finding { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--edge); border-radius: 18px; padding: 16px; color: var(--ink); text-decoration: none; }
.tool .words, .finding .words { flex: 1; display: grid; gap: 2px; }
.tool b, .finding b { font-size: 1.0625rem; font-weight: 700; }
.tool .words span, .finding .words span { font-size: 0.9375rem; color: var(--text-2); }
.tool .foot { display: none; }
.tool .words .time { font-size: 0.8125rem; color: var(--text-3); }
/* 20 Oct 2026: the tool pictures are drawn icons on a navy tile, in the job colours at full strength (BRAND.md: no faded fills). */
.shape { flex: none; width: 64px; height: 64px; border-radius: 12px; background: var(--navy); padding: 8px; display: flex; align-items: center; justify-content: center; }
.shape svg { width: 100%; height: 100%; display: block; }
.finding .icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--solar); color: var(--ink); display: grid; place-items: center; }
.finding > svg, .tool .foot svg { flex: none; color: var(--ink); }

/* spec 048 change 1: the front page's house has Replay's moving lines. Light trail since 28 Sept 2026 (Munty): a
   streak that fades out behind itself, brighter shades with a dark edge so they read on the pale picture. Sizes are
   in the picture's 1672-wide canvas, about one and a half times the app's, because this picture is shown small.
   "Reduce motion": each line drawn whole and still. */
.house .hl-bed, .house .hl-edge, .house .hl { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.house .hl-bed { stroke: #FFFFFF; stroke-width: 24; opacity: .75; }
.house .hl-edge { stroke-width: 17; opacity: .55; }
.house .hl { stroke-width: 13.5; }
.house .hl.s1 { stroke-width: 12; opacity: .7; } .house .hl.s2 { stroke-width: 10.5; opacity: .45; }
.house .hl.s3 { stroke-width: 9; opacity: .25; } .house .hl.s4 { stroke-width: 7.5; opacity: .12; }
.house .hl.solar { stroke: #FFE01A; } .house .hl-edge.solar { stroke: #6B5200; }
.house .hl.battery { stroke: #FF7A1F; } .house .hl-edge.battery { stroke: #7A2E00; }
.house .hl.sold { stroke: #FF6FB5; } .house .hl.bought { stroke: #FF2E97; }
.house .hl-edge.sold, .house .hl-edge.bought { stroke: #6E0035; }
.house .hl.car { stroke: #1FDA64; } .house .hl-edge.car { stroke: #0B5A28; }
@media (prefers-reduced-motion: no-preference) {
  .house .hl-bed, .house .hl-edge, .house .hl { stroke-dasharray: 4 96; animation: hl-run linear infinite; }
  .house .hl-edge.car, .house .hl.car, .house .hl-bed.car { stroke-dasharray: 2 98; }
}
@media (prefers-reduced-motion: reduce) {
  .house .hl-bed, .house .hl.s1, .house .hl.s2, .house .hl.s3, .house .hl.s4, .house .hl.bought, .house .hl-edge.bought { display: none; }
  .house .hl-edge { stroke-width: 11; opacity: .5; } .house .hl { stroke-width: 7.5; }
}
@keyframes hl-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* the desktop profile: two columns inside the band, three tool cards in a row. By width in CSS, never by device name. */
@media (min-width: 900px) {
  .wrap.wide { padding-inline: clamp(24px, 6vw, 80px); }
  .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: ". house" "h house" "line house" "go house" "free house" ". house";
          grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 56px; row-gap: 24px; padding-top: 40px; }
  .hero h1 { grid-area: h; font-size: 3.625rem; line-height: 1.05; }
  .hero .line { grid-area: line; }
  .hero .house { grid-area: house; }
  .hero .go { grid-area: go; justify-self: start; }
  .hero .free { grid-area: free; text-align: left; margin: -12px 0 0; }
  .house .pic { max-height: min(46vh, 440px); max-height: min(46svh, 440px); }
  .roof { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; margin-top: 40px; padding-top: 32px; }
  .front { margin-top: 72px; gap: 64px; }
  .row-head h2 { font-size: 2.125rem; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .tool { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px; }
  .tool .shape { width: auto; height: 120px; padding: 12px; }
  .tool   .tool b, .finding b { font-size: 1.375rem; }
  .tool .words .time { display: none; }
  .tool .foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--text-3); }
  .finding { padding: 24px; gap: 24px; }
  .finding .icon { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: no-preference) { .tool, .finding, .go, .btn, .door { transition: transform .15s ease; } .tool:hover, .finding:hover, .go:hover, .btn:hover, .door:hover { transform: translateY(-1px); } }

/* spec 056: Replay Lite — the strip that opens every small check, and the one door into Replay at its foot */
.lite-strip { display: inline-block; margin: 4px 0 10px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--edge-2); background: var(--card); font-size: 0.85rem; color: var(--text-2); }
.lite-strip b { color: var(--orange-words); }
.lite-door { margin-top: 22px; }
.lite-door p { margin: 0 0 4px; }

/* About (13 Oct 2026) */
.about p { margin: 0; font-size: 1.0625rem; line-height: 1.55; max-width: 40em; }
.about a { color: var(--ink); text-underline-offset: 3px; }

/* The Videos page before the first upload (Munty, 13 Oct 2026): EP01's thumbnail as a playlist, "coming soon".
   Thumbnail on top on a phone, beside the words from 640 px. No play button, because nothing plays yet. */
.playlist { margin-top: 24px; }
.playlist .row-head { margin-bottom: 12px; }
.pl { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ep { max-width: none; display: grid; gap: 12px; background: var(--card); border: 1px solid var(--edge); box-shadow: var(--shadow); border-radius: 18px; padding: 12px; }
.ep .thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--navy); }
.ep .thumb img { position: absolute; top: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 25 Oct 2026: Safari before iOS 15 has no aspect-ratio, so the box had no height and hid the thumbnail (Munty's old iPad).
   The old way: no height, and a top padding of 9 / 16 of the width. top and left above stand in for inset there. */
@supports not (aspect-ratio: 16 / 9) { .ep .thumb, .video { height: 0; padding-top: 56.25%; } }
/* The two other pictures carry their own "Coming soon" pill drawn into them (20 Oct 2026: tried covering and cropping it, put back). */
.ep .soon { position: absolute; left: 10px; bottom: 10px; background: var(--solar); color: var(--ink); font-weight: 800; font-size: 0.8125rem; padding: 4px 10px; border-radius: 999px; }
.tool.dev .tag::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--ink); flex: none; }
@media (prefers-reduced-motion: no-preference) { .tool.dev .tag::before { animation: soon-dot 1.6s ease-in-out infinite; } }
@keyframes soon-dot { 50% { opacity: .25; } }
.ep .when { position: absolute; right: 10px; bottom: 10px; background: var(--navy); color: var(--on-navy); font-weight: 600; font-size: 0.8125rem; padding: 3px 8px; border-radius: 6px; }
.ep-words { display: flex; flex-direction: column; gap: 4px; padding: 0 4px 4px; }
.ep-n { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--orange-words); }
.ep-words h3 { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.ep-words p:last-child { margin: 0; font-size: 0.9375rem; color: var(--text-2); }
@media (min-width: 640px) { .ep { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 18px; } .ep-words h3 { font-size: 1.375rem; } }

/* About with Munty's photo (13 Oct 2026): photo above the words on a phone, beside them from 760 px. */
.about-grid { display: grid; gap: 16px; margin-top: 12px; }
.about-pic { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--edge); box-shadow: var(--shadow); }
@media (min-width: 760px) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: stretch; }
  .about-pic { height: 100%; min-height: 320px; object-fit: cover; object-position: center; } .about-words { justify-content: center; } }
.about-words { display: flex; flex-direction: column; gap: 12px; }

/* The Tools page (13 Oct 2026): the front page's cards on their own page. The heading is the page's h1. */
.front.tools-page { margin-top: 8px; gap: 16px; }
.tools-page .row-head h1 { margin: 0; }
@media (min-width: 900px) { .front.tools-page { margin-top: 24px; gap: 24px; } }
/* The Findings page (13 Oct 2026): one finding card a row, at every width */
@media (min-width: 900px) { .cards.findings-list { grid-template-columns: 1fr; gap: 12px; } }
/* Pulse Pro's shape (13 Oct 2026): a steady low row of readings, the latest in orange. Four cards on the Tools page sit two by two. */
@media (min-width: 900px) { .tools-page .cards:not(.findings-list), .tools-row .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Spec 088 (14 Oct 2026): the Support page. Referral links labelled in words, at the top and on each card. */
.support-label { background: var(--card); border: 1px solid var(--edge-2); border-radius: 12px; padding: 10px 14px; font-size: 0.9375rem; }
/* Munty, 14 Oct 2026: "and so do I." left "I." alone on a line. A little more width, and no single-word last line. */
.support-way { padding: 16px 14px; }
.support-way p, .support-label { text-wrap: balance; text-wrap: pretty; }
.support-way h3 { margin: 2px 0 6px; font-size: 1.0625rem; font-weight: 800; }
.support-way .k { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--text-2); }
.support-way .brand { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; color: var(--text-2); }
.support-way .brand img { height: 32px; width: auto; display: block; }
.support-way .brand img.wordmark { height: 24px; }
.support-way .note { font-size: 0.8125rem; color: var(--text-2); margin: 8px 0 0; }
.support-promise { padding-left: 20px; }
.support-promise li { margin: 6px 0; }

/* Munty, 19 Oct 2026: a tool shown before its video. Not a link, so no hover lift and no arrow. */
.tool.dev { box-shadow: none; }
.tool.dev .tag { display: inline-flex; align-items: center; gap: .5em; background: var(--solar); color: var(--ink); border: 0; font-weight: 800; padding: 5px 14px; box-shadow: 0 0 0 2px var(--ink), 0 4px 12px var(--solar-glow); }
/* The channel card on the Videos page (19 Oct 2026) */
.channel p { margin: 0 0 8px; max-width: 40em; }
.channel .k { font-weight: 700; }
.channel .channel-go { margin: 12px 0 0; }
.btn.yt { display: inline-flex; align-items: center; gap: 8px; }
.tool .words .tag { font-size: 0.9375rem; }
.tool .words .time .tag { justify-self: start; }
.tool.dev .words .time { margin-top: 6px; }

/* Spec 094 (21 Oct 2026): one "Register your interest" form under the tool cards. No tick box. */
.register { margin: 28px 0 8px; padding: 20px 16px; background: var(--card); border: 1px solid var(--edge-2); border-radius: 18px; }
.register h2 { margin: 0; font-size: 1.375rem; font-weight: 800; line-height: 1.2; }
.notify-form { position: relative; display: grid; gap: 10px; }
.notify-form label { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.reg-row { display: grid; gap: 10px; }
@media (min-width: 640px) { .reg-row { grid-template-columns: 1fr auto; } .register { padding: 24px; } }
.notify-form input[type=email] { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--page, var(--card)); border: 1px solid var(--edge-2); border-radius: 12px; }
.notify-form button { min-height: 44px; padding: 0 22px; font: inherit; font-weight: 700; color: var(--on-orange); background: var(--orange); border: 0; border-radius: 12px; cursor: pointer; }
.notify-form button:disabled { color: var(--text-2); background: var(--idle); cursor: default; }
.notify-form button:focus-visible, .notify-form input:focus-visible, .reg-yt a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.notify-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.reg-small { margin: 0; font-size: 0.9375rem; color: var(--text-2); }
.notify-msg { margin: 0; font-size: 0.9375rem; color: var(--text-2); }
.notify-msg:empty { display: none; }
.notify-msg.bad { color: var(--warn); font-weight: 600; }
.notify-form.done > :not(.notify-msg) { display: none; }
.notify-form.done .notify-msg { color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
.reg-yt { display: none; margin: 12px 0 0; font-size: 0.9375rem; }
.register:has(.notify-form.done) .reg-yt { display: block; }
.reg-yt a { color: var(--ink); font-weight: 600; }

/* 20 Oct 2026: the About lede, and the front page's "Coming to the channel" row. Three across from 760 px; on a phone a
   row that scrolls sideways inside itself, with the next picture showing so it is clear there is more. */
.about .about-lede { font-size: 1.375rem; font-weight: 800; line-height: 1.3; color: var(--ink); }
.coming .pl-row { gap: 16px; }
.coming .ep-words h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
@media (max-width: 759px) { .coming .pl-row { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .coming .pl-row > li { scroll-snap-align: start; } }
@media (min-width: 760px) { .coming .pl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .coming .ep { align-content: start; } }
.coming .ep { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; } .coming .ep-words h3 { font-size: 1.0625rem; }

/* Support page (20 Oct 2026): Munty's photo beside a short note, then the free ways, the money's job, the thank-you cards. */
.support-hero { display: grid; gap: 20px; margin: 8px 0 8px; }
.support-pic { width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 18px; border: 1px solid var(--edge); box-shadow: var(--shadow); }
.support-intro { display: grid; gap: 12px; align-content: center; }
.support-intro h1, .support-intro p { margin: 0; }
@media (min-width: 760px) { .support-hero { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px; align-items: center; } }
.support-free { display: grid; gap: 10px; }
.support-free p { margin: 0; }
.support-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.support-grid .support-way { margin: 0; }

/* Episode 1's card (23 Oct 2026): the picture links to the video once it is up; the number link sits under the words. */
.ep .thumb-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: block; }
.ep-go, .ep-num { margin: 8px 0 0; }
.ep-num a { font-weight: 600; }