/* studio/_assets/site.css: the Libella Studio pages (the chrome and the material primitives are in brand.css).
   Layout grammar: a centre axis. Headings stand flush right against it, content starts flush left of it, with equal
   gutters either side (a level's truth is shown by equal margins). Every line height is a multiple of the 8 px unit. */

/* ── the home first screen: one full-bleed line at ~42 % of the viewport. "Built true." starts on the page's column
   edge (less .04em of optical side bearing at display size), the mark follows it after one space (.28em), and "Kept
   level." follows the mark after the same space: equal gaps, a left edge on the column. Measured (Bricolage 600): cap
   .67em, "Built true." 3.72em, "Kept level." 3.96em, the mark 1.563em; the run is 9.80em, so --hs is the column over
   9.84 and the headline never leaves the column. The mark therefore stands --mx off the page centre (≈ −.16em);
   brand.js measures the real clause and refines --mx, the CSS figure is the no-JS seat. ─────────────────────────── */
main:has(> .hero), .hero {
  --col: min(100vw - 2 * var(--lb-m), 1440px);
  --hs: clamp(56px, min(var(--col) / 9.84, (42svh - 120px) / .8), 248px);         /* headline size */
  --cap: calc(var(--hs) * .67);                                                       /* its cap height = the mark's height */
  --mk: calc(var(--cap) * 21 / 9);                                                    /* the mark's width (ink box 21 × 9) */
  --sp: calc(var(--hs) * .28);                                                        /* the space either side of the mark */
  --ob: calc(var(--hs) * .04);                                                        /* optical side bearing of the B */
  --mx: calc(var(--hs) * 3.72 + var(--sp) + var(--mk) / 2 - var(--col) / 2 - var(--ob));   /* the mark's centre, off 50 % */
}
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; }
.hero__sky { position: relative; height: round(down, max(42svh - 72px, var(--hs) * 1.2), var(--lb-u)); flex: none; }   /* the line on the unit */
.hero__h { position: absolute; left: 0; right: 0; bottom: 0; height: 0; font: 600 var(--hs)/1 var(--lb-display); letter-spacing: -.035em; }
/* each clause is a line-height:1 box; this face's baseline sits .17em above the box bottom, so .17em down puts the
   baseline on the horizon and the p of "Kept" crosses it */
.hero__l, .hero__r { position: absolute; bottom: 0; white-space: nowrap; transform: translateY(.17em); }
.hero__l { left: calc(50% - var(--col) / 2 - var(--ob)); }
.hero__r { left: calc(50% + var(--mx) + var(--mk) / 2 + var(--sp)); }
/* the one light on the first screen: the wash from the top left is stronger here, and the headline mass casts a soft
   shadow down and right onto the ground under the line (a separate tuning for dark, where light is scarce) */
/* hero light tokens: light ground (a warm wash, a faint warm cast) and dark (scarce light, so a brighter wash, a deep cast,
   and the line itself lit: a soft glow from the light falls on it) */
.hero, main:has(> .hero) { --lb-hero-light: rgb(255 253 246 / .95); --lb-hero-cast: rgb(70 56 30 / .13); --lb-hero-glow: transparent; }
:root[data-theme="dark"] :is(.hero, main:has(> .hero)) { --lb-hero-light: rgb(255 242 220 / .095); --lb-hero-cast: rgb(0 0 0 / .75); --lb-hero-glow: rgb(255 246 230 / .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.hero, main:has(> .hero)) { --lb-hero-light: rgb(255 242 220 / .095); --lb-hero-cast: rgb(0 0 0 / .75); --lb-hero-glow: rgb(255 246 230 / .16); } }
.hero .lb-horizon__line, main:has(> .hero).mc-level-horizon .mc-level-horizon__line { box-shadow: 0 1px 0 var(--lb-lip), 0 0 10px var(--lb-hero-glow); }
.hero::before { content: ""; position: absolute; top: -72px; left: 0; right: 0; height: calc(48vmax + 72px); z-index: -1; pointer-events: none;
  background: radial-gradient(70vmax 48vmax at 0 0, var(--lb-hero-light), transparent 70%); }
.hero__sky::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: calc(100% + 2px); height: calc(var(--hs) * .42);
  left: calc(50% - var(--col) / 2 + var(--hs) * .3); right: calc(50% - var(--col) / 2 - var(--hs) * .3);
  background: radial-gradient(closest-side, var(--lb-hero-cast), transparent); filter: blur(calc(var(--hs) * .08)); opacity: .9; }
.lb-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 0; transform-origin: 50% 0; pointer-events: none; }
.lb-horizon__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--lb-ink); box-shadow: 0 1px 0 var(--lb-lip); }
.hero__mark { position: absolute; left: calc(50% + var(--mx)); bottom: 0; width: var(--mk); height: var(--cap); transform: translateX(-50%); color: var(--lb-ink); }
:root.lb-arrive .lb-horizon { transform: rotate(max(-1.6deg, atan2(-20px, 50vw))); }
:root.lb-arrive .lb-horizon .lb-mark__b { translate: 3px 0; }
/* level-horizon-rule mounted (brand.js; root = main): the entry draws the line, the site's own line steps aside. The
   line runs unbroken under the mark (it stands on it, as the lockup stands on the header rule); the seat does not slide,
   the mark's own bubble settles instead (brand.js), so --_gap and the seat's travel are held at zero. */
main.mc-level-horizon .lb-horizon { display: none; }
main.mc-level-horizon .mc-level-horizon__horizon { --_gap: 0px !important; }
main.mc-level-horizon .mc-level-horizon__line { box-shadow: 0 1px 0 var(--lb-lip); background: var(--lb-ink); }
main.mc-level-horizon .mc-level-horizon__seat { top: 0; left: calc(50% + var(--mx, 0px)); transform: translate(-50%, -100%); line-height: 0; }
main.mc-level-horizon .mc-level-horizon__bubble { transform: none !important; }
main.mc-level-horizon .mc-level-horizon__bubble > .hero__mark { position: static; transform: none; display: block; }
main.mc-level-horizon .lb-rule[data-level-rule] { background: var(--lb-rule); }
.hero__ground { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(2 * var(--lb-gap)); width: var(--lb-measure); margin: 0 auto; padding: 48px 0 0; flex: 1; }
.hero + .sec { padding-top: 80px; }
.hero__lede { justify-self: stretch; max-width: 30em; font: 400 clamp(20px, .55vw + 13px, 28px)/clamp(32px, .55vw + 25px, 40px) var(--lb-text); text-wrap: pretty; }
.hero__act { justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 4px; }

/* ── inner pages: the title stands on a full-bleed line; the sentence starts right of the centre, under it ─────── */
.ph { position: relative; }
.ph__sky { position: relative; height: round(down, clamp(200px, 30svh, 400px), var(--lb-u)); }
.ph__h { position: absolute; right: calc(50% + var(--lb-gap)); bottom: 0; transform: translateY(.17em); white-space: nowrap;
  font: 600 clamp(64px, 8.4vw, 176px)/1 var(--lb-display); letter-spacing: -.035em; }
.ph__h--long { font-size: clamp(48px, 6vw, 128px); }
.ph__ground { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(2 * var(--lb-gap)); width: var(--lb-measure); margin: 0 auto; padding: 40px 0 0; }
.ph__note { justify-self: end; text-align: right; font: 500 12px/24px var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lb-muted); }
.ph__body { max-width: 34em; display: grid; gap: 16px; }
.ph__lede { font: 400 clamp(20px, .55vw + 13px, 26px)/clamp(32px, .55vw + 25px, 40px) var(--lb-text); text-wrap: pretty; }
.ph__fig { font: 500 clamp(17px, .4vw + 12px, 22px)/32px var(--lb-mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ph__small { color: var(--lb-muted); }

/* ── sections on the centre axis ─────────────────────────────────────────────────────────────────────────────── */
.sec { width: var(--lb-measure); margin: 0 auto; padding: 128px 0 0; }
.sec > .lb-rule { margin-bottom: 48px; }
.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(2 * var(--lb-gap)); }
.sec__head { text-align: right; }
.sec__head h2 { font: 600 40px/48px var(--lb-display); letter-spacing: -.02em; text-wrap: balance; }
.sec__head h2.kicker { font: 500 12px/24px var(--lb-mono); letter-spacing: .06em; }
.sec__note { margin: 8px 0 0 auto; max-width: 22em; color: var(--lb-muted); text-wrap: pretty; }
.sec__body { max-width: 38em; }
.sec--wide .split { grid-template-columns: 1fr; row-gap: 48px; }
.sec--wide .sec__head { text-align: center; }
.sec--wide .sec__note { margin: 8px auto 0; }
.more { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 32px; font: 500 15px/24px var(--lb-text); }
.tag { display: inline-block; vertical-align: 5px; margin-left: 12px; padding: 0 8px; font: 500 11px/20px var(--lb-mono); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--lb-rule); border-radius: 2px; color: var(--lb-muted); }
.kicker { font: 500 12px/24px var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lb-muted); }
.body-lg { font: 400 18px/32px var(--lb-text); text-wrap: pretty; }
.body-lg + .body-lg { margin-top: 16px; }
.muted { color: var(--lb-muted); }
/* the arrow is drawn (the latin subsets carry no U+2192), in the text colour, on the x-height */
.arw { display: inline-block; width: .9em; height: .6em; margin-left: .3em; vertical-align: .05em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (forced-colors: active) { .arw { forced-color-adjust: none; background: LinkText; } }

/* ── work: a written list; each row is what / runs on / status, beside a plate holding the site itself ────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.tile { display: grid; grid-template-rows: auto 1fr; gap: 24px; }
.shot { display: block; aspect-ratio: 16 / 10; padding: 8px; overflow: hidden; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 2px; box-shadow: 0 0 0 1px var(--lb-hair); }
.shot--empty { display: grid; place-items: center; }
.shot--empty { grid-template-rows: 1fr auto; padding: 24px; }
.shot__mark { align-self: end; width: 26%; color: var(--lb-ink); }
.shot__mark > .lb-mark { width: 100%; height: auto; }
.shot__mark .lb-mark__b { opacity: .9; }
.shot__cap { align-self: start; margin-top: 16px; font: 500 12px/24px var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lb-muted); }
.tile h3, .work-row h2 { font: 600 24px/32px var(--lb-display); letter-spacing: -.01em; }
.tile h3 a, .work-row h2 a { text-decoration: none; } .tile h3 a:hover, .work-row h2 a:hover { text-decoration: underline; }
.tile p { margin-top: 8px; text-wrap: pretty; }
.facts { margin-top: 16px; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.facts > div { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: 8px 0 7px; border-bottom: 1px solid var(--lb-hair); }
.facts dt { font: 500 12px/24px var(--lb-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--lb-muted); }
.facts dd { font-size: 15px; }
.work-rows { display: grid; gap: 96px; }
.work-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(2 * var(--lb-gap)); align-items: start; }
.work-row .shot { justify-self: end; width: 100%; max-width: 640px; }
.work-row__text { max-width: 34em; }
.work-row__text > p { margin-top: 8px; font: 400 18px/32px var(--lb-text); text-wrap: pretty; }

/* the status reading: the mark used as an instrument. The bubble sits true only when a real answer came back; while
   reading it waits a gap to the right; with no answer it stays off true and the words say so */
.reading { display: flex; align-items: center; gap: 12px; }
.reading .lb-mark { width: 31.5px; height: 13.5px; flex: none; color: var(--lb-ink); }
.reading .lb-mark__b { translate: 0 0; }
.reading[data-state="reading"] .lb-mark__b { translate: 3px 0; opacity: .45; }
.reading[data-state="off"] .lb-mark__b { translate: -3px 0; }               /* off: against the left tick (the family's off) */
.reading[data-state="none"] .lb-mark__b { opacity: 0; }
.reading__text { font-size: 15px; line-height: 24px; }
/* level-vial-status mounted: the solo vial owns the reading; it takes the row's full width and wraps, never overflows */
.reading[data-lb-slot] { display: block; min-width: 0; }
.facts dd { min-width: 0; }
.reading[data-lb-slot] .mc-vial-status { --mc-vial-ink: var(--lb-ink); }
.reading[data-lb-slot] .mc-vial-status__list { display: block; }
.reading[data-lb-slot] .mc-vial-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding: 0; border: 0; }
.reading[data-lb-slot] .mc-vial-row__name, .reading[data-lb-slot] .mc-vial-row__history, .reading[data-lb-slot] .mc-vial__busy { display: none; }
.reading[data-lb-slot] .mc-vial { flex: none; }
.reading[data-lb-slot] .mc-vial-row__reading { flex: 1 1 14em; display: flex; flex-wrap: wrap; column-gap: 8px; }
.reading[data-lb-slot] .mc-vial-row__note { flex: 1 1 auto; font-size: 15px; color: var(--lb-muted); }
.reading[data-lb-slot] .mc-vial-row__reading { font: 400 15px/24px var(--lb-text); margin: 0; }
.reading[data-lb-slot] .mc-vial-row__word { font-weight: 600; }

/* ── builds: the priced ledger ───────────────────────────────────────────────────────────────────────────────── */
.packages { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pack { padding: 32px 32px 24px; display: flex; flex-direction: column; }
.pack__name { font: 600 28px/40px var(--lb-display); letter-spacing: -.015em; }
.pack__price { margin-top: 8px; font: 500 clamp(22px, 1vw + 14px, 30px)/40px var(--lb-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pack__time { font: 400 13px/24px var(--lb-mono); color: var(--lb-muted); }
.pack__scope { margin-top: 16px; text-wrap: pretty; }
.pack__care { margin-top: auto; padding-top: 16px; font-weight: 600; }      /* siblings share the row: the care line sits on the card's foot */
.pack__scope:has(+ .pack__care) { margin-bottom: 16px; }
.pack__foot { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.ledger { width: 100%; border-collapse: collapse; margin-top: 24px; }
.ledger caption { text-align: left; }
.ledger th, .ledger td { padding: 0; font-weight: 400; text-align: left; vertical-align: baseline; }
.ledger tr { border-bottom: 1px solid var(--lb-hair); }
.ledger tr:first-child { border-top: 1px solid var(--lb-hair); }
.ledger th { padding: 8px 0 7px; font-size: 15px; line-height: 24px; color: var(--lb-muted); white-space: nowrap; }
/* the leader runs from the label to the figure */
.ledger th span { display: flex; align-items: baseline; gap: 8px; }
.ledger th span::after { content: ""; flex: 1; min-width: 24px; border-bottom: 1px dotted var(--lb-rule); transform: translateY(-4px); }
.ledger td { width: 1%; white-space: nowrap; padding: 8px 0 7px 8px; font: 500 14px/24px var(--lb-mono); text-align: right; font-variant-numeric: tabular-nums; }
/* /builds packages: what's included, as a price list. Each row is one line: the label, a dotted leader that runs to
   8 px before its own value, the value. Mono only for figures (2 weeks, up to 5, 1); words stay in the text face. */
.spec { margin-top: 24px; border-top: 1px solid var(--lb-hair); }
.spec > div { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 7px; border-bottom: 1px solid var(--lb-hair); }
.spec dt { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 24px; color: var(--lb-muted); }
.spec dt::after { content: ""; flex: 1 1 auto; min-width: 24px; border-bottom: 1px dotted var(--lb-rule); transform: translateY(-4px); }
.spec dd { margin: 0; flex: none; max-width: 60%; text-align: right; font: 500 15px/24px var(--lb-text); }
.spec dd.lb-fig { font: 500 14px/24px var(--lb-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.moves { margin-top: 24px; color: var(--lb-muted); max-width: 46em; text-wrap: pretty; }
.promises { counter-reset: p; border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.promises li { display: grid; grid-template-columns: 48px 1fr; padding: 16px 0 15px; border-bottom: 1px solid var(--lb-hair); font: 400 18px/32px var(--lb-text); text-wrap: pretty; }
.n { font: 400 13px/32px var(--lb-mono); color: var(--lb-muted); font-variant-numeric: tabular-nums; }

/* how a build goes: four stations on one graduated hairline; ticks every unit, a tall tick at each station */
.scale-wrap { position: relative; }
.scale { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 40px; }
.scale__ticks { position: absolute; left: 0; right: 0; top: 0; height: 24px; color: var(--lb-ink); }
.scale__ticks svg { display: block; width: 100%; height: 24px; }
.scale li { position: relative; padding: 0 32px 0 0; }
.scale li::before { content: ""; position: absolute; left: 0; top: -40px; width: 1px; height: 24px; background: var(--lb-ink); }
.scale .n { display: block; line-height: 24px; }
.scale h3 { margin-top: 0; font: 600 24px/32px var(--lb-display); letter-spacing: -.01em; }
.scale p { margin-top: 8px; max-width: 24em; color: var(--lb-muted); text-wrap: pretty; }
.scale dl { margin-top: 16px; max-width: 24em; border-top: 1px solid var(--lb-hair); }
.scale dl div { display: grid; grid-template-columns: 5em 1fr; gap: 8px; padding: 4px 0 3px; border-bottom: 1px solid var(--lb-hair); }
.scale dt { font: 500 11px/24px var(--lb-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--lb-muted); }
.scale dd { font-size: 14px; line-height: 24px; }

/* ── care: the rhythm as a calendar; the plans as a table ────────────────────────────────────────────────────── */
.rhythm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.month { padding: 24px 24px 16px; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }   /* name, days, notes: one row each, shared across the quarter */
.month h3 { font: 500 13px/24px var(--lb-mono); letter-spacing: .06em; text-transform: uppercase; }
.month table { width: 100%; border-collapse: collapse; margin-top: 8px; table-layout: fixed; align-self: start; }   /* never stretched by the shared row: every day keeps its 40 px */
.month th { font: 500 10px/24px var(--lb-mono); letter-spacing: .06em; color: var(--lb-muted); text-transform: uppercase; }
.month td { position: relative; height: 40px; padding: 0; text-align: center; vertical-align: top; font: 400 12px/24px var(--lb-mono); font-variant-numeric: tabular-nums; }
/* every day carries the checks: a fine engraved line at the foot of the day (288 checks, one every five minutes) */
.month td.d::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 10px; height: 1px; background: var(--lb-ink); opacity: .55; box-shadow: 0 1px 0 var(--lb-lip); }
.month td.review { font-weight: 600; }
.month td.review::before { content: ""; position: absolute; inset: 4px 2px 10px;     /* the box's foot is the day's own hairline */ border: 1px solid var(--lb-ink); border-radius: 2px; }
.month__notes { margin-top: 8px; border-top: 1px solid var(--lb-hair); align-self: start; }
.month__notes p { display: flex; gap: 8px; padding: 8px 0 0; font-size: 13px; line-height: 24px; color: var(--lb-muted); }
.month__notes b { color: var(--lb-ink); font-weight: 600; white-space: nowrap; }
.legend { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; line-height: 24px; color: var(--lb-muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { display: inline-block; width: 24px; height: 1px; background: var(--lb-ink); }
.legend i.box { width: 16px; height: 16px; background: none; border: 1px solid var(--lb-ink); border-radius: 2px; }
.plans { width: 100%; border-collapse: collapse; }
.plans th, .plans td { padding: 12px 16px 11px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--lb-hair); font-weight: 400; }
.plans thead th { border-bottom: 1px solid var(--lb-ink); vertical-align: bottom; }
.plans thead b { display: block; font: 600 22px/32px var(--lb-display); letter-spacing: -.01em; }
.plans thead .lb-fig { font-size: 16px; line-height: 24px; font-weight: 500; }
.plans tbody th { color: var(--lb-muted); font-size: 15px; }
.plans td { font-size: 15px; line-height: 24px; }
.plans td.no { color: var(--lb-muted); }
.plans tfoot td { border: 0; padding-top: 24px; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.steps3 li { padding-top: 16px; border-top: 1px solid var(--lb-ink); }
.steps3 h3 { font: 600 18px/24px var(--lb-text); margin-top: 8px; }
.steps3 p { margin-top: 8px; color: var(--lb-muted); text-wrap: pretty; }
.list { border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.list li { padding: 12px 0 11px; border-bottom: 1px solid var(--lb-hair); text-wrap: pretty; }
.list b { display: block; }

/* ── about: the Roman mason's level, drawn ───────────────────────────────────────────────────────────────────── */
.libella { width: min(100%, 320px); margin-left: auto; color: var(--lb-ink); }
.libella svg { display: block; width: 100%; height: auto; }
.libella figcaption { margin-top: 8px; text-align: right; font: 400 12px/24px var(--lb-mono); color: var(--lb-muted); }
.habits { counter-reset: h; }
.habits li { display: grid; grid-template-columns: 48px 1fr; padding: 16px 0 15px; border-bottom: 1px solid var(--lb-hair); }
.habits li:first-child { border-top: 1px solid var(--lb-hair); }
.habits b { display: block; font: 600 18px/32px var(--lb-text); }
.habits p { color: var(--lb-muted); text-wrap: pretty; }
.formerly { margin-top: 32px; font-size: 14px; color: var(--lb-muted); }

/* ── contact: the form; the reading mark carries the send ───────────────────────────────────────────────────── */
.form { padding: 40px; display: grid; gap: 24px; }
.form[hidden], .sent[hidden] { display: none; }
:root:not(.js) .form { display: none; }
.field { display: grid; gap: 8px; }
.field > label, .field legend { font: 600 15px/24px var(--lb-text); padding: 0; }
.field .hint { font-size: 14px; line-height: 24px; color: var(--lb-muted); margin-top: -4px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.input { width: 100%; min-height: 48px; padding: 12px 0 11px; font: 400 17px/24px var(--lb-text); color: var(--lb-ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--lb-rule); border-radius: 0; box-shadow: 0 1px 0 var(--lb-lip); }
.input:hover { border-bottom-color: var(--lb-muted); }
.input:focus { outline: none; border-bottom-color: var(--lb-ink); box-shadow: 0 1px 0 var(--lb-ink); }
.input:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
textarea.input { min-height: 120px; resize: vertical; }
select.input { appearance: none; padding-right: 32px; background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 10px center / 6px 6px no-repeat,
  linear-gradient(-45deg, transparent 50%, currentColor 50%) right 4px center / 6px 6px no-repeat; }
select.input option { color: CanvasText; background: Canvas; }
.input[aria-invalid="true"] { border-bottom-color: var(--lb-ink); border-bottom-style: dashed; }
.err { font-size: 14px; line-height: 24px; font-weight: 600; }
.err:empty { display: none; }
/* one field pitch (N2 #13): every field ends in the same reserved 24 px reason row, so the space from any control to
   the next label is the same 8 + 24 + 24 = 56 px (7 units), whether the field is a line, a choice group or a select */
.form .field > .err { min-height: 24px; }
.form .field > .err:empty { display: block; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; font: 500 15px/24px var(--lb-text); border: 1px solid var(--lb-rule); border-radius: 2px; cursor: pointer; }
.choice input:hover + span { border-color: var(--lb-muted); }
.choice input:checked + span { background: var(--lb-ink); color: var(--lb-ground); border-color: var(--lb-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--lb-ink); outline-offset: 3px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 8px; }
.send .reading .lb-mark { width: 42px; height: 18px; }
.send .reading[data-state="none"] .lb-mark { visibility: hidden; }
.alert { padding: 16px 0 0; border-top: 1px solid var(--lb-ink); text-wrap: pretty; }
.alert[hidden] { display: none; }
.alert .lb-btn { margin-top: 16px; }
.sent { padding: 40px; display: grid; gap: 16px; }
.sent h2 { font: 600 32px/40px var(--lb-display); letter-spacing: -.02em; }
.sent:focus { outline: none; }
.nojs { display: none; }
:root:not(.js) .nojs { display: block; }
.next { counter-reset: s; }
.next li { display: grid; grid-template-columns: 40px 1fr; padding: 12px 0 11px; border-bottom: 1px solid var(--lb-hair); text-wrap: pretty; }
.next li:first-child { border-top: 1px solid var(--lb-hair); }

/* ── status, 404, privacy ────────────────────────────────────────────────────────────────────────────────────── */
.status-rows { border-top: 1px solid var(--lb-hair); box-shadow: inset 0 1px 0 var(--lb-lip); }
.status-row { display: grid; grid-template-columns: minmax(10em, 1fr) 2fr; gap: 8px 32px; padding: 24px 0 23px; border-bottom: 1px solid var(--lb-hair); align-items: baseline; }
.status-row h2 { font: 600 22px/32px var(--lb-display); letter-spacing: -.01em; }
.status-row .facts { margin-top: 8px; }
.off-mark { display: block; width: clamp(96px, 12vw, 168px); color: var(--lb-ink); margin: 0 0 32px auto; }
.off-mark .lb-mark__b { translate: -3px 0; }
.prose { max-width: 38em; }
.prose h2 { font: 600 24px/32px var(--lb-display); letter-spacing: -.01em; margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 16px; text-wrap: pretty; }
.prose ul { list-style: none; border-top: 1px solid var(--lb-hair); }
.prose li { padding: 8px 0 7px; border-bottom: 1px solid var(--lb-hair); }
.prose code { font: 400 14px/24px var(--lb-mono); }

/* ── the end of every page: the plain ask ────────────────────────────────────────────────────────────────────── */
.end { width: var(--lb-measure); margin: 0 auto; padding: 160px 0 32px; text-align: center; }
.end > .lb-rule { margin-bottom: 96px; }
.end h2 { font: 600 clamp(32px, 3.6vw, 64px)/1.125 var(--lb-display); letter-spacing: -.025em; max-width: 16em; margin: 0 auto; text-wrap: balance; }
.end p { margin: 24px auto 40px; max-width: 30em; color: var(--lb-muted); text-wrap: pretty; }

/* ── widths ──────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .rhythm { grid-template-columns: 1fr 1fr; }
  .scale { grid-template-columns: 1fr 1fr; row-gap: 48px; column-gap: 32px; padding-top: 0; }
  .scale__ticks { display: none; }
  .scale li { padding: 0 0 0 24px; border-left: 1px solid var(--lb-ink); }
  .scale li::before { display: none; }
  .packages { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* narrow: the clauses stack on the left margin, the second one standing on the line; the mark stands on the line at
     the right margin, at the second clause's x-height, so it never sits on the type */
  main:has(> .hero), .hero { --hs: clamp(48px, 15.2vw, 112px); --cap: calc(var(--hs) * .53); --mk: calc(var(--cap) * 21 / 9); }
  .hero { min-height: auto; }
  .hero__sky { height: round(down, max(38.2svh, var(--hs) * 2.4 + 64px), var(--lb-u)); }
  .hero__l, .hero__r { left: calc(var(--lb-m) - var(--hs) * .04); right: auto; }
  .hero__sky::after { left: var(--lb-m); right: var(--lb-m); }
  .hero::before { top: -112px; height: calc(48vmax + 112px); }
  .hero__l { bottom: round(nearest, var(--hs), var(--lb-u)); }     /* the first clause one leading above, on the unit */
  .hero__mark { left: auto; right: var(--lb-m); transform: none; }
  main.mc-level-horizon .mc-level-horizon__seat { left: auto; right: var(--lb-m); transform: translateY(-100%); }
  .hero__ground { grid-template-columns: 1fr; row-gap: 32px; padding: 32px 0 64px; }
  .hero__lede { justify-self: stretch; font-size: 19px; line-height: 32px; }
  .ph__sky { height: round(down, clamp(160px, 26svh, 240px), var(--lb-u)); }
  .ph__h { left: var(--lb-m); right: var(--lb-m); transform: translateY(.17em); white-space: normal; }
  .ph__h--long { font-size: clamp(40px, 11vw, 72px); }
  .ph__ground { grid-template-columns: 1fr; row-gap: 16px; padding-top: 24px; }
  .ph__note { justify-self: start; text-align: left; }
  .ph__lede { font-size: 19px; line-height: 32px; }
  .sec { padding-top: 96px; }
  .sec > .lb-rule { margin-bottom: 32px; }
  .split, .work-row { grid-template-columns: 1fr; row-gap: 24px; }
  .sec__head { text-align: left; }
  .sec__note { margin-left: 0; }
  .sec--wide .sec__head { text-align: left; } .sec--wide .sec__note { margin-left: 0; }
  .sec__head h2 { font-size: 32px; line-height: 40px; }
  .tiles, .rhythm, .steps3 { grid-template-columns: 1fr; }
  .work-rows { gap: 64px; }
  .work-row .shot { max-width: none; }
  .scale { grid-template-columns: 1fr; row-gap: 32px; padding-top: 0; }
  .scale__ticks { display: none; }
  .scale li { padding: 0 0 0 24px; border-left: 1px solid var(--lb-ink); }
  .scale li::before { display: none; }
  .pack, .form, .sent { padding: 24px 20px; }
  .ledger th { white-space: normal; }
  .plans thead { display: none; }
  .plans, .plans tbody, .plans tr, .plans th, .plans td { display: block; }
  .plans tbody tr { padding: 8px 0; border-bottom: 1px solid var(--lb-hair); }
  .plans tbody th, .plans td { border: 0; padding: 2px 0; }
  .plans td::before { content: attr(data-plan) ": "; font: 500 12px/24px var(--lb-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--lb-muted); }
  .plans tfoot td::before { content: none; }
  .status-row { grid-template-columns: 1fr; }
  .off-mark { margin: 0 0 24px; }
  .libella { margin: 0; }
  .libella figcaption { text-align: left; }
  .end { padding-top: 112px; }
  .end > .lb-rule { margin-bottom: 64px; }
  .facts > div { grid-template-columns: 7em 1fr; }
}

/* ── reduced motion / none: end states only (brand.css handles the rules) ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { :root:not([data-mc-motion="full"]).lb-arrive .lb-horizon { transform: none; } }

@media (forced-colors: active) {
  .lb-horizon__line { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .facts, .promises, .list, .status-rows, .scale dl { box-shadow: none; }
  .scale li::before, .month td.d::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .choice input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .input { box-shadow: none; border-bottom-color: CanvasText; }
}

/* ── contact with level-true-form mounted: the entry's rule is the only line under a field; its reason sits in the
   site's error line (same type, reserved height, so nothing below moves); the mark rides in the Send button ─────── */
.form.mc-true-form .mc-true-form__field .input,
.form.mc-true-form .mc-true-form__field .input:hover,
.form.mc-true-form .mc-true-form__field .input:focus { border-bottom: 0; box-shadow: none; padding-bottom: 12px; }
.form.mc-true-form .mc-true-form__rule { margin-top: -1px; }
.form.mc-true-form .mc-true-form__line { background: var(--lb-ink); }
.form.mc-true-form .mc-true-form__field .input:focus-visible { outline: 2px solid var(--lb-ink); outline-offset: 4px; }
.form.mc-true-form .err.mc-true-form__reason { margin: 0; min-height: 24px; font: 600 14px/24px var(--lb-text); color: var(--lb-ink); column-gap: 8px; row-gap: 0; }
.form.mc-true-form .err.mc-true-form__reason:empty { display: flex; }
.form.mc-true-form .mc-true-form__fix { color: var(--lb-ink); min-height: 24px; padding: 0; }
.form.mc-true-form .send .reading .lb-mark { display: none; }
.form.mc-true-form .mc-true-form__send { gap: 12px; }
.form.mc-true-form .mc-true-form__mark { width: 28px; height: 12px; }
.form.mc-true-form .mc-true-form__status { margin: 0; min-height: 24px; font: 400 15px/24px var(--lb-text); color: var(--lb-ink); text-wrap: pretty; }
.form.mc-true-form .mc-true-form__status a { white-space: nowrap; }
.form.mc-true-form .send { align-items: flex-start; }
.form.mc-true-form .send .reading { flex: 1 1 18em; min-height: 48px; align-items: center; }
@media (forced-colors: active) {
  .form.mc-true-form .mc-true-form__field .input { border-bottom: 0; }
  .form.mc-true-form .mc-true-form__send .mc-true-form__tick, .form.mc-true-form .mc-true-form__send .mc-true-form__bubble { fill: ButtonFace; }
  .form.mc-true-form .mc-true-form__send:hover .mc-true-form__tick, .form.mc-true-form .mc-true-form__send:hover .mc-true-form__bubble { fill: ButtonText; }
}

/* ── /builds with level-scale-divider mounted: the entry's stations name each step (number, name, what you pay); the
   list under it keeps the full text in the same four cells, its own number and heading kept for the outline only ──── */
.scale-entry { margin-bottom: 24px; color: var(--lb-ink); }
.scale.scale--entry { padding-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scale.scale--entry li { padding: 16px 16px 0; border-top: 1px solid var(--lb-hair); transition: border-color var(--dur-200) var(--ease-out); }
.scale.scale--entry li::before { display: none; }
.scale.scale--entry li > .n, .scale.scale--entry li > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scale.scale--entry li > p { margin-top: 0; }
.scale.scale--entry li[data-at] { border-top-color: var(--lb-ink); }
.scale.scale--entry li[data-at] > p { color: var(--lb-ink); }
@media (max-width: 860px) {
  .scale.scale--entry { grid-template-columns: 1fr; row-gap: 24px; }
  .scale.scale--entry li { padding: 16px 0 0; border-left: 0; }
  .scale.scale--entry li > .n, .scale.scale--entry li > h3 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}
@media (max-width: 1100px) and (min-width: 861px) { .scale.scale--entry { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; } .scale.scale--entry li { border-left: 0; padding: 16px 12px 0; } }

/* ── /care, Three plans: the price list on the full measure. Plan names are plates (like the /builds packages), the
   figures one line each, leaders from each feature to the first figure, every arrow kept with its word ─────────── */
.sec--wide .sec__body:has(> .plans) { max-width: none; }
.plans { table-layout: fixed; }
.plans col.feat { width: 34%; }
.plans thead td { border-bottom: 1px solid var(--lb-ink); }
.plans thead th { padding: 0 16px 16px 0; }
.plans thead th > div { padding: 16px 24px; }
.plans thead b { white-space: nowrap; }
.plans thead .lb-fig { display: block; white-space: nowrap; font-size: 16px; line-height: 24px; }
.plans tbody th span { display: flex; align-items: baseline; gap: 8px; }
.plans tbody th span::after { content: ""; flex: 1; min-width: 24px; border-bottom: 1px dotted var(--lb-rule); transform: translateY(-4px); }
.plans td { padding-left: 24px; }
.plans tfoot a { white-space: nowrap; font: 500 15px/24px var(--lb-text); }
.plans tfoot td { padding-left: 24px; }
.month th { font-size: 11px; }
@media (max-width: 860px) {
  .plans { table-layout: auto; }
  .plans td, .plans tfoot td { padding-left: 0; }
  .plans tbody th span::after { content: none; }
}

/* ── the 8 px grid, kept: every main-text block's first baseline lands on a multiple of the unit from the top of the
   document. Two halves: (1) every block's top is on the unit (spacing in --lb-u, leading in whole units, 1 px rules
   paid for inside the 8: padding 7 + rule 1); (2) inside its line box a block's baseline sits at .5lh + k·1em, where k
   is the face's (ascent − descent) / 2 measured in the browser (Bricolage .33, Instrument Sans .36, JetBrains Mono .36),
   and the block is painted by the remainder to the nearest unit (≤ 4 px) (position: relative; top), so layout never moves.
   studio/test/grid-gate.mjs fails on any baseline off the unit; ?grid=1 draws the unit over the page. ─────────────── */
main { --k: .36; }
main :is(.hero__h, .ph__h, .sec__head h2:not(.kicker), .tile h3, .work-row h2, .pack__name, .scale h3, .plans thead b, .status-row h2,
  .prose h2, .end h2, .sent h2) { --k: .33; }
main :is(p, h1, h2, h3, h4, li, dt, dd, th, td, legend, figcaption, blockquote):not(:has(p, h1, h2, h3, h4, li, dt, dd, ul, ol, dl, table, div, fieldset)):not(.ph__h, .hero__h, form *, .mc-baseline *, .mc-ledger *, .mc-scale *, .mc-vial-status *, .mc-level-bubble-mark *) {
  --lb-b: calc(.5lh + var(--k) * 1em);
  position: relative; top: calc(round(nearest, var(--lb-b), var(--lb-u)) - var(--lb-b));
}
:root.lb-grid body { position: relative; }
:root.lb-grid body::after { content: ""; position: absolute; inset: 0; z-index: 99; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(220 40 40 / .28) 0 1px, transparent 1px 8px),
              repeating-linear-gradient(to bottom, rgb(220 40 40 / .5) 0 1px, transparent 1px 64px); }
/* side-by-side columns share their first baseline (the head's h2 and the body's first line read as one line) */
.split, .ph__ground, .hero__ground { align-items: first baseline; }
.split > .more, .split > .moves { margin-top: 0 !important; }
.shot picture { display: block; width: 100%; height: 100%; }
/* /status: how to read it, drawn: each state of the reading as the mark itself */
.legend-pair li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start; }
.legend-pair .lb-mark { width: 42px; height: 18px; margin-top: 3px; color: var(--lb-ink); }
.legend-pair__none { fill: none; stroke: currentColor; stroke-width: .75; stroke-dasharray: 1.5 1.5; }

/* ── the entries in the site's material (N2 #11, #14): one corner (2 px, like .lb-btn and the form's choices), chips
   on the plate tone with its lit lip, and the footer instrument's words for an off-true bubble ─────────────────── */
.choice span { border-radius: 2px; }
[data-lb-slot] .mc-ledger__chip { border-radius: 2px; border-color: var(--lb-rule);
  background: linear-gradient(152deg, var(--lb-plate-a), var(--lb-plate-b)); box-shadow: inset 0 1px 0 var(--lb-plate-hi), 0 1px 2px -1px var(--lb-plate-lo); }
[data-lb-slot] .mc-ledger__chip:has(input:checked) { background: linear-gradient(152deg, var(--lb-plate-a), var(--lb-plate-c)); box-shadow: inset 0 -2px 0 var(--lb-ink), inset 0 1px 0 var(--lb-plate-hi); }
[data-lb-slot] .mc-lpc__again { border-radius: 2px; }   /* entry CSS loads after this file: the slot raises it */
.lb-check__why { margin-top: 8px; font-size: 14px; line-height: 24px; color: var(--lb-muted); max-width: 40em; }