/* ---------------------------------------------------------------------------
   The marketing site's stylesheet, shared by index.html and software.html.
   It was inline in index.html until the Software page split off; two pages
   in one voice cannot be kept in step by copy-paste.
--------------------------------------------------------------------------- */
:root {
  /* The palette, copied exactly and living in these four tokens only.
     Everything below is a ROLE pointing at one of them — recolouring is a
     change to these four lines, never a search through the stylesheet.
     Where each may be used is fixed by contrast, not taste: wine is the
     only one dark enough to carry white text or to be text itself; aqua,
     teal and gold are fills and never sit as text on white. */
  --c-aqua: #8EC9CD;
  --c-gold: #B99358;
  --c-teal: #7EB7BF;
  --c-wine: #7A1325;

  --ground: #FFFFFF; --surface: #FFFFFF; --strip: #F0F2F1;
  --ink: #14181C; --body-ink: #4A5258; --muted: #6E7680; --line: #E6E8EA;
  --act: var(--c-wine); --act-ink: #FFFFFF; --rb: 6px; --rc: 10px;
  --fstroke: #14181C; --faccent: #14181C;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: 'Commissioner', system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.display {
  font-family: 'Commissioner', system-ui, sans-serif; font-weight: 500;
  font-variation-settings: 'FLAR' 100, 'VOLM' 100; letter-spacing: -0.01em;
  line-height: 1.06;
}
.num { font-variant-numeric: tabular-nums lining-nums; }
.k { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* The display cut of the kicker, for the two that are statements rather than
   labels. Same Commissioner axes as the headline, so it reads as a smaller
   voice of the same face and not a different one. */
.k-display {
  font-family: 'Commissioner', system-ui, sans-serif; font-weight: 600;
  font-variation-settings: 'FLAR' 100, 'VOLM' 100;
  font-size: 14px; letter-spacing: 0.07em; line-height: 1.35;
  text-transform: uppercase; color: var(--ink);
}
.body { font-weight: 400; font-size: 15px; line-height: 1.65; color: var(--body-ink); text-wrap: pretty; max-width: 62ch; }
.muted { color: var(--muted); }

a { color: var(--ink); text-decoration: none; }
/* A link inside prose needs to look like one. The bare rule above is for
   navigation and buttons, where position already says "clickable"; a URL in
   the middle of a paragraph has nothing else to go on. */
.body a, .card p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

header .bar {
  display: flex; align-items: center; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
/* The wordmark is one image (public/logo.svg): the mosaic tesserae are the
   artwork itself, so there is no mark-plus-text pair to space any more.
   Sized by HEIGHT with width auto — the SVG carries its own aspect.
   42px is not arbitrary: the mark is a 12-unit grid of 10-unit squares in
   an 84-unit-tall box, so 42 is exactly half scale and every tile edge
   lands on a whole device pixel at 1x, 2x and 3x alike. Change it to a
   multiple of 42 or expect the squares to pick up a soft edge. */
.wordmark { display: flex; align-items: center; }
.wordmark img { display: block; height: 42px; width: auto; }
footer .wordmark img { height: 33px; }
/* Scoped to the page's own header bar. It was a bare `nav` selector with
   margin-left:auto, which silently right-shifted the first other <nav> put
   on the page (the dashboard's tab bar). */
.bar nav { display: flex; gap: clamp(16px, 3vw, 32px); font-size: 15px; margin-left: auto; }
@media (max-width: 560px) { .bar nav .hide-xs { display: none; } }
/* Pre-existing on both pages: below ~360px even the trimmed nav plus the
   42px wordmark is wider than the viewport, and the page scrolled sideways.
   The bar wraps instead — the mark keeps its required height either way. */
@media (max-width: 380px) {
  header .bar { flex-wrap: wrap; gap: 12px; }
  .bar nav { margin-left: 0; width: 100%; gap: 18px; }
}

.btn {
  display: inline-block; padding: 13px 24px; border-radius: var(--rb);
  font-size: 16px; font-weight: 500; text-align: center;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer;
}
.btn:hover { text-decoration: none; background: var(--ink); color: var(--ground); }
.btn.solid { background: var(--act); border-color: var(--act); color: var(--act-ink); }
.btn.solid:hover { filter: brightness(0.92); }
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; }

section { padding: clamp(36px, 6vw, 56px) 0; border-top: 1px solid var(--line); }
.sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
h1, h2, h3 { margin: 0; }
h1 { font-size: clamp(36px, 6.5vw, 58px); text-wrap: balance; }
h2 { font-size: clamp(28px, 4.5vw, 40px); text-wrap: balance; }
h3 { font-size: 18px; font-weight: 600; }

/* The section ornament is now a row of the wordmark itself — see
   public/logo-rules.css, generated by scripts/build-logo-rules.mjs. Only its
   spacing lives here; its geometry and colours are the mark's own. */
.zi-rule { margin: 2px 0; }
.sechead + .zi-rule { margin-top: 16px; }

/* The kept line work: three step icons, monochrome, never with text inside. */
.flash-s { stroke: var(--fstroke); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.flash-f { fill: var(--fstroke); }
.flash-a { fill: var(--faccent); }
.m-step svg { display: block; margin-bottom: 6px; }

/* --- hero ---------------------------------------------------------------- */
.hero { padding: clamp(36px, 6vw, 60px) 0; }
.herocol { display: flex; flex-direction: column; gap: 26px; }

.lede { margin: 0; font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; color: var(--body-ink); line-height: 1.25; max-width: 30ch; }

/* --- plans --------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rc);
  padding: 24px 26px; display: flex; flex-direction: column; gap: 12px;
}
.plan.star { border: 1.5px solid var(--act); }
.plan .price { font-size: 40px; line-height: 1; }
.plan .per { font-size: 13px; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); }
.plan ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; line-height: 1.5; color: var(--body-ink); }
.plan li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.plan li:last-child { border-bottom: none; }
.plan .btn { margin-top: auto; font-size: 14px; padding: 12px; }

/* --- three-up ------------------------------------------------------------ */
/* The paragraph's own default margins are the only thing spacing this
   section, which made the band's bottom gap ~2x its top. Zeroed, so the
   section's padding is the single thing that decides the band's height. */
.originscol { margin-top: 22px; }
.originscol .body { margin: 0; }

/* The photograph, and why the band is laid out around it: a single 62ch
   paragraph left most of the colour empty, and a wider text column only
   made the line length wrong. The picture is the thing the paragraph is
   about, so it fills the space rather than decorating it.
   Cropped square by the box rather than in the file — one asset serves both
   the square desktop slot and the landscape mobile one, and re-cropping is
   two numbers here. Held slightly above centre: the mast, the lights and the
   horizon are the picture; the swept floor at the bottom is not. */
.originsphoto {
  display: block; width: 100%; height: auto; border-radius: 12px;
  /* Square at every width, not landscape on a phone: a 4:3 crop of this
     frame cuts the top off the mast and leaves a bare post. Held above
     centre so the mast, the lights and the horizon stay in — the swept
     floor at the bottom is the part worth losing. */
  aspect-ratio: 1 / 1; object-fit: cover; object-position: center 42%;
  margin-top: 26px;
}
@media (min-width: 861px) {
  #origins {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 5vw, 72px); align-items: center;
  }
  .originsphoto { margin-top: 0; }
}

/* --- a full-bleed tinted band -------------------------------------------
   Aqua is the palette's designated light ground (CLAUDE.md §The palette),
   so a section fill is aqua and never one of the other three.

   The greys that are comfortable on white do NOT survive a mid-tone ground,
   and this is the whole reason a fill is not just a background declaration:
   measured against #8EC9CD, --body-ink (#4A5258) is 4.3:1 and --muted
   (#6E7680) is 2.5:1, so the body text misses AA and the labels fail
   outright. Both are re-pointed here — body to full ink at 9.7:1, labels to
   an ink mixed 20% toward the ground at 6.3:1, which keeps a step of
   hierarchy without dropping under AA. The softness comes from the ground
   being tinted, not from greying the text: on white a grey paragraph reads
   calm, on aqua it just reads faded.

   Everything is a token, so nothing inside the band needs its own rule and
   any section can be banded by wrapping it — which is also why --act is
   pinned to wine (5.8:1 on aqua) rather than left to chance. */
.tint {
  background: var(--c-aqua);
  --body-ink: var(--ink);
  --muted: #2C3B3F;
  --line: color-mix(in srgb, var(--ink) 30%, var(--c-aqua));
  --act: var(--c-wine);
  --surface: color-mix(in srgb, #FFFFFF 78%, var(--c-aqua));
}
/* The colour edge is the divider, so the rules either side of it are noise. */
/* Optically trimmed rather than equal: the last line's descent slack reads
   as extra space at the foot of the band, so the bottom is set a little
   shorter to make the two edges look the same. */
.tint section { border-top: 0; padding: clamp(44px, 7vw, 68px) 0 clamp(34px, 5.4vw, 52px); }
.tint + .wrap section { border-top: 0; }
.switchhead { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 26px; }
.switchcost { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 860px) { .switchcost { grid-template-columns: 1fr; } }
.switchcost ul { margin: 0; padding-left: 18px; }
.switchcost li { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 7px; }
.switchcost li strong { color: var(--ink); font-weight: 500; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: 30px; }
@media (max-width: 860px) { .three { grid-template-columns: 1fr; } }
.card { border-top: 1px solid var(--line); padding-top: 16px; }
.card p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.card h3 { margin-top: 8px; }

/* --- the live booking widget (always light, always the venue's colour) ----
   #25604A here is a FICTIONAL VENUE'S green and is deliberately none of
   Thezi's four palette colours: the section's whole claim is that the
   booking page wears the venue's branding, not ours. Do not "correct" it
   to the palette — that would illustrate the opposite point.

   Everything below is scoped to .applet / .appletframe and namespaced a-*,
   so nothing here can reach the rest of the marketing page. The widget is
   driven by /demo-applet.js. */
.colours { margin-top: 24px; display: grid; grid-template-columns: 400px 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .colours { grid-template-columns: 1fr; } }
/* A grid item's automatic minimum is its min-content width, which the widget
   frame pushes past the column on a narrow phone. Without this the section
   overflows its own gutter by the difference. */
.colours > * { min-width: 0; }
.colours .copycol { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }

.appletframe {
  --v: #25604A; --v-ink: #FFFFFF; --v-wash: #EDF3F0; --v-deep: #1B4736;
  max-width: 400px; border: 1px solid var(--line); border-radius: 16px;
  background: #FFFFFF; color: #14181C; overflow: hidden;
  box-shadow: 0 1px 2px rgb(20 24 28 / 5%), 0 12px 32px -12px rgb(20 24 28 / 18%);
}
.applet { padding: 6px 0 0; font-size: 14px; }
.applet button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.applet button:focus-visible { outline: 2px solid var(--v); outline-offset: 2px; }
.a-body { padding: 14px 18px 16px; display: flex; flex-direction: column; }
.a-eyebrow {
  margin: 14px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.a-eyebrow:first-child { margin-top: 2px; }

/* Both horizontal rows scroll rather than wrap: on a phone a wrapping grid
   of ten dates is taller than the fold, and a row that snaps reads as one
   control. The page itself never scrolls sideways. */
.a-row {
  display: flex; gap: 7px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 4px; margin: 0 -18px; padding-left: 18px; padding-right: 18px;
  scrollbar-width: none;
}
.a-row::-webkit-scrollbar { display: none; }
.a-pill {
  flex: 0 0 auto; scroll-snap-align: start; min-width: 44px; height: 40px;
  border-radius: 999px; border: 1px solid #DCE0E3; background: #FFFFFF;
  color: #14181C; font-variant-numeric: tabular-nums;
}
.a-pill[aria-pressed="true"] { background: var(--v); border-color: var(--v); color: var(--v-ink); font-weight: 600; }
.a-date {
  flex: 0 0 auto; scroll-snap-align: start; min-width: 58px; padding: 8px 10px 9px;
  border-radius: 12px; border: 1px solid #DCE0E3; background: #FFFFFF;
  color: #14181C; text-align: center; line-height: 1.15;
}
.a-date .dow { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.a-date .num { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }
.a-date .mon { display: block; font-size: 10px; color: var(--muted); }
.a-date[aria-pressed="true"] { background: var(--v); border-color: var(--v); color: var(--v-ink); }
.a-date[aria-pressed="true"] .dow, .a-date[aria-pressed="true"] .mon { color: var(--v-ink); opacity: 0.8; }

.a-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
.a-time {
  min-height: 46px; border-radius: 12px; border: 1px solid #DCE0E3; background: #FFFFFF;
  color: #14181C; font-variant-numeric: tabular-nums; font-size: 15px; padding: 6px 4px;
}
.a-time:hover:not(:disabled) { border-color: var(--v); }
.a-time .last { display: block; font-size: 10px; color: var(--v); font-weight: 600; letter-spacing: 0.03em; }
.a-time:disabled { color: #B4B9BE; border-style: dashed; text-decoration: line-through; cursor: default; }
.a-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.a-back { align-self: flex-start; border: 0; background: none; color: var(--v); font-size: 13px; font-weight: 600; padding: 2px 0 8px; }
.a-summary {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin-bottom: 14px;
  background: var(--v-wash); border-radius: 12px; font-size: 14px;
}
.a-summary span { color: #4A5258; font-variant-numeric: tabular-nums; }
.a-field { margin-bottom: 12px; }
.a-field label { display: block; font-size: 12px; font-weight: 600; color: #4A5258; margin-bottom: 5px; }
.a-field input {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #DCE0E3; background: #FFFFFF; color: #14181C;
  /* 16px so iOS Safari does not zoom the page on focus. */
  font: 16px/1.4 inherit; font-family: inherit;
}
.a-field input:focus { outline: none; border-color: var(--v); box-shadow: 0 0 0 3px rgb(37 96 74 / 14%); }
.a-cta {
  width: 100%; min-height: 50px; margin-top: 4px; border: 0; border-radius: 12px;
  background: var(--v); color: var(--v-ink); font-size: 16px; font-weight: 600;
}
.a-cta:hover { background: var(--v-deep); }
.a-ghost { margin-top: 14px; border: 1px solid #DCE0E3; background: #FFFFFF; color: #14181C; border-radius: 10px; min-height: 42px; padding: 0 16px; }
.a-fine { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.a-centre { text-align: center; }
.a-err { margin: 2px 0 10px; font-size: 12.5px; color: #A3341F; }

.a-done { align-items: center; text-align: center; padding-top: 26px; padding-bottom: 24px; }
.a-tick {
  width: 46px; height: 46px; border-radius: 50%; background: var(--v); color: var(--v-ink);
  display: grid; place-items: center; font-size: 22px;
}
.a-done h3 { margin: 14px 0 4px; font-size: 18px; font-weight: 600; }
.a-done .a-sub { margin: 0; font-size: 14px; color: #4A5258; }
.a-done .a-fine { max-width: 34ch; }

.a-foot { border-top: 1px solid #EDEFF1; padding: 10px 18px 12px; text-align: center; }
.a-foot a { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #969DA3; }
.a-foot a:hover { color: #14181C; }

/* --- the venue's side: the Service view, on the counter iPad -------------
   Markup rather than a screenshot, so it stays sharp at any pixel density,
   follows the palette, and cannot go stale against a stylesheet it never
   sees. The screen is a container: everything inside is sized in cqw, so
   the whole dashboard scales as one object down to a phone instead of
   reflowing into something no iPad ever shows. */
.ipad { margin: 30px 0 0; }
.ipadframe {
  position: relative; max-width: 900px; margin: 0 auto;
  background: #1B1F23; border-radius: clamp(14px, 2.2vw, 26px);
  padding: clamp(10px, 1.9vw, 20px) clamp(12px, 2.4vw, 26px);
  box-shadow: 0 2px 4px rgb(20 24 28 / 8%), 0 30px 60px -30px rgb(20 24 28 / 45%);
}
.ipadframe .cam {
  position: absolute; top: 50%; left: clamp(5px, 1.05vw, 11px); transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #3A4046;
}
.ipadscreen {
  container-type: inline-size;
  aspect-ratio: 4 / 3; overflow: hidden; background: #ffffff;
  border-radius: 4px; padding: 2.4cqw 2.8cqw;
  display: flex; flex-direction: column; gap: 1.6cqw;
  font-size: 1.55cqw; line-height: 1.4; color: var(--ink);
}
.ipad figcaption {
  margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted);
  max-width: 56ch; margin-inline: auto; text-wrap: pretty;
}
/* Each iPad carries its own paragraph, centred under it — the two screens
   are a sequence (tonight's list, then tonight's room), not a grid. */
.ipadcopy { margin: 20px auto 8px; }

/* The iPads are the admin as it is, so they wear the ADMIN's palette — the
   body.admin block in styles.css (dark chrome, teal action, traffic-light
   status), not the marketing tokens around them. Restated here as literals
   because this stylesheet never loads that one; keep the two in step. */
.ipadscreen { --fh-chrome: #1c2733; --fh-on-chrome: #ffffff; --fh-on-chrome-2: rgba(255,255,255,0.64);
  --fh-act: #0f766e; --fh-ink: #1b2430; --fh-muted: #64748b; --fh-line: #e3e8ee;
  --fh-free: #15803d; --fh-free-wash: #e7f6ec; --fh-taken: #dc2626;
  --fh-soon: #b45309; --fh-soon-wash: #fef3e2; color: var(--fh-ink); }
/* The dark bar bleeds to the screen's edges, as the real one does. */
.fh-top {
  display: flex; align-items: center; gap: 2cqw;
  margin: -2.4cqw -2.8cqw 0; padding: 1.5cqw 2.8cqw;
  background: var(--fh-chrome); color: var(--fh-on-chrome);
}
.fh-venue { font-weight: 600; font-size: 2cqw; letter-spacing: -0.01em; }
.fh-live {
  display: inline-block; margin-left: 0.7cqw; padding: 0.25cqw 1cqw; border-radius: 999px;
  background: var(--fh-free-wash); color: var(--fh-free);
  font-size: 1.15cqw; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; vertical-align: 0.35cqw;
}
.fh-day { color: var(--fh-on-chrome-2); font-variant-numeric: tabular-nums; }
.fh-gear {
  margin-left: auto; width: 3.6cqw; height: 3.6cqw; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; flex: none;
}
.fh-gear svg { width: 2cqw; height: 2cqw; }

/* An underlined tab, which is what the admin actually does (.tab in
   styles.css); the settings screens live behind the icon, not in the bar. */
.fh-tabs { display: flex; gap: 1.6cqw; border-bottom: 1px solid var(--fh-line); }
.fh-tabs span { padding: 0.75cqw 0 1.1cqw; color: var(--fh-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fh-tabs span.on { color: var(--fh-ink); border-bottom-color: var(--fh-act); font-weight: 600; }

.fh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.fh-stats div {
  background: #fff; border: 1px solid var(--fh-line); border-radius: 1.1cqw; padding: 1.1cqw 1.4cqw;
  box-shadow: 0 1px 2px rgb(27 36 48 / 4%), 0 2px 8px rgb(27 36 48 / 6%);
  display: flex; flex-direction: column; gap: 0.2cqw; min-width: 0;
}
.fh-stats b { font-size: 2.6cqw; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.fh-stats span {
  font-size: 1.2cqw; color: var(--fh-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fh-list h4 {
  margin: 1.6cqw 0 0.7cqw; font-size: 1.25cqw; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fh-muted);
}
.fh-list h4:first-child { margin-top: 0.4cqw; }
.fh-row {
  display: flex; align-items: baseline; gap: 1.1cqw;
  padding: 1cqw 0; border-bottom: 1px solid var(--fh-line);
}
.fh-row i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 6.8cqw; }
.fh-row b { font-weight: 600; }
.fh-row em { font-style: normal; margin-left: auto; color: var(--fh-muted); font-variant-numeric: tabular-nums; }
/* A party at its table wears the red rim the plan gives a taken table —
   one colour, one meaning, both screens (.row-seated in styles.css). */
.fh-row.now { border-left: 0.45cqw solid var(--fh-taken); padding-left: 1.2cqw; }
.fh-flag, .fh-held, .fh-badge {
  font-size: 1.15cqw; padding: 0.2cqw 0.9cqw; border-radius: 999px; white-space: nowrap;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.fh-flag { background: var(--fh-soon-wash); color: var(--fh-soon); }
.fh-held, .fh-badge { background: var(--fh-free-wash); color: var(--fh-free); }
.fh-fine { margin-top: 1.2cqw; font-size: 1.2cqw; color: var(--fh-muted); }

/* The plan is skopia's own SVG, inlined whole: it sizes to this box and
   nothing here restyles its insides. Recolouring it would mean the picture
   stopped being what the engine draws, which is the one thing it is for. */
/* The bordered panel the admin puts the plan in (.plan in styles.css). The
   plan takes whatever height is left; the SVG's own preserveAspectRatio fits
   it inside, so it is as large as the screen allows and its aspect ratio is
   never touched. Nothing here restyles the SVG's insides — recolouring it
   would mean the picture stopped being what the engine draws, which is the
   one thing it is for. */
.fh-plan {
  flex: 1; min-height: 0; border: 1px solid var(--fh-line);
  border-radius: 1cqw; overflow: hidden;
}
.fh-plan svg { width: 100%; height: 100%; display: block; }

.venuegrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); margin-top: 34px; align-items: start; }
@media (max-width: 860px) { .venuegrid { grid-template-columns: 1fr; } }
.venuegrid .copycol { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }

/* --- switch band --------------------------------------------------------- */
.switch { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

footer { border-top: 1px solid var(--line); background: var(--strip); padding: 36px 0 96px; margin-top: 24px; }
.footgrid { display: flex; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.footgrid .k { line-height: 1.8; letter-spacing: 0.06em; text-transform: none; }

/* ---------------------------------------------------------------------------
   The comparison page's grids. Only /compare uses these, but they live here
   rather than inline for the reason at the top of this file: a second voice
   in a second stylesheet is a second thing to keep in step.

   The scroller is the rule from the responsive pass, applied honestly: the
   page body never scrolls sideways, so a table too wide for a phone gets its
   own overflow box and a hint that says so, rather than a column quietly
   falling off the right-hand edge where nobody looks for it.
--------------------------------------------------------------------------- */
.cmpwrap { overflow-x: auto; margin-top: 26px; border: 1px solid var(--line); border-radius: var(--rc); }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th {
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); background: var(--strip); white-space: nowrap;
}
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.cmp td { color: var(--body-ink); }
.cmp .us th, .cmp .us td { background: color-mix(in srgb, var(--c-aqua) 16%, #fff); color: var(--ink); }
.cmp .no { color: var(--muted); }
.cmpnote { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.cmphint { display: none; }
@media (max-width: 700px) { .cmphint { display: block; margin-top: 8px; } }

/* The honest-gaps list. Deliberately not a .three of cards: three tidy cards
   read as a feature grid, and these are not features. */
.gaps { margin-top: 26px; display: grid; gap: 22px; max-width: 68ch; }
.gaps h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; color: var(--ink); }
.gaps p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--body-ink); text-wrap: pretty; }