/*
 * Organise (The Virtual Organiser), direction m: the site's own layouts.
 * The system is assets/system/ (copied unchanged from the hub); everything
 * here is site-local. Shared hub layouts this site needs are re-stated here
 * (the hub's hub.css is never loaded or edited).
 *
 * Contents: 1 the site's palette; 2 shared page parts (imprint strip, folio,
 * adverts, slots, small print, back page, 404, footer theme); 3 the front
 * page's layered cover and the ledger; 4 front page sections; 5 Monthly
 * hours; 6 One-off fixes; 7 How a month works; 8 the worked example;
 * 9 Your data; 10 Questions; 11 About; 12 the stepper; 13 motion.
 */

/* 1. The site's palette: the family tokens, tinted to the ledger teal (contrast in the report). */
.site-organise {
  --paper: light-dark(#EEF3F1, #0C1615);
  --raised: light-dark(#F9FBFA, #13211F);
  --sunk: light-dark(#E1EAE7, #08100F);
  --ink: light-dark(#13201E, #E8F0EE);
  --ink-2: light-dark(#3F524E, #A9BDB8);
  --hair: light-dark(#C7D3CF, #24352F);
  --rule: light-dark(#5F716D, #7A8F8A);
  --teal: light-dark(#0E3B36, #9FD6CB);
  --on-teal: light-dark(#F3F7F6, #0B1F1C);
  --on-teal-2: light-dark(#C1CECC, #2C4742);
  --block: light-dark(#2E7D70, #5FB3A3);
  --block-empty: light-dark(#D3E0DC, #1C2E2B);
}
.site-organise .h-1 { font-weight: 700; font-stretch: 87%; letter-spacing: -.012em; }
.site-organise .h-2 { font-weight: 700; font-stretch: 87%; }
.site-organise :focus-visible { outline-color: var(--ink); }
.site-organise .teal :focus-visible, .site-organise .lc__words :focus-visible { outline-color: var(--on-teal); }

/* 2. Shared page parts. */
.sc-imprint { display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem; color: inherit; }
.sc-imprint svg { width: 22px; height: 22px; flex: none; }
.sc-folio { margin-left: auto; font: 600 .8rem/1 var(--f-app); letter-spacing: .04em; opacity: .85; }
.page-end { display: grid; gap: 1rem; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.label-k { margin: 0 0 .5rem; color: var(--ink-2); }

.spread-head { position: relative; isolation: isolate; padding: clamp(1.2rem, 3vw, 2.6rem) 0 clamp(1.3rem, 3vw, 2.4rem); border-bottom: 2px solid var(--teal); }
.spread-head > .pat { position: absolute; inset: 0; z-index: -1; background: var(--teal); opacity: .045; -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/ichimatsu.c1c1eebcbd.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/ichimatsu.c1c1eebcbd.svg); -webkit-mask-size: 18px auto; mask-size: 18px auto; }
.spread-head .h-1 { max-width: 22ch; margin: 0 0 .7rem; }
.spread-head .stand { color: var(--ink-2); max-width: 44ch; margin: 0; }
.spread-head__in { display: grid; gap: 1.2rem 3rem; align-items: end; }
@media (min-width: 1000px) { .spread-head__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.spread-head .sc-imprint { color: var(--teal); }

.also { padding: clamp(1.8rem, 4vw, 3rem) 0; background: var(--sunk); border-top: 1px solid var(--hair); }
.also .h-2 { margin: 0 0 .4rem; }
.also__sub { margin: 0 0 1.2rem; color: var(--ink-2); max-width: 52ch; }
.adverts { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.adverts .advert-all { grid-column: 1 / -1; min-height: 96px; }
@media (min-width: 900px) { .adverts { grid-template-columns: repeat(2, minmax(0, 340px)) minmax(0, 260px); gap: 1rem; } .adverts .advert-all { grid-column: auto; min-height: 160px; } }
.slot { container: slot / inline-size; min-width: 0; display: flex; flex-direction: column; }
.slot > .cover { flex: 1; }
.advert-slot .cover__mast { --mh: 46px; }
.advert-all .label { color: var(--ink-2); }
.advert-all svg { width: 22px; height: 22px; justify-self: center; }
@container slot (max-width: 260px) {
  .cover__imprint .cover__shelf { display: none; }
  .cover__imprint { letter-spacing: .12em; padding-left: .9rem; }
  .cover__band, .cover__mast { padding-left: .9rem; padding-right: .8rem; }
  .cover__mast { --mh: 30px; padding-bottom: .9rem; }
  .cover__line { font-size: .95rem; }
  .cover__price { flex-direction: column; align-items: flex-start; }
}
.cover__band .cancel-line { font-size: .75rem; line-height: 1.4; color: var(--c-band-2); }
.inside--spread { background: var(--c-ground); color: var(--c-ink); }
.inside--spread .inside__mast { color: var(--c-ink); }
.inside--spread .inside__h { color: var(--ink); }
.inside__k { margin: 0 0 .35rem; color: var(--s-ink-2, var(--ink-2)); }
.inside .quiet-line, .inside .cancel-line { margin-top: .45rem; max-width: 44ch; }
.inside.site-organise { background: var(--paper); }

.foot-theme { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: 500 .95rem/1.2 var(--f-app); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.foot-theme svg { display: none; width: 16px; height: 16px; flex: none; }
.foot-theme[aria-pressed="true"] svg { display: block; }
.foot-home { display: inline-flex; align-items: center; min-height: 44px; }

.price-box { display: grid; gap: .5rem; padding: 1rem 1.1rem; background: var(--raised); border: 1px solid var(--hair); border-radius: 10px; }
.price-box p { margin: 0; }
.price-box .price { font-size: 1.15rem; }
.price-box .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.cancel-line { color: var(--ink-2); }
a.cancel-line { display: inline-block; min-height: 24px; }
.scope { margin: 0; padding: 0 0 0 1.1rem; font: 400 .98rem/1.45 var(--f-read); }
.scope li { margin: .2rem 0; }
.scope-k { font: 650 .75rem/1.2 var(--f-app); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.hers { margin: 0; font: 400 clamp(1.05rem, .98rem + .3vw, 1.2rem)/1.42 var(--f-read); text-wrap: pretty; }
.hers::before { content: "\201C"; } .hers::after { content: "\201D"; }
.hers-by { margin: .3rem 0 0; font: 500 .8125rem/1.3 var(--f-app); color: var(--ink-2); }

/* Small print pages, back page, 404 (re-stated from the hub's layouts). */
.imprint-head { padding: clamp(1.4rem, 3.5vw, 3rem) 0 clamp(1rem, 2.5vw, 2rem); border-bottom: 2px solid var(--ink); }
.imprint-head .sc-imprint { color: var(--teal); }
.imprint-head .h-1 { margin: 0 0 .8rem; max-width: 22ch; }
.imprint-head .summary { margin: 0; font: 400 clamp(1.2rem, 1rem + .8vw, 1.7rem)/1.38 var(--f-read); max-width: 40ch; text-wrap: pretty; }
.imprint-page .prose { padding-block: 1rem 2rem; }
.imprint-page h2 { font: 700 1.35rem/1.15 var(--f-cond); font-stretch: 87%; margin: 2.2rem 0 .6rem; }
.imprint-page .prose ul { padding-left: 1.2rem; }
.imprint-page .prose li { margin: .3rem 0; max-width: var(--measure); }
.imprint-page .steps { max-width: 44rem; }
.routes__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.routes__list a { display: inline-flex; align-items: center; gap: .45rem; min-height: 48px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--raised); font: 600 .95rem/1 var(--f-app); text-decoration: none; }
.routes__list svg { width: 16px; height: 16px; }
.btn-call--big { min-height: 60px; font-size: 1.1rem; padding: 0 1.6rem; border-color: var(--call); }

.book { padding: clamp(1.2rem, 3vw, 2.6rem) 0 clamp(2rem, 4vw, 3.5rem); }
.book__in { display: grid; gap: 1.6rem 3.5rem; }
@media (min-width: 1000px) { .book__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "lead steps" "photo steps" "photo after"; align-items: start; } .book__lead { grid-area: lead; } .book__steps { grid-area: steps; } .book__after { grid-area: after; } .book__photo { grid-area: photo; } }
.book__lead .h-1 { margin: 0 0 .9rem; max-width: 14ch; }
.book__lead .stand { color: var(--ink-2); max-width: 34ch; margin: 0; }
.book__steps { padding: clamp(1.2rem, 3vw, 2rem); border-radius: 12px; background: var(--teal); color: var(--on-teal); --s-ink: var(--on-teal); --s-ink-2: var(--on-teal-2); }
.book__steps .label { margin: 0 0 1rem; color: var(--on-teal-2); }
.book__steps .steps li::before { border-color: var(--on-teal); }
.book__steps .steps span { color: var(--on-teal-2); }
.book__steps .call-note { color: var(--on-teal-2); }
.book__steps :focus-visible { outline-color: var(--on-teal); }
.book__go { margin: 1.4rem 0 0; }
.book__bring { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--on-teal) 30%, transparent); font: 500 .95rem/1.45 var(--f-app); }
.book__bring a { color: var(--on-teal); font-weight: 650; }
.book__after .label { margin: 1.2rem 0 .5rem; color: var(--ink-2); }
.book__after p { max-width: 46ch; margin: 0 0 .8rem; }
.book__photo { margin: 0; }
.book__photo picture { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; }
.book__photo img { width: 100%; height: 100%; object-fit: cover; }
.book__photo figcaption { padding-top: .5rem; color: var(--ink-2); }
@media (max-width: 999px) { .book__photo { order: 4; } .book__photo picture { aspect-ratio: 16 / 10; } }

.lost { padding: clamp(1.6rem, 4vw, 3.5rem) 0; }
.lost__in { display: grid; gap: 2rem 3.5rem; align-items: start; }
@media (min-width: 1000px) { .lost__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lost .h-1 { margin: 0; }
.lost .stand { color: var(--ink-2); margin: 1rem 0 1.4rem; max-width: 34ch; }
.lost__go { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.lost__plan { padding: 1rem 1.2rem; border-radius: 12px; background: var(--raised); border: 1px solid var(--hair); }

/* 3. The front page: a layered cover. The photograph is the ground, the answer sits on a teal plate,
   and the ledger of her five prices is slipped over the photograph's edge like an insert. */
.lc { position: relative; padding: clamp(.6rem, 2vw, 1.6rem) 0 clamp(1.4rem, 3vw, 2.6rem); }
.lc__in { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.lc__plate { display: contents; }
.lc__words { order: 1; position: relative; isolation: isolate; margin-inline: calc(-1 * var(--gutter)); padding: .9rem var(--gutter) 1.2rem; background: var(--teal); color: var(--on-teal); }
.lc__words > .pat { position: absolute; inset: 0; z-index: -1; background: var(--on-teal); opacity: .06; -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/ichimatsu.c1c1eebcbd.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/ichimatsu.c1c1eebcbd.svg); -webkit-mask-size: 18px auto; mask-size: 18px auto; }
.lc__imprint { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font: 650 .75rem/1 var(--f-app); letter-spacing: .16em; text-transform: uppercase; }
.lc__imprint svg { width: 20px; height: 20px; flex: none; }
.lc__imprint span:last-child { margin-left: auto; letter-spacing: .1em; }
.lc__mast { position: relative; margin: 0; --mh: clamp(34px, 9vw, 92px); display: flex; align-items: flex-end; gap: .9rem; flex-wrap: wrap; }
.lc__mast .wm { height: var(--mh); width: calc(var(--mh) * 3.144); max-width: 100%; }
.lc__mast .wm--plate { position: absolute; left: 0; bottom: 0; color: light-dark(#3FA593, #2C6F63); }
.lc__mast .wm--ink { position: relative; color: var(--on-teal); }
.lc__trade { margin: .45rem 0 0; font: italic 400 clamp(.95rem, .9rem + .3vw, 1.15rem)/1.2 var(--f-read); color: var(--on-teal-2); }
.lc__h { margin: .9rem 0 .6rem; color: var(--on-teal); max-width: 17ch; }
.lc__stand { color: var(--on-teal-2); max-width: 38ch; }
.lc__stand b { color: var(--on-teal); font-weight: 600; }
.lc__insert { order: 2; }
.lc__call { order: 3; margin: 0; display: grid; gap: .5rem; justify-items: start; }
.lc__call .call-note { margin: 0; }
.lc__ground { order: 4; position: relative; margin: .4rem 0 0; }
.lc__ground picture { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--sunk); }
.lc__ground img { width: 100%; height: 100%; object-fit: cover; }
.lc__kicker { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: .7rem .9rem; max-width: 30ch; background: var(--paper); color: var(--ink); border-radius: 3px; font: italic 400 1.02rem/1.38 var(--f-read); box-shadow: var(--sh-1); }
.lc__kicker b { font: 700 .75rem/1 var(--f-app); letter-spacing: .14em; text-transform: uppercase; font-style: normal; display: block; margin-bottom: .35rem; color: var(--teal); }
.lc__cap { order: 5; color: var(--ink-2); margin-top: -.4rem; }
.lc__seal { position: absolute; top: -18px; right: 14px; width: 64px; height: 64px; padding: 4px; border-radius: 50%; background: var(--paper); color: var(--teal); transform: rotate(-9deg); z-index: 2; }

@media (min-width: 640px) and (max-width: 999px) {
  .lc__words { margin-inline: 0; border-radius: 4px; padding: 1.4rem 1.6rem 1.6rem; }
}
@media (min-width: 1000px) {
  .lc__in { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 0; row-gap: 0; }
  .lc__plate { display: block; grid-column: 1 / 7; grid-row: 1; z-index: 2; margin-top: clamp(1rem, 3vh, 2.4rem); }
  .lc__words { margin: 0; padding: clamp(1.5rem, 2.4vw, 2.4rem); border-radius: 4px 4px 0 0; box-shadow: var(--sh-2); }
  .lc__call { padding: 1.1rem clamp(1.5rem, 2.4vw, 2.4rem) 1.3rem; background: var(--raised); border-radius: 0 0 4px 4px; border: 1px solid var(--hair); border-top: 0; box-shadow: var(--sh-1); grid-template-columns: auto 1fr; align-items: center; column-gap: 1.2rem; }
  .lc__ground { grid-column: 5 / -1; grid-row: 1 / 3; margin: 0; }
  .lc__ground picture { aspect-ratio: auto; height: clamp(440px, 64vh, 620px); }
  .lc__kicker { left: auto; right: 20px; top: 20px; bottom: auto; max-width: 26ch; }
  .lc__insert { grid-column: 7 / -1; grid-row: 2 / 4; z-index: 3; margin: clamp(-15rem, -24vh, -9rem) 0 0 clamp(1.2rem, 2.4vw, 2.6rem); transform: rotate(.5deg); }
  .lc__cap { grid-column: 5 / 7; grid-row: 3; margin: .6rem 0 0; padding-right: 1rem; }
  .lc__seal { top: auto; bottom: -26px; right: auto; left: calc(100% * 2 / 8 - 34px); display: none; }
}
@media (min-width: 1600px) { .lc__insert { grid-column: 8 / -1; } }

/* The ledger: her five prices, each one run of text, with hours drawn as blocks. */
.ledger { padding: 1rem 1.1rem 1.1rem; background: var(--raised); border: 1px solid var(--hair); border-radius: 4px; box-shadow: var(--sh-2); }
.ledger__k { margin: .2rem 0 0; padding-bottom: .4rem; border-bottom: 2px solid var(--teal); color: var(--teal); }
.ledger__k ~ .ledger__k { margin-top: .9rem; }
.ledger__rows { list-style: none; margin: 0; padding: 0; }
.ledger__rows li + li { border-top: 1px solid var(--hair); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: "p go" "h go"; gap: .35rem .6rem; align-items: center; min-height: 48px; padding: .55rem 0; text-decoration: none; color: var(--ink); }
.lrow__p { grid-area: p; font-size: 1.02rem; }
.lrow .hours { grid-area: h; }
.lrow__go { grid-area: go; width: 18px; height: 18px; color: var(--teal); transition: transform var(--t-hover) var(--ease-place); }
.lrow--one { grid-template-areas: "p go" "h go"; }
@media (hover: hover) and (pointer: fine) { .lrow:hover .lrow__p { text-decoration: underline; text-underline-offset: .2em; } .lrow:hover .lrow__go { transform: translateX(4px); } }
@media (min-width: 1000px) {
  .lrow { grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) 20px; grid-template-areas: "p h go"; }
}
.ledger__pair { margin: .7rem 0 .55rem; padding: .65rem .8rem; border-radius: 6px; background: var(--sunk); font: 400 .95rem/1.42 var(--f-read); }
.ledger__cancel { font-size: .8125rem; }

.hours { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 2px; height: 10px; }
.hours i { position: relative; display: block; border-radius: 1px; background: var(--block-empty); overflow: hidden; }
.hours i::after { content: ""; position: absolute; inset: 0; background: var(--block); transform: scaleX(0); transform-origin: 0 50%; }
.h-5 i:nth-child(-n+5)::after, .h-10 i:nth-child(-n+10)::after, .h-20 i::after, .hours--one i::after { transform: none; }
.hours--one { grid-template-columns: repeat(20, minmax(0, 1fr)); }
.hours--one i { grid-column: span 4; }
.hours i:nth-child(2) { --n: 1; } .hours i:nth-child(3) { --n: 2; } .hours i:nth-child(4) { --n: 3; } .hours i:nth-child(5) { --n: 4; }
.hours i:nth-child(6) { --n: 5; } .hours i:nth-child(7) { --n: 6; } .hours i:nth-child(8) { --n: 7; } .hours i:nth-child(9) { --n: 8; }
.hours i:nth-child(10) { --n: 9; } .hours i:nth-child(11) { --n: 10; } .hours i:nth-child(12) { --n: 11; } .hours i:nth-child(13) { --n: 12; }
.hours i:nth-child(14) { --n: 13; } .hours i:nth-child(15) { --n: 14; } .hours i:nth-child(16) { --n: 15; } .hours i:nth-child(17) { --n: 16; }
.hours i:nth-child(18) { --n: 17; } .hours i:nth-child(19) { --n: 18; } .hours i:nth-child(20) { --n: 19; }

/* 4. Front page sections. */
.words5 { padding: clamp(1.6rem, 4vw, 3.2rem) 0; border-block: 1px solid var(--hair); background: var(--raised); }
.words5 .h-2 { margin: 0 0 .3rem; }
.words5__sub { margin: 0 0 1.4rem; color: var(--ink-2); max-width: 50ch; }
.words5__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.words5__list li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .3rem 1rem; padding: .9rem 0; border-top: 1px solid var(--hair); }
.words5__list li:first-child { border-top: 2px solid var(--teal); }
.words5__tag { font: 700 .75rem/1.3 var(--f-app); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); padding-top: .25rem; }
@media (min-width: 1000px) {
  .words5__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.6rem; }
  .words5__list li { grid-template-columns: 1fr; border-top: 2px solid var(--teal); align-content: start; }
}

.tonight { padding: clamp(1.8rem, 4.5vw, 3.6rem) 0; }
.tonight__in { display: grid; gap: 1.4rem 3rem; align-items: center; }
@media (min-width: 900px) { .tonight__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tonight__photo { margin: 0; position: relative; }
.tonight__photo picture { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3.6; }
.tonight__photo img { width: 100%; height: 100%; object-fit: cover; }
.tonight__photo figcaption { padding-top: .5rem; color: var(--ink-2); }
.slip { position: relative; padding: 1.1rem 1.2rem 1.2rem; background: var(--raised); border: 1px solid var(--hair); border-radius: 3px; box-shadow: var(--sh-2); transform: rotate(-.6deg); }
@media (min-width: 900px) { .tonight .slip { margin-left: -5rem; } }
@media (max-width: 899px) { .tonight .slip { margin: -4.5rem .6rem 0; } }
.slip__cap { margin: 0 0 .4rem; padding-bottom: .5rem; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.slip .edit-run { list-style: none; margin: 0 0 .9rem; padding: 0; }
.slip .edit-run li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem .8rem; padding: .55rem 0; border-bottom: 1px dashed var(--hair); }
.slip .edit-line { font: 400 1.05rem/1.35 var(--f-read); color: var(--ink-2); }
.slip .edit-note { font: 700 .75rem/1 var(--f-app); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.tonight__words { display: grid; gap: .8rem; justify-items: start; }
.tonight__words .h-2, .tonight__words p { margin: 0; }
.tonight__words p { max-width: 44ch; color: var(--ink-2); }

.two-strips { padding: 0 0 clamp(1.8rem, 4vw, 3.2rem); }
.two-strips__in { display: grid; gap: 1rem; }
@media (min-width: 900px) { .two-strips__in { grid-template-columns: 1.2fr 1fr; } }
.strip { display: grid; gap: .8rem; align-content: start; justify-items: start; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 12px; border: 1px solid var(--hair); background: var(--raised); }
.strip > * { margin: 0; }
.strip .label { color: var(--ink-2); }
.strip__big { font: 700 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--f-cond); font-stretch: 87%; }
.strip__p { color: var(--ink-2); max-width: 46ch; }
.strip--teal { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
.strip--teal .label, .strip--teal .strip__p { color: var(--on-teal-2); }
.strip--teal .btn-line { border-color: var(--on-teal); color: var(--on-teal); }
@media (hover: hover) and (pointer: fine) { .strip--teal .btn-line:hover { background: var(--on-teal); color: var(--teal); } }

.diy { padding: clamp(1.6rem, 4vw, 3rem) 0; border-top: 1px solid var(--hair); }
.diy__in { display: grid; gap: 1rem 2.4rem; align-items: start; }
@media (min-width: 900px) { .diy__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.diy .h-2, .diy__lead p { margin: 0 0 .5rem; }
.diy__lead p { color: var(--ink-2); max-width: 40ch; }
.diy__apps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.app-row { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: 0 0 10px 10px; background: var(--raised); border: 1px solid var(--hair); border-top: 4px solid var(--teal); }
.app-row p { margin: 0; }
.app-row__name { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font: 700 1.2rem/1.1 var(--f-cond); font-stretch: 87%; text-decoration: none; }
.app-row__name svg { width: 18px; height: 18px; }
.app-row .pk-price { font: 600 .875rem/1.4 var(--f-app); }
.app-row .pk-price .price-label { margin-left: .3rem; }
.app-row .cancel-line { font-size: .75rem; }

/* 5. Monthly hours: the rate card, the plan chooser and the month that empties into Laura's column. */
.plans-wrap { padding: clamp(1.2rem, 3vw, 2.4rem) 0 clamp(1.4rem, 3vw, 2.4rem); }
.plan-tabs { display: grid; gap: 0; margin: 0 0 1rem; padding: .3rem .9rem; border-radius: 10px; background: var(--raised); border: 1px solid var(--hair); }
.plan-tab { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "dot p" "dot h"; gap: .3rem .7rem; align-items: center; width: 100%; min-height: 56px; padding: .55rem 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.plan-tab + .plan-tab { border-top: 1px solid var(--hair); }
.plan-tab .price { grid-area: p; }
.plan-tab .hours { grid-area: h; }
.plan-tab__dot { grid-area: dot; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule); display: grid; place-items: center; }
.plan-tab__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); transform: scale(0); transition: transform var(--t-hover) var(--ease-place); }
.plan-tab[aria-pressed="true"] .plan-tab__dot { border-color: var(--teal); }
.plan-tab[aria-pressed="true"] .plan-tab__dot::after { transform: none; }
html:not(.lt-js) .plan-tabs { display: none; }
@media (min-width: 1000px) { .plan-tabs { display: none; } }

.plans { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .7rem; padding: 1.2rem 1.2rem 1.3rem; background: var(--raised); border: 1px solid var(--hair); border-radius: 6px; scroll-margin-top: 90px; transition: border-color var(--t-hover) var(--ease-place), box-shadow var(--t-hover) var(--ease-place); }
.plan > * { margin: 0; }
.plan__k { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--teal); color: var(--teal); }
.plan__hrs { font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.6rem)/.9 var(--f-cond); font-stretch: 70%; color: var(--teal); }
.plan__hrs small { font: 650 .875rem/1 var(--f-app); font-stretch: 100%; margin-left: .3rem; color: var(--ink-2); }
.plan .price { font-size: 1.15rem; }
.plan .hours { height: 12px; }
.plan__hers .hers { font-size: 1.05rem; }
.plan__scope { display: grid; gap: .3rem; align-content: start; }
.plan__choose { justify-self: start; }
.plan__choose[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
.plan__choose .when-on { display: none; }
.plan__choose[aria-pressed="true"] .when-on { display: inline; }
.plan__choose[aria-pressed="true"] .when-off { display: none; }
.plan.is-on { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--sh-2); }
.plans-foot { display: grid; gap: .6rem; margin-top: 1rem; }
.plans-foot p { margin: 0; }
.plans-row-nav { display: none; }
@media (max-width: 999px) {
  .plans { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 380px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: .4rem var(--gutter) 1rem; scrollbar-width: thin; }
  .plan { scroll-snap-align: start; }
  .lt-js .plans-row-nav { display: flex; gap: .5rem; align-items: center; justify-content: space-between; }
  .plans-row-nav .seg-out { font: 600 .875rem/1.2 var(--f-app); color: var(--ink-2); }
}
.nav-btns { display: flex; gap: .5rem; }
.nav-btn { inline-size: 48px; block-size: 48px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--raised); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn:disabled { opacity: .45; cursor: default; }
.nav-btn:active:not(:disabled) { transform: scale(.94); }

.month { padding: clamp(1.6rem, 4vw, 3rem) 0; background: var(--sunk); border-block: 1px solid var(--hair); }
.month__head { display: grid; gap: .5rem; margin-bottom: 1.2rem; max-width: 60rem; }
.month__head > * { margin: 0; }
.month__head p { color: var(--ink-2); max-width: 56ch; }
.board { position: relative; padding: 1.2rem 1rem 1rem; border-radius: 12px; background: var(--raised); border: 1.5px dashed var(--rule); }
.board > .example-tag { position: absolute; top: -.85rem; left: .9rem; background: var(--raised); color: var(--ink-2); }
.board__cols { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) minmax(0, 1fr); gap: .2rem .8rem; align-items: center; }
.board__h { font: 700 .75rem/1.2 var(--f-app); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-bottom: .4rem; border-bottom: 1px solid var(--hair); }
.board__h--laura { color: var(--teal); }
.board__kind { font: 600 .9rem/1.25 var(--f-app); padding: .5rem 0; }
.cell { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; padding: .35rem 0; align-content: center; }
.cell--laura { padding-left: .6rem; border-left: 2px solid var(--teal); }
.hb { width: 22px; height: 22px; border-radius: 3px; background: var(--block-empty); border: 1.5px solid var(--rule); }
.cell--laura .hb { background: var(--block); border-color: var(--block); }
@media (min-width: 700px) { .hb { width: 28px; height: 28px; } }
.board__sum { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--hair); font: 600 1rem/1.35 var(--f-app); }
.board__sum b { color: var(--teal); }
.board__note { margin: .6rem 0 0; color: var(--ink-2); font: 400 .95rem/1.45 var(--f-read); max-width: 60ch; }
.month__key { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: .9rem 0 0; font: 500 .875rem/1.3 var(--f-app); color: var(--ink-2); }
.month__key span { display: inline-flex; align-items: center; gap: .4rem; }
.month__key i { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid var(--rule); background: var(--block-empty); }
.month__key i.on { background: var(--block); border-color: var(--block); }
@media (max-width: 560px) {
  .board__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .board__kind { grid-column: 1 / -1; padding: .6rem 0 0; border-top: 1px solid var(--hair); }
  .board__h--kind { display: none; }
  .hb { width: 18px; height: 18px; }
}
.ask { padding: clamp(1.6rem, 4vw, 3rem) 0; }
.ask__in { display: grid; gap: 1rem 3rem; align-items: start; }
@media (min-width: 900px) { .ask__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ask .h-2, .ask p { margin: 0 0 .6rem; }
.ask__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ask__list li { display: flex; gap: .7rem; align-items: baseline; padding: .7rem .9rem; border-radius: 8px; background: var(--raised); border: 1px solid var(--hair); font: 500 1rem/1.4 var(--f-app); }
.ask__list li::before { content: "?"; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--teal); color: var(--on-teal); font: 700 .9rem/1 var(--f-app); }

/* 6. One-off fixes. */
.fixes { padding: clamp(1.4rem, 3.5vw, 2.8rem) 0; }
.fixes__in { display: grid; gap: 1.4rem 2.4rem; align-items: start; }
@media (min-width: 1000px) { .fixes__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
.fix { display: grid; gap: .9rem; padding: clamp(1.1rem, 2.6vw, 1.8rem); background: var(--raised); border: 1px solid var(--hair); border-radius: 8px; scroll-margin-top: 90px; }
.fix > * { margin: 0; }
.fix__k { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; padding-bottom: .5rem; border-bottom: 2px solid var(--teal); color: var(--teal); }
.fix .price { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }
.fix__h { font: 700 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.08 var(--f-cond); font-stretch: 87%; }
.detox { display: grid; gap: .8rem; }
.detox__cols { display: grid; gap: .8rem; }
@media (min-width: 640px) { .detox__cols { grid-template-columns: 1fr 1fr; } }
.detox__col { padding: .9rem 1rem; border-radius: 8px; border: 1.5px solid var(--hair); background: var(--paper); transition: opacity var(--t-hover) var(--ease-place), border-color var(--t-hover) var(--ease-place); }
.detox__col h3 { margin: 0 0 .4rem; font: 700 1.05rem/1.2 var(--f-app); }
.detox__col .scope { font-size: .95rem; }
.detox__plus { display: block; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--hair); }
.lt-js .detox[data-state="mini"] .detox__col--full { opacity: .5; }
.lt-js .detox[data-state="full"] .detox__col--mini { opacity: .5; }
.lt-js .detox[data-state="mini"] .detox__col--mini, .lt-js .detox[data-state="full"] .detox__col--full { border-color: var(--teal); }
.lt-js .detox[data-state="full"] .detox__plus li { animation: none; }
.seg button[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); }

.pairing { padding: clamp(1.4rem, 3.5vw, 2.6rem) 0; background: var(--teal); color: var(--on-teal); }
.pairing__in { display: grid; gap: 1.2rem 3rem; align-items: center; }
@media (min-width: 900px) { .pairing__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.pairing .h-2 { margin: 0 0 .5rem; color: var(--on-teal); }
.pairing p { margin: 0 0 .6rem; color: var(--on-teal-2); max-width: 46ch; }
.pairing .cancel-line { color: var(--on-teal-2); }
.pair-vs { display: grid; gap: .8rem; }
.pair-row { display: grid; gap: .45rem; padding: .9rem 1rem; border-radius: 8px; background: color-mix(in srgb, var(--on-teal) 9%, transparent); }
.pair-row .price { color: var(--on-teal); font-size: 1.1rem; }
.pair-row span.small { color: var(--on-teal-2); }
.pair-blocks { display: flex; gap: 6px; align-items: end; }
.pair-blocks i { display: block; width: 34px; height: 34px; border-radius: 3px; background: var(--on-teal); }
.pair-blocks--month i { width: 34px; }
.pair-blocks .lab { font: 600 .8125rem/1 var(--f-app); color: var(--on-teal-2); margin-left: .4rem; }
.setups { padding: clamp(1.4rem, 3.5vw, 2.6rem) 0; }
.setups .h-2 { margin: 0 0 .4rem; }
.setups__sub { margin: 0 0 1rem; color: var(--ink-2); max-width: 52ch; }
.setups__list { display: grid; gap: 1rem; }
@media (min-width: 900px) { .setups__list { grid-template-columns: 1fr 1fr; } }

/* 12. The stepper: frames you turn (Power Hour; How a month works on the phone). */
.stepper { position: relative; }
.stepper__tabs { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem; margin: 0 0 .9rem; border: 1px solid var(--rule); border-radius: 26px; background: var(--paper); width: fit-content; max-width: 100%; }
.stepper__tabs button { min-height: 44px; min-width: 44px; padding: 0 .95rem; border-radius: 999px; border: 0; background: transparent; font: 650 .9rem/1 var(--f-app); color: var(--ink); cursor: pointer; }
.stepper__tabs button[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); }
html:not(.lt-js) .stepper__tabs, html:not(.lt-js) .stepper__nav { display: none; }
.stepper__frames { list-style: none; margin: 0; padding: 0; touch-action: pan-y; }
.lt-js .stepper--on .stepper__frames > li:not(.is-current) { display: none; }
.stepper__nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .9rem; }
.stepper__count { font: 600 .875rem/1.2 var(--f-app); color: var(--ink-2); }
.frame { display: grid; gap: .6rem; }
.frame > * { margin: 0; }
.frame__n { font: 700 .75rem/1 var(--f-app); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.frame__t { font: 700 1.15rem/1.2 var(--f-app); }
.ph-art { min-height: 220px; padding: 1rem; border-radius: 10px; background: var(--paper); border: 1px solid var(--hair); display: grid; align-content: start; gap: .55rem; }
.ph-art p { margin: 0; }
.ph-field { display: grid; gap: .25rem; }
.ph-field span { font: 650 .75rem/1.2 var(--f-app); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ph-field b { font: 400 1rem/1.4 var(--f-read); padding: .45rem .6rem; border-radius: 6px; background: var(--raised); border: 1px solid var(--hair); }
.ph-clock { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; }
.ph-clock svg { width: 120px; height: 120px; color: var(--teal); }
.ph-clock .big { font: 800 2.6rem/.9 var(--f-cond); font-stretch: 70%; color: var(--teal); }
.ph-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ph-list li { display: flex; gap: .5rem; align-items: flex-start; font: 400 1rem/1.4 var(--f-read); padding: .45rem 0; border-bottom: 1px dashed var(--hair); }
.ph-list svg { flex: none; width: 18px; height: 18px; margin-top: .15rem; color: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .lt-js .stepper--on .stepper__frames > li.is-current.from-right { animation: m-in-right 240ms var(--ease-place); }
  .lt-js .stepper--on .stepper__frames > li.is-current.from-left { animation: m-in-left 240ms var(--ease-place); }
}

/* 7. How a month works: a contact sheet of frames (a stepper on the phone). */
.sheetx { padding: clamp(1.4rem, 3.5vw, 2.8rem) 0; }
.sheetx__frames { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mframe { display: grid; gap: .6rem; align-content: start; padding: .7rem .7rem 1rem; background: var(--raised); border: 1px solid var(--hair); border-radius: 6px; }
.mframe > * { margin: 0; }
.mframe__n { display: flex; align-items: baseline; gap: .6rem; padding: 0 .3rem; }
.mframe__n b { font: 800 2rem/1 var(--f-cond); font-stretch: 70%; color: var(--teal); }
.mframe__n span { font: 700 .75rem/1.2 var(--f-app); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.mframe__art { position: relative; border-radius: 4px; overflow: hidden; background: var(--paper); border: 1px solid var(--hair); min-height: 190px; }
.mframe__art picture { aspect-ratio: 4 / 3; }
.mframe__art img { width: 100%; height: 100%; object-fit: cover; }
.mframe__body { display: grid; gap: .5rem; padding: 0 .3rem; }
.mframe__body > * { margin: 0; }
.mframe__body h2 { font: 700 1.2rem/1.2 var(--f-app); }
.mframe__body p { font: 400 1rem/1.45 var(--f-read); color: var(--ink-2); }
.mframe__body .hers { color: var(--ink); font-size: 1rem; }
.mframe__cap { padding: .4rem .5rem; color: var(--ink-2); }
.mframe--wide { grid-column: span 2; }
.art-in { padding: .8rem; display: grid; gap: .4rem; align-content: start; }
.art-msg { padding: .5rem .65rem; border-radius: 12px 12px 12px 3px; background: var(--raised); border: 1px solid var(--hair); font: 400 .9rem/1.35 var(--f-read); }
.art-msg b { display: block; font: 650 .75rem/1.2 var(--f-app); color: var(--ink-2); margin-bottom: .15rem; }
.art-arrow { display: flex; align-items: center; gap: .4rem; font: 650 .8125rem/1 var(--f-app); color: var(--teal); }
.art-arrow svg { width: 16px; height: 16px; }
.art-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: .8rem; }
.art-week > div { display: grid; gap: 4px; align-content: start; }
.art-week b { font: 700 .75rem/1 var(--f-app); color: var(--ink-2); text-align: center; padding-bottom: .2rem; }
.art-week i { display: block; border-radius: 3px; padding: .3rem .25rem; font: 600 .6875rem/1.15 var(--f-app); font-style: normal; background: var(--block-empty); color: var(--ink); text-align: center; }
.art-week i.t { background: var(--block); color: light-dark(#FFFFFF, #06110F); }
.art-hours { padding: 1rem; display: grid; gap: .7rem; }
.art-hours .hours { height: 16px; }
.art-hours p { font: 600 .875rem/1.3 var(--f-app); }
.art-not { padding: .9rem; display: grid; gap: .4rem; }
.art-not span { display: flex; align-items: center; gap: .5rem; font: 500 .9rem/1.3 var(--f-app); }
.art-not span::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--mark); border-radius: 1px; }
@media (max-width: 999px) { .sheetx__frames { grid-template-columns: 1fr 1fr; } .mframe--wide { grid-column: 1 / -1; } }
@media (max-width: 699px) {
  .sheetx__frames { grid-template-columns: 1fr; }
  .mframe--wide { grid-column: auto; }
}
.sheetx .stepper__tabs, .sheetx .stepper__nav { display: none; }
@media (max-width: 699px) { .lt-js .sheetx .stepper--on .stepper__tabs, .lt-js .sheetx .stepper--on .stepper__nav { display: flex; } }

/* The Friday note: folded, then unfolded in two panels. */
.note { position: relative; perspective: 900px; }
.note__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 56px; padding: .7rem .9rem; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--raised); color: var(--ink); font: 650 1rem/1.2 var(--f-app); cursor: pointer; text-align: left; }
.note__btn svg { width: 20px; height: 20px; transition: transform var(--t-hover) var(--ease-place); }
.note__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.note__paper { margin-top: .6rem; display: grid; gap: 0; background: light-dark(#FFFFFF, #18292A); border: 1px solid var(--hair); border-radius: 3px; box-shadow: var(--sh-2); }
.note__half { padding: .9rem 1rem; transform-origin: 50% 0; }
.note__half + .note__half { border-top: 1px dashed var(--hair); }
.note__half h3 { margin: 0 0 .35rem; font: 700 .75rem/1.2 var(--f-app); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.note__half ul { margin: 0; padding-left: 1.1rem; font: 400 .95rem/1.45 var(--f-read); }
.note__half p { margin: .3rem 0 0; font: 400 .95rem/1.45 var(--f-read); }
.lt-js .note:not(.is-open) .note__paper { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lt-js .note.is-open .note__half:first-child { animation: m-unfold 360ms var(--ease-place) both; }
  .lt-js .note.is-open .note__half + .note__half { animation: m-unfold 360ms var(--ease-place) 120ms both; }
}
@keyframes m-unfold { from { transform: rotateX(-80deg); opacity: .3; } }

/* 8. The worked example: hand over an evening. */
.eve { padding: clamp(1rem, 3vw, 2.4rem) 0 clamp(1.6rem, 4vw, 3rem); }
.eve__top { display: grid; gap: 1rem 2.4rem; align-items: end; margin-bottom: 1.4rem; }
@media (min-width: 1000px) { .eve__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.eve__photo { position: relative; margin: 0; }
.eve__photo .pics { position: relative; display: grid; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; }
.eve__photo picture { grid-area: 1 / 1; }
.eve__photo picture img { width: 100%; height: 100%; object-fit: cover; }
.eve__photo .pic-morning { opacity: 0; transition: opacity 600ms var(--ease-place); }
.lt-js .eve.is-done .eve__photo .pic-morning { opacity: 1; }
.eve__photo figcaption { padding-top: .45rem; color: var(--ink-2); }
.eve__clock { position: absolute; left: 12px; top: 12px; margin: 0; padding: .45rem .7rem; border-radius: 3px; background: var(--paper); color: var(--ink); font: 700 .8125rem/1 var(--f-app); letter-spacing: .06em; }
.eve__clock .c-am { display: none; }
.lt-js .eve.is-done .eve__clock .c-pm { display: none; }
.lt-js .eve.is-done .eve__clock .c-am { display: inline; }
.eve__board { position: relative; display: grid; gap: 1.2rem 1.6rem; padding: 1.4rem 1rem 1rem; border-radius: 12px; border: 1.5px dashed var(--rule); background: var(--raised); }
.eve__board > .example-tag { position: absolute; top: -.85rem; left: .9rem; background: var(--raised); color: var(--ink-2); }
@media (min-width: 1000px) { .eve__board { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); padding: 1.6rem 1.4rem 1.4rem; } }
.eve__controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-teal { display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 1.3rem; border-radius: 999px; border: 0; background: var(--teal); color: var(--on-teal); font: 700 1rem/1.1 var(--f-app); cursor: pointer; }
.btn-teal svg { width: 18px; height: 18px; }
.btn-teal:disabled { opacity: .5; cursor: default; }
.btn-teal:active:not(:disabled) { transform: scale(.97); }
.btn-quiet { min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--rule); background: transparent; color: var(--ink); font: 600 .9rem/1 var(--f-app); cursor: pointer; }
.inbox { display: grid; gap: .5rem; padding: .7rem; border-radius: 22px; background: var(--paper); border: 1px solid var(--hair); }
.inbox__head { display: flex; justify-content: space-between; align-items: baseline; padding: .3rem .4rem .5rem; border-bottom: 1px solid var(--hair); font: 700 .875rem/1.2 var(--f-app); }
.inbox__head span:last-child { font-weight: 600; color: var(--ink-2); }
.inbox__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mail { display: grid; gap: .35rem; padding: .7rem .8rem; border-radius: 12px; background: var(--raised); border: 1px solid var(--hair); }
.mail p { margin: 0; }
.mail__from { display: flex; justify-content: space-between; gap: .5rem; font: 700 .875rem/1.2 var(--f-app); }
.mail__from span { font-weight: 500; color: var(--ink-2); }
.mail__text { font: 400 .98rem/1.4 var(--f-read); }
.mail__tag { justify-self: start; padding: .2rem .5rem; border-radius: 4px; background: var(--block-empty); font: 650 .75rem/1.2 var(--f-app); }
.mail__go { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--teal); background: transparent; color: var(--teal); font: 650 .875rem/1 var(--f-app); cursor: pointer; }
.mail__go svg { width: 16px; height: 16px; }
.mail__reply { display: none; padding: .55rem .7rem; border-radius: 12px 12px 3px 12px; background: var(--teal); color: var(--on-teal); font: 400 .95rem/1.4 var(--f-read); }
.mail__reply b { display: block; font: 700 .75rem/1.2 var(--f-app); letter-spacing: .06em; color: var(--on-teal-2); margin-bottom: .15rem; }
html:not(.lt-js) .mail__reply { display: block; }
html:not(.lt-js) .mail__go, html:not(.lt-js) .eve__controls { display: none; }
.mail.is-done { background: var(--paper); }
.mail.is-done .mail__go { display: none; }
.mail.is-done .mail__reply { display: block; }
.mail.is-done .mail__text { color: var(--ink-2); }
.inbox__empty { display: none; margin: 0; padding: .7rem .5rem; font: italic 400 1rem/1.4 var(--f-read); color: var(--ink-2); }
.lt-js .eve.is-done .inbox__empty { display: block; }

.eve__right { display: grid; gap: 1rem; align-content: start; }
.tonightlist { padding: .9rem 1rem; border-radius: 4px; background: light-dark(#FFFFFF, #18292A); border: 1px solid var(--hair); box-shadow: var(--sh-1); }
.tonightlist__cap { display: flex; justify-content: space-between; gap: .5rem; margin: 0 0 .3rem; color: var(--ink-2); }
.tonightlist ol { list-style: none; margin: 0; padding: 0; }
.tonightlist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .8rem; padding: .45rem 0; border-bottom: 1px dashed var(--hair); }
.tonightlist .edit-line { font: 400 1rem/1.35 var(--f-read); }
.tonightlist .edit-note { font: 700 .75rem/1 var(--f-app); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); opacity: 0; }
.tonightlist li .strike { transform: scaleX(0); }
.tonightlist li.is-struck .strike { transform: none; }
.tonightlist li.is-struck .edit-note { opacity: 1; }
.tonightlist li.is-struck .edit-line { color: var(--ink-2); }
html:not(.lt-js) .tonightlist li .strike { transform: none; }
html:not(.lt-js) .tonightlist .edit-note { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tonightlist li .strike { transition: transform 280ms var(--ease-place); }
  .tonightlist .edit-note { transition: opacity 160ms ease-out 120ms; }
}
.result { margin: 0; padding: .9rem 1rem; border-radius: 8px; background: var(--teal); color: var(--on-teal); font: 700 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.25 var(--f-cond); font-stretch: 87%; }
.lt-js .eve:not(.is-done) .result { display: none; }

.trays__tabs { display: none; }
.trays__panels { display: grid; gap: .8rem; }
@media (min-width: 700px) { .trays__panels { grid-template-columns: 1.3fr 1fr; } .tray--diary { grid-row: span 2; } }
.tray { padding: .8rem .9rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--hair); }
.tray > h3 { display: flex; justify-content: space-between; margin: 0 0 .5rem; font: 700 .75rem/1.2 var(--f-app); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.tray > h3 span { color: var(--ink-2); letter-spacing: .02em; }
.week { display: grid; gap: .35rem; }
.day { display: grid; grid-template-columns: 3rem 1fr; gap: .4rem; align-items: start; }
.day > b { font: 700 .8125rem/1.6 var(--f-app); color: var(--ink-2); }
.day__slots { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 28px; }
.slot-b { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: 4px; font: 600 .8125rem/1.2 var(--f-app); background: var(--block-empty); color: var(--ink); }
.slot-b--new { background: var(--block); color: light-dark(#FFFFFF, #06110F); }
.slot-b--clash { background: transparent; border: 1.5px dashed var(--mark); color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
.slot-b[hidden] { display: none; }
.tray__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.tray__list li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border-radius: 4px; background: var(--raised); border: 1px solid var(--hair); font: 500 .875rem/1.3 var(--f-app); }
.tray__list li span { color: var(--ink-2); }
.tray__list li[hidden] { display: none; }
.tray__empty { margin: 0; font: italic 400 .95rem/1.4 var(--f-read); color: var(--ink-2); }
.tray:has(li:not([hidden])) .tray__empty { display: none; }
html:not(.lt-js) .tray__list li[hidden], html:not(.lt-js) .slot-b[hidden] { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .lt-js .is-new-in { animation: m-place 300ms var(--ease-place); }
}
.eve__stick { display: none; }
@media (max-width: 999px) {
  .lt-js .eve__stick { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 calc(-1 * var(--gutter)) .8rem; padding: .6rem var(--gutter); background: var(--paper); border-bottom: 1px solid var(--hair); font: 650 .875rem/1.25 var(--f-app); }
  .eve__stick .bar4 { display: flex; gap: 4px; }
  .eve__stick .bar4 i { width: 22px; height: 6px; border-radius: 2px; background: var(--block-empty); }
  .eve__stick .bar4 i.on { background: var(--mark); }
  .lt-js .trays__tabs { display: flex; margin-bottom: .6rem; }
  .lt-js .trays__panels { grid-template-columns: 1fr; }
  .lt-js .trays[data-state="diary"] .tray:not(.tray--diary), .lt-js .trays[data-state="enquiries"] .tray:not(.tray--enquiries), .lt-js .trays[data-state="records"] .tray:not(.tray--records) { display: none; }
  .lt-js .trays .tray > h3 { display: none; }
}
.trays__tabs .seg button { position: relative; }
.trays__tabs .n { margin-left: .35rem; display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--block-empty); color: var(--ink); font: 700 .75rem/1 var(--f-app); }
.trays__tabs button[aria-pressed="true"] .n { background: var(--on-teal); color: var(--teal); }
@media (prefers-reduced-motion: no-preference) { .lt-js .n.bump { animation: m-bump 300ms var(--ease-place); } }
@keyframes m-bump { 40% { transform: scale(1.35); } }

/* 9. Your data. */
.data { padding: clamp(1.4rem, 3.5vw, 2.8rem) 0; }
.data__in { display: grid; gap: 1.6rem 3rem; align-items: start; }
@media (min-width: 1000px) { .data__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.data__hers { display: grid; gap: 1.1rem; }
.data__hers blockquote { margin: 0; padding-top: .8rem; border-top: 2px solid var(--teal); }
.data__plain { padding: 1rem 1.1rem; border-radius: 8px; background: var(--sunk); }
.data__plain p { margin: 0 0 .5rem; max-width: 50ch; }
.data__plain p:last-child { margin: 0; }
.qpick { position: relative; padding: 1.3rem 1rem 1rem; border-radius: 12px; background: var(--raised); border: 1px solid var(--hair); }
.qpick .h-3 { margin: 0 0 .3rem; }
.qpick__sub { margin: 0 0 .9rem; color: var(--ink-2); }
.qpick__chips { display: grid; gap: .45rem; margin: 0 0 1rem; }
.qchip { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; padding: .55rem .8rem; border-radius: 8px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); text-align: left; font: 550 .95rem/1.3 var(--f-app); cursor: pointer; }
.qchip i { flex: none; width: 22px; height: 22px; border-radius: 5px; border: 2px solid var(--rule); display: grid; place-items: center; }
.qchip svg { width: 16px; height: 16px; opacity: 0; color: var(--on-teal); }
.qchip[aria-pressed="true"] { border-color: var(--teal); }
.qchip[aria-pressed="true"] i { background: var(--teal); border-color: var(--teal); }
.qchip[aria-pressed="true"] svg { opacity: 1; }
.qcard { padding: 1rem 1.1rem; border-radius: 3px; background: light-dark(#FFFFFF, #18292A); border: 1px solid var(--hair); box-shadow: var(--sh-1); }
.qcard h4 { margin: 0 0 .4rem; font: 700 .75rem/1.2 var(--f-app); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.qcard ol { margin: 0; padding-left: 1.3rem; font: 400 1rem/1.45 var(--f-read); }
.qcard ol li[hidden] { display: none; }
.qcard__empty { margin: 0; font: italic 400 1rem/1.4 var(--f-read); color: var(--ink-2); }
.qcard__go { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
html:not(.lt-js) .qpick__chips, html:not(.lt-js) .qcard__empty, html:not(.lt-js) .qcard__copy { display: none; }
html:not(.lt-js) .qcard ol li[hidden] { display: list-item; }

/* 10. Questions: a questions column, answers open. */
.qs { padding: clamp(1.4rem, 3.5vw, 2.8rem) 0; }
.qs__in { display: grid; gap: 1.4rem 3rem; align-items: start; }
@media (min-width: 1000px) { .qs__in { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } .qs__index { position: sticky; top: 84px; } }
.qs__index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 1000px) { .qs__index ul { display: grid; gap: 0; } .qs__index li + li { border-top: 1px solid var(--hair); } }
.qs__index a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--raised); font: 600 .875rem/1.25 var(--f-app); text-decoration: none; }
@media (min-width: 1000px) { .qs__index a { display: flex; border: 0; border-radius: 0; background: none; padding: .55rem 0; } }
.qa { padding: 1.2rem 0 1.4rem; border-top: 2px solid var(--teal); scroll-margin-top: 90px; }
.qa + .qa { border-top-width: 1px; border-top-color: var(--hair); }
.qa h2 { margin: 0 0 .6rem; font: 700 clamp(1.3rem, 1.1rem + .7vw, 1.7rem)/1.15 var(--f-cond); font-stretch: 87%; max-width: 30ch; }
.qa p { margin: 0 0 .6rem; max-width: var(--measure); }
.qa ul { margin: 0 0 .6rem; padding-left: 1.2rem; max-width: var(--measure); }
.qa .price-box { max-width: 40rem; margin: .4rem 0 .6rem; }

/* 11. About. */
.about-head { padding: clamp(1.2rem, 3vw, 2.6rem) 0; background: var(--teal); color: var(--on-teal); }
.about-head__in { display: grid; gap: 1.2rem 3rem; align-items: center; }
@media (min-width: 900px) { .about-head__in { grid-template-columns: minmax(0, 1fr) auto; } }
.about-head .sc-imprint { color: var(--on-teal); }
.about-head .h-1 { margin: 0 0 .7rem; color: var(--on-teal); max-width: 18ch; }
.about-head .stand { color: var(--on-teal-2); max-width: 40ch; margin: 0; }
.about-head__seal { width: clamp(110px, 16vw, 220px); height: auto; aspect-ratio: 1; color: var(--mark); transform: rotate(-6deg); }
@media (max-width: 899px) { .about-head__seal { width: 92px; position: absolute; right: var(--gutter); top: 1rem; } .about-head { position: relative; } .about-head .sc-imprint { padding-right: 100px; } }
.desk { padding: clamp(1.6rem, 4vw, 3.2rem) 0; }
.desk__grid { display: grid; gap: 0 2.6rem; }
@media (min-width: 900px) { .desk__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.desk__col { display: grid; gap: 0; align-content: start; }
.dline { display: grid; gap: .4rem; padding: 1.1rem 0; border-top: 1px solid var(--hair); }
.dline:first-child { border-top: 2px solid var(--teal); }
.dline > * { margin: 0; }
.dline .label { color: var(--teal); }
.dline--lead .hers { font: 400 clamp(1.45rem, 1.15rem + 1.4vw, 2.3rem)/1.22 var(--f-read); }
.desk__facts { margin: 1rem 0 0; padding: 1rem 1.1rem; border-radius: 8px; background: var(--sunk); display: grid; gap: .3rem; }
.desk__facts p { margin: 0; }
.desk__note { color: var(--ink-2); }

/* 13. Motion: arrival and answer motion only, from visible states. */
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .ledger[data-first] .hours i::after { animation: o-fill 240ms var(--ease-place) both; animation-delay: calc(240ms + var(--n, 0) * 30ms); }
  .lt-ready .lc__ground.develop[data-first] img { animation: m-develop 900ms var(--ease-place) both; }
  html[data-arrived-from-hub] .press-mast .wm--plate { animation: none !important; }
  .slip .edit-run--late:not(.play) .strike { transform: none; }
  .plan { transition: border-color var(--t-hover) var(--ease-place), box-shadow var(--t-hover) var(--ease-place), transform var(--t-hover) var(--ease-place); }
  .detox__col { transition: opacity var(--t-hover) var(--ease-place), border-color var(--t-hover) var(--ease-place); }
}
@keyframes o-fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .eve__photo .pic-morning { transition: opacity var(--t-reduced) linear; }
  .plan-tab__dot::after, .lrow__go, .note__btn svg { transition: none; }
}
@media (hover: hover) and (pointer: fine) { .plan:hover { box-shadow: var(--sh-1); } }

/* Additions for the four built pages. */
.ledger p.lrow { margin: 0; }
.board__row { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) minmax(0, 1fr); gap: .2rem .8rem; align-items: center; border-top: 1px solid var(--hair); }
@media (max-width: 560px) { .board__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .board__row .board__kind { border-top: 0; } }
.eve__stand { color: var(--ink-2); max-width: 40ch; margin: .6rem 0 0; }
.eve__top .h-1 { margin: 0; }
.eve__left { display: grid; gap: .8rem; align-content: start; }
.eve__fine { margin: .8rem 0 0; color: var(--ink-2); max-width: 70ch; }
.bring { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; color: var(--on-teal-2); }
.book__bring p { margin: 0; }
.book__after a:not(.routes__list a) { color: var(--ink); }
.trays__tabs .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 14px; }
.trays__tabs .seg button { padding: 0 .4rem; border-radius: 10px; min-height: 44px; }