/*
 * The short list of things our markup needs that Symmetry has no class for.
 *
 * Everything else on the public site is styled by their own stylesheet. Keep
 * this file small: if a rule here starts redesigning one of their components,
 * the component is wrong, not the theme.
 */

/* Form errors. Their theme styles Shopify's own error markup, which we don't
   emit, so this is the equivalent for ours. */
.form-error {
  display: block;
  margin-top: 6px;
  color: #b3261e;
  font-size: var(--smaller-text-size-2);
  line-height: 1.4;
}

/* A checkbox and its label on one row, aligned at the top so a wrapping
   label doesn't drag the box down with it. The box is sized to the 24px
   minimum target (WCAG 2.2 SC 2.5.8). */
.check-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-weight: 400 !important;
}
.check-option input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
}
.check-option small {
  display: block;
  color: rgb(var(--text-color) / 0.75);
}

/* The background video reveals itself only once the YouTube player answers;
   see src/components/theme/BackgroundVideo.tsx for why. Until then the
   poster underneath is the section. */
.video-section__bg-iframe-video iframe {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.video-section__bg-iframe-video[data-playing="1"] iframe { opacity: 1; }
.video-section__bg-iframe-video[data-playing="1"] + img {
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

/* ── The background videos, as grounds ────────────────────────────────────
   A background video has one job: cover its section the way
   `background-size: cover` covers a box. An iframe cannot do that with
   object-fit, so it has to be sized to cover by hand.

   Their theme sizes it with `height: 100%` and `padding-top: 56.3%` on the
   wrapper, and border-box sizing means whichever of the two is larger wins.
   That is a cover on a section wider than 16:9 and a stretch on any other:
   at 768px the wrapper stayed 600px tall, the iframe took its shape, and
   YouTube — which always fits the clip inside the frame it is given — drew
   the film 768×432 with 84px of black above and below it.

   Sized here off the section box instead, so the frame is always 16:9 and
   always at least as big as the section in both axes. `container-type: size`
   makes the wrapper the thing cqw/cqh measure; the wrapper is already
   `overflow: hidden`, so the overspill is cropped, and centring by transform
   means the crop is even on both sides and the middle of the frame is what
   survives. Wrapped in @supports because everything in the block depends on
   the container units: a browser without them keeps the theme's own sizing
   rather than half of ours. */
@supports (width: 1cqw) {
  .video-section__bg-iframe-video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 0;
    transform: none;
    container-type: size;
  }
  .video-section__bg-iframe-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* The 16:9 frame, scaled to the larger of the two axes it has to cover.
       --bg-video-overscan is how much wider the frame has to be than the
       footage inside it; 1 for a clip that fills its frame. */
    width: max(calc(100cqw * var(--bg-video-overscan, 1)), calc(100cqh * 16 / 9));
    height: max(calc(100cqw * var(--bg-video-overscan, 1) * 9 / 16), 100cqh);
    transform: translate(-50%, -50%);
    border: 0;
  }
}

/* The home hero's clip is 4:3 footage inside a 16:9 upload: YouTube's frame
   carries 160px of black down each side of a 1280-wide frame, so 3/4 of the
   frame is film and 1/4 is bar. Covering the section with the frame would
   therefore still leave black at the left and right edges — which is what the
   section looked like. Overscanning the frame by 4/3 covers the section with
   the film instead. The number belongs to the clip, not to the section: if
   heroVideoId in src/lib/content.ts is replaced with a clip that fills its
   frame, drop this rule. */
#section-hero .video-section__bg-iframe-video { --bg-video-overscan: 1.3334; }

/* Their header's right-hand slot held an account link and a cart. Ours holds
   the one button that matters, at the size their nav links are. */
.logo-area__right .header-apply-link {
  padding: 0.7em 1.4em;
  font-size: var(--button-text-size);
}

/* ───────────────────────────────────────────────────────────────────────────
   Corrections found by measurement. Each one is here because the theme has no
   class for it or because the theme's own rule loses a specificity fight.
   ─────────────────────────────────────────────────────────────────────────── */

/* The theme's `.account-form label { display: block }` is (0,1,1) and beats
   `.check-option` at (0,1,0), so the flex row above never applied: the 20px
   checkbox rendered on top of the first letter of every space label. Loading
   later does not help — specificity is resolved before order. */
.account-form .check-option { display: flex; }

/* Symmetry suppresses focus rings with `.js body:not(.tab-used) *:focus`, and
   restores them from its own JS on the first Tab. We render <html class="js">
   so that rule is permanently armed and nothing ever adds `tab-used`, which
   left the site with no visible focus anywhere — including every field of the
   application form. :focus-visible is the better mechanism anyway: it leaves
   the mouse experience untouched. WCAG 2.2 SC 2.4.7.

   The selector has to match their specificity (0,3,1) to win, which is why it
   is not simply `:focus-visible`. */
.js body:not(.tab-used) *:focus-visible,
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Their gold is 2.75:1 on white, so every inline link on the site failed AA.
   The brand colour is untouched where it is a field — the announcement bar,
   button hovers on dark — and only text links take this darker gold, which is
   4.9:1 and the same colour family. */
:root { --link-color: 143 106 46; }

/* The footer was #746767 on #C5B9B9 — 2.84:1, including its 12px nav. */
:root { --foot-text-aa: #4E4444; }
.section-footer,
.section-footer .rte,
.section-footer a { color: var(--foot-text-aa); }

/* Tap targets under 24×24 (WCAG 2.2 SC 2.5.8). The padding is invisible: it
   expands the hit box without moving anything. */
.section-footer__lower-menu__list a { display: inline-block; padding: 6px 0; }
.social__link { min-width: 24px; min-height: 24px; }
.check-option input[type="checkbox"] { width: 24px; height: 24px; }
.account-form select { min-height: 44px; }

/* Long headings over a narrow measure orphan their last word. Two properties
   fix most of it; both degrade to nothing where unsupported. */
.majortitle, .text-overlay__title, .collapsible-tabs__heading { text-wrap: balance; }
.rte p { text-wrap: pretty; }

/* Their scrim behind hero type starts at 16% black, which is a tint. Measured
   against the actual photographs it left white text at 1.6-1.9:1, worst of
   all on the home page's date and venue line — the single most important
   string on the site, at 15px, above the fold on a phone. This is the theme's
   own radial-gradient mechanism, turned up until the type passes.
   docs/08-DESIGN-SYSTEM.md §3 asks for exactly this. */
:root { --image-overlay-shadow-start: rgb(0 0 0 / 0.62); }

/* Their radial is sized to the text block, so a wide heading runs out past
   its falloff and an 84px H1 on a bright photograph measured 1.8:1. This
   scrims the image instead, centre-weighted so the photograph keeps its
   brightness at the edges where no type sits. Applies to the hero too, which
   on the live site has no scrim at all because they play dark footage behind
   it — we show the poster on a phone, for reduced motion, and whenever the
   embed is blocked, and that frame is bright. */
.image-overlay--bg-full .image-overlay__image::after,
.image-overlay--bg-shadow .image-overlay__image::after,
.image-overlay--bg-full .height__image::after,
.image-overlay--bg-shadow .height__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 80% at 50% 50%,
    rgb(0 0 0 / 0.5) 0%,
    rgb(0 0 0 / 0.42) 55%,
    rgb(0 0 0 / 0.2) 100%
  );
}

/* ───────────────────────────────────────────────────────────────────────────
   Typography: give the heading scale somewhere to go.
   ─────────────────────────────────────────────────────────────────────────── */

/* Symmetry derives every heading from two tokens:
     --font-scale = (larger-text-size − base-text-size) × 0.16
     h1 = larger    h2 = 5×scale + base    h3 = 4×scale + base   … h6 = 1×
   Their shop set larger to 34px, which makes the scale 3.04px and puts h1
   through h3 inside a 6.8px band — all Oswald 600 uppercase, so the levels
   were indistinguishable. At 390px the step was under 2px.

   Raising the one token is how this theme is meant to be tuned, and it is
   what the design system doc asks for: "the dynamic range is the point…
   when the range flattens, the page reads underwhelming no matter how good
   the palette is." 56/36 gives a 1.17 step and a 3.7× range.

   The banner headings are unaffected: those carry their own per-section
   font-size, so the hero stays at their 32/58.8/84. */
:root { --larger-text-size: 56px; --larger-mobile-text-size: 36px; }

/* Oswald at 56px needs less leading than at 34, and uppercase needs less
   still. Their 1.2 is right for a small head and loose for a large one. */
h1, .h1 { line-height: 1.06; }
h2, .h2 { line-height: 1.1; }
h3, .h3 { line-height: 1.15; }

/* The third channel the theme already ships and barely uses: a small tracked
   eyebrow. A kicker above a large head is a hierarchy level that costs no
   size at all. */
.subheading { color: rgb(var(--text-color) / 0.75); }

/* ───────────────────────────────────────────────────────────────────────────
   Long-form: the maker rules are 2,300 words each.
   ─────────────────────────────────────────────────────────────────────────── */

/* Their paragraphs sat 15px apart on a 24px leading — 0.63 of a line, so a
   paragraph break read as weaker than a line wrap — and section heads got
   only twice that. The ratio, not the absolute value, is what made the page
   one slab. This takes it to roughly 4:1. */
.rte p { margin-bottom: 1.15em; }
.section-rich-text .rte h2,
.section-rich-text .rte h1 { margin-top: 2.2em; }
.section-rich-text .rte h3 { margin-top: 1.8em; }

/* A reference page a maker reads twice wants a ruler on the left. `.rte--long`
   is ours, applied by the pages that carry the rules. */
.rte--long, .rte--long p, .rte--long li, .rte--long h1,
.rte--long h2, .rte--long h3, .rte--long ul { text-align: start; }
.rte--long ul { padding-left: 1.2em; }
.rte--long li { margin-bottom: 0.6em; }

/* 720px at 15px is 96 characters a line, about double a comfortable measure.
   Narrowing the container beats enlarging the type, which would be the more
   visible departure. */
/* One reading width, everywhere.

   There were three. The theme ships 720px, this file pinned prose sections to
   620px, and the application head had its own 880px, so a reader moving
   between pages met a different measure on each and the narrow ones read as
   leftovers from an older build. 880px is the one Drew approved on /apply,
   and it is the widest of the three, so nothing gets narrower.

   It is a measure, not a cap on the page: full-bleed sections, the banners,
   the lookbooks, the merchant grid and every table still run edge to edge.
   This only governs blocks that are running text, where a line that crosses
   the whole of a 1440px screen is about 180 characters and genuinely hard to
   track back from. */
:root { --reading-container-width: 880px; }

/* Money reads as a column, not as prose. */
.num, td.num, .price-table td:last-child { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────────────────────────────
   Information display: the shapes the content actually is.
   ─────────────────────────────────────────────────────────────────────────── */

/* The facts block above the maker rules. A definition list, ruled, with the
   label quiet and small and the value carrying the weight. */
.fact-table { margin: 0; }
.fact-table__row {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: 0 1.5rem;
  align-items: baseline;
  padding: 0.85em 0;
  border-top: 1px solid rgb(var(--text-color) / var(--divider-opacity));
  text-align: start;
}
.fact-table__row:last-child {
  border-bottom: 1px solid rgb(var(--text-color) / var(--divider-opacity));
}
.fact-table dt {
  margin: 0;
  font-family: var(--nav-font-family);
  font-weight: var(--nav-font-weight);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
}
.fact-table dd {
  margin: 0;
  font-size: var(--base-text-size);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.fact-table dd strong { font-weight: 700; }
@media (max-width: 600px) {
  .fact-table__row { grid-template-columns: 1fr; gap: 0.3em; padding: 0.75em 0; }
}

/* The price table. The theme already styles th/td; this only sets the widths,
   ranges the money right, and keeps the figures in a column. */
.price-table table { width: 100%; margin: 0; }
.price-table caption {
  text-align: start;
  padding-bottom: 0.6em;
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
}
.price-table th, .price-table td { text-align: start; vertical-align: baseline; }
.price-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.price-table td.num, .price-table th.num {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-table td:nth-child(2) { color: rgb(var(--text-color) / 0.8); }
.price-table__group {
  padding-top: 1.4em !important;
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
  font-weight: 600;
}
/* (the rule that used to hide .price-table's second cell on phones lived
   here; it is replaced by the stacking rule at the end of this file) */

/* Stat tiles: the number carries, the label recedes. This is the cheapest
   place on the site to show the range the heading scale now has. */
.stat__value {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1;
  color: rgb(var(--heading-color));
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 0.5em;
  font-family: var(--nav-font-family);
  font-weight: var(--nav-font-weight);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
}

/* A group label belongs above its group with a rule under it, not floating
   after the row it was meant to introduce. */
.merchant-group__heading {
  margin: 0 0 0.2em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgb(var(--text-color) / var(--divider-opacity));
  text-align: start;
}
.merchant-group + .merchant-group { margin-top: 1.5rem; }

/* The last two undersized targets that are not inline in a sentence. Links
   inside prose are exempt under SC 2.5.8's Inline exception; these are not —
   they sit on their own in a row. */
.copyright a,
.pagination-row a { display: inline-block; padding: 6px 0; }

/* The apply page outside the application window. Their `signup-form` is
   built for the footer's dark column and stretches to it; here it sits in a
   reading-width block on white, so it is held to the width of the sentence
   above it and centred under it. */
.apply-signup { margin-top: 1.6em; }
.apply-signup .signup-form { max-width: 420px; margin-inline: auto; }
.apply-signup .signup-form__email { width: 100%; }

/* ───────────────────────────────────────────────────────────────────────────
   /apply — the prospectus head and the merchant application form
   (src/app/apply/page.tsx, src/app/apply/ApplyForm.tsx). Every class here is
   prefixed `ap-`.

   The theme dresses the fields themselves. What it has no class for is the
   glance strip at the top of the page, the five progress segments, a step
   that is on screen while four others are not, a priced option row, the
   tally those options add up to, and the action bar that sticks to the
   bottom of a phone.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── The head ──────────────────────────────────────────────────────────────
   Short on purpose: the page's job is to get a maker into the form, and the
   reference material now lives under it. */
/* The variable has to be set on the CONTAINER, which is what reads it. Set on
   the header inside it, it does nothing at all. */
/* Kept as the anchor for the shared measure above: if the reading width ever
   moves, this is the block it was tuned against. */
.container--reading-width.ap-head-w { --reading-container-width: 880px; }
.ap-head {
  padding-block: clamp(2.25rem, 6vw, 4rem) 0;
  scroll-margin-top: 96px;
}
.ap-head__eyebrow,
.ap-glance dt,
.ap-steps__n,
.ap-nav__step,
.ap-open__h {
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
}
.ap-head__eyebrow { margin: 0 0 0.6em; }
.ap-head__title { margin: 0; }
.ap-head__lede {
  max-width: 52ch;
  margin: 1em 0 0;
  line-height: 1.65;
}

/* The four figures a maker arrives wanting, answerable without reading.
   docs/08-DESIGN-SYSTEM.md §8. */
.ap-glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin: 2.6rem 0 0;
  border-top: 1px solid rgb(var(--text-color) / var(--divider-opacity));
}
.ap-glance__item {
  padding: 1.1rem 0 1.25rem;
  border-bottom: 1px solid rgb(var(--text-color) / var(--divider-opacity));
}
.ap-glance dt { margin: 0; }
.ap-glance dd {
  margin: 0.45em 0 0;
  /* Not bold. A date and a price are already the only sentence-case thing in
     a cell under a tracked uppercase label, so the label/value contrast is
     doing the work. Bolding them as well made a row of four figures shout in
     unison, which is how the strip read as cramped even where it was not. */
  font-weight: 400;
  font-size: var(--larger-text-size-4, 1.0625rem);
  line-height: 1.4;
  color: rgb(var(--heading-color));
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .ap-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ap-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 2.6rem;
}
.ap-head__actions .btn {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
/* The prospectus link is reference, not the thing the page is for, so it is
   a link. The padding is only there to make the target 24px tall. */
.ap-head__alt {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 6px 0;
  font-family: var(--nav-font-family);
  font-size: var(--nav-text-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .ap-head__actions { flex-direction: column; align-items: stretch; }
  .ap-head__actions .btn { width: 100%; }
  .ap-head__alt { justify-content: center; }
}

/* ── The form card ───────────────────────────────────────────────────────── */
.ap-anchor { display: block; scroll-margin-top: 96px; }
.ap-card {
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
  scroll-margin-top: 96px;
}
.ap-preview,
.ap-closed,
.ap-thanks { max-width: var(--reading-container-width); margin-inline: auto; }
.ap-preview + .ap-card { margin-top: 0; }
.ap-preview {
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
  margin-bottom: 1.4rem;
  padding: 10px 14px;
  border: 1px solid rgb(var(--text-color) / 0.35);
  border-radius: var(--btn-border-radius);
  font-size: var(--smaller-text-size-2);
  line-height: 1.5;
}

/* ── Progress ──────────────────────────────────────────────────────────────
   Five segments across the top of the card: where you are, what is answered,
   what is left. Each is a button, so no step is more than one tap away and
   nothing traps you on the one you are looking at. */
.ap-steps { margin: 0 0 1.75rem; }
.ap-steps__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ap-steps__item { margin: 0; }
.ap-steps__btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 0 4px;
  border: 0;
  background: none;
  color: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ap-steps__bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgb(var(--text-color) / 0.18);
}
.ap-steps__btn[data-state="done"] .ap-steps__bar { background: rgb(var(--heading-color)); }
.ap-steps__btn[data-state="current"] .ap-steps__bar { background: rgb(var(--link-color)); }
.ap-steps__btn[data-state="optional"] .ap-steps__bar {
  background: repeating-linear-gradient(
    90deg,
    rgb(var(--text-color) / 0.32) 0 5px,
    rgb(var(--text-color) / 0) 5px 10px
  );
}
.ap-steps__n { display: block; margin-top: 7px; }
.ap-steps__btn[data-state="current"] .ap-steps__n {
  color: rgb(var(--heading-color));
  font-weight: 600;
}
/* The titles are desktop only; on a phone the step name is in the heading
   below and again in the action bar, and five of them across 390px is a
   column of broken words. Every button carries its full name in aria-label
   either way. */
.ap-steps__title { display: none; }
@media (min-width: 768px) {
  .ap-steps__title {
    display: block;
    margin-top: 2px;
    padding-inline-end: 12px;
    font-size: var(--smaller-text-size-2);
    line-height: 1.3;
    color: rgb(var(--text-color) / 0.75);
  }
  .ap-steps__btn[data-state="current"] .ap-steps__title {
    color: rgb(var(--heading-color));
    font-weight: 600;
  }
}

/* ── One step ──────────────────────────────────────────────────────────────
   The four steps that are not on screen keep every field mounted and keep
   submitting; `hidden` only takes them off the page and out of the
   accessibility tree. The theme has no rule that would beat the user-agent's
   `[hidden]`, but this is the one place where losing that fight would submit
   a form the maker cannot see, so it is stated. */
.ap-step[hidden] { display: none !important; }
.ap-step__head { margin: 0 0 1.4rem; }
.ap-step__title { margin: 0; }
/* Inside the heading, so it is never read apart from the step it qualifies. */
.ap-step__flag {
  display: inline-block;
  margin-inline-start: 0.6em;
  padding: 0.2em 0.7em;
  border: 1px solid rgb(var(--text-color) / 0.35);
  border-radius: 999px;
  vertical-align: 0.18em;
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgb(var(--text-color) / 0.75);
}
.ap-step__blurb {
  max-width: 48ch;
  margin: 0.55em 0 0;
  line-height: 1.55;
  color: rgb(var(--text-color) / 0.85);
}

/* ── The rejection summary ─────────────────────────────────────────────────
   `.errors` is the theme's box; this is the type in it. Each line opens the
   step its field is on and puts focus in the field, which a plain #hash
   cannot do now that only one step is on screen. */
/* The theme's `.errors` box is a neutral grey, which reads as a note. A
   rejection is not a note, so it takes the same red as `.form-error`, at the
   weight a background can carry without hurting the contrast of the text. */
.ap-errors {
  margin-top: 0;
  border-color: rgb(179 38 30 / 0.35);
  border-inline-start: 3px solid #b3261e;
  background: rgb(179 38 30 / 0.06);
  /* The header is sticky, 62px on a phone. A rejected submit puts focus on
     this box, and focus scrolls it into view; where the summary is taller
     than the screen, which at 320px it is as soon as there are four or five
     problems, that scroll aligns its top with the top of the viewport and the
     header lands on the first line. A maker arrived mid-list, with the
     sentence saying what had happened above the fold. */
  scroll-margin-top: 76px;
}
.ap-errors__h { margin: 0; font-weight: 700; color: rgb(var(--heading-color)); }
.ap-errors ul { margin: 0.5em 0 0; padding-inline-start: 1.2em; list-style: disc; }
.ap-errors li { margin-bottom: 0.3em; }
.ap-errors__link {
  display: inline;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
/* In the summary the button is now the whole line, so the underline sits on
   the field name inside it: the line still reads as a way into that field,
   and the message after the colon is not dressed up as a second link. */
.ap-errors ul .ap-errors__link { text-decoration: none; }
.ap-errors__field { text-decoration: underline; }

/* ── A checkbox group ──────────────────────────────────────────────────────
   `fieldset`/`legend` is the grouping a screen reader wants; the legend is
   set to match `.account-form label` so it reads as one. */
.ap-group { margin: 0; padding: 0; border: 0; }
.ap-group__legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4em;
}
/* The day the group is about, under its heading, matching the size caption a
   space carries under its name. */
.ap-group__when {
  margin: -6px 0 8px;
  color: rgb(var(--text-color) / 0.75);
  font-size: var(--smaller-text-size-2);
  line-height: 1.45;
}

/* A priced option. This is where the money is and where makers get confused,
   so the price is its own column at the size of a heading, the whole row is
   the target, and a checked row says out loud what it will be treated as.
   `.account-form label` is (0,1,1), so these have to be (0,2,0) to land. */
.account-form .ap-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 12px;
  align-items: start;
  min-height: 56px;
  margin: 0 0 8px;
  padding: 13px 14px;
  border: 1px solid var(--input-border-color);
  border-radius: var(--btn-border-radius);
  font-weight: 400;
  cursor: pointer;
}
.account-form .ap-option:hover { border-color: var(--input-border-color-hover); }
/* A one-line option centres; a two-line one does not.
   `align-items: start` is right when there is a size or a price note under the
   name, because the checkbox should line up with the name rather than float in
   the middle of both lines. With no note it left the label sitting high in a
   56px box with the space all underneath. */
.account-form .ap-option:not(:has(.ap-option__note)) { align-items: center; }

.account-form .ap-option:has(:checked) {
  border-color: rgb(var(--heading-color));
  box-shadow: inset 0 0 0 1px rgb(var(--heading-color));
}
.ap-option input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; }
.ap-form input[type="checkbox"] { accent-color: rgb(var(--heading-color)); }
/* The theme sizes text inputs and textareas to the column and leaves selects
   at their content width, which in a column of full-width fields reads as a
   field that failed to load. */
.ap-form select { box-sizing: border-box; width: 100%; }
/* iOS Safari zooms the whole page in on any control it focuses whose text is
   under 16px, and it does not zoom back out: the maker is left on a page
   wider than the screen, scrolling sideways to read a form.
   Under 768px the theme sets 16px on input, select and textarea and the trap
   is shut. Above it nothing names a select at all, so it fell to the user
   agent's 13.33px, which is an iPad in either orientation and a phone held
   sideways: six of this form's controls, including the category a maker must
   answer. Held to the widths and pointers where a touch keyboard exists, so
   the desktop select is exactly as it was. */
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse) {
  .account-form .ap-form select { font-size: 16px; }
}
.ap-option__body { min-width: 0; }
.ap-option__name { display: block; font-weight: 600; color: rgb(var(--heading-color)); }
.ap-option__note {
  display: block;
  margin-top: 3px;
  color: rgb(var(--text-color) / 0.75);
  font-size: var(--smaller-text-size-2);
  line-height: 1.45;
}
.ap-option__price {
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
  color: rgb(var(--heading-color));
  font-variant-numeric: tabular-nums;
}
.ap-option__flag,
.ap-option__rank {
  display: inline-block;
  margin-inline-start: 0.6em;
  padding: 0.1em 0.6em;
  border: 1px solid rgb(var(--text-color) / 0.35);
  border-radius: 999px;
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-4);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--text-color) / 0.75);
}
/* The first box checked down the list is the one the acceptance books, so it
   is named rather than left to be inferred from the order. */
.ap-option__rank {
  border-color: rgb(var(--heading-color));
  background: rgb(var(--heading-color));
  color: rgb(var(--bg-color, 255 255 255));
}
.ap-option__rank--alt {
  border-color: rgb(var(--text-color) / 0.35);
  background: none;
  color: rgb(var(--text-color) / 0.75);
}

/* ── The tally ─────────────────────────────────────────────────────────────
   What the boxes above add up to, in the same breath as the choice. The
   running figure is repeated in the action bar, so it is on screen from
   every step once anything is picked. */
.ap-tally {
  padding: 14px 16px;
  border-radius: var(--btn-border-radius);
  background: rgb(var(--text-color) / 0.05);
}
.ap-tally__line {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin: 0 0 0.4em;
}
.ap-tally__line .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-tally__total {
  margin-top: 0.6em;
  padding-top: 0.55em;
  border-top: 1px solid rgb(var(--text-color) / var(--divider-opacity));
  font-size: 1.0625rem;
  font-weight: 700;
  color: rgb(var(--heading-color));
}
.ap-tally__empty,
.ap-tally__alt,
.ap-tally__note {
  margin: 0 0 0.4em;
  color: rgb(var(--text-color) / 0.75);
  font-size: var(--smaller-text-size-2);
  line-height: 1.5;
}
.ap-tally__empty, .ap-tally__note { margin: 0; }
.ap-tally__note { margin-top: 0.7em; }

/* The character count sits under its textarea, not a field away from it. */
.account-form .ap-count-row { margin-top: -14px; margin-bottom: 6px; text-align: end; }
.ap-count {
  font-size: var(--smaller-text-size-1);
  color: rgb(var(--text-color) / 0.7);
  font-variant-numeric: tabular-nums;
}

.ap-lede { color: rgb(var(--text-color) / 0.85); }
/* The agreement, on its own row under the box that accepts it. It is out of
   the label because inside it, at 390px, the link covered 76% of the label
   and a maker reaching for the words to tick the box opened the agreement
   instead. Indented to the label's text, so the two rows read as one thing. */
.ap-agree__read { margin: 4px 0 0; padding-inline-start: 34px; }
.ap-agree__read a {
  color: rgb(var(--link-color));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.ap-submit__note { margin: 0; color: rgb(var(--text-color) / 0.8); font-size: var(--smaller-text-size-2); }

/* What is still unanswered, on the last step. Nothing here blocks a submit:
   the server is the authority, and this only saves a maker one rejection. */
.ap-open {
  padding: 12px 14px;
  border: 1px dashed rgb(var(--text-color) / 0.35);
  border-radius: var(--btn-border-radius);
}
.ap-open__h { margin: 0 0 0.4em; }
.ap-open ul { margin: 0; padding-inline-start: 1.2em; list-style: disc; }
.ap-open li { margin-bottom: 0.2em; }

/* ── The action bar ────────────────────────────────────────────────────────
   Where you are, what you have picked, and the next move. It sticks to the
   bottom of the viewport while the step above it is longer than the screen,
   which on a phone is most of them, and settles at the foot of the card when
   it is not. */
.ap-nav {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 1.75rem;
  padding: 12px 0 max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(var(--text-color) / var(--divider-opacity));
  background: rgb(var(--bg-color, 255 255 255));
  /* No drop shadow. A negative-spread shadow wraps the corners, so it drew a
     faint vertical edge down each side of the bar and left a line running
     down the page. The rule above it is the separation; the shadow was only
     ever restating it. */
}
.ap-nav__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3em 1em;
  margin: 0 0 10px;
}
.ap-nav__total {
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--heading-color));
}
.ap-nav__total .num {
  margin-inline-start: 0.4em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ap-nav__btns { display: flex; gap: 10px; }
.ap-nav .btn {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding-inline: 20px;
}
.ap-nav__back { flex: 0 0 auto; }
.ap-nav__next { flex: 1 1 auto; }
/* "Next: Where you want to be" does not fit beside Back on a small phone. */
@media (max-width: 479.98px) {
  .ap-nav__hint { display: none; }
}
/* A full-bleed dark bar is the right weight for a thumb and too much for a
   620px column, so on a wide screen the buttons take the room they need and
   sit at the two ends of the bar. */
@media (min-width: 768px) {
  .ap-nav__btns { justify-content: flex-end; }
  .ap-nav__back { margin-inline-end: auto; }
  .ap-nav__next { flex: 0 0 auto; min-width: 220px; }
}

/* ── On a phone ────────────────────────────────────────────────────────────
   Applications open with most makers on a phone, so this is where the form is
   tuned for one: a 44px target on everything a thumb has to hit, a progress
   row that uses the whole width, and a picture that leaves room for the form
   around it.

   The query is width OR a coarse pointer up to 1024px, because a phone turned
   sideways is 780px wide and an iPad is 768 or 1024, and every one of them is
   a thumb. Nothing in here reaches a desktop.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px), (max-width: 1024px) and (pointer: coarse) {
  /* Four steps, four segments. The row is declared as five columns, from the
     Paperwork step that came out, so a fifth of the width sat empty at the
     right and every bar was a fifth narrower than the space it had. Auto
     columns take the count from the list, so it stays right whatever the
     step count becomes. */
  .ap-steps__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  /* Every line of the rejection summary, and of "still open", is a whole tap
     row. The field name on its own is what a thumb had to find: "City" was
     28px by 32px, inside a sentence wrapping to three lines. */
  .ap-errors ul .ap-errors__link,
  .ap-open ul .ap-errors__link {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 0;
    text-align: start;
  }

  /* Try again, on a photograph that did not go up. 56px by 28px, in the
     middle of a sentence, and the one control a maker wants at the moment
     the form has just failed them. */
  .ap-photos__err .ap-errors__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
  }

  /* Tick, and read: two rows, each a target of its own. */
  .account-form .ap-form .ap-agree { min-height: 44px; padding-block: 3px; }
  .ap-agree__read a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The one thing in the head that is a link rather than a button. */
  .ap-head__alt { min-height: 44px; }

  /* 96px of clearance is the desktop header, which is 103px tall. A phone's
     is 62, so every jump to the form and every step change was leaving a
     third of a field's worth of empty page under the header. */
  .ap-anchor, .ap-card { scroll-margin-top: 72px; }

  /* Back and Submit ten pixels apart is a wrong tap waiting to happen. */
  .ap-nav__btns { gap: 14px; }
}

/* Landscape, and any short screen. The action bar is 104px tall, which is a
   quarter of a phone turned sideways; the step number is already in the
   progress row above and the total is on the step it belongs to, so on a
   screen this short the bar is the buttons and nothing else. */
@media (max-height: 520px) and (max-width: 1024px) {
  .ap-nav { padding-top: 8px; }
  .ap-nav__meta { display: none; }
}

/* ── The prospectus ────────────────────────────────────────────────────────
   Prices, dates, rules and the FAQ, under the form rather than in front of
   it, as one stack of disclosures. The rule is the seam between the two
   jobs the page does. */
.ap-details {
  margin-top: clamp(2rem, 7vw, 3.5rem);
  border-top: 1px solid rgb(var(--text-color) / var(--divider-opacity));
  scroll-margin-top: 80px;
}

/* ── The timetable ────────────────────────────────────────────────────────
   docs/08-DESIGN-SYSTEM.md §8: dated or sequenced things as a ruled list
   with the time in its own column, so the eye runs down the times rather
   than through the sentences.

   It was borrowing `.price-table`, which is a different shape: three
   columns, and a mobile rule that drops the middle one. Here the second
   cell is the whole row, so the schedule rendered as a bare column of times
   on any phone. Its own class, and its own stacking. */
.timetable table { width: 100%; margin: 0; }
.timetable caption {
  text-align: start;
  padding-bottom: 0.6em;
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
}
.timetable th, .timetable td { text-align: start; vertical-align: baseline; }
.timetable th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
  width: 1%;
  padding-right: 1.4em;
}
.timetable th.num { text-align: end; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  /* Stack rather than hide. The time becomes a small label over its own
     line and the description keeps the full width. */
  .timetable th[scope="row"],
  .timetable td { display: block; width: auto; padding-right: 0; }
  .timetable th[scope="row"],
  .timetable th.num {
    text-align: start;
    padding-bottom: 0.15em;
    border-bottom: 0;
  }
  .timetable td { padding-top: 0; }
}

/* The pricing tables, on a phone. This used to be
     .price-table td:nth-child(2) { display: none }
   which threw away "what it suits" — the column that tells a maker the
   difference between a 3ft x 6in and a 3ft x 8in space. That is the column
   the decision turns on, and a phone is where most of these are read. It
   stacks under the name now instead of disappearing. */
@media (max-width: 600px) {
  .price-table td:nth-child(2) {
    display: block;
    font-size: var(--smaller-text-size-1);
    line-height: 1.45;
    padding-top: 0.2em;
  }
  .price-table th[scope="row"] { white-space: normal; }
}

/* ── The 404 ──────────────────────────────────────────────────────────────
   Next's built-in not-found page renders near-black on black once the
   theme's colours are in scope, which is unreadable and offers nothing to
   do. This is the same type and palette as the rest of the site. It does
   not use SiteShell, because that needs a Show and the database being
   unreachable is one of the ways people end up here. */
.nf { padding-block: clamp(3rem, 12vh, 7rem); }
.nf__code {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: clamp(3.5rem, 12vw, 7rem);
  line-height: 1;
  margin: 0 0 0.1em;
  /* The brand gold, not grey. It is the one warm mark on an error page. */
  color: rgb(var(--link-color));
}
.nf__title {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  text-transform: var(--heading-text-transform);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: rgb(var(--heading-color));
}
.nf__body { max-width: 46ch; margin: 0 0 1.8em; color: rgb(var(--text-color)); }
.nf__links { display: flex; flex-wrap: wrap; gap: 0.4em 1.6em; margin: 0; padding: 0; list-style: none; }
.nf__links a {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--nav-font-family);
  font-size: var(--nav-text-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Table rules ──────────────────────────────────────────────────────────
   Symmetry gives `th` a 3px bottom border and `td` a 1px one. In a table
   with a column of row headers that draws a heavy rule under the left
   column and a hairline under the rest of the same row: one row, two
   weights, breaking at the column edge. Right for a header row, wrong for
   a row header. */
.price-table th[scope="row"],
.timetable th[scope="row"] { border-bottom-width: 1px; }

/* ── The Apply button, on a phone ─────────────────────────────────────────
   The header's right column has no gutter of its own, so the button sat
   flush against the edge of the screen. */
@media (max-width: 767.98px) {
  .logo-area__right { padding-right: 14px; }
}

/* ── The header, settling ─────────────────────────────────────────────────
   The home page's header is transparent over the hero and solid once you
   scroll, which moves the logo 42px. Symmetry swaps the class with nothing
   to carry the change, so it lands as a jump. The transition makes it read
   as the header settling rather than the logo bobbling. */
.pageheader .logo-area,
.pageheader .logo-area__middle,
.pageheader .logo img {
  transition: padding 220ms ease, margin 220ms ease, transform 220ms ease, width 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .pageheader .logo-area,
  .pageheader .logo-area__middle,
  .pageheader .logo img { transition: none; }
}

/* The run-of-show table: a real header row, so `th` in the head keeps the
   heavier rule that separates it from the body while the row headers in the
   body stay hairline. */
.timetable--run thead th {
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
  font-weight: 600;
  border-bottom-width: 2px;
  white-space: nowrap;
}
.timetable--run tbody th[scope="row"] { white-space: normal; width: auto; }
.timetable--run td.num { text-align: start; white-space: nowrap; }
@media (max-width: 600px) {
  /* The head is dead weight once the rows stack, and each row becomes a
     small block: day, hours, what is on. */
  .timetable--run thead { display: none; }
  .timetable--run tbody th[scope="row"] { font-size: var(--larger-mobile-text-size, 1.25rem); }
  .timetable--run tbody tr { display: block; padding-block: 0.4em; }
  .timetable--run tbody th[scope="row"],
  .timetable--run tbody td { display: block; border-bottom: 0; padding-left: 0; }
  .timetable--run tbody tr + tr { border-top: 1px solid rgb(var(--text-color) / var(--divider-opacity)); }
}

/* ── The "Stay Hooked" pop-up ─────────────────────────────────────────────
   Their section, their photograph, their copy. Two things the vendored
   sheets cannot supply on their own:

   1. modal.css ships with unresolved custom media queries (`@media(--sm-up)`)
      that Shopify's build was supposed to compile away, so the rules inside
      them are dead here. The window sizing is restated below.
   2. Their inline `data-shopify` <style> block carried the per-section
      colours and the white veil over the photograph. That block is not in
      the theme files, so it is here. */
.popup-section .modal__window {
  --bg-color: 255 255 255;
  --heading-color: 7 7 7;
  --text-color: 7 7 7;
  --link-color: 7 7 7;
  background: #fff;
  color: #070707;
  width: 100%;
  min-width: 0;
  max-width: min(640px, calc(100vw - var(--gutter, 20px) * 2));
}
@media (min-width: 768px) { .popup-section .modal__window { width: 640px; } }
/* The photograph reads as a ground, not a picture: 50% white over it, exactly
   as their inline style sets it. */
.popup-section__background-image::after {
  content: "";
  background-color: #fff;
  opacity: 0.5;
}
.popup-section .modal__content { position: relative; }
.popup-section .section__block { position: relative; }
.popup-section .modal__close-btn {
  /* Theirs sits on the photograph, so it needs its own ground to stay legible
     whatever is behind it. */
  background: #fff;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-section .form-width { max-width: 420px; }

/* The account link, beside the Apply button. Their header styles the class
   but the theme's own sheet only carries one rule for it, so the spacing and
   the phone behaviour are here. */
.logo-area__right__inner { display: flex; align-items: center; gap: 16px; }
.header-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--nav-font-family);
  font-size: var(--nav-text-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}
/* Downplayed to the mark alone, at every width. Drew, 6 Sep 2026.
   ACCOUNT set in caps beside APPLY read as a second call to action, and it is
   not one: almost everyone arriving at this site has never applied, and the
   handful who have are looking for a way back in rather than being sold one.
   The word is still on the link for a screen reader, through aria-label. */
.header-account-link { color: rgb(var(--text-color) / 0.55); }
.header-account-link:hover { color: rgb(var(--text-color)); }
.header-account-link__text { position: absolute !important; overflow: hidden;
  clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; }
.header-account-link__icon { display: inline-flex; }
.header-account-link__icon .icon { width: 21px; height: 21px; }
@media (max-width: 767.98px) {
  .logo-area__right__inner { gap: 10px; }
}

/* The pop-up photograph is a ground: it has to cover its box, not sit in it. */
.popup-section__background-image img { width: 100%; height: 100%; object-fit: cover; }

/* The launch-preview bar. Deliberately unlike anything else on the site: it
   is a scaffold, not a design element, and it should read as one. */
.preview-bar {
  position: relative;
  z-index: 9000;
  padding: 10px 20px;
  background: #171717;
  color: #fff;
  font-family: var(--body-font-family);
  font-size: var(--smaller-text-size-1);
  line-height: 1.5;
  text-align: center;
}
.preview-bar strong { font-weight: 700; }
.preview-bar a { color: #E7C88A; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   The photograph on the application. Added with the upload path; everything
   here is prefixed `ap-` and scoped to the apply page and its confirmation
   screen.

   It is one optional image. The controls are sized for a thumb before
   anything else, because a phone is where the photographs are: both pickers
   are 48px tall, the native file inputs are visually hidden so the labels can
   be real targets, and the focus ring is drawn on the label from the input's
   own :focus-visible so a keyboard never loses its place.
   ══════════════════════════════════════════════════════════════════════════ */

.ap-photos { margin-top: 6px; }
.ap-photos--off .note a { text-decoration: underline; }

/* The thumbnail. One column on a phone, a small grid if the cap is ever
   raised past one. */
.ap-photos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.ap-photos__item { margin: 0; }
.ap-photos__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--input-border-color);
  border-radius: var(--btn-border-radius);
  background: rgb(var(--text-color) / 0.05);
}
.ap-photos__item[data-state="uploading"] .ap-photos__frame { opacity: 0.6; }
.ap-photos__item[data-state="error"] .ap-photos__frame { border-color: #b3261e; }
.ap-photos__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ap-photos__lead {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: rgb(var(--heading-color));
  color: rgb(var(--bg-color, 255 255 255));
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Remove. A 44px target sitting on the image, not a link under it. */
.ap-photos__x {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.ap-photos__x:hover { background: rgb(0 0 0 / 0.75); }

/* Real bytes on the wire, not a spinner that means nothing. */
.ap-photos__bar {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--text-color) / 0.12);
  appearance: none;
}
.ap-photos__bar::-webkit-progress-bar { background: rgb(var(--text-color) / 0.12); border-radius: 999px; }
.ap-photos__bar::-webkit-progress-value { background: rgb(var(--heading-color)); border-radius: 999px; }
.ap-photos__bar::-moz-progress-bar { background: rgb(var(--heading-color)); border-radius: 999px; }

.ap-photos__err {
  margin: 8px 0 0;
  color: #b3261e;
  font-size: var(--smaller-text-size-2);
  line-height: 1.45;
}
.ap-photos__lead-btn {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--smaller-text-size-2);
  text-decoration: underline;
  cursor: pointer;
}

/* The two ways in. "Choose" has no `capture`, so a phone offers the roll and
   the camera; "Take a photo" is the one that goes straight to the lens. */
.ap-photos__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ap-photos__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.account-form .ap-photos__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid rgb(var(--heading-color));
  border-radius: var(--btn-border-radius);
  background: rgb(var(--heading-color));
  color: rgb(var(--bg-color, 255 255 255));
  font-family: var(--nav-font-family);
  font-size: var(--nav-text-size);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.account-form .ap-photos__btn--alt {
  background: none;
  color: rgb(var(--heading-color));
}
.account-form .ap-photos__btn[data-disabled] { opacity: 0.5; cursor: default; }
/* The input is off-screen, so its focus ring has to be drawn on the label. */
.ap-photos__input:focus-visible + .ap-photos__btn {
  outline: 2px solid rgb(var(--heading-color));
  outline-offset: 3px;
}
.ap-photos__count {
  color: rgb(var(--text-color) / 0.75);
  font-size: var(--smaller-text-size-2);
}
/* Announced politely, and it holds its line so the layout does not jump
   between "" and a sentence. */
.ap-photos__status { display: block; min-height: 1.4em; margin-top: 10px; }

/* On a phone the thumbnail is held to something a maker can see past. A
   column of 148px minimum across a 320px screen is one 288px square: an
   optional field taking half the phone, with the rest of the step below it
   and the remove button 288px from where the eye is. Same query as the rest
   of the phone rules further up this file, and it has to sit here rather than
   with them, because it is overriding the grid two rules above. */
@media (max-width: 767.98px), (max-width: 1024px) and (pointer: coarse) {
  .ap-photos__grid { grid-template-columns: repeat(auto-fill, minmax(0, 168px)); }
}

/* ───────────────────────────────────────────────────────────────────────────
   The maker rules pages (/makers/indoor, /makers/outdoor).
   Added September 2026. `mk-` is ours.

   Both pages used to end in one column of about eight thousand pixels of
   their original prose. The words are unchanged; they are now cut into named
   sections rendered by the theme's own accordion, with the rules that carry
   money lifted out into a list above them (docs/08-DESIGN-SYSTEM.md §8: use
   the shape the content is).

   The accordion itself needs nothing new: `.collapsible-tabs` and
   `.disclosure` are the theme's, they are a real <details>/<summary>, and the
   focus ring comes from the :focus-visible rule near the top of this file.
   ─────────────────────────────────────────────────────────────────────────── */

/* An open section can be a thousand words, so a link to a later one lands
   under the sticky header without this. The rule that does it is now the
   shared one in the accordion block below, measured against the header at
   each width: this page's 96px was one number for a header that is 62px on a
   phone and 103px from 768px up, so on a desktop a linked section landed
   under the masthead. */

/* Their summary lines are the page's table of contents, so they read as
   labels rather than as prose: Oswald, uppercase, and tight enough that ten
   of them fit on one screen. 20px vertical padding on a 1.4 line box is a
   56px target, well over WCAG 2.2 SC 2.5.8. */
/* The type here moved to the base rule, since every FAQ wears it now. What is
   left is local: these summaries sit in a narrower column than the others. */
.mk-sections .collapsible-tabs__tab .disclosure__title { padding-right: 40px; }
/* The theme draws its +/− at the right edge of the summary; keep the plus
   sign clear of the last word on a narrow screen. */
/* The answer colour is set once, on the accordion, for all four sets. The
   0.9 that used to sit here never applied: it carries the same specificity as
   the accordion's own rule and lost on document order. */
.mk-sections .disclosure__content > .rte--long > *:first-child { margin-top: 0; }

/* The rules that carry money. Not a card and not a callout box: a ruled list
   under a label, in the same idiom as the fact table above it, so it reads as
   part of the same instrument rather than as an alert. */
.mk-rules {
  margin: 0 0 10px;
  padding: 1.4em 0 0.2em;
  border-top: 2px solid rgb(var(--heading-color));
  text-align: start;
}
.mk-rules__title {
  margin: 0 0 0.2em;
  font-family: var(--nav-font-family);
  font-weight: var(--nav-font-weight);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
}
.mk-rules__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mk-rules__list li {
  margin: 0;
  /* Body size, not a step under it. These are the rules a maker is actually
     held to, and they were set smaller than the paragraphs around them, which
     is backwards: the small print here is the part that costs money. The
     leading opens with it, since two of them now run to three lines. */
  padding: 0.85em 0 0.85em 1.6em;
  border-bottom: 1px solid rgb(var(--text-color) / var(--divider-opacity));
  font-size: var(--base-text-size);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  position: relative;
}
/* A rule you are held to, marked once at the left. The glyph is decorative,
   so it is drawn rather than typed and a screen reader never says "bullet". */
/* A square, not a diamond. Drew, 6 Sep 2026: no diamond icon anywhere. It was
   a 7px square rotated 45deg; the rotation is what made it a diamond, so the
   rotation is what goes. Filled and in the gold, which is the mark the rest of
   the brand uses to point at things. */
.mk-rules__list li::before {
  content: "";
  position: absolute;
  top: 1.45em;
  left: 0.2em;
  width: 6px;
  height: 6px;
  background: rgb(var(--link-color));
}
.mk-rules__note {
  margin: 0.9em 0 0;
  font-size: var(--smaller-text-size-2);
  line-height: 1.5;
  color: rgb(var(--text-color) / 0.75);
}

/* A fact table or a timetable inside a section is followed by prose, and its
   last rule would otherwise sit right on top of the next sentence. */
.mk-sections .disclosure__content .fact-table,
.mk-sections .disclosure__content .timetable { margin-bottom: 1.4em; }

/* The prose inside a section is reference, read once and returned to, so it
   keeps the long-form ruler and never centres. */
.mk-sections .rte--long p:last-child,
.mk-sections .rte--long ul:last-child { margin-bottom: 0; }

/* The maker sections used to shrink here: 12px type and 16px of padding,
   which made a 49px row carrying a label smaller than the paragraph beside
   it. On the one screen where a control has to be found by thumb it was the
   smallest thing on the page, and it read as a caption rather than as a
   button. The rows keep the size they have everywhere else now. Twelve of
   them cost about 280px of scroll, which is what a target you can hit costs. */
@media (max-width: 600px) {
  .mk-rules { padding-top: 1.1em; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * Legal pages: /agreement, /terms, /privacy.  Prefix `lg-`.
 *
 * A contract is a numbered tree, and the theme has no shape for one. This is
 * the smallest set of rules that makes it readable: a hanging clause number
 * that does not push the text off a phone, a contents list that looks like a
 * contents list, headings that clear the sticky header when you jump to them,
 * and a reading-width measure the theme's own `container--reading-width`
 * already provides.
 *
 * Nothing here restyles a theme component. Colours are the theme's tokens.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Anchor targets sit under the header when you jump to them. */
.lg-legal :target,
.lg-section,
.lg-clause { scroll-margin-top: 90px; }

/* ── contents ── */
.lg-contents {
  margin: 0 0 40px;
  padding: 20px 22px 24px;
  border: 1px solid rgb(var(--text-color) / 0.2);
  border-radius: var(--btn-border-radius, 0);
}
.lg-contents__title {
  margin: 0 0 12px;
  font-family: var(--nav-font-family);
  font-size: var(--nav-text-size);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lg-contents ol { margin: 0; padding: 0; list-style: none; }
.lg-contents__parts > li { margin-bottom: 16px; }
.lg-contents__parts > li > a {
  font-weight: 600;
  text-decoration: none;
}
.lg-contents__parts > li > a:hover { text-decoration: underline; }
.lg-contents__sections { margin-top: 6px !important; }
.lg-contents__sections li { margin: 0 0 4px; line-height: 1.4; }
.lg-contents__sections a {
  color: rgb(var(--text-color));
  text-decoration: none;
}
.lg-contents__sections a:hover { text-decoration: underline; }
.lg-contents__sections--flat li { margin-bottom: 6px; }
.lg-contents a:focus-visible {
  outline: 2px solid rgb(var(--heading-color));
  outline-offset: 2px;
}

/* The clause or section number. Tabular so 1.1 and 12.3 line up. */
.lg-num {
  display: inline-block;
  min-width: 2.4em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── parts and sections ── */
.lg-part__title { margin: 0 0 8px; }
.lg-part__scope {
  margin: 0 0 28px;
  color: rgb(var(--text-color) / 0.8);
  font-style: italic;
}
.lg-section { margin: 0 0 32px; }
.lg-section__title { margin: 0 0 12px; }
/* The number sits in the display face at heading size, where a 2.4em well is
   a hole. It only has to clear "A10", so it gets its own measure. */
.lg-section__title .lg-num { min-width: 1.5em; margin-right: 0.15em; }
.lg-prose .lg-section__title { margin-top: 32px; }

/* ── clauses ──
 * On a phone the number runs inline with the text, because a hanging indent
 * costs a fifth of a 390px line. From 700px up it hangs in the margin, which
 * is what makes a long contract scannable. */
.lg-clause { margin: 0 0 14px; }
.lg-clause__body { margin: 0; }
.lg-clause__cont { margin: 8px 0 0; }
.lg-clause__n {
  margin-right: 0.5em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.lg-clause__list {
  margin: 8px 0 0;
  padding-left: 1.3em;
  list-style: disc;
}
.lg-clause__list li { margin-bottom: 4px; }

@media (min-width: 700px) {
  .lg-clause { position: relative; padding-left: 3.6em; }
  .lg-clause__n {
    position: absolute;
    left: 0;
    top: 0;
    width: 3.2em;
    margin: 0;
  }
}

/* ── back to contents ── */
.lg-backtop {
  margin: 24px 0 0;
  font-size: var(--smaller-text-size-2);
}
.lg-backtop a { color: rgb(var(--text-color) / 0.85); }

/* Figures in a column have to be tabular, or a stack of prices does not line
   up on the decimal and money reads weaker than it is. Forced wherever a
   number sits in a column rather than in a sentence. */
.price-table, .timetable, .fact-table, .ap-glance, .ap-tally,
.stat__value, .num, td.num, th.num {
  font-variant-numeric: tabular-nums lining;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* The form card matches the head above it. It was 720px under an 880px head,
   which put a visible step in the left edge of the page halfway down. */
.ap-card { max-width: 880px; }

/* Room inside the field. The theme's own padding is tuned for its narrower
   inputs; at this width a value sat hard against the border. */
.account-form .ap-form input[type="text"],
.account-form .ap-form input[type="email"],
.account-form .ap-form input[type="tel"],
.account-form .ap-form input[type="url"],
.account-form .ap-form input[type="number"],
.account-form .ap-form select,
.account-form .ap-form textarea {
  padding: 0.95em 1em;
  line-height: 1.5;
}
.account-form .ap-form textarea { padding-block: 0.9em; }

/* ── The accordions ───────────────────────────────────────────────────────
   Every FAQ on the site is one component: the shopper FAQ, the prices and
   rules on /apply, and the long rules on both maker pages. So this is the
   one place to lift them, and lifting one lifts all four.

   Symmetry's own mechanics are already right: a real <details>, and a marker
   built from two 1px bars where one rotates away on open, which is the plus
   becoming a minus. What was wrong was scale. A 1.3em question with 20px of
   padding reads as a list of links, not as a set of questions worth opening,
   and the marker sat at 11px where the eye could not find it.

   The question is the thing you scan, so it takes heading ink and heading
   size. The row gets room. The marker gets found. */
.collapsible-tabs__tab .disclosure__title {
  padding-top: 26px;
  padding-bottom: 26px;
  padding-right: 52px;
  /* Oswald, uppercase, letter-spaced. This started as a maker-pages-only
     override, where a long list of rules had to read as a table of contents
     rather than as ten competing headings. Set against the sentence-case
     version on the other FAQs it won on sight, so it is the treatment
     everywhere now: one component, one look, all four sets. */
  font-family: var(--nav-font-family);
  font-weight: var(--nav-font-weight);
  font-size: var(--base-text-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgb(var(--heading-color));
  text-wrap: balance;
  transition: color 140ms ease;
  /* The row is the control, not the words in it, and it is never shorter
     than a thumb: WCAG 2.2 SC 2.5.8 asks 24px and this holds the 44px the
     mobile guidelines ask for, whatever a future question turns out to say.
     The padding above already clears it; the floor is what keeps it cleared. */
  min-height: 44px;
  box-sizing: border-box;
  /* A tap gets an answer on the frame it lands, before the panel opens. iOS
     draws nothing here on its own once a summary is styled, and the silence
     is what reads as "nothing happened". */
  -webkit-tap-highlight-color: rgb(var(--heading-color) / 0.07);
}
.collapsible-tabs__tab .disclosure__title:hover { color: rgb(var(--link-color)); }
.collapsible-tabs__tab .disclosure__title:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* The marker: bigger, and set in from the edge so it reads as part of the
   row rather than hard against the rule. */
.collapsible-tabs__tab .disclosure__title::before,
.collapsible-tabs__tab .disclosure__title::after {
  width: 15px;
  height: 1.5px;
  right: 4px;
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1), opacity 200ms ease;
}

/* Hairlines, and no doubled rule where two blocks meet. */
.collapsible-tabs .disclosure { border-top: 0; border-bottom: 0; }
.collapsible-tabs__tab {
  border-bottom: 1px solid rgb(var(--text-color) / var(--divider-opacity));
}
.collapsible-tabs__block:first-of-type .collapsible-tabs__tab {
  border-top: 1px solid rgb(var(--text-color) / var(--divider-opacity));
}

/* The answer sits at a reading measure under a question that can run wider,
   and keeps its distance from the next question. */
.collapsible-tabs__tab .disclosure__content {
  max-width: 68ch;
  padding-bottom: 30px;
  font-size: var(--base-text-size);
  line-height: 1.7;
}
.collapsible-tabs__tab .disclosure__content > :first-child { margin-top: 0; }
.collapsible-tabs__tab .disclosure__content > :last-child { margin-bottom: 0; }

/* The group heading is a label over its set, not another title competing with
   the page's own. */
.collapsible-tabs__heading {
  margin-top: 2.6em;
  margin-bottom: 0.9em;
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-tabs__tab .disclosure__title,
  .collapsible-tabs__tab .disclosure__title::before,
  .collapsible-tabs__tab .disclosure__title::after { transition: none; }
}

/* ── The accordions, second pass ───────────────────────────────────────────
   Leadsower's FAQ is the reference. Two things separate it from what we had.

   Width. It ran to 1180px for a while, on the argument that a question is one
   line and does not need a prose measure. On the page that was wrong: every
   other section on /makers/indoor and /makers/outdoor is a reading-width
   container, so the accordion's rules ran 150px past the text above and below
   them and the page stepped out and back in halfway down. It takes the same
   measure as everything else now, which puts the rules on the same left edge
   as the paragraphs. Drew, 6 Sep 2026.

   Contrast. There, the question is near-black and the answer is a clear step
   lighter, so an open panel reads as an aside to its question rather than as
   more headings. That difference is what makes a long list scannable. */
.collapsible-tabs {
  max-width: var(--reading-container-width);
  margin-inline: auto;
}

/* The column is the measure. An answer used to carry its own cap, which
   mattered only while the accordion was wider than the page's text; now it
   would just be a second number to keep in step with the first. */
/* The step down from the question is 0.86, not 0.72. At 0.72 the answer
   resolved to #8A8A8A on white, which is 3.45:1 and fails WCAG 2.2 AA for
   body text; every answer on the FAQ and on both maker pages was under it,
   and a phone held outside in Dana Point is the worst place to read it. At
   0.86 it is #737373 and 4.76:1, and the question at #171717 is still the
   obviously darker of the two, which is all the step was for. */
.collapsible-tabs__tab .disclosure__content {
  color: rgb(var(--text-color) / 0.86);
  padding-bottom: 34px;
  line-height: 1.75;
}

/* Paragraphs inside an answer get real air between them. Several of these
   answers are three paragraphs long and they were reading as one block. */
.collapsible-tabs__tab .disclosure__content > * + * { margin-top: 1.15em; }
.collapsible-tabs__tab .disclosure__content ul,
.collapsible-tabs__tab .disclosure__content ol { padding-left: 1.25em; }
.collapsible-tabs__tab .disclosure__content li + li { margin-top: 0.5em; }

/* A link inside an answer has to stay visible against the lighter body. */
/* And it has to be hittable. Several answers end in "click here", and the
   anchor's own box is the height of the type, 17px, inside a 26px line. The
   padding grows the touch target to about 26px without moving anything:
   vertical padding on an inline box does not change the line box it sits in.
   Nothing here is drawn, so the answer looks the same as it did. */
.collapsible-tabs__tab .disclosure__content a {
  color: rgb(var(--heading-color));
  text-decoration: underline;
  text-underline-offset: 0.18em;
  padding-block: 0.3em;
}

/* The question keeps full-strength ink, which is where the contrast comes
   from, and the marker sits at the far edge of the row the way it does on the
   reference rather than floating inside it. */
.collapsible-tabs__tab .disclosure__title { padding-right: 64px; }
.collapsible-tabs__tab .disclosure__title::before,
.collapsible-tabs__tab .disclosure__title::after {
  width: 18px;
  right: 2px;
}

/* Under about 900px the container is already the whole screen, so the cap and
   the wide measure do nothing and the padding comes back in. */
@media (max-width: 900px) {
  .collapsible-tabs__tab .disclosure__title { padding-right: 44px; }
  .collapsible-tabs__tab .disclosure__title::before,
  .collapsible-tabs__tab .disclosure__title::after { width: 15px; }
}

/* A link into the middle of an accordion has to clear the sticky masthead,
   which is 62px on a phone and 103px from the nav breakpoint up. One number
   cannot serve both: 96px used to, and on a desktop it put the section title
   under the header it was supposed to clear. Both the block a `#fragment`
   names and the group heading above it get it, so /faq#faq-merchants lands
   the same way /makers/outdoor#rules does. */
.collapsible-tabs__block,
.collapsible-tabs__heading { scroll-margin-top: 84px; }
@media (min-width: 768px) {
  .collapsible-tabs__block,
  .collapsible-tabs__heading { scroll-margin-top: 124px; }
}

/* On a phone a bulleted answer gave up 49px of a 288px column to indentation
   before a word of it started: the theme's 2em on the list plus our own
   1.25em, one behind the other. One indent is an indent; two is a margin.
   The bullet still hangs, so the list still reads as a list. Phones only,
   where the column is the screen. */
@media (max-width: 600px) {
  .collapsible-tabs__tab .disclosure__content ul,
  .collapsible-tabs__tab .disclosure__content ol {
    margin-inline-start: 0;
    padding-left: 1.15em;
  }
}

/* The lookbook prompt on the space step. Sits under the hint as a second,
   quieter line so it reads as an offer rather than another instruction. */
.account-form .ap-lookbook { margin-top: -6px; }
.account-form .ap-lookbook a {
  color: rgb(var(--link-color));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The measured size, under the space name in the price table. A subheading,
   so it reads as a property of the name above it rather than as a second
   thing in the cell: lighter, smaller, and on its own line. */
.price-table__dim {
  display: block;
  margin-top: 3px;
  font-family: var(--body-font-family);
  font-size: var(--smaller-text-size-1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--text-color) / 0.62);
}

/* The inspiration links, at the top of each "how to display" section.
   They were a "Click here" eleven hundred characters into two thousand, inside
   a collapsed accordion: present, and unfindable. A maker planning a space is
   the person who most wants to see one, so the section opens with them. */
.mk-sections .disclosure__content .mk-inspo {
  margin: 0 0 1.1em;
  padding: 0.85em 1em;
  border-left: 2px solid rgb(var(--heading-color));
  background: rgb(var(--text-color) / 0.035);
}
.mk-sections .disclosure__content .mk-inspo a {
  color: rgb(var(--link-color));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ── The logo, actually centred on a phone ────────────────────────────────
   Symmetry lays the header out as three flex columns and lets the middle one
   take what is left. That works while the two outer columns are about the
   same width. Ours are not: the left holds a hamburger, the right holds the
   account link and the Apply button, and the right cannot shrink. So the
   middle column started 28px left of centre at 390px, and the logo with it.
   Adding the account link is what tipped it.

   Below the nav breakpoint the logo is centred against the header itself
   rather than against whatever space is left over. `min-height` keeps the
   row the height the middle column was giving it, since an absolutely
   positioned child no longer contributes any.

   The box is only as wide as the mark, so it does not reach the hamburger,
   and pointer-events are handed back to the link so the middle of the header
   is still a way home. */
@media (max-width: 767.98px) {
  .logo-area { position: relative; min-height: 62px; }
  .logo-area__middle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
    pointer-events: none;
  }
  .logo-area__middle .logo__link { pointer-events: auto; }
}

/* ── The maker's sign-in card ─────────────────────────────────────────────
   /account has no photograph and no hero, so the card has to carry the page
   on its own. It is the market's own furniture: cream ground, a hairline
   rule, the gold mark, and the heading in the nav face the rest of the site
   uses for anything that is not body copy. Centred, because it is one thing
   asking for one thing. */
.mm-signin {
  max-width: 30rem;
  margin: 0 auto;
  padding: 2.5rem 2rem 2.25rem;
  text-align: center;
  background: rgb(var(--bg-color));
  border: 1px solid rgb(var(--text-color) / var(--divider-opacity));
  border-top: 3px solid rgb(var(--heading-color));
}
.mm-signin__title {
  margin: 0 0 0.5rem;
  font-family: var(--heading-font-family);
  font-size: 1.6rem;
  line-height: 1.15;
  color: rgb(var(--heading-color));
}
.mm-signin__note {
  margin: 0 auto 1.4rem;
  max-width: 26rem;
  font-size: var(--base-text-size);
  line-height: 1.55;
}
.mm-signin__expired {
  margin: 0 0 1.2rem;
  padding: 0.7em 0.9em;
  background: rgb(var(--link-color) / 0.08);
  border-left: 2px solid rgb(var(--link-color));
  text-align: start;
  font-size: var(--smaller-text-size-1);
}
.mm-signin__form { display: block; }
.mm-signin__form label {
  display: block;
  text-align: start;
  font-family: var(--nav-font-family);
  font-size: var(--smaller-text-size-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--text-color) / 0.7);
  margin-bottom: 0.4em;
}
/* border-box on both, because the theme's .btn and .inp carry horizontal
   padding and width:100% without it makes an element wider than its parent:
   the button hung 50px off the right edge of the card. */
.mm-signin__form input { width: 100%; box-sizing: border-box; }
.mm-signin__form .form-error { display: block; text-align: start; margin-top: 0.4em; }
.mm-signin__btn { display: block; width: 100%; box-sizing: border-box; margin-top: 0.9rem; }
.mm-signin__fine {
  margin: 1.3rem 0 0;
  font-size: var(--smaller-text-size-1);
  color: rgb(var(--text-color) / 0.7);
}
/* A button that has to read as a link, because signing out is a POST.

   The comment that used to sit between `.mm-signin--sent` and this selector
   was inside the selector, not above it: a CSS comment is whitespace, so the
   two class names read as a descendant selector and none of this applied to
   the sign-out button, which is on /account and not inside a sent card. */
.ap-link-btn {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}

/* ───────────────────────────────────────────────────────────────────────────
   The phone pass, September 2026.

   Everything below is scoped to a phone-sized viewport and changes nothing
   at desktop widths. Drew: "site needs a major mobile audit." What follows
   is what the audit found, in the order it hurt.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── The hero, on a phone held sideways ───────────────────────────────────
   The home hero is a fixed 500px on a phone and 600px from 768px up, which
   is right in portrait and wrong the moment the phone turns: on a 360px-tall
   landscape screen a 500px hero puts the dates and APPLY NOW below the fold
   and nothing above it says what the show is or when.

   So on a short screen the hero is at most the screen, measured in `svh` so
   the browser chrome cannot cut it, and the type inside it takes the phone
   size and centres below the header rather than under it. In portrait none
   of this applies and the hero is untouched.

   42px is the announcement bar, which the hero starts underneath. */
@media (max-width: 1023.98px) and (max-height: 560px) {
  #section-hero.video-section .height--fixed {
    --image-height: calc(100svh - 42px);
  }
  #section-hero.video-section .text-overlay {
    padding-top: var(--theme-header-height, 62px);
  }
  #section-hero.video-section .block-heading { font-size: 32px; }
}

/* ── The map plates, in `svh` ─────────────────────────────────────────────
   Symmetry sizes the two stacked plates on a phone at 55vh each. `vh` is the
   large viewport: with the address bar showing, 55vh is taller than 55% of
   what you can see, and the plate resizes as the bar hides and returns.
   `svh` is the same picture at a height that does not move. */
@media (max-width: 767.98px) {
  .map-section__feature,
  .map-section__map,
  .map-section__placeholder,
  .map-section__map-container { height: 55svh; }
}

/* ── Targets a thumb can hit ──────────────────────────────────────────────
   WCAG 2.2 SC 2.5.5 wants 44x44 for anything that is not inline in a
   sentence. Four things on the site were under it on a phone: the Apply
   button in the header (33px tall), the two footer social marks (24px), the
   footer's secondary menu (29px), and the links on the 404 and under a
   journal article (34-36px). The Apply button fits inside the 62px header
   beside the 44px account mark, so none of this makes the header taller. */
@media (max-width: 767.98px) {
  .logo-area__right .header-apply-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .social__link { min-width: 44px; min-height: 44px; }
  /* The negative margin gives a short word like FAQ a target wider than the
     word without moving the word: the row sits where it sat. */
  .section-footer__lower-menu__list a,
  .nf__links a { padding: 14px 8px; margin-inline: -8px; }
  .pagination-row a { padding: 14px 0; }
  /* And large enough to read. The footer is the only route to Terms,
     Privacy, the journal and the contact form, and it was set at 12px. */
  .section-footer__lower-menu__list a,
  .mm-signin__fine { font-size: var(--smaller-text-size-2); }
}

/* ── The account mark ─────────────────────────────────────────────────────
   The mark alone is the only way back into an application on a phone, and
   at 55% of the body grey it runs 2.2:1 on white, under the 3:1 that
   SC 1.4.11 asks of a control. It is still the quiet thing beside APPLY;
   it is now a thing you can see. */
@media (max-width: 767.98px) {
  .header-account-link { color: rgb(var(--text-color) / 0.85); }
}

/* ── The price table, actually stacking ───────────────────────────────────
   "What it suits" was meant to sit under the space name on a phone. It did
   not: `display: block` on one cell of a table row leaves the cell in its
   own column, so the column stayed, 110px wide, at 12px, running six lines
   deep on a 320px screen. The column a maker's decision turns on was the
   hardest thing on the page to read.

   Two consecutive non-cell children of a row are wrapped in one anonymous
   cell, which is the mechanism `.timetable` above already uses: make the
   name and the description blocks and they share a cell, while the money
   stays a cell of its own on the right. The header row loses the middle
   heading with them, so it reads SPACE / PRICE over what is underneath. */
@media (max-width: 600px) {
  .price-table thead th:nth-child(2) { display: none; }
  /* Both rules off: as blocks these two would draw the theme's cell borders
     on their own edges, which put a hairline between a space's name and its
     description and made one row read as two. */
  .price-table tbody th[scope="row"],
  .price-table tbody td:nth-child(2) {
    display: block;
    border-top: 0;
    border-bottom: 0;
  }
  .price-table tbody th[scope="row"] { padding-bottom: 0; }
  .price-table tbody td:nth-child(2) {
    padding-top: 0.35em;
    /* 14px, not 12px. This is a sentence, and nothing you read runs under
       14px on a phone. */
    font-size: var(--smaller-text-size-2);
    line-height: 1.5;
  }
  /* The two blocks share an anonymous cell, which cannot carry a border, so
     the row draws the rule under them. The money cell keeps its own, and the
     two meet as one line because they are the same weight and colour. */
  .price-table tbody tr {
    border-bottom: 1px solid rgb(var(--text-color) / var(--divider-opacity));
  }
  .price-table tbody th.price-table__group {
    display: table-cell;
    padding-bottom: 0.5em;
  }
}

/* ── The drawer ───────────────────────────────────────────────────────────
   The page behind an open drawer is already locked. What was missing is the
   chain: scrolling past the end of the drawer, or dragging on the scrim,
   hands the gesture to the page underneath on iOS. */
.mobile-navigation-drawer { overscroll-behavior: contain; }
.page-shade { overscroll-behavior: none; touch-action: none; }

/* ── Headings that break badly on a narrow column ─────────────────────────
   Display type set for a desktop measure drops a two-word last line on a
   phone: "This page could not be / found." and "What this site / is for".
   The theme already balances its banner titles; these four were the ones it
   does not reach. Above 768 every one of them is a single line, so this is
   a phone rule and nothing changes on a desktop. */
@media (max-width: 767.98px) {
  .lg-section__title,
  .lg-part__title,
  .mm-signin__title,
  .nf__title { text-wrap: balance; }
}

/* ── Anchors, under a sticky header ───────────────────────────────────────
   The masthead stays on screen, so anything scrolled to by id lands behind
   it. The legal pages and the maker rules set their own margin; the skip
   link had none, and it is the first thing a keyboard user uses. */
#content { scroll-margin-top: calc(var(--theme-header-height, 62px) + 12px); }