/* jbl design system — single source of truth (design doc §2–§4, §7).
   Light ring motif appears ONLY in: hero frame, calendar range endpoints,
   how-it-works step markers. Everything else stays quiet. */

/* ---------- fonts ---------- */
/* The wght axis on both faces is cut to 400-700, the only weights this site asks for
   (400, 500, 600 and 700 appear in the stylesheets; nothing uses the 200-400 or 700-900
   the faces shipped with). That is 20,244 bytes off every page load, 28% of the two
   files, and both are preloaded, so every visitor paid it.

   Measured, not assumed: each weight rendered from the old file and the new one, ink
   coverage 400 identical, 500 -0.345%, 600 -0.005%, 700 -0.001%, advance widths equal to
   within one pixel at 2x. Sub-pixel rasterisation, no reflow, no visible weight shift.
   Keep the declared range equal to the file's axis — a test compares every font-weight in
   the stylesheets against it. */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/unbounded-latin.woff2?v=e9cd834145') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/unbounded-latin-ext.woff2?v=7445c55a0a') format('woff2');
  /* Latin Extended-A only, and exactly the 125 codepoints the file holds. The face
     shipped with Google's full latin-ext cut: 586 codepoints, 118 KB, of which this
     site's copy uses six — c, s and z with carons. U+0131 and U+0152-0153 are absent
     here on purpose; the latin face above already claims them, and two faces claiming
     one codepoint is how a character ends up rendered as .notdef. Anything outside
     this range now falls back to the stack, which is what it did before for the
     symbols the copy already uses (pi, arrows, checkmarks). */
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F;
}

/* ---------- tokens ---------- */
:root {
  --bg: #FAF9F7;
  --surface: #FFFFFF;
  --ink: #1D1A27;
  --muted: #5C5568;
  --line: #E6E2DC;
  --accent: #E63600;
  --accent-deep: #C22E00;
  /* .btn-primary bg: white label is body-size (needs 4.5:1). --accent (#E63600)
     is only 4.29:1, so buttons use these darker, AA-safe pairs in both themes. */
  --btn-primary-bg: #C22E00;       /* #fff on this = 5.70:1 (AA) */
  --btn-primary-bg-hover: #A82900; /* #fff on this = 7.04:1 (AA) */
  --accent-2: #8A2BE0;      /* on light: 5.70:1 on --bg, 6.00:1 on --surface */
  --on-accent-2: #FFFFFF;   /* ::selection ink; #fff on #8A2BE0 = 6.00:1 */
  --ok: #1B7F4B;
  --bad: #B3261E;
  /* Neither good nor bad: an outcome the system genuinely cannot determine.
     4.86:1 on its 14%-tinted chip, measured — above the 4.16:1 --ok already sits at. */
  --warn: #8A5A00;
  --ring: conic-gradient(from var(--ring-a, 0deg), #FF3D00, #FF2E88, #B437F5, #21C7FF, #FF3D00);
  --radius: 14px;
  --radius-lg: 24px;
  --shadow: 0 8px 30px rgba(45, 20, 90, .10);
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14111C;
    --surface: #1E1A2A;
    --ink: #F2EFF7;
    --muted: #A79FB5;
    --line: #322C42;
    --accent: #FF5A26;
    --accent-deep: #FF7A4D;
    /* --accent-deep is lighter in dark mode (link text on dark bg), so it is NOT
       usable as a white-label button bg; keep dedicated darker AA-safe pairs. */
    --btn-primary-bg: #C43600;       /* #fff on this = 5.42:1 (AA) */
    --btn-primary-bg-hover: #A82900; /* #fff on this = 7.04:1 (AA) */
    /* --accent-2 had no dark value, so the light purple stayed: 2.83:1 on --surface.
       It is the focus-visible ring and the plan grid's day number, so that was below
       both the 4.5:1 text bar and the 3:1 WCAG 2.2 non-text bar for a focus indicator.
       Lighter in dark mode for the same reason --accent-deep is. Measured on this
       palette: 6.68:1 as text on --surface, 7.33:1 as a ring on --bg, 5.08:1 on the
       16% chip tint that mixes it. */
    --accent-2: #BE8CF5;
    --on-accent-2: #1D1A27;   /* selection ink; #1D1A27 on #BE8CF5 = 6.72:1 */
    --ok: #4CC38A;
    --bad: #F2726A;
    --warn: #E0A33A;   /* 5.97:1 on its chip, matching --ok dark */
    --shadow: 0 8px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Lock page-level horizontal scroll on BOTH html and body. The gallery carousel's
   smooth autoplay scroll transiently expands the document's horizontal overflow
   (~13px) mid-transition — measured on documentElement — so the whole page could be
   swiped sideways every 5s on a phone. `overflow-x: clip` blocks it WITHOUT creating
   a scroll container (unlike `hidden`, it leaves overflow-y visible), so the sticky
   header and in-page anchor scrolling keep working; inner scrollers (the carousel)
   are unaffected. Old Safari (<16) ignores `clip` and keeps the prior behaviour. */
html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.9rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
a { color: var(--accent-deep); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
::selection { background: var(--accent-2); color: var(--on-accent-2); }

.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent-deep);
  margin: 0 0 .9em;
}

/* ---------- layout ---------- */
.wrap { max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
/* Narrow phones: trim gutters so 7 calendar cells still clear ~40px each. */
@media (max-width: 380px) { .wrap { padding-inline: 14px; } }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section-sub { color: var(--muted); max-width: 46ch; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 719px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .6rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
/* Unbounded is reserved for primary buttons (doc §3) */
.btn-primary { background: var(--btn-primary-bg); color: #fff; font-family: var(--font-display); font-weight: 500; }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--muted); }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus-visible { left: 0; }
/* Skip link sends focus to <main tabindex="-1"> so the next Tab starts inside it.
   <main> is a focus target, not a tab stop, so it shows no outline of its own. */
main[tabindex="-1"]:focus { outline: none; }

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-head {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.site-head-in {
  display: flex;
  align-items: center;
  gap: .25rem .6rem;
  padding-block: .5rem;
  /* keep clear of iPhone notch / rounded corners in landscape */
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  margin-right: auto;
  /* The wordmark is the only flexible element in the bar: it must be able to
     shrink (min-width:0) and ellipsize on phones narrower than its natural width,
     otherwise nowrap forces the whole header — and page — to a ~377px min-width,
     jamming the hamburger against the screen edge on small phones. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-cta, .nav-menu { flex-shrink: 0; }
/* Narrow phones: shrink brand + CTA so all three fit with room to spare. */
@media (max-width: 460px) {
  .site-head-in { gap: .25rem .4rem; }
  .brand { font-size: .95rem; }
  .nav-cta { padding: .4rem .8rem; font-size: .88rem; }
}
.brand-dot {
  width: .8em;
  height: .8em;
  border-radius: 50%;
  background: var(--ring);
  flex-shrink: 0;
}
.nav-cta { min-height: 44px; padding: .4rem 1.1rem; }

/* ----- CSS-only disclosure nav (no JS): mobile hamburger, desktop inline ----- */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bars::before { transform: translateY(-6px); }
.nav-toggle-bars::after { transform: translateY(4px); }
.nav-menu[open] > summary .nav-toggle-bars { background: transparent; }
.nav-menu[open] > summary .nav-toggle-bars::before { transform: rotate(45deg); }
.nav-menu[open] > summary .nav-toggle-bars::after { transform: rotate(-45deg) translateY(-1px); }
.site-nav {
  position: absolute;
  right: 0;
  top: calc(100% + .6rem);
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: .4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 1rem;
  z-index: 60;
}
.site-nav a:not(.btn),
.site-nav button.lang-switch {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .3rem .7rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:not(.btn):hover,
.site-nav button.lang-switch:hover { background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.site-nav a[aria-current="page"]:not(.btn) { color: var(--accent-deep); font-weight: 600; }
/* The switch is a link on a GET and a submit button on a POST re-render, where it
   carries the form across, so the two must look and sit identically. The rules above
   name both rather than restating their values here: a second copy of the padding,
   height and colour is a second thing to forget. A button inherits neither the page
   font nor a transparent background, which is all this adds. */
.lang-switch-form { display: contents; }
button.lang-switch { font-family: inherit; background: none; cursor: pointer; }
.lang-switch {
  margin-top: .25rem;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .9rem;
  letter-spacing: .06em;
}

.nav-wide { display: none; }
/* One navigation is exposed at a time, including without JavaScript. */
@media (min-width: 700px) {
  .nav-cta { order: 3; margin-left: .35rem; }
  .nav-menu { display: none; }
  .nav-wide { display: flex; order: 2; margin-left: auto; }
  .site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    padding: 0;
    gap: .1rem .15rem;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: .95rem;
  }
  .site-nav a:not(.btn),
  .site-nav button.lang-switch { color: var(--muted); }
  .site-nav a:not(.btn):hover,
  .site-nav button.lang-switch:hover { color: var(--ink); background: none; }
  .site-nav a[aria-current="page"]:not(.btn) { color: var(--ink); }
  .lang-switch { margin-top: 0; margin-left: .25rem; border-radius: 999px; font-size: .82rem; }
}

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  margin-top: clamp(2rem, 6vw, 4rem);
  font-size: .95rem;
}
.foot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 719px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand { margin: 0 0 .3em; }
.foot-tag { color: var(--muted); }
.foot-h {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .8em;
}
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: .45em; color: var(--muted); }
.foot-list a { color: var(--ink); text-decoration: none; }
.foot-list a:hover { text-decoration: underline; }
.foot-id { color: var(--muted); font-size: .85rem; margin: 0 0 .4em; }

/* ---------- hero ----------
   The product photograph carries the hero; no ring, glow or gradient behind it.
   Official press shots are cut out on white, so the plate is plain --surface
   and the image is contained rather than cropped. */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem); }
.hero-sub { color: var(--muted); font-size: 1.1rem; max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hero-shot {
  width: min(420px, 100%);
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 1.75rem);
}
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
@keyframes jbl-spin { to { transform: rotate(1turn); } }

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.stat-n {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.5vw, 1.9rem);
  white-space: nowrap;
}
.stat-l { color: var(--muted); font-size: .88rem; }

/* ---------- how-it-works steps (ring markers) ---------- */
.step-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ring);
  display: grid;
  place-items: center;
  margin-bottom: .9rem;
}
.step-ring::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
}
.step p { color: var(--muted); margin: 0; }

/* ---------- photo strip ---------- */
.photo-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 380px);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
}
.photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  scroll-snap-align: start;
}

/* ---------- trust ---------- */
.trust-block { max-width: 60ch; }
/* Press photography is cut out on white: plain plate, contained, no crop. */
.kit-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: .75rem;
}

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding-block: .9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--accent-deep);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); margin: 0 0 1rem; }

/* ---------- notices ---------- */
.notice {
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
  margin-block: 1rem;
}
.notice-info { border-left-color: var(--accent-2); }
.notice-error {
  border-left-color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 35%, var(--line));
  background: color-mix(in srgb, var(--bad) 7%, var(--surface));
}
.notice-success {
  border-left-color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}

/* ---------- tables ---------- */
.table-plain { width: 100%; border-collapse: collapse; }
.table-plain th, .table-plain td {
  text-align: left;
  padding: .7rem .5rem;
  border-bottom: 1px solid var(--line);
}
.table-plain th { font-weight: 600; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; margin-bottom: .35rem; }
.field { margin-bottom: 1.15rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  font: inherit;
  font-size: 1rem; /* ≥16px: no iOS zoom */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
textarea { resize: vertical; min-height: 7rem; }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--accent); }
.field-err { color: var(--bad); font-size: .9rem; margin: .35rem 0 0; }
/* honeypot — rendered off-screen, never display:none (bots check that) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
}
.cta-band .section-sub { margin-inline: auto; }
.cta-band .btn { margin-top: .75rem; }

/* ---------- calendar (§7) ----------
   Fits 360px viewports: wrap pad 20px ×2 + 6 gaps ×2px → 44px cells. */
.cal { max-width: 420px; margin-inline: auto; position: relative; }
/* Bypass for the day grid. Positioned against .cal, not the document, so focusing it
   does not throw the viewport back to the top of the page the way .skip-link would. */
.cal-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 5;
  background: var(--surface);
  color: var(--ink);
  padding: .6rem 1rem;
  border-radius: var(--radius);
}
.cal-skip:focus-visible { left: 0; }
.cal-skip-target:focus { outline: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.cal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0;
  text-align: center;
}
.cal-nav {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.cal-nav:hover:not(:disabled) { border-color: var(--muted); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  padding-block: .4rem;
}
.cal-day {
  position: relative;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.cal-day.is-empty { border: 0; background: transparent; cursor: default; }
.cal-day.is-free:hover { border-color: var(--accent-2); }
.cal-day.is-busy {
  background: color-mix(in srgb, var(--bad) 7%, var(--surface));
  color: var(--muted);
  text-decoration: line-through;
  cursor: not-allowed;
}
.cal-day.is-past,
/* Beyond the advance window: dimmed like a past day, NOT struck through like a booked
   one. The strike-through is the visual claim that the date is taken, and it is not.
   A gap shorter than the minimum stay is unbookable for the same kind of reason — a
   rule, not an occupancy — so it is dimmed the same way. */
.cal-day.is-short,
.cal-day.is-toofar {
  background: transparent;
  color: var(--muted);
  opacity: .45;
  cursor: default;
}
.cal-day.is-sel {
  background: color-mix(in srgb, var(--accent-2) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
  font-weight: 600;
}
/* range endpoints: 2px light-ring border (signature motif, place 2 of 3) —
   gradient-border trick: surface fill clipped to padding-box, ring to border-box */
.cal-day.is-edge {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--ring) border-box;
  font-weight: 700;
}
.cal-hint { min-height: 1.6em; color: var(--muted); font-size: .92rem; margin: .6rem 0 .2rem; }
.cal-hint.is-err { color: var(--bad); }
.cal-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: .4rem 0 0;
  padding: 0;
  font-size: .85rem;
  color: var(--muted);
}
.cal-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.cal-dot { width: 14px; height: 14px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); }
.cal-dot.dot-busy { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.cal-dot.dot-sel {
  background: color-mix(in srgb, var(--accent-2) 16%, var(--surface));
  border-color: var(--accent-2);
}
.cal-cta { position: sticky; bottom: .75rem; margin-top: 1.1rem; text-align: center; }

/* Notification history: readable rows, with full-width addresses on small screens. */
.notification-list { margin-block: 1.5rem; border-top: 1px solid var(--line, #ddd); }
.notification { padding-block: 1.5rem; border-bottom: 1px solid var(--line, #ddd); }
.notification > .ops-h { margin: 0 0 .4rem; }
.notification > .ops-hint { margin-top: 0; }
.notification-meta { display: grid; gap: .8rem 1.5rem; margin-block: 1rem; }
.notification-meta dt { color: var(--muted); font-size: .88rem; }
.notification-meta dd { margin: .15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.notification form label { display: block; margin-bottom: .8rem; }
@media (min-width: 700px) {
  .notification-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .faq-item summary::after { transition: none; }
}
@media print {
  .skip-link, .cal-skip, .site-nav, .btn, .cal-nav, .cal-cta, .hero-cta { display: none !important; }
  body { background: #fff; color: #000; }
  .site-head { position: static; background: #fff; }
  .section { padding-block: 1.2rem; }
  .card, .cta-band, .stat { box-shadow: none; }
  a { color: #000; }
}