/* Salida landing and legal pages, after tokens.css. Kept lean: about 6 KB gzipped against the 15 KB landing CSS budget (DESIGN.md 14, DECISIONS.md 3). */
:root{--rule:var(--border-w) solid var(--line);--rule-strong:var(--border-w) solid var(--line-strong);--rule-ink:2px solid var(--ink)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:calc(var(--bar-h) + var(--space-4) + env(safe-area-inset-bottom))}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
img,svg{display:block}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd,figure{margin:0}
.terms__list,.ruled,.people__list,.steps__list,.site-footer__nav ul{list-style:none;padding:0}
h1,h2,h3,.lockup__word,.ticket__brand,.ticket__total-value,.person__name,.hours caption{font-family:var(--font-display);font-stretch:var(--font-display-stretch)}
h1,h2,h3{margin:0;color:var(--ink);text-wrap:balance}
h1,h2,.lockup__word,.ticket__total-value{font-weight:700;letter-spacing:var(--ls-h1)}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3,.person__name,.hours caption{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
a,summary{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.nowrap{white-space:nowrap}
.mono{font-family:var(--font-mono)}
.icon{width:20px;height:20px;flex:none}
.icon--lg{width:24px;height:24px}
.wrap{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;left:var(--space-4);top:-200px;z-index:100;padding:var(--space-3) var(--space-4);background:var(--surface);color:var(--ink);border:var(--focus-w) solid var(--focus);border-radius:var(--r-control);font-weight:700;text-decoration:none}
.skip-link:focus{top:var(--space-3)}
/* 48 px targets (DESIGN.md 6) */
.btn,.lockup,.lang__alt,.header-call,.person__link,.site-footer__nav a,.theme-toggle,.doc__back{display:inline-flex;align-items:center;min-height:var(--tap-min)}
.lang,.ticket__brand,.ticket__valid,.stamp{display:inline-flex;align-items:center}
.hero__note,.ticket-fig figcaption,.terms__detail,.ruled span,.step__when,.faq__aside,.hours__desk,.week__gap,.week__days,.site-footer__note,.site-footer__legal,.doc__meta{font-size:var(--fs-meta)}
.lang__alt,.lang__sep,.hero__note,.ticket-fig figcaption,.terms__detail,.ruled span,.step__when .icon,.step__body,.ways__role,.ways__row dd,.factors dd,.person__role,.faq__intro p,.faq__aside,.hours__closed td,.hours__desk,.week__days,.site-footer__id p,.site-footer__note,.site-footer__legal,.doc__meta{color:var(--ink-2)}
.btn{justify-content:center;gap:var(--space-2);padding:0 var(--space-5);border:var(--border-w) solid transparent;border-radius:var(--r-control);font:inherit;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color var(--dur-hover) var(--ease-enter),transform var(--dur-press) var(--ease-enter)}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:var(--tap-primary)}
.btn--primary{background:var(--brand);color:var(--on-brand)}
.btn--primary:hover{background:var(--brand-hover)}
.btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn--secondary:hover{background:var(--surface-2)}
/* Header: the button shows from 375 px, 56 px tall under 768 */
.site-header{background:var(--bg);border-bottom:var(--rule)}
.site-header__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--tap-primary)}
.lockup{gap:var(--space-3);color:var(--ink);text-decoration:none}
.lockup__mark{width:24px;height:24px;color:var(--brand)}
.lockup__word{font-size:var(--fs-h3);line-height:1}
.site-header__actions{display:flex;align-items:center;gap:var(--space-2)}
.lang{font-weight:600}
.lang__cur{padding-inline:var(--space-1)}
.lang__alt{min-width:var(--tap-min);padding-left:var(--space-1)}
.lang__alt:first-child{justify-content:flex-end;padding:0 var(--space-1) 0 0}
.lang__alt:hover{color:var(--ink)}
.header-call{display:none;gap:var(--space-2);padding-inline:var(--space-2);font-weight:600;text-decoration:none}
.header-call:hover span{text-decoration:underline}
.btn--header{padding-inline:var(--space-3);font-size:var(--fs-meta);white-space:nowrap}
/* "My loads" (spec 3.2) appears only for a returning phone. Under 480 px there is no room for
   it next to the header button, so the button gives way; the hero and sticky bar keep Submit. */
.header-loads{display:inline-flex;align-items:center;min-height:var(--tap-min);padding-inline:var(--space-2);font-weight:600;white-space:nowrap}
.header-loads[hidden]{display:none}
@media (max-width:479px){.header-loads:not([hidden])~.btn--header{display:none}}
@media (max-width:767px){.btn--header{min-height:var(--tap-primary)}}
@media (max-width:374px){.lang~.btn--header{display:none}}
@media (min-width:768px){.site-header__row{min-height:var(--space-8)}.site-header__actions{gap:var(--space-4)}.btn--header{padding-inline:var(--space-4)}}
@media (min-width:1024px){.header-call{display:inline-flex}}
:is(.hero__grid,.take__grid,.take__lists,.steps__list,.ways__list,.pricing__grid,.where__grid,.where__list,.people__grid,.people__list,.faq__grid,.closing__grid,.site-footer__grid,.terms__list){display:grid;grid-template-columns:minmax(0,1fr)}
.hero{padding-block:var(--space-6) var(--section-y)}
.hero__grid{gap:var(--space-6)}
.hero__copy{max-width:36rem}
.hero .lead{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:1.5}
.hero__actions,.closing__actions{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6)}
.hero__note{margin-top:var(--space-4)}
.hero__note a{font-weight:600}
@media (min-width:560px){.hero__actions,.closing__actions{flex-direction:row;flex-wrap:wrap}}
@media (min-width:1024px){.hero{padding-top:var(--space-8)}.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8);align-items:center}}
/* Load ticket (DESIGN.md 7) */
.ticket-fig{width:100%;max-width:32rem}
.ticket-fig figcaption{margin-top:var(--space-3)}
.ticket{--tp:var(--space-5);background:var(--surface);border:var(--rule);border-radius:var(--r-card);overflow:hidden;font-size:var(--fs-label);line-height:1.4}
.ticket :is(dt,.item__spec,.ticket__usda,.ticket__note,.ticket__ref-label,thead th){color:var(--ink-2)}
.ticket :is(dt,dd,.item__spec,.ticket__usda,.ticket__note,.ticket__ref,.ticket__valid,.stamp,thead th){font-size:var(--fs-meta)}
.ticket__head,.ticket__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--tp);background:var(--surface-2)}
.ticket__head{border-bottom:var(--rule-strong)}
.ticket__foot{border-top:var(--rule)}
.ticket__brand,.ticket__valid{gap:var(--space-2);font-weight:600}
.ticket__mark{width:20px;height:20px;color:var(--brand)}
.ticket__ref{white-space:nowrap;font-weight:600}
.ticket__meta,.ticket__terms{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--tp)}
.ticket__terms{border-top:var(--border-w) dashed var(--line-strong)}
:is(.ticket__meta,.ticket__terms)>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.ticket dt{flex:none}
.ticket dd{text-align:right}
.ticket__terms dd{font-weight:600}
.ticket__items{width:100%;border-collapse:collapse}
.ticket__items :is(th,td){padding:var(--space-3) var(--space-2);vertical-align:top;text-align:left}
.ticket__items :is(th,td):first-child{padding-left:var(--tp)}
.ticket__items :is(th,td):last-child{padding-right:var(--tp)}
.ticket__items thead th{padding-block:var(--space-2);font-weight:600;border-block:var(--rule)}
.ticket__items tbody tr+tr{border-top:var(--rule)}
.ticket__items tbody th{font-weight:400}
.ticket__items .num{text-align:right;white-space:nowrap}
.ticket__items td.num{font-family:var(--font-mono)}
.item__name,.item__spec{display:block}
.item__name{font-weight:700}
.item__each{display:none;white-space:nowrap}
.item__unit{display:none;font-family:var(--font-body)}
.ticket__usda{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--space-3);padding:var(--space-2) var(--tp) var(--space-3)}
.ticket__usda .mono{color:var(--ink);margin-left:auto}
.ticket__total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-4) var(--tp) var(--space-1);border-top:var(--rule-strong);font-weight:600}
.ticket__total-value{font-size:var(--fs-h2);line-height:1.1}
.ticket__note{padding:0 var(--tp) var(--space-4)}
.stamp{gap:var(--space-1);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-2);border:var(--border-w) solid var(--brand);border-radius:var(--r-chip);background:var(--brand-tint);color:var(--brand);font-weight:700}
/* The print starts once the ticket has risen into place (see the motion block at the end of this file). */
@media screen and (prefers-reduced-motion:no-preference){.ticket__total-value{animation:ticket-print var(--dur-step) var(--ease-enter) calc(var(--dur-step) * 2) backwards}}
@keyframes ticket-print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
/* Under 1100 px the ticket reads total first: head, total, note, validity row, then the rows in paperwork order, so the
   number and the stamp sit inside the first screen at 390 px (docs/astra/COMPARISON.md). The DOM keeps paperwork order
   (DESIGN.md 7), so the reading order is unchanged; only the visual order moves.
   The block ends at 1099 px, not 1023 px: from 1024 to 1099 px the 5-column ticket is 380 to 412 px wide and in paperwork
   order its bottom lands at 841 to 930 px, past a 768 px viewport, with the total and the stamp out of the first screen.
   Keeping the 7/5 hero columns of DESIGN.md 5 and moving the total up was chosen over widening the ticket column, which
   would break the 7/5 split and still not fit (even the 473 px ticket at 1440 ends at 821 px in Spanish). 1100 px is also
   where the terms strip goes to four columns, so both desktop-proper changes share one breakpoint. */
@media (max-width:1099px){
.ticket{display:flex;flex-direction:column}
.ticket__total{order:1;border-top:0}
.ticket__note{order:2}
.ticket__foot{order:3;border-top:var(--rule);border-bottom:var(--rule-strong)}
.ticket__meta{order:4}
.ticket__items{order:5}
.ticket__usda{order:6}
.ticket__terms{order:7;padding-bottom:var(--space-4)}
}
@media (max-width:419px){.ticket__items .col-each{display:none}.item__each{display:inline}.ticket__items tbody :is(th,td){padding-block:var(--space-2)}}
@media (max-width:359px){
.ticket{--tp:var(--space-4)}
.ticket__mark{display:none}
.ticket__items thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ticket__items,.ticket__items tbody{display:block;width:100%}
.ticket__items tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);padding:var(--space-3) var(--tp)}
.ticket__items tbody tr:first-child{border-top:var(--rule)}
.ticket .ticket__items tbody :is(th,td){padding:0;text-align:left}
.ticket .ticket__items tbody td:last-child{text-align:right}
.ticket__items tbody th{grid-column:1/-1}
.item__unit{display:inline}
}
@media (min-width:1024px){.ticket-fig{justify-self:end}}
.terms{background:var(--surface);border-block:var(--rule)}
.terms__list li{display:flex;align-items:flex-start;gap:var(--space-3);padding-block:var(--space-3);border-top:var(--rule)}
.terms__list li:first-child{border-top:0}
.terms__value{font-weight:700;line-height:1.3}
.terms__detail{margin-top:var(--space-1);line-height:1.45}
@media (min-width:640px) and (max-width:1099px){.terms__list{grid-template-columns:repeat(2,minmax(0,1fr))}.terms__list li{padding:var(--space-5) var(--space-5) var(--space-5) 0}.terms__list li:nth-child(2){border-top:0}.terms__list li:nth-child(even){padding-left:var(--space-5);border-left:var(--rule)}}
@media (min-width:1100px){.terms__list{grid-template-columns:repeat(4,minmax(0,1fr))}.terms__list li{padding:var(--space-6) var(--space-5);border-top:0;border-left:var(--rule)}.terms__list li:first-child{padding-left:0;border-left:0}.terms__list li:last-child{padding-right:0}}
.section{padding-block:var(--section-y)}
.section+.section{border-top:var(--rule)}
.band{background:var(--surface);border-block:var(--rule)}
.band+.section,.section+.band{border-top:0}
.section__intro{margin-top:var(--space-4);max-width:34em}
.split{row-gap:var(--space-5)}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--space-8);align-items:start}}
.ruled li{display:flex;gap:var(--space-3);align-items:flex-start;padding-block:var(--space-3);border-bottom:var(--rule)}
.ruled li .icon{height:1lh}
.ruled strong{display:block;font-weight:700;line-height:1.35}
.ruled span{display:block;line-height:1.45}
.icon--yes{color:var(--brand)}
.icon--no{color:var(--ink)}
.take__lists{gap:var(--space-5)}
.take__col h3{padding-bottom:var(--space-2);border-bottom:var(--rule-ink)}
@media (min-width:768px){.take__lists,.where__list,.people__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6)}}
.steps__list{margin-top:var(--space-6)}
/* Each step carries a mono counter over a rule (DESIGN.md 6.1 row 5). --brand stays on primary buttons, links and the
   active step (DESIGN.md 2), and the landing has no active step. The span holds the digit; CSS adds the leading zero. */
.step{padding:var(--space-4) 0 var(--space-5);border-top:var(--rule)}
.step:last-child{padding-bottom:0}
.step__num{display:block;color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;line-height:1.4}
.step__num::before{content:"0"}
.step h3{margin-top:var(--space-2)}
.step__when{display:flex;align-items:flex-start;gap:var(--space-2);font-weight:600;line-height:1.4}
.step__body{margin-top:var(--space-2);max-width:36em}
@media (min-width:1024px){
.steps__list{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--space-6);margin-top:var(--space-7)}
.step{padding:var(--space-4) 0 0}
.step__when{margin-top:var(--space-1)}
}
.ways{margin-top:var(--space-7)}
.ways__list{margin-top:var(--space-3);border-top:var(--rule-ink)}
.ways__row{padding-block:var(--space-3);border-bottom:var(--rule)}
.ways__row dt,.factors dt{font-weight:700}
.ways__role{font-weight:400}
.ways__row dd,.factors dd{margin-top:var(--space-1);max-width:40em}
@media (max-width:767px){.ways__row :is(dt,dd){display:inline}.ways__row dt{margin-right:var(--space-1)}.ways__row dt::after{content:".";font-weight:400}}
@media (min-width:768px){.ways__list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-6)}.ways__row{border-bottom:0;padding-bottom:0}}
.factors{border-top:var(--rule-ink)}
.factors__row{padding-block:var(--space-3);border-bottom:var(--rule)}
@media (max-width:639px){.factors :is(dt,dd){display:inline}.factors dt{margin-right:var(--space-1)}.factors dt::after{content:"."}}
@media (min-width:640px){.factors__row{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:var(--space-5);padding-block:var(--space-4)}.factors dd{margin-top:0}}
.where__lead{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:1.5;max-width:30em}
.where__list,.people__list,.faq__list{border-top:var(--rule-ink)}
.person{padding-block:var(--space-3);border-bottom:var(--rule)}
.person__role{margin-top:var(--space-1);max-width:32em}
.person__link{gap:var(--space-2);font-weight:700}
.faq__intro p{margin-top:var(--space-3);max-width:22em}
.faq__intro a{font-weight:700}
/* Adjacent 56 px summaries need the 8 px target gap (DESIGN.md 6): half of --tap-gap on each side of the row's rule, so
   the rule sits centred between rows instead of hugging the row above. First row stays flush under the ink rule. */
.faq details{padding-bottom:calc(var(--tap-gap) / 2);border-bottom:var(--rule)}
.faq details+details{padding-top:calc(var(--tap-gap) / 2)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--tap-primary);padding-block:var(--space-3);font-weight:700;line-height:1.35;cursor:pointer;touch-action:manipulation}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{text-decoration:underline}
.faq__chev{transition:transform var(--dur-hover) var(--ease-enter)}
.faq details[open] .faq__chev{transform:rotate(180deg)}
.faq__a{padding-bottom:var(--space-5);max-width:40em}
.faq__a>*+*{margin-top:var(--space-3)}
.closing{background:var(--surface);border-top:var(--rule-ink);padding-block:var(--section-y)}
.closing__grid{row-gap:var(--space-6)}
.closing__copy>p{margin-top:var(--space-3);max-width:30em}
.closing__actions{margin-top:var(--space-5)}
@media (max-width:559px) and (min-width:360px){.closing__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.closing__actions .btn{padding-inline:var(--space-3)}.closing__actions .btn--primary{grid-column:1/-1}}
@media (min-width:1024px){.closing__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"copy hours" "gap hours";column-gap:var(--space-8);align-items:start}.closing__copy{grid-area:copy}.closing__hours{grid-area:hours}.closing .gap{grid-area:gap}}
.hours{width:100%;border-collapse:collapse;border-top:var(--rule-ink)}
.hours caption{caption-side:top;text-align:left;padding-bottom:var(--space-2)}
.hours :is(th,td){padding:var(--space-3) 0;vertical-align:top;border-bottom:var(--rule-strong)}
.hours th{text-align:left;font-weight:600;padding-right:var(--space-4)}
.hours td{text-align:right;white-space:nowrap}
.hours .is-last th{font-weight:700}
.hours__desk{margin-top:var(--space-3);max-width:36em}
/* Under 360 px the row header and the time stack, as the ticket rows do at that width (the max-width:359px block above):
   side by side, the nowrap time cell squeezed the headers to three and four lines at 320 px. The ink rule moves from the
   table to the first row so it still sits between the caption and the rows. */
@media (max-width:359px){
.hours,.hours tbody{display:block;width:100%}
.hours{border-top:0}
.hours caption{display:block}
.hours tbody tr{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-1);padding-block:var(--space-3);border-bottom:var(--rule-strong)}
.hours tbody tr:first-child{border-top:var(--rule-ink)}
.hours :is(th,td){display:block;padding:0;border-bottom:0;text-align:left;white-space:normal}
}
.gap{padding-top:var(--space-4);border-top:var(--rule-ink)}
.gap h3{margin-bottom:var(--space-2)}
.gap p{max-width:36em}
/* Week track: 168 h from Monday 00:00; gap = hours 107 to 153 */
.week{margin-top:var(--space-4)}
.week__track{--seg:var(--ink-2);--seg-last:var(--ink);--tick:var(--line);position:relative;height:var(--space-6);background:var(--surface);border:var(--rule-strong);border-radius:var(--r-chip);overflow:hidden}
.week__svg{position:absolute;inset:0;width:100%;height:100%}
.week__ticks{stroke:var(--tick);stroke-width:1}
.week__segs{fill:var(--seg)}
.week__last{fill:var(--seg-last)}
.week__gap{position:absolute;top:0;bottom:0;left:calc(107 / 168 * 100%);width:calc(46 / 168 * 100%);display:grid;place-items:center;background:var(--surface);border-inline:2px solid var(--warn);color:var(--warn);font-weight:700}
.week__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:var(--space-1);text-align:center}
.site-footer{padding-block:var(--space-6) var(--space-7);border-top:var(--rule)}
.site-footer__grid{gap:var(--space-5)}
.site-footer__id .lockup--footer{min-height:0;color:var(--ink)}
.site-footer__id .site-footer__name{margin-top:var(--space-3);color:var(--ink);font-weight:600}
.site-footer__tagline{font-weight:600} /* tagline 1: body face 600 in --ink-2 (DESIGN.md 1); color from .site-footer__id p */
.site-footer__nav ul{display:flex;flex-wrap:wrap;gap:var(--tap-gap) var(--space-5)}
.site-footer__nav a{min-width:var(--tap-min)}
.site-footer__legal{padding-top:var(--space-4);border-top:var(--rule)}
.site-footer__legal p+p{margin-top:var(--space-1)}
/* Toggle check hidden, not transparent, so forced colors cannot paint it */
.theme-toggle{justify-self:start;gap:var(--space-3);padding:0 var(--space-4) 0 var(--space-3);background:var(--surface);color:var(--ink);border:var(--rule-strong);border-radius:var(--r-control);font:inherit;font-weight:600;cursor:pointer;touch-action:manipulation}
.theme-toggle[hidden]{display:none}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle__box{display:grid;place-items:center;width:24px;height:24px;flex:none;border:2px solid var(--line-strong);border-radius:var(--r-chip)}
.theme-toggle__box .icon{width:16px;height:16px;visibility:hidden}
.theme-toggle[aria-pressed="true"] .theme-toggle__box{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.theme-toggle[aria-pressed="true"] .theme-toggle__box .icon{visibility:visible}
@media (min-width:768px){.site-footer__grid{grid-template-columns:minmax(0,1fr) auto auto;column-gap:var(--space-8);align-items:start}.site-footer__nav ul{flex-direction:column}.site-footer__legal{grid-column:1/-1}}
/* Sticky bar: --bar-h (88 px) includes the top rule; icon-only Call and Text under 480 px */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:var(--space-2);padding:calc(var(--space-4) - var(--border-w)) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));background:var(--surface);border-top:var(--rule)}
.sticky-bar[hidden]{display:none}
.sticky-bar__main{flex:1 1 auto;min-width:0;padding-inline:var(--space-3);white-space:nowrap}
.sticky-bar__alt{flex:none;min-width:var(--tap-min);padding-inline:var(--space-4)}
@media (max-width:479px){.sticky-bar__alt{padding-inline:var(--space-3)}.sticky-bar__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (min-width:768px){.sticky-bar,.sticky-bar[hidden]{display:none}html{scroll-padding-bottom:0}}
.doc{padding-block:var(--space-7) var(--section-y)}
.doc__body{max-width:var(--measure)}
.doc__meta{margin-top:var(--space-3)}
.doc .doc__note{margin-top:var(--space-5);padding-top:var(--space-3);border-top:var(--rule-ink)}
.doc h2{margin-top:var(--space-7)}
.doc :is(h2+*,p+p,p+ul,ul+p){margin-top:var(--space-3)}
.doc ul{padding-left:var(--space-5)}
.doc li+li{margin-top:var(--space-2)}
.doc__back{margin-top:var(--space-6);font-weight:600}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.sticky-bar,.skip-link,.theme-toggle,.site-header__actions{display:none!important}.band,.closing,.terms{background:none}.reveal{opacity:1!important;transform:none!important}}
@media (forced-colors:active){
.btn--primary{border-color:ButtonText}
.stamp{border:1px solid CanvasText}
.week__track{forced-color-adjust:none;--seg:CanvasText;--seg-last:CanvasText;--tick:GrayText;border-color:CanvasText;background:Canvas}
.week__gap{background:Canvas;color:CanvasText;border-color:Highlight}
.theme-toggle[aria-pressed="true"] .theme-toggle__box{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText}
}
/* Motion (DESIGN.md 4): one orchestrated opening, then responses to the reader's own actions. The hero rises in on the
   three duration tokens, the ticket prints its total once it has entered, the stamp settles, the sections below the hero
   and the footer rise 8 px once as they enter (landing.js adds .reveal and then .is-in), FAQ answers open and close over
   --dur-step where the browser can animate height to a keyword, and the sticky bar slides up when it appears. Nothing
   loops, bounces, counts up or follows the scroll. Under reduced motion tokens.css zeroes the durations, this file's reduce
   rule above removes animations and transitions, and landing.js adds no reveal class. The block is screen-only, so print
   and PDF output always carry the whole page. */
@media screen and (prefers-reduced-motion:no-preference){
.hero h1,.hero .lead,.hero__actions,.hero__note,.ticket-fig{animation:rise var(--dur-step) var(--ease-enter) both}
.hero .lead{animation-delay:var(--dur-press)}
.hero__actions,.hero__note{animation-delay:var(--dur-hover)}
.ticket-fig{animation-delay:var(--dur-step)}
.stamp{animation:stamp-settle var(--dur-hover) var(--ease-enter) calc(var(--dur-step) * 3) backwards}
.reveal{opacity:0;transform:translateY(var(--space-2))}
.reveal.is-in{opacity:1;transform:none;transition:opacity var(--dur-step) var(--ease-enter),transform var(--dur-step) var(--ease-enter)}
.faq{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size var(--dur-step) var(--ease-enter),opacity var(--dur-step) var(--ease-enter),content-visibility var(--dur-step) allow-discrete}
.faq details[open]::details-content{block-size:auto;opacity:1}
.sticky-bar:not([hidden]){animation:bar-in var(--dur-step) var(--ease-enter) both}
}
@keyframes rise{from{opacity:0;transform:translateY(var(--space-2))}to{opacity:1;transform:none}}
@keyframes stamp-settle{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes bar-in{from{transform:translateY(100%)}to{transform:none}}
/* Reconditioning (DESIGN.md 6.1 row 6, and the one explanatory sequence allowed by DESIGN.md 4, decided 2026-10-16).
   Layout first, then the recovery statement, the steps and the pallet map. Tokens only. Every static rule below is the
   drawing's final frame, which is also what shows under reduced motion, in print and when scripts fail. landing.js puts
   .is-playing (with .is-held, which pauses the run on its first frame) on the section at load, lifts the hold the first time
   half the drawing is in view above the sticky bar, and Replay restarts the class. Nothing here is set from a style attribute (CSP style-src 'self'):
   per-case timing and offsets are nth-child and class rules. */
.recon__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.recon__card{width:100%;max-width:30rem;padding:var(--space-2) var(--space-2) var(--space-3);background:var(--surface);border:var(--rule);border-radius:var(--r-card)}
/* Review fix (crit-9): the drawing stops growing at 25rem and sits centred in the card, so its labels stay near body size on
   wide screens (about 17.6 px) instead of reaching 20 px. Its "Sample:" title is HTML text at --fs-meta, outside the SVG, so
   the label stays 15 px at every width; the two frames of the title share one grid cell and swap like the SVG layers do. */
.recon__fig{max-width:25rem;margin-inline:auto}
.recon__fig .pm{width:100%;height:auto}
.recon__cap{display:grid;margin-bottom:var(--space-1);font-size:var(--fs-meta);font-weight:600;line-height:var(--lh-h3)}
.recon__cap span{grid-area:1/1}
.recon__cap .lb1{opacity:0}
.recon__note{margin-top:var(--space-3);padding-inline:var(--space-1);color:var(--ink-2);font-size:var(--fs-meta)}
.recon__replay{margin:var(--space-3) var(--space-1) 0}
/* Review fix (crit-11): without JavaScript the drawing never runs, so Replay is not shown as a dead control; its 48 px box
   stays reserved, so nothing reflows when landing.js enables it. */
.recon__replay:disabled{visibility:hidden}
.recon__end{max-width:34em}
.recon__ask{margin-top:var(--space-3)}
/* Side by side from 1024 px, the card at its 30rem cap and the text taking the rest, so the longest Spanish heading word
   never breaks; stacked below that, like the hero ticket. */
@media (min-width:1024px){
.recon__grid{grid-template-columns:minmax(0,1fr) minmax(0,30rem);grid-template-areas:"text card" "steps card" "end card" "photo clip";grid-template-rows:auto auto auto 1fr;column-gap:var(--space-8);align-items:start}
.recon__text{grid-area:text}.recon__card{grid-area:card}.recon__steps{grid-area:steps}.recon__end{grid-area:end}.recon__photo{grid-area:photo}.recon__clip{grid-area:clip}
}
/* Photographs (DESIGN.md 9, 2026-10-23): licensed stand-ins until real dock photos exist, graded cool at build time
   (tools/prepare-images.mjs), every one lazy and sized, 3:2 sources cropped by object-fit where a layout needs another ratio. */
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-control);background:var(--surface-2)}
.photo figcaption,.clip__cap{margin-top:var(--space-2);color:var(--ink-2);font-size:var(--fs-meta);line-height:1.4}
.where__photos{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-3)}
.where__photos li:first-child{grid-column:1/-1}
.where__photos li:first-child img{aspect-ratio:16/9}
.where__photos li+li img{aspect-ratio:4/3}
.where__note{margin-top:var(--space-3);color:var(--ink-2);font-size:var(--fs-meta)}
@media (min-width:768px){.where__photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.where__photos li:first-child{grid-column:auto}.where__photos li img,.where__photos li+li img,.where__photos li:first-child img{aspect-ratio:3/2}}
/* The reconditioning photo lives in the text column from 1024 px only (it never covers the drawing); below that it is not
   rendered, so a lazy image is never fetched for it. */
.recon__photo{display:none}
@media (min-width:1024px){.recon__photo{display:block}.recon__photo,.recon__clip{margin-top:var(--space-5)}}
/* The one click-to-play clip (DESIGN.md 14): poster frame, preload none, no autoplay, no loop, no sound. The native
   controls are the no-script path; the big play button ships hidden, landing.js shows it and it steps aside while the clip plays. */
.clip{width:100%;max-width:30rem}
.clip__frame{position:relative;overflow:hidden;border-radius:var(--r-control);background:var(--surface-2)}
.clip__video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.clip__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-height:var(--tap-primary);padding-inline:var(--space-5);box-shadow:var(--shadow-sheet)}
.clip__play[hidden]{display:none}
@media print{.clip__play{display:none}}
/* The recovery statement: the drawing's numbers as text, one row printing as its beat lands. */
.acct{margin-top:var(--space-3);border:var(--rule-strong);border-radius:var(--r-control);font-size:var(--fs-meta);line-height:1.4}
.acct__head{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-bottom:var(--rule);font-weight:700}
.acct__head span+span{font-weight:400;color:var(--ink-2)}
.acct__list{padding:var(--space-1) var(--space-3) var(--space-2)}
/* A long label wraps inside its own cell and the value stays on its line (at 320 px the shrink row and the new lot code
   row used to drop their value to a line of its own); only the Out row wraps, to put its breakdown under the total. */
.acct__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-3);padding-block:var(--space-1)}
.acct dt{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.acct dd{flex:none;margin-left:auto;text-align:right}
.acct__out{flex-wrap:wrap;align-items:baseline;margin-top:var(--space-1);padding-top:var(--space-2);border-top:var(--rule)}
.acct__out dt,.acct__out strong{font-weight:700}
/* Review fix (crit-8): the Out row's value is the total alone; its breakdown is a second dd on a line of its own, so the
   total never wraps away from its label and the keys keep their screen-reader words. */
.acct dd.acct__eq{flex:1 1 100%}
.acct dd .key{vertical-align:middle;margin-right:var(--space-1)}
.key{display:inline-grid;place-items:center;flex:none;width:24px;height:20px;border:calc(1.5 * var(--border-w)) solid var(--ink);border-radius:var(--r-chip);background:var(--surface);font-weight:700;line-height:1}
.key--a{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}
.key--c{border-color:var(--warn);background:var(--warn-tint);color:var(--warn)}
.key--d{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink-2)}
.key--r{border-color:var(--brand);color:var(--brand)}
.key--r .icon{width:16px;height:16px}
.key--l{border-color:var(--brand);background:var(--brand)}
.key--u{border:0;background:none}
.key--s{border-style:dashed;border-color:var(--line-strong);background:none}
.key--u::before{content:"";width:12px;height:8px;border-radius:50%;background:var(--danger)}
/* Steps: a lit step gets a 3 px brand rule at its left and a 2 px ink rule drawn along its top, both gone when it ends,
   so the final frame is a plain list. Waiting steps sit at .86 opacity, never lower (review fix crit-4: at .72 the light-mode
   body text fell to 3.49:1; at .86 it stays above 4.5:1). */
.recon__steps{list-style:none;padding:0}
.rs{position:relative;display:grid;grid-template-columns:2.5rem minmax(0,1fr);padding:var(--space-4) 0 var(--space-4) var(--space-3);border-top:var(--rule)}
.rs::before,.rs::after{content:"";position:absolute;left:0;opacity:0}
.rs::before{right:0;top:calc(-1 * var(--border-w));height:2px;background:var(--ink);transform-origin:0 50%}
.rs::after{top:var(--space-4);bottom:var(--space-4);width:3px;background:var(--brand)}
.rs__n{color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;line-height:2}
.rs__n::before{content:"0"}
.rs p{margin-top:var(--space-1);color:var(--ink-2)}
:is(.rs,.rb__n,.rb__t>span):nth-child(2){--d:2900ms;--l:2400ms}:is(.rs,.rb__n,.rb__t>span):nth-child(3){--d:5300ms;--l:2000ms}:is(.rs,.rb__n,.rb__t>span):nth-child(4){--d:7300ms;--l:2000ms}
:is(.rs,.rb__n,.rb__t>span):first-child{--d:0ms;--l:2900ms}
/* Review fix (crit-2): the beat strip. Below 1024 px the steps sit under the card, out of view while the drawing runs, so four
   numbers between the drawing and the statement light the current step with the list's own cue (a 2 px ink rule drawn along
   the top and a 3 px brand rule at the left, here on a brand-tint chip) and show that step's title, on the steps' --d and --l
   timings above. Its static frame is the four plain numbers with no title, a legend for the list below; the title cell keeps
   the height of the longest title, so nothing reflows. Hidden from 1024 px, where the steps sit beside the card. */
.rb{display:flex;align-items:center;gap:var(--space-1);margin-top:var(--space-3);padding-inline:var(--space-1)}
.rb__n{position:relative;isolation:isolate;flex:none;padding:var(--space-1);border:var(--rule);border-radius:var(--r-chip);color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;line-height:1.4}
.rb__n::before,.rb__n::after{content:"";position:absolute;opacity:0}
.rb__n::before{z-index:1;left:0;right:0;top:calc(-1 * var(--border-w));height:2px;background:var(--ink);transform-origin:0 50%}
.rb__n::after{z-index:-1;inset:0;border-left:3px solid var(--brand);border-radius:inherit;background:var(--brand-tint)}
.rb__t{display:grid;flex:1 1 auto;min-width:0;margin-left:var(--space-2);font-size:var(--fs-meta);font-weight:600;line-height:var(--lh-h3)}
.rb__t>span{grid-area:1/1;align-self:center;opacity:0}
@media (min-width:1024px){.rb{display:none}}
/* The pallet map (aria-hidden). Ink lines on surface; brand for sound product and the new lot plate; warn for B and C;
   danger only on the pulled units. Ids carry an rc prefix; glyphs live in <defs> and are placed with <use>. */
.pm{font-family:var(--font-body);font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.pm .tl{fill:var(--ink);font-weight:600}
.pm .dk{fill:var(--surface-2);stroke:var(--line-strong)}
.pm .bn,.pm .ot{fill:var(--surface);stroke:var(--line-strong)}
.pm .slots{fill:url(#rc-slot)}
.sl{fill:none;stroke:var(--line-strong);stroke-dasharray:3 2}
.kN{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.sm{stroke:var(--line-strong)}
.kA{fill:var(--brand-tint);stroke:var(--brand);stroke-width:1.5}
.kB,.kC{fill:var(--warn-tint);stroke:var(--warn);stroke-width:1.5}
.kD{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1.5}
.kR{fill:var(--surface);stroke:var(--brand);stroke-width:1.5}
.tA,.tB,.tC,.tD{text-anchor:middle;font-weight:700}
.tA{fill:var(--brand)}.tB,.tC{fill:var(--warn)}.tD{fill:var(--ink-2)}
.ck{fill:none;stroke:var(--brand);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pm .pu{fill:var(--danger)}
.pm .plc rect{fill:var(--brand)}
.pm .tp{fill:var(--on-brand)}
.pm .tc{fill:var(--on-brand);font-weight:700}
.pm .lk{fill:none;stroke:var(--ink-2);stroke-width:1.25;stroke-dasharray:1}
.pm .lkd{fill:var(--ink-2)}
.pm .ar{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1}
.pm .ah{fill:var(--ink)}
.pm :is(.tb,.wh){fill:var(--surface);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.pm .cg{fill:var(--surface);stroke:var(--brand);stroke-width:1.25}
.pm :is(.cv,.bv,.b){opacity:0}
.pm .plc{transform-box:fill-box;transform-origin:center}
/* Per-case timing and offsets. --r and --c are the row and column a case starts in (classes revealed in reading order);
   .m1 to .m6 carry the C and D cases from their slots to the bins; .d1 and .d2 drop a B case one or two rows, straight down
   its own column; each pulled unit flies from its B case to the tray. */
.pm .rw:nth-child(2){--r:1}.pm .rw:nth-child(3){--r:2}.pm .rw:nth-child(4){--r:3}.pm .rw:nth-child(5){--r:4}.pm .rw:nth-child(6){--r:5}.pm .rw:nth-child(7){--r:6}.pm .rw:nth-child(8){--r:7}
.pm .rw{--r:0}.pm .k{--c:0}
.pm .k:nth-child(2){--c:1}.pm .k:nth-child(3){--c:2}.pm .k:nth-child(4){--c:3}.pm .k:nth-child(5){--c:4}
.pm .dr{--dx:0px}.pm .d1{--dy:-23px}.pm .d2{--dy:-46px}.pm .tk{--dx:-140px}
.pm .m1{--t:3000ms;--dx:-182px;--dy:-23px}
.pm .m2{--t:3420ms;--dx:-150px;--dy:-90px}
.pm .m3{--t:3090ms;--dx:-182px;--dy:0px}
.pm .m4{--t:3180ms;--dx:-182px;--dy:0px}
.pm .m5{--t:3510ms;--dx:-118px;--dy:-67px}
.pm .m6{--t:3270ms;--dx:-150px;--dy:23px}
.pm .pu:nth-child(1){--j:0;--dx:-112px;--dy:-153.5px}
.pm .pu:nth-child(2){--j:1;--dx:-102px;--dy:-153.5px}
.pm .pu:nth-child(3){--j:2;--dx:-92px;--dy:-153.5px}
.pm .pu:nth-child(4){--j:3;--dx:-242px;--dy:-130.5px}
.pm .pu:nth-child(5){--j:4;--dx:-136px;--dy:-130.5px}
.pm .pu:nth-child(6){--j:5;--dx:-286px;--dy:-107.5px}
.pm .pu:nth-child(7){--j:6;--dx:-112px;--dy:-120.5px}
.pm .pu:nth-child(8){--j:7;--dx:-102px;--dy:-97.5px}
.pm .pu:nth-child(9){--j:8;--dx:-156px;--dy:-74.5px}
.pm .pu:nth-child(10){--j:9;--dx:-242px;--dy:-51.5px}
.pm .pu:nth-child(11){--j:10;--dx:-168px;--dy:-28.5px}
.pm .pu:nth-child(12){--j:11;--dx:-158px;--dy:-28.5px}
/* The sequence, about 9.3 s, once per .is-playing: 01 the load arrives and every case shows its class (0 to 2.9 s);
   02 C and D cases go to their bins and one unit is pulled from each B case (2.9 to 5.3 s); 03 four emptied B cases clear,
   the rest drop straight down, turn into clean cartons and the new lot plate settles with its link to the old lot
   (5.3 to 7.3 s); 04 the truck pulls out and the statement's last row prints (7.3 to 9.3 s). A cases never move. The beat
   strip and the steps light in time with the four beats. */
@media screen and (prefers-reduced-motion:no-preference){
.is-playing .pl{animation:rc-arrive 500ms var(--ease-enter) backwards}
.is-playing .lb1{animation:rc-hold 6650ms linear backwards}
.is-playing .cv{animation:rc-out 160ms linear calc(600ms + var(--r) * 275ms + var(--c) * 55ms) backwards}
.is-playing .mv{animation:rc-move 700ms var(--ease-enter) var(--t) backwards}
.is-playing .pu{animation:rc-pull 800ms var(--ease-enter) calc(4100ms + var(--j) * 30ms) backwards}
.is-playing .bv{animation:rc-out 200ms linear 5400ms backwards}
.is-playing .dr{animation:rc-move 700ms var(--ease-enter) 5600ms backwards}
.is-playing .b{animation:rc-out 240ms linear calc(6300ms + var(--c) * 40ms) backwards}
.is-playing .rp{animation:rc-in 240ms linear calc(6300ms + var(--c) * 40ms) backwards}
.is-playing .plc{animation:stamp-settle var(--dur-step) var(--ease-enter) 6650ms backwards}
.is-playing .lb2{animation:rc-in var(--dur-step) linear 6650ms backwards}
.is-playing .lk{animation:rc-draw 300ms var(--ease-enter) 6950ms backwards}
.is-playing .lkd{animation:rc-in var(--dur-press) linear 6950ms backwards}
.is-playing .cg{animation:rc-in var(--dur-hover) linear 7150ms backwards}
.is-playing .ar{animation:rc-draw 1100ms var(--ease-enter) 7300ms backwards}
.is-playing .tk{animation:rc-drive 1100ms var(--ease-enter) 7350ms backwards}
.is-playing .ah{animation:rc-in var(--dur-press) linear 8300ms backwards}
.is-playing .acct__row{animation:ticket-print var(--dur-step) var(--ease-enter) var(--w) backwards}
.is-playing .rs::before{animation:rc-rule var(--l) linear var(--d) backwards}
.is-playing .rs::after{animation:rc-lit var(--l) linear var(--d) backwards}
.is-playing .rs>div{animation:rc-wake var(--dur-hover) var(--ease-enter) var(--d) backwards}
.is-playing .rb__n::before{animation:rc-rule var(--l) linear var(--d) backwards}
.is-playing .rb__n::after,.is-playing .rb__t>span{animation:rc-lit var(--l) linear var(--d) backwards}
.is-held *,.is-held *::before,.is-held *::after{animation-play-state:paused!important}
}
.acct__row:nth-child(1){--w:520ms}.acct__row:nth-child(2){--w:3800ms}.acct__row:nth-child(3){--w:4100ms}.acct__row:nth-child(4){--w:5200ms}.acct__row:nth-child(5){--w:5450ms}.acct__row:nth-child(6){--w:6950ms}.acct__row:nth-child(7){--w:8450ms}
@keyframes rc-arrive{from{opacity:0;transform:translateX(calc(-1 * var(--space-5)))}}
@keyframes rc-hold{0%,96%{opacity:1}}
@keyframes rc-out{from{opacity:1}}
@keyframes rc-in{from{opacity:0}}
@keyframes rc-move{from{transform:translate(var(--dx),var(--dy))}}
@keyframes rc-pull{0%{opacity:0;transform:translate(var(--dx),var(--dy))}20%{opacity:1;transform:translate(var(--dx),var(--dy))}}
@keyframes rc-draw{from{stroke-dashoffset:1}}
@keyframes rc-drive{from{transform:translateX(var(--dx))}}
@keyframes rc-rule{0%{opacity:1;transform:scaleX(0);animation-timing-function:var(--ease-enter)}25%{transform:none}92%{opacity:1}}
@keyframes rc-lit{0%{opacity:0}8%,92%{opacity:1}}
@keyframes rc-wake{from{opacity:.86}}
@media (prefers-reduced-motion:reduce){.recon__replay{display:none}}
@media print{.recon__replay{display:none}.recon__card{break-inside:avoid}}
@media (forced-colors:active){
.pm *{stroke:CanvasText}
.pm text{fill:CanvasText;stroke:none}
.pm :is(rect,ellipse,circle){fill:Canvas}
.pm :is(.pu,.lkd circle,.ah){fill:CanvasText}
.pm .plc rect{fill:Highlight}.pm .plc text{fill:HighlightText}
.rs::after,.key--l,.key--u::before{background:Highlight}
.rb__n::before{background:CanvasText}.rb__n::after{background:Canvas;border-left-color:Highlight}
.key{border-color:CanvasText}
}
/* More contrast, last; the :root prefix outranks the base rules */
@media (prefers-contrast:more){
:root :is(.ticket__head,.ticket__foot){background:var(--surface)}
:root :is(.ticket dt,.item__spec,.ticket__usda,.ticket__note,.ticket-fig figcaption,.hero__note,.terms__detail,.ruled span,.hours__desk,.rs p,.recon__note,.acct__head span,.rb__n){color:var(--ink)}
:root .week__track{--seg:var(--ink)}
}