@font-face{font-family:'Archivo';font-style:normal;font-weight:800 900;font-display:swap;src:url(/assets/fonts/archivo-6a3ff37312c8.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-bec57e013e35.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700-3aeacefd78b0.woff2) format('woff2')}@font-face{font-family:'InterVariable';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-a18abb5592ee.woff2) format('woff2')}
:root{
--color-volt:#12E24F;
--color-volt-ink:#03230E;
--color-green-print:#0AA53C;
--color-ink:#0B0B0B;
--color-page-ll:#F2F3F0;
--color-card:#FFFFFF;
--color-line-ll:#E2E3DF;
--color-dim:#6A6E71;
--color-dim-on-ink:#8A9098;
--color-on-ink:#FAFAFA;
--brand-primary:var(--color-volt);
--rule-width:2px;
--radius-none:0;
--radius-pill:9999px;
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.25rem;
--space-6:1.5rem;
--space-8:2rem;
--space-10:2.5rem;
--band:5.5rem;
--gutter:var(--space-6);
--band-tight:4.875rem;
--font-sans:'InterVariable','Inter',system-ui,-apple-system,sans-serif;
--font-display:'Archivo',system-ui,sans-serif;
--font-condensed:'Barlow Condensed',system-ui,sans-serif;
--text-xs:0.75rem;
--text-sm:0.875rem;
--text-base:1rem;
--text-lg:1.125rem;
--text-xl:1.25rem;
--text-2xl:1.5rem;
--text-3xl:1.875rem;
--text-4xl:2.5rem;
--tracking-tight:-0.02em;
--tracking-wider:0.08em;
--tracking-kicker:0.16em;
--leading-display:0.95;
--weight-semibold:600;
--weight-extrabold:800;
--weight-black:900;
--duration-fast:150ms;
--duration-base:200ms;
--ease-standard:cubic-bezier(.25,.1,.25,1);
--press-scale:0.96;
--tap:44px;
--tap-lg:56px;
--container-form:42rem;
}
*{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased;text-wrap:pretty;color:var(--color-ink);background:var(--color-page-ll);font:var(--text-base)/1.5 var(--font-sans)}
header{max-width:var(--container-form);margin:0 auto;padding:var(--space-5) var(--space-5) 0}
header a{color:inherit;text-decoration:none}
main{max-width:var(--container-form);margin:0 auto;padding:var(--space-5)}
h2,h3{text-wrap:balance;font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;letter-spacing:var(--tracking-tight);line-height:var(--leading-display)}
h2{margin:var(--space-4) 0 var(--space-2);font-size:var(--text-3xl)}
h3{margin:var(--space-8) 0 var(--space-3);font-size:var(--text-xl)}
.logo{height:40px}
.wordmark{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.quiet{margin:0 0 var(--space-4);color:var(--color-dim)}
.description{margin:0 0 var(--space-6)}
.fine{margin:var(--space-3) 0 0;color:var(--color-dim);font-size:var(--text-sm);text-align:center}
.hero{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-none);outline:var(--rule-width) solid var(--color-ink);outline-offset:calc(var(--rule-width) * -1)}
.section,.eyebrow{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase}
.section{margin:var(--space-8) 0 var(--space-3);color:var(--color-dim);font-size:var(--text-sm);letter-spacing:var(--tracking-kicker)}
.featured{margin:var(--space-5) 0;padding:var(--space-5);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-none);background:var(--color-card)}
.featured.live{background:var(--color-volt);color:var(--color-volt-ink)}
.featured.live .quiet,.featured.live .fine,.featured.live .eyebrow{color:var(--color-volt-ink);opacity:0.78}
.featured h2{margin:0 0 var(--space-2)}
.featured .quiet{margin:0 0 var(--space-4)}
.eyebrow{margin:0 0 var(--space-2);color:var(--color-green-print);font-size:var(--text-sm);letter-spacing:var(--tracking-kicker)}
.when{margin:0 0 var(--space-4);font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--text-2xl);text-transform:uppercase;letter-spacing:var(--tracking-tight);line-height:var(--leading-display)}
.lead{margin:0 0 var(--space-4);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-base);text-transform:uppercase;letter-spacing:var(--tracking-wider);font-variant-numeric:tabular-nums}
.tally{margin:0 0 var(--space-3);font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);font-variant-numeric:tabular-nums}
form{display:grid;gap:var(--space-3)}
/* Sibling forms own their own gaps, so stacked ones would otherwise touch. */
form+form{margin-top:var(--space-3)}
/* Undoing is the quieter half of a pair: same height for the thumb, less ink. */
.undo{border-width:1px;border-color:var(--color-line-ll);color:var(--color-dim);font-family:var(--font-condensed);font-size:var(--text-sm)}
button,.primary{display:flex;align-items:center;justify-content:center;gap:var(--space-3);width:100%;min-height:var(--tap-lg);padding:var(--space-4) var(--space-5);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-card);color:var(--color-ink);font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--text-base);text-transform:uppercase;letter-spacing:var(--tracking-wider);text-decoration:none;transition:scale var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)}
.primary,button.primary{background:var(--color-volt);color:var(--color-volt-ink);border-color:var(--color-ink)}
.featured.live button.primary{background:var(--color-ink);color:var(--color-on-ink)}
.featured button{justify-content:space-between}
button:active,.primary:active{scale:var(--press-scale)}
button:disabled{opacity:0.5}
.total{font-variant-numeric:tabular-nums}
form[aria-busy=true]::after{content:attr(data-busy-label);display:block;padding-top:var(--space-2);color:var(--color-dim);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider);text-align:center}
.stacked{display:grid;gap:var(--space-1)}
.stacked>span{font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-dim)}
input,textarea,select{width:100%;min-width:0;padding:var(--space-3) var(--space-4);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-none);font:var(--text-lg)/1.4 var(--font-sans);background:var(--color-card);color:var(--color-ink)}
input[type=date],input[type=time]{appearance:none;-webkit-appearance:none;text-align:left;min-height:var(--tap)}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=checkbox],input[type=radio]{width:auto;min-height:auto;padding:0;border-width:1px}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:var(--rule-width) solid var(--color-ink);outline-offset:2px}
fieldset{margin:0 0 var(--space-5);padding:0;border:0}
legend{padding:0 0 var(--space-2);font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider)}
.choice{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);padding:var(--space-3) var(--space-4);border:1px solid var(--color-line-ll);border-radius:var(--radius-none);margin-bottom:var(--space-2);background:var(--color-card)}
.choice:has(input:checked){border-color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}
button,label,summary{cursor:pointer}
button[disabled]{cursor:default}
summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);color:var(--color-dim);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
.confirmed{display:flex;align-items:center;gap:var(--space-2)}
.confirmed .icon{color:var(--color-green-print);width:1.1em;height:1.1em}
.again .icon,.undo .icon{margin-right:6px}
.classes a .icon{grid-column:4;grid-row:1/span 2;justify-self:end;color:var(--color-dim);width:1.25em;height:1.25em}
.icon{width:1em;height:1em;flex:none;stroke-width:1.5;vertical-align:-.125em}
summary .icon{transition:rotate var(--duration-fast) var(--ease-standard)}
details[open]>summary .icon{rotate:180deg}
.refused{margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border:var(--rule-width) solid var(--color-ink);background:var(--color-card);font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wide);font-size:var(--text-sm)}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-2);margin:0 0 var(--space-5)}
.tabs a{display:grid;place-content:center;min-height:var(--tap);padding:var(--space-2);border:var(--rule-width) solid var(--color-ink);background:var(--color-card);color:var(--color-ink);text-decoration:none;font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide);text-align:center}
.tabs [aria-current=page]{background:var(--color-ink);color:var(--color-card)}
.door{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
.door a{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:var(--space-3);row-gap:2px;min-height:var(--tap-lg);padding:var(--space-3) var(--space-4);border:var(--rule-width) solid var(--color-ink);background:var(--color-card);color:var(--color-ink);text-decoration:none;transition:scale var(--duration-fast) var(--ease-standard)}
.door a:active{scale:var(--press-scale)}
.door .title{grid-column:1;font-weight:600}
.door .quiet{grid-column:1;font-size:var(--text-sm)}
.door .count{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;text-align:right;font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wide);font-size:var(--text-sm)}
.more{margin-top:var(--space-4)}
.more-body{padding-top:var(--space-2)}
.classes,.roster{list-style:none;padding:0;margin:var(--space-2) 0 0;display:grid;gap:var(--space-2)}
.days{list-style:none;padding:0;margin:0 0 var(--space-3);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-2)}
.classes a{grid-template-columns:auto 1fr auto auto;align-items:center;display:grid;gap:2px var(--space-4);align-content:center;min-height:var(--tap-lg);padding:var(--space-3) var(--space-4);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-none);background:var(--color-card);color:var(--color-ink);text-decoration:none;transition:scale var(--duration-fast) var(--ease-standard)}
.days a{display:grid;gap:1px;justify-items:center;align-content:center;min-height:var(--tap-lg);padding:var(--space-2) var(--space-1);border:var(--rule-width) solid var(--color-ink);background:var(--color-card);color:var(--color-ink);text-decoration:none;font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wide);transition:scale var(--duration-fast) var(--ease-standard)}
.days li{display:grid}
.days .tab-day{font-size:11px;letter-spacing:var(--tracking-kicker);color:var(--color-ink-muted)}
.days .tab-date{font-size:15px}
.days .tab-left{font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:0;text-transform:none;color:var(--color-ink-muted)}
.days [aria-current=page]{background:var(--color-ink);color:var(--color-card)}
.days [aria-current=page] .tab-day,.days [aria-current=page] .tab-left{color:var(--color-card)}
.days .full{opacity:.45}
.seats{font-family:var(--font-condensed);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-ink-muted);margin:0 0 var(--space-3)}
.days a:active,.classes a:active{scale:var(--press-scale)}
.classes .title{grid-column:2;grid-row:1;align-self:end;font-family:var(--font-display);font-weight:var(--weight-extrabold);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
/* Who this space is, above the classes. A quiet block: it introduces the page,
   it is not the thing you came to do. */
.about{margin:0 0 var(--space-5)}
.blurb{margin:0 0 var(--space-3);text-wrap:pretty}
.directions{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap);color:var(--color-ink);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide);text-decoration:underline;text-underline-offset:3px}
.guidance{margin:0 0 var(--space-2);text-align:left;text-wrap:pretty}
.logo-preview{display:block;max-width:200px;height:auto;margin:0 0 var(--space-4)}
/* The door poster. Read from three feet away, printed on white paper, so it
   is centered, large, and carries nothing that is not an instruction. */
.poster main{max-width:var(--container-form);margin:0 auto;padding:var(--space-6) var(--space-5);text-align:center}
.poster-logo{display:block;max-width:220px;max-height:90px;width:auto;height:auto;margin:0 auto var(--space-4);object-fit:contain}
.poster-eyebrow{margin:0 0 var(--space-2);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--color-dim)}
.poster-title{margin:0 0 var(--space-2);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-4xl);text-transform:uppercase;letter-spacing:var(--tracking-tight);line-height:var(--leading-display);text-wrap:balance}
.poster-price{margin:0 0 var(--space-5);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-xl);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-variant-numeric:tabular-nums}
.poster-code{margin:0 auto var(--space-5);max-width:360px;border:var(--rule-width) solid var(--color-ink)}
.poster-code svg{display:block;width:100%;height:auto}
.poster-steps{display:inline-grid;gap:var(--space-2);margin:0 0 var(--space-4);padding:0 0 0 var(--space-5);text-align:left;font-size:var(--text-lg)}
.poster-fine{margin:0 0 var(--space-5);color:var(--color-dim);text-wrap:pretty}
.poster-address{margin:0;font-family:var(--font-condensed);font-weight:700;font-size:var(--text-base);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-dim)}
.poster-print{max-width:var(--container-form);margin:0 auto var(--space-6)}
@media print{
.poster-print{display:none}
.poster main{padding:0}
}
/* A class row with a second action. The edit link keeps its own grid; the
   poster sits beside it as a square, because it is printed, not edited. */
.classes li.has-actions{display:grid;grid-template-columns:1fr auto;gap:var(--space-2)}
.classes li.has-actions>a:first-child{min-width:0}
.classes a.poster{grid-template-columns:none;column-gap:0;display:grid;place-items:center;align-content:center;gap:2px;width:68px;min-width:68px;min-height:100%;padding:var(--space-2);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-none);background:var(--color-card);color:var(--color-ink)}
.classes a.poster .icon{grid-column:auto;grid-row:auto;justify-self:center;vertical-align:baseline;width:1.5em;height:1.5em}
.classes a.poster span{font-family:var(--font-condensed);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.classes a.poster:active{scale:var(--press-scale)}
/* The apex site. Its own header and footer, because there is no tenant to
   brand it with, and wider than the app: this one is read on a laptop too.
   Ported from the Rails marketing kit: display type at scale, volt on ink or
   on a plate, and full-bleed bands rather than a column of cards. */
.marketing{background:var(--color-card)}
@media (min-width:52rem){.marketing{--gutter:2.5rem}}
.marketing main{max-width:none;padding:0}
header.site,footer.site nav,footer.site .fine,footer.site .wordmark{max-width:var(--container-page)}
header.site{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin:0 auto;padding:var(--space-4) var(--gutter)}
header.site .wordmark,footer.site .wordmark{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-xl);line-height:1;text-transform:uppercase;letter-spacing:var(--tracking-tight);color:var(--color-ink);text-decoration:none}
.wordmark .mark{flex:none;width:26px;height:26px}
/* Volt type is about 1.7:1 on white, so on the light surface the accent
   is a plate. On ink it clears 11:1 and stays type. */
.wordmark .accent{background:var(--color-volt);color:var(--color-volt-ink);padding:0 0.14em}
.wordmark.on-ink{color:var(--color-on-ink)}
.wordmark.on-ink .accent{background:none;color:var(--color-volt);padding:0}
header.site nav{display:none;gap:var(--space-6);margin-left:auto}
@media (min-width:52rem){header.site nav{display:flex}}
header.site nav a,footer.site nav a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--color-ink);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider);text-decoration:none;border-bottom:2px solid transparent}
header.site nav a:hover{border-bottom-color:var(--color-ink)}

/* The pill is the marketing CTA: rounded where the app is square, because the
   apex is the one surface selling rather than working. */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-base);text-transform:uppercase;letter-spacing:var(--tracking-tight);text-decoration:none;transition:transform var(--duration-fast) var(--ease-standard)}
.pill:hover{transform:translateY(-2px)}
.pill:active{scale:var(--press-scale)}
.pill-ink{background:var(--color-ink);color:var(--color-on-ink)}
.pill-volt{background:var(--color-volt);color:var(--color-volt-ink)}
.pill.compact{padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}

/* Display type. One family, three sizes, all of them clamped so the hero is
   loud on a laptop without panning a phone. */
.display{font-family:var(--font-display);font-weight:var(--weight-black);text-transform:uppercase;letter-spacing:-0.03em;line-height:0.9;margin:0}
.display-hero{font-size:clamp(2.75rem,10.1vw,7rem);line-height:0.86}
.display-section{font-size:clamp(2rem,5vw,3.5rem)}
.highlight{background:var(--color-volt);color:var(--color-volt-ink);padding:0 0.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.eyebrow{margin:0 0 var(--space-2);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--color-ink)}
.text-link{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--color-ink);font-weight:var(--weight-semibold);border-bottom:2px solid var(--color-ink);text-decoration:none;padding-bottom:1px}
.text-link:hover{background:var(--color-volt)}

/* Every section is a band: full width, its own surface, one shared column. */
.band{padding:var(--band) var(--gutter)}
.band>*{max-width:var(--container-page);margin-inline:auto}
.band-white{background:var(--color-card)}
.band-page{background:var(--color-page-ll);border-top:var(--rule-width) solid var(--color-ink)}
.band-centered{text-align:center;padding-bottom:6rem}
.band-lede{margin:var(--space-4) 0 0;max-width:34rem;font-size:var(--text-lg)}
.band-centered .band-lede{margin-inline:auto}

.masthead{padding:3rem var(--gutter) 0;max-width:var(--container-page);margin-inline:auto}
.masthead-sub{display:grid;gap:var(--space-5);margin-top:var(--space-6)}
@media (min-width:52rem){.masthead-sub{grid-template-columns:1fr 1fr auto;align-items:start;gap:var(--space-8)}}
.masthead-sub p{margin:0;max-width:26rem;font-size:var(--text-lg)}
.masthead-claim{font-weight:var(--weight-semibold);color:var(--color-ink)}
.masthead-sub .pill{justify-self:start;align-self:center}
.keyline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-10);padding-top:var(--space-3);border-top:3px solid var(--color-ink);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-kicker)}

/* Training footage under a green duotone, with the statement on a solid plate
   at the bottom edge. Type never sits on the image itself. */
.bleed{position:relative;overflow:hidden;height:clamp(320px,52vw,520px);margin-top:var(--space-10)}
.bleed>img{width:100%;height:100%;object-fit:cover;object-position:center 60%;filter:grayscale(1) contrast(1.15) brightness(1.02) blur(5px);scale:1.05}
.bleed-tint{position:absolute;inset:0;background:var(--color-volt);opacity:0.86;mix-blend-mode:multiply;pointer-events:none}
.bleed-plate{position:absolute;inset-inline:0;bottom:0;background:var(--color-volt);padding:var(--space-5) var(--gutter)}
.bleed-plate>*{max-width:var(--container-page);margin-inline:auto}
.bleed-plate h2{max-width:40rem;color:var(--color-volt-ink);font-size:clamp(1.75rem,4.7vw,3.5rem)}
.bleed-plate .pill{margin-top:var(--space-4)}
@media (min-width:52rem){.bleed-plate{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);padding:var(--space-8) var(--gutter)}.bleed-plate>*{margin-inline:0}.bleed-plate .pill{margin-top:0;flex:none}}

/* The money band: one figure at scale on ink. Green carries type only here,
   where it clears 11:1. Never on white. */
.statement{background:var(--color-ink);color:var(--color-on-ink);padding:var(--band-tight) var(--gutter)}
.statement-figure{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(4.5rem,14vw,10rem);line-height:0.8;font-variant-numeric:tabular-nums;color:var(--color-volt)}
.statement p{margin:var(--space-5) 0 0;max-width:30rem;font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:var(--weight-semibold);line-height:1.16}
@media (min-width:52rem){.statement{display:flex;align-items:center;gap:var(--space-10);max-width:var(--container-page);margin-inline:auto}.statement p{margin:0}}
.statement-quote{display:block}
.statement-quote>*{max-width:var(--container-page);margin-inline:auto}
.worked .receipt{border-color:rgba(255,255,255,.25);background:none;margin-top:var(--space-6)}
.worked .receipt dt{color:rgba(255,255,255,.75)}
.worked .receipt dd{color:var(--color-on-ink)}
.worked .fine{text-align:left;margin-top:var(--space-4);font-size:var(--text-sm);font-weight:400;color:var(--color-dim-on-ink)}
.marketing .panel .again{margin-top:var(--space-4)}
.statement-quote .pull{margin-top:var(--space-5);max-width:44rem;border-left:2px solid var(--color-volt);padding-left:var(--space-5);font-size:var(--text-lg);font-weight:400;line-height:1.55}

/* Three product plates. The middle one is the single green block on the page. */
.plates{display:grid;gap:1.625rem;margin-top:var(--space-8)}
@media (min-width:52rem){.plates{grid-template-columns:repeat(3,1fr)}}
.plate{display:flex;flex-direction:column;min-height:560px;padding:var(--space-6) var(--space-5) 0;background:var(--color-page-ll)}
.plate-volt{background:var(--color-volt)}
.plate h3{margin:0;font-size:var(--text-xl)}
.plate p{margin:var(--space-2) 0 var(--space-5);font-size:var(--text-sm);line-height:1.45;color:var(--color-dim)}
.plate-volt p{color:var(--color-volt-ink)}
.plate img{display:block;width:198px;max-width:100%;height:390px;object-fit:contain;object-position:bottom;margin:auto auto 0;outline:var(--rule-width) solid var(--color-ink);outline-offset:calc(var(--rule-width) * -1)}

/* Testimonial: the quote carries it, the portrait sits beside the words. */
.quote{background:var(--color-page-ll);padding:5.125rem var(--gutter)}
@media (min-width:52rem){.quote{display:grid;grid-template-columns:1fr 300px;align-items:center;gap:var(--space-10);max-width:var(--container-page);margin-inline:auto}}
.quote blockquote{margin:0;font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:var(--weight-extrabold);line-height:1.02}
.quote .attribution{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider)}
.quote .attribution img{width:44px;height:44px;border-radius:var(--radius-pill);object-fit:cover;filter:grayscale(1)}
.quote .portrait{display:none}
@media (min-width:52rem){.quote .portrait{display:block;width:100%;height:auto;filter:grayscale(1)}}

/* Pricing is one figure. The whole claim is that there is nothing to add up. */
.zero{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(6rem,18vw,15rem);line-height:0.78;letter-spacing:-0.05em;font-variant-numeric:tabular-nums;color:var(--color-ink)}
.band-centered .zero{font-size:clamp(7rem,23vw,18.75rem);margin-bottom:3rem}
.band-centered .pill{margin-top:var(--space-8)}
.band-centered .fine{margin-top:var(--space-5)}
.split{display:grid;gap:var(--space-8);border-top:var(--rule-width) solid var(--color-ink)}
@media (min-width:52rem){.split{grid-template-columns:1fr 1fr}.split>*{max-width:none}}
.split h2{font-size:var(--text-2xl)}
.split p{margin-top:var(--space-3)}
.included{list-style:none;display:grid;gap:var(--space-3);margin:var(--space-8) auto 0;padding:0}
@media (min-width:52rem){.included{grid-template-columns:1fr 1fr;column-gap:var(--space-10)}}
.included li{display:flex;align-items:baseline;gap:var(--space-3);border-top:1px solid var(--color-line-ll);padding-top:var(--space-3)}
.sign{font-family:var(--font-display);font-weight:var(--weight-black);color:var(--color-ink)}
.story{display:grid;gap:var(--space-4);margin-top:var(--space-5);max-width:52rem;font-size:var(--text-lg);color:var(--color-dim)}
.story p{margin:0}
.gaps{display:grid;gap:var(--space-6);margin:var(--space-8) 0 0;padding:0}
@media (min-width:52rem){.gaps{grid-template-columns:1fr 1fr;column-gap:var(--space-10)}}
.gaps dt{border-top:var(--rule-width) solid var(--color-ink);padding-top:var(--space-3);font-size:var(--text-lg)}
.gaps dd{margin:var(--space-2) 0 0}

/* The comparison table. Three columns, ours in the bold one. */
.cost{width:100%;border-collapse:collapse;margin-top:var(--space-8);text-align:left}
.cost th{padding-bottom:var(--space-3);border-bottom:var(--rule-width) solid var(--color-ink);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-dim)}
.cost th+th,.cost td+td{text-align:right}
.cost td{padding:var(--space-4) 0;border-bottom:1px solid var(--color-line-ll);font-variant-numeric:tabular-nums;color:var(--color-dim)}
.cost td:first-child{color:var(--color-ink);font-variant-numeric:normal}
.cost td.ours{color:var(--color-ink);font-weight:var(--weight-semibold)}
.footnote{text-align:left;margin-top:var(--space-3)}
.statement-quote .after{margin-top:var(--space-5);max-width:44rem;font-size:var(--text-lg);font-weight:400;line-height:1.55}
.statement-quote .fine{text-align:left;margin-top:var(--space-3);font-size:var(--text-sm);font-weight:400;color:var(--color-dim-on-ink)}
.worked .receipt .total{font-weight:var(--weight-semibold);color:var(--color-on-ink)}
.receives{margin:var(--space-5) 0 0;font-size:var(--text-2xl)}
.receives span{color:var(--color-volt);font-variant-numeric:tabular-nums}
/* Two bordered cards, the shape the values grid already uses. */
.cards{display:grid;gap:var(--space-5)}
@media (min-width:52rem){.cards{grid-template-columns:1fr 1fr}}
.cards .panel{margin:0;padding:var(--space-6)}
.cards .panel .quiet{margin:var(--space-3) 0 var(--space-4)}
.nudge{text-align:left;margin-top:var(--space-8)}
/* Privacy and terms: prose in a reading column, numbered by nothing because
   the headings do that work. */
.updated{margin:var(--space-5) 0 0;font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--color-dim)}
.clauses{max-width:48rem}
.clause{margin-bottom:var(--space-10)}
.clause:last-child{margin-bottom:0}
.clause h2{font-size:var(--text-2xl);line-height:1.1}
.clause p{margin:var(--space-4) 0 0;text-wrap:pretty}
.clause ul{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.clause li{position:relative;padding-left:var(--space-5);color:var(--color-dim)}
/* A square, matching the rules everywhere else, rather than a browser disc. */
.clause li::before{content:"";position:absolute;left:0;top:0.55em;width:6px;height:6px;background:var(--color-ink)}
/* Accordion. Native details, no JS, and the plus rotates into a cross. */
.faq{max-width:43.75rem;margin:var(--space-8) auto 0;text-align:left}
.faq details{border:none;border-bottom:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-none);background:none;margin:0;padding:var(--space-3) 0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--tap);cursor:pointer;list-style:none;color:var(--color-ink);font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--text-lg);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .sign{font-size:var(--text-2xl);transition:transform var(--duration-fast) var(--ease-standard)}
.faq details[open] summary .sign{transform:rotate(45deg)}
.faq p{margin:var(--space-3) 0 0;max-width:44rem;text-wrap:pretty}

footer.site{background:var(--color-ink);color:var(--color-on-ink);border:none;margin-top:0;padding:var(--space-8) var(--gutter);display:grid;gap:var(--space-5)}
footer.site .wordmark{color:var(--color-on-ink)}
footer.site nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1) var(--space-4)}
footer.site nav a{color:var(--color-on-ink)}
footer.site nav a:hover{color:var(--color-volt)}
footer.site .fine{margin:0;text-align:left;color:var(--color-dim-on-ink);font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider)}
@media (min-width:52rem){footer.site{grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-8);max-width:var(--container-page);margin-inline:auto}footer.site nav{display:flex;flex-wrap:wrap;gap:var(--space-5)}}
.more-questions{margin:var(--space-6) 0 0}
.more-questions a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--color-ink);font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);text-underline-offset:3px}
.closer{margin:0;padding:var(--band) var(--gutter);border:none;border-top:var(--rule-width) solid var(--color-ink);background:var(--color-volt);color:var(--color-volt-ink);text-align:center}
.closer h2{margin:0 0 var(--space-6);font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(1.75rem,4vw,3rem);text-transform:uppercase;letter-spacing:var(--tracking-tight);line-height:0.95}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4);margin:0 0 var(--space-6)}
.values .panel{margin:0}
.more-questions a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--color-ink);font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wide);text-underline-offset:3px}
.closer{margin:var(--space-8) 0 0;padding:var(--space-6) var(--space-5);border:var(--rule-width) solid var(--color-ink);background:var(--color-volt);color:var(--color-volt-ink);text-align:center}
.closer h2{margin:0 0 var(--space-4)}
.closer .primary{max-width:22rem;margin:0 auto;background:var(--color-ink);color:var(--color-on-ink)}
.flag{display:inline-block;margin-left:var(--space-2);padding:2px var(--space-2);border:1px solid var(--color-ink);background:var(--color-ink);color:var(--color-card);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);vertical-align:middle}
.empty{margin-top:var(--space-4)}
.classes .quiet{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:var(--text-sm)}
.classes .price{grid-column:3;grid-row:1/span 2;align-self:center;justify-self:end;margin:0;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-condensed);font-weight:700}
.panel{margin:var(--space-6) 0;padding:var(--space-5);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-none);background:var(--color-card)}
.panel>h3{margin:0 0 var(--space-1)}
.panel>.quiet{margin:0 0 var(--space-4)}
.panel .roster{margin:0 0 var(--space-5)}
.one-off .when-moved{display:none}
.one-off:has(input[value=moved]:checked) .when-moved{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.cover-preview{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 var(--space-4);border-radius:var(--radius-none);outline:var(--rule-width) solid var(--color-ink);outline-offset:calc(var(--rule-width) * -1)}
.thumb{width:96px;height:auto;aspect-ratio:16/9;object-fit:cover;grid-column:1;grid-row:1/span 2;align-self:center;border-radius:var(--radius-none);outline:1px solid var(--color-ink);outline-offset:-1px}
.thumb-empty{display:grid;place-content:center;padding:var(--space-1);outline:1px dashed var(--color-line-ll);color:var(--color-dim);font-family:var(--font-condensed);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-wide);text-align:center}
input[type=file]{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);padding:var(--space-2) var(--space-3);font:var(--text-base)/1.4 var(--font-sans)}
input[type=file]::file-selector-button{min-height:calc(var(--tap) - var(--space-4));margin-right:var(--space-3);padding:var(--space-2) var(--space-4);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-card);color:var(--color-ink);font-family:var(--font-display);font-weight:var(--weight-extrabold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider);cursor:pointer}
.roster li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-4);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-none);background:var(--color-card)}
.roster .who{display:grid;gap:2px;min-width:0}
.roster .name{font-family:var(--font-display);font-weight:var(--weight-extrabold);text-transform:uppercase;letter-spacing:var(--tracking-tight)}
.receipt{display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-4);margin:var(--space-5) 0;padding:var(--space-4);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-none);background:var(--color-card)}
.receipt dt{color:var(--color-dim);font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);font-size:var(--text-sm)}
.receipt dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-condensed);font-weight:700}
.again{display:flex;align-items:center;justify-content:center;min-height:var(--tap-lg);padding:var(--space-4);border:var(--rule-width) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-card);color:var(--color-ink);font-family:var(--font-display);font-weight:var(--weight-extrabold);text-transform:uppercase;letter-spacing:var(--tracking-wider);text-decoration:none}
.trainer-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin:0 0 var(--space-6);padding-bottom:var(--space-3);border-bottom:var(--rule-width) solid var(--color-ink);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wider)}
.trainer-bar a{color:var(--color-ink);text-decoration:none}
.trainer-bar .who{margin-right:auto;color:var(--color-dim);text-transform:none;letter-spacing:0;font-family:var(--font-sans);font-weight:400}
.trainer-bar form{margin:0}
.trainer-bar button{width:auto;min-height:auto;padding:var(--space-2) var(--space-3);font-size:var(--text-xs);border-width:1px}
.development{margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px dashed var(--color-dim)}
.development p{margin:0 0 var(--space-3);color:var(--color-dim);font-family:var(--font-condensed);font-weight:700;font-size:var(--text-xs);letter-spacing:var(--tracking-kicker);text-align:center;text-transform:uppercase}
.development button{margin-bottom:var(--space-2);font-size:var(--text-sm);border-width:1px}
/* A phone has no room for a 96px tile, a title and a price on one line, so the
   tile gives up the width rather than the title wrapping three times. */
@media (max-width:480px){
.classes a{gap:2px var(--space-3)}
/* The whole row already opens the editor, so on a narrow screen the pencil is
   redundant and its column is worth more to the title. */
.classes li.has-actions>a:first-child .icon{display:none}
/* The caption earns its width on a laptop, not beside a wrapping title on a
   phone, where the printer glyph and a 44px target are enough. */
.classes a.poster{width:var(--tap);min-width:var(--tap);padding:var(--space-1)}
.classes a.poster span{display:none}
.thumb{width:72px}
/* No room for a price column beside a wrapping title: the price goes back
   under the time and the text gets the whole width. */
.classes .price{grid-column:2;grid-row:3;justify-self:start;text-align:left}
.classes .title,.classes .quiet{align-self:auto}
.thumb,.classes a .icon{grid-row:1/span 3}
}
@media (prefers-reduced-motion:reduce){
button,.primary,.days a,.classes a,summary .icon{transition:none}
button:active,.primary:active,.days a:active,.classes a:active{scale:1}
}