/* ============================================================
   ChairHog — custom styles on top of the Valex template.
   This is the ONLY custom stylesheet. Never edit styles.min.css.
   Load after styles.min.css:
     <link href="../assets/css/chairhog.css" rel="stylesheet">
   ============================================================ */

/* ------------------------------------------------------------
   1. Brand palette
   ------------------------------------------------------------
   Master brand colours (brand-kit/README.md):
     green #98C11D · ink #23272B · dark #1E1F20

   The brand green is a bright yellow-green: white text on it is
   only 2.1:1, so it cannot drive the template's --primary, whose
   solid surfaces (.btn-primary, .bg-primary + .text-fixed-white)
   hardcode white text. The palette therefore splits in two:

     --primary-rgb  #5E7D0E  deep green for SOLID surfaces
                             white text 4.76:1 (WCAG AA) and
                             as text on white 4.76:1 (AA)
     --ch-green     #98C11D  the true brand green, used where it
                             is legible: on dark surfaces (7.7:1),
                             as a fill behind ink text (7.2:1),
                             and as the primary chart series
   ------------------------------------------------------------ */

:root {
  /* brand masters */
  --ch-green: #98C11D;
  --ch-green-rgb: 152, 193, 29;
  --ch-green-deep: #5E7D0E;
  --ch-ink: #23272B;
  --ch-dark: #1E1F20;

  /* drive the template's primary from the brand */
  --primary-rgb: 94, 125, 14;
}

/* Bright brand green reads well on dark surfaces, so promote it
   to the text/icon accent once the app is in dark mode. Solid
   surfaces keep --primary-rgb so .btn-primary's white text stays
   legible in both modes. */
[data-theme-mode="dark"] .text-primary,
[data-theme-mode="dark"] a.text-primary:hover {
  color: var(--ch-green) !important;
}

/* Brand-green accent helpers. Always pair the green fill with ink
   text — never white. */
.bg-ch-green {
  background-color: var(--ch-green) !important;
  color: var(--ch-ink) !important;
}

.text-ch-green {
  color: var(--ch-green-deep) !important;
}

[data-theme-mode="dark"] .text-ch-green {
  color: var(--ch-green) !important;
}

/* ------------------------------------------------------------
   2. Booking status colours
   ------------------------------------------------------------
   One vocabulary shared by the dashboard, today's service list,
   the bookings table and the calendar, so a status is the same
   colour everywhere. Soft tints (10% fill + saturated text) keep
   contrast in both light and dark mode.
   ------------------------------------------------------------ */

:root {
  --ch-status-booked-rgb: 1, 98, 232;     /* confirmed, not yet arrived */
  --ch-status-seated-rgb: 94, 125, 14;    /* in service now             */
  --ch-status-finished-rgb: 95, 109, 136; /* table turned               */
  --ch-status-cancelled-rgb: 238, 51, 94; /* guest cancelled            */
  --ch-status-noshow-rgb: 253, 126, 20;   /* never arrived              */
}

[data-theme-mode="dark"] {
  /* lift the darker hues so they stay readable on the dark body */
  --ch-status-seated-rgb: var(--ch-green-rgb);
  --ch-status-finished-rgb: 148, 160, 182;
}

.ch-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border-radius: .25rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.ch-status::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.ch-status-booked {
  background-color: rgba(var(--ch-status-booked-rgb), .12);
  color: rgb(var(--ch-status-booked-rgb));
}

.ch-status-seated {
  background-color: rgba(var(--ch-status-seated-rgb), .14);
  color: rgb(var(--ch-status-seated-rgb));
}

.ch-status-finished {
  background-color: rgba(var(--ch-status-finished-rgb), .14);
  color: rgb(var(--ch-status-finished-rgb));
}

.ch-status-cancelled {
  background-color: rgba(var(--ch-status-cancelled-rgb), .12);
  color: rgb(var(--ch-status-cancelled-rgb));
}

.ch-status-noshow {
  background-color: rgba(var(--ch-status-noshow-rgb), .14);
  color: rgb(var(--ch-status-noshow-rgb));
}

/* ------------------------------------------------------------
   3. Chrome tweaks
   ------------------------------------------------------------ */

/* The header site switcher shows a label next to its icon, so it
   needs a little more breathing room than an icon-only link. */
.ch-site-switcher .header-link {
  white-space: nowrap;
}

/* Keep focus rings visible on the brand green for keyboard users. */
.btn:focus-visible,
.header-link:focus-visible,
.side-menu__item:focus-visible {
  outline: 2px solid var(--ch-green);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   4. Floor designer (floor-designer.html)
   ------------------------------------------------------------
   The floor is a fixed 1000x720 design space scaled to fit its
   container, so table x/y coordinates in the mock data mean the
   same thing at every screen size.
   ------------------------------------------------------------ */

.ch-floor {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 720;
  border: 1px solid var(--default-border);
  border-radius: .5rem;
  background-color: var(--custom-white);
  background-image:
    linear-gradient(to right, rgba(128, 128, 128, .12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(128, 128, 128, .12) 1px, transparent 1px);
  background-size: 5% 6.94%;
  overflow: hidden;
  container-type: inline-size;
}

.ch-table {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ch-green-deep);
  background-color: rgba(var(--ch-green-rgb), .16);
  color: var(--ch-ink);
  cursor: grab;
  user-select: none;
  line-height: 1.1;
  text-align: center;
  transition: box-shadow .15s ease, border-color .15s ease;
}

[data-theme-mode="dark"] .ch-table {
  color: rgba(255, 255, 255, .9);
  border-color: var(--ch-green);
  background-color: rgba(var(--ch-green-rgb), .22);
}

.ch-table:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.ch-table:focus-visible,
.ch-table.is-selected {
  outline: none;
  border-color: var(--ch-green);
  box-shadow: 0 0 0 3px rgba(var(--ch-green-rgb), .5);
}
.ch-table.is-dragging { cursor: grabbing; opacity: .75; }

/* Shapes: round tables are circles, rectangles keep a soft corner. */
.ch-table[data-shape="round-sm"],
.ch-table[data-shape="round-lg"] { border-radius: 50%; }
.ch-table[data-shape="square"],
.ch-table[data-shape="rect"] { border-radius: .375rem; }

.ch-table .ch-table-name { font-weight: 600; font-size: clamp(9px, 1.4cqw, 14px); }
.ch-table .ch-table-seats { font-size: clamp(8px, 1.1cqw, 12px); opacity: .75; }

/* Palette of draggable shapes */
.ch-palette { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }

.ch-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .75rem .5rem;
  border: 1px dashed var(--default-border);
  border-radius: .375rem;
  background: none;
  color: inherit;
  cursor: grab;
  font-size: .75rem;
}

.ch-palette-item:hover,
.ch-palette-item:focus-visible {
  border-color: var(--ch-green);
  background-color: rgba(var(--ch-green-rgb), .1);
}

.ch-palette-swatch {
  border: 2px solid var(--ch-green-deep);
  background-color: rgba(var(--ch-green-rgb), .18);
}
[data-theme-mode="dark"] .ch-palette-swatch { border-color: var(--ch-green); }
.ch-palette-swatch[data-shape="round-sm"],
.ch-palette-swatch[data-shape="round-lg"] { border-radius: 50%; }
.ch-palette-swatch[data-shape="square"],
.ch-palette-swatch[data-shape="rect"] { border-radius: .25rem; }

/* ------------------------------------------------------------
   5. Guest booking widget (widget.html)
   ------------------------------------------------------------
   This is the only ChairHog surface a guest ever sees, and it sits
   inside the client's own website. It therefore does NOT use the
   admin theme: its tokens are the ones the AI style scan produced
   for The Copper Fork (see widget-style.html), so the two pages
   agree. In the real product this block is generated per client.

   Design is mobile-first: the layout is built for 375px and simply
   gains breathing room above 480px.
   ------------------------------------------------------------ */

.ch-widget {
  /* tokens the style scan produced for this client */
  --w-accent: #7A4B2A;
  --w-accent-ink: #FFFFFF;
  --w-surface: #FBF9F6;
  --w-card: #FFFFFF;
  --w-text: #2B2621;
  --w-muted: #8A7F73;
  --w-border: #E2DAD0;
  --w-radius: 8px;
  --w-serif: Georgia, "Times New Roman", serif;
  --w-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  min-height: 100dvh;
  margin: 0;
  background: var(--w-surface);
  color: var(--w-text);
  font-family: var(--w-sans);
  -webkit-font-smoothing: antialiased;
}

/* A client with a dark site gets the dark variant of the same palette. */
@media (prefers-color-scheme: dark) {
  .ch-widget {
    --w-surface: #1A1613;
    --w-card: #241E1A;
    --w-text: #F2EBE4;
    --w-muted: #A9998A;
    --w-border: #3A302A;
    --w-accent: #C08457;
    --w-accent-ink: #1A1613;
  }
}

.ch-widget-shell { max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; }

.ch-widget-head { text-align: center; margin-bottom: 20px; }
.ch-widget-head h1 { font-family: var(--w-serif); font-size: 22px; font-weight: 600; margin: 0 0 2px; }
.ch-widget-head p { font-size: 13px; color: var(--w-muted); margin: 0; }

/* Progress: a plain bar plus a step count, not a numbered stepper */
.ch-widget-progress { height: 3px; background: var(--w-border); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.ch-widget-progress span { display: block; height: 100%; background: var(--w-accent); transition: width .35s cubic-bezier(.16,1,.3,1); }
.ch-widget-stepline { display: flex; justify-content: space-between; font-size: 11px; color: var(--w-muted); margin-bottom: 18px; }

.ch-widget-card {
  background: var(--w-card);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 18px 16px;
}

.ch-widget h2 { font-family: var(--w-serif); font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.ch-widget .ch-widget-hint { font-size: 12.5px; color: var(--w-muted); margin: 0 0 16px; }

/* Option rows (sites, tables) */
.ch-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 1px solid var(--w-border); border-radius: var(--w-radius);
  padding: 12px 14px; margin-bottom: 8px; text-align: left; color: inherit;
  font: inherit; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.ch-opt:hover { border-color: var(--w-accent); }
.ch-opt[aria-pressed="true"] { border-color: var(--w-accent); background: color-mix(in srgb, var(--w-accent) 8%, transparent); }
.ch-opt strong { display: block; font-size: 14px; font-weight: 600; }
.ch-opt small { display: block; font-size: 12px; color: var(--w-muted); }

/* Chips (party size, time slots) */
.ch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-chip {
  min-width: 56px; padding: 10px 12px; border: 1px solid var(--w-border); border-radius: var(--w-radius);
  background: none; color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; text-align: center;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ch-chip:hover:not(:disabled) { border-color: var(--w-accent); }
.ch-chip[aria-pressed="true"] { background: var(--w-accent); border-color: var(--w-accent); color: var(--w-accent-ink); }
.ch-chip:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.ch-slot-group { margin-bottom: 16px; }
.ch-slot-group h3 { font-size: 12px; font-weight: 600; color: var(--w-muted); margin: 0 0 8px; }

/* Fields */
.ch-field { margin-bottom: 14px; }
.ch-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.ch-field input, .ch-field textarea, .ch-field select {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 14px;
  color: var(--w-text); background: var(--w-card);
  border: 1px solid var(--w-border); border-radius: var(--w-radius);
}
.ch-field input:focus-visible, .ch-field textarea:focus-visible, .ch-field select:focus-visible {
  outline: 2px solid var(--w-accent); outline-offset: 1px; border-color: var(--w-accent);
}
.ch-field .ch-help { font-size: 11.5px; color: var(--w-muted); margin: 4px 0 0; }
.ch-field .ch-error { font-size: 11.5px; color: #B3261E; margin: 4px 0 0; }
@media (prefers-color-scheme: dark) { .ch-field .ch-error { color: #F2B8B5; } }
.ch-field.is-invalid input, .ch-field.is-invalid textarea { border-color: #B3261E; }

.ch-check { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; margin-bottom: 14px; }
.ch-check input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--w-accent); }

/* Buttons */
.ch-btn {
  width: 100%; padding: 13px; border: 0; border-radius: var(--w-radius);
  background: var(--w-accent); color: var(--w-accent-ink);
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: transform .1s ease, opacity .15s ease;
}
.ch-btn:active { transform: translateY(1px); }
.ch-btn:disabled { opacity: .4; cursor: not-allowed; }
.ch-btn-quiet {
  background: none; color: var(--w-muted); border: 1px solid var(--w-border);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.ch-btn-row { display: flex; gap: 8px; margin-top: 16px; }
.ch-btn-row .ch-btn { flex: 1; }
.ch-btn-row .ch-btn-quiet { flex: 0 0 96px; }

/* Summary strip that follows the guest down the flow */
.ch-summary {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 12px; color: var(--w-muted); margin-bottom: 14px;
}
.ch-summary b { color: var(--w-text); font-weight: 600; }

/* Mini floor plan for the optional table pick */
.ch-mini-floor {
  position: relative; width: 100%; aspect-ratio: 1000 / 720;
  border: 1px solid var(--w-border); border-radius: var(--w-radius);
  background: var(--w-surface); overflow: hidden; margin-bottom: 12px;
}
.ch-mini-table {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--w-border); background: var(--w-card); color: var(--w-text);
  font-size: 9px; font-weight: 600; cursor: pointer; padding: 0;
}
.ch-mini-table[data-shape="round-sm"], .ch-mini-table[data-shape="round-lg"] { border-radius: 50%; }
.ch-mini-table[data-shape="square"], .ch-mini-table[data-shape="rect"] { border-radius: 4px; }
.ch-mini-table:disabled { opacity: .3; cursor: not-allowed; }
.ch-mini-table[aria-pressed="true"] { background: var(--w-accent); border-color: var(--w-accent); color: var(--w-accent-ink); }
.ch-mini-table:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }

/* Confirmation */
.ch-done { text-align: center; }
.ch-done-mark {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--w-accent) 14%, transparent); color: var(--w-accent); font-size: 24px;
}
.ch-ref {
  display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; letter-spacing: .08em;
  background: var(--w-surface); border: 1px dashed var(--w-border);
  border-radius: var(--w-radius); padding: 7px 12px; margin: 4px 0 16px;
}
.ch-detail-list { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.ch-detail-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--w-border); font-size: 13px; }
.ch-detail-list li:last-child { border-bottom: 0; }
.ch-detail-list span { color: var(--w-muted); }

.ch-widget-foot { text-align: center; font-size: 11px; color: var(--w-muted); margin-top: 20px; }
.ch-widget-foot a { color: inherit; }

/* Preview-only bar: hidden when the widget is inside an iframe.
   The [hidden] rule must come after (and match) .ch-preview-bar, otherwise
   this class's `display: flex` overrides the browser's [hidden] default and
   the bar leaks into the embedded copy. */
.ch-preview-bar {
  background: var(--ch-dark); color: #fff; font-size: 12px;
  padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ch-preview-bar[hidden] { display: none; }
.ch-preview-bar a { color: var(--ch-green); }

/* Each step moves focus to its heading so screen readers announce the change.
   That focus is programmatic, so only show a ring for real keyboard users. */
.ch-widget h2:focus:not(:focus-visible) { outline: none; }
.ch-widget h2:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ch-widget-progress span, .ch-opt, .ch-chip, .ch-btn { transition: none; }
}

/* ------------------------------------------------------------
   6. Fake client website (embed-preview.html)
   ------------------------------------------------------------
   A stand-in for the restaurant's own site, so the client can see
   the widget in context. Its palette matches the one the AI style
   scan produced, not the ChairHog admin theme.
   ------------------------------------------------------------ */

.ch-fakesite {
  border: 1px solid var(--default-border);
  border-radius: .5rem;
  overflow: hidden;
  background: #FBF9F6;
  color: #2B2621;
  font-family: Georgia, "Times New Roman", serif;
}

.ch-fakesite-nav {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  padding: .875rem 1.25rem; border-bottom: 1px solid #E2DAD0;
}
.ch-fakesite-brand { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }
.ch-fakesite-nav nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.ch-fakesite-nav a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .78rem; color: #8A7F73; text-decoration: none;
}
.ch-fakesite-nav a:hover { color: #7A4B2A; }
.ch-fakesite-nav a.is-cta {
  color: #fff; background: #7A4B2A; padding: .3rem .7rem; border-radius: 8px;
}

.ch-fakesite-hero { padding: 2.25rem 1.25rem 1.5rem; max-width: 46rem; }
.ch-fakesite-kicker {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #8A7F73; margin: 0 0 .5rem;
}
.ch-fakesite-hero h2 { font-size: clamp(1.35rem, 3.2vw, 2rem); line-height: 1.2; margin: 0 0 .6rem; font-weight: 600; }
.ch-fakesite-lede {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .875rem; color: #6B6158; margin: 0; max-width: 34rem; line-height: 1.6;
}

.ch-fakesite-embed { padding: 0 1.25rem 1.25rem; }
.ch-fakesite-embed iframe {
  width: 100%; height: 640px; border: 1px solid #E2DAD0; border-radius: 8px; background: #FBF9F6;
  display: block;
}

.ch-fakesite-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: .875rem 1.25rem; border-top: 1px solid #E2DAD0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .72rem; color: #8A7F73;
}

/* ------------------------------------------------------------
   7. Authentication pages (Auth/*, _AuthLayout.cshtml)
   ------------------------------------------------------------
   Split screen: a dark brand panel on the left (hidden below lg,
   where the form takes the full width) and the form on the right.

   The brand panel is one of the few places the true brand green
   is used at full strength — it sits on --ch-dark at 7.7:1, well
   clear of AA. The form side stays on template tokens so dark
   mode comes for free.
   ------------------------------------------------------------ */

.ch-auth {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- brand panel ---- */
.ch-auth__aside {
  display: none;
  flex: 0 0 42%;
  max-width: 42%;
  position: relative;
  padding: 3rem;
  background-color: var(--ch-dark);
  color: #fff;
  overflow: hidden;
}

@media (min-width: 992px) {
  .ch-auth__aside { display: flex; flex-direction: column; }
}

/* Soft green glow, purely decorative. */
.ch-auth__aside::after {
  content: "";
  position: absolute;
  inset: auto -30% -35% auto;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ch-green-rgb), .22) 0%, rgba(var(--ch-green-rgb), 0) 70%);
  pointer-events: none;
}

.ch-auth__aside-inner { position: relative; z-index: 1; margin-top: auto; }

/* The wordmark, not the stacked lockup: chairhog-logo-*.svg is nearly square
   (1983x1936) so at header size its wordmark is illegible. The wordmark file is
   3.75:1, matching brand-logos/desktop-logo.png that the admin header uses. */
.ch-auth__logo img { height: 1.75rem; width: auto; }

.ch-auth__pitch {
  margin: 0 0 .75rem;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 600;
  color: #fff;
  max-width: 22ch;
}

.ch-auth__pitch em { font-style: normal; color: var(--ch-green); }

.ch-auth__sub { color: rgba(255, 255, 255, .72); font-size: .875rem; max-width: 44ch; }

.ch-auth__points { list-style: none; margin: 2rem 0 0; padding: 0; }

.ch-auth__points li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-bottom: .875rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .8);
}

.ch-auth__points i { color: var(--ch-green); font-size: 1rem; line-height: 1.25; }

/* ---- form side ---- */
.ch-auth__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: rgb(var(--body-bg-rgb));
}

.ch-auth__body {
  margin: auto;
  width: 100%;
  max-width: 26rem;
}

/* The lockup above the form, shown only when the brand panel is not. */
.ch-auth__mark { margin-bottom: 1.5rem; text-align: center; }
.ch-auth__mark img { height: 1.75rem; width: auto; }

@media (min-width: 992px) { .ch-auth__mark { display: none; } }

/* Anchors the form against the body tint, and matches the card language the
   rest of the app is built from. */
.ch-auth__card {
  padding: 2rem;
  border: 1px solid var(--default-border);
  border-radius: .75rem;
  background-color: var(--custom-white);
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .04);
}

@media (max-width: 575.98px) {
  .ch-auth__card { padding: 1.5rem; border: 0; background-color: transparent; box-shadow: none; }
}

.ch-auth__title { font-size: 1.375rem; font-weight: 600; margin-bottom: .25rem; }
.ch-auth__lede { color: var(--text-muted); font-size: .8125rem; margin-bottom: 1.75rem; }

.ch-auth__foot {
  margin-top: 1.75rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--text-muted);
}

.ch-auth__legal {
  padding-top: 1rem;
  text-align: center;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ---- the account being signed in to, shown on the password/MFA steps ---- */
.ch-auth__who {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .875rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--default-border);
  border-radius: .5rem;
  background-color: var(--primary005);
  font-size: .8125rem;
}

.ch-auth__who i { color: rgb(var(--primary-rgb)); font-size: 1rem; }

/* ---- password field with a reveal button ---- */
.ch-pass { position: relative; }
.ch-pass .form-control { padding-inline-end: 2.75rem; }

.ch-pass__toggle {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: 100%;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.ch-pass__toggle:hover { color: rgb(var(--primary-rgb)); }

/* ---- one-time code ---- */
.ch-otp {
  font-size: 1.5rem;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;   /* re-centres: letter-spacing pads the right of the last digit */
  font-variant-numeric: tabular-nums;
  padding-block: .625rem;
}

/* ---- MFA setup: QR code ---- */
.ch-qr {
  display: block;
  width: 100%;
  max-width: 12.5rem;
  height: auto;
  margin: 0 auto;
  padding: .75rem;
  border: 1px solid var(--default-border);
  border-radius: .625rem;
  background-color: #fff;   /* the QR needs a white quiet zone in both themes */
}

.ch-secret {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 1px dashed var(--default-border);
  border-radius: .5rem;
  background-color: var(--primary005);
}

.ch-secret code {
  flex: 1 1 auto;
  font-size: .8125rem;
  letter-spacing: .08em;
  word-break: break-all;
  color: var(--default-text-color);
}

/* ---- steps ---- */
.ch-steps { counter-reset: ch-step; list-style: none; margin: 0 0 1.25rem; padding: 0; }

.ch-steps li {
  counter-increment: ch-step;
  position: relative;
  padding-inline-start: 2rem;
  margin-bottom: .625rem;
  font-size: .8125rem;
  color: var(--text-muted);
}

.ch-steps li::before {
  content: counter(ch-step);
  position: absolute;
  inset-inline-start: 0;
  top: -.0625rem;
  width: 1.375rem;
  height: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgb(var(--primary-rgb));
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
}


/* ==========================================================================
   8. Icon-font fallbacks
   --------------------------------------------------------------------------
   styles.min.css draws a few pseudo-element glyphs from icon webfonts that
   ChairHog does not ship (see assets/css/icons.css for the five it does).
   Without these overrides those glyphs render as missing-character boxes.

   Dropping the fonts was deliberate: tabler-icons alone is ~68MB and no page
   uses a ti-* class. Only these CSS-internal glyph references needed cover.
   ========================================================================== */

/* Breadcrumb divider — Valex uses tabler glyph \ea65. Every page header has
   one, so this is the visible one. Plain "»" needs no webfont at all. */
.breadcrumb-item + .breadcrumb-item::before,
.page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-example1 .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-style1 .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-style2 .breadcrumb-item + .breadcrumb-item::before {
    content: "\00bb" !important;   /* » */
    font-family: inherit !important;
}

/* Accordion chevrons — Valex uses remixicon \ea78 / \ea13 / \f1af. No ChairHog
   page uses an accordion yet; these keep it correct if one is added, using
   Bootstrap Icons, which ChairHog does ship. */
.accordion-button::after {
    content: "\f282" !important;                 /* bi-chevron-down */
    font-family: "bootstrap-icons" !important;
}
.accordion.accordion-customicon1 .accordion-button::after {
    content: "\f4fe" !important;                 /* bi-plus */
    font-family: "bootstrap-icons" !important;
}
.accordion.accordion-customicon1 .accordion-button:not(.collapsed)::after {
    content: "\f2ea" !important;                 /* bi-dash */
    font-family: "bootstrap-icons" !important;
}


/* ==========================================================================
   9. Public website (Marketing/*, _MarketingLayout.cshtml)
   --------------------------------------------------------------------------
   www.chairhog.com — the landing page and the legal pages. This is the only
   part of ChairHog a person can read without signing in, so it is deliberately
   not the admin: wider measure, larger type, no cards-in-a-grid density.

   It is a fixed LIGHT design (the layout pins data-theme-mode="light"), so
   nothing here needs a [data-theme-mode="dark"] counterpart. The dark bands
   are the design, not the theme: --ch-dark grounds the hero, the closing call
   to action and the footer, and those are the three places the true brand
   green is used at full strength, where it clears AA on dark (7.7:1).

   Everything is prefixed .ch-site- so it can never collide with the admin.
   ========================================================================== */

.ch-site {
  background-color: var(--custom-white);
  color: var(--default-text-color);
  /* The admin runs at 14px, which is right for a dense dashboard and wrong for
     a page someone reads on a phone. 16px is the mobile-legibility floor. */
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- shell ---- */
.ch-site-container {
  width: 100%;
  max-width: 71.25rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.ch-site-container--narrow { max-width: 48rem; }

/* Keyboard users get to the content without tabbing the whole menu. */
/* Hidden by moving it UP, never sideways: an element parked at a negative
   inline offset still counts as page content on some engines and can widen the
   document. Vertical is always safe. */
.ch-site-skip {
  position: absolute;
  inset-inline-start: .75rem;
  top: -4rem;
  z-index: 1080;
  padding: .625rem 1rem;
  border-radius: .375rem;
  background-color: var(--ch-dark);
  color: #fff;
  font-size: .875rem;
  text-decoration: none;
}

.ch-site-skip:focus { top: .5rem; color: #fff; }

/* ---- header ---- */
.ch-site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Only once the page has moved — a border under a header sitting on the very
   top of the hero looks like a mistake. Toggled by chairhog-marketing.js. */
.ch-site-header.is-scrolled {
  border-bottom-color: var(--default-border);
  box-shadow: 0 .125rem .75rem rgba(3, 27, 78, .06);
}

.ch-site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.ch-site-brand { display: inline-flex; align-items: center; margin-inline-end: auto; }
.ch-site-brand img { height: 1.75rem; width: auto; }

.ch-site-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;    /* 44px -- the touch-target floor */
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--default-border);
  border-radius: .375rem;
  background: none;
  color: var(--default-text-color);
  font-size: 1.25rem;
}

.ch-site-nav { flex-basis: 100%; }

.ch-site-nav__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.ch-site-nav__list a {
  display: block;
  padding: .5rem 0;
  color: var(--default-text-color);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
}

.ch-site-nav__list a:hover { color: rgb(var(--primary-rgb)); }

.ch-site-nav__actions {
  display: flex;
  gap: .5rem;
  margin: 1rem 0;
}

.ch-site-nav__actions .btn { flex: 1 1 auto; }

@media (min-width: 992px) {
  /* Beat .collapse{display:none} — above lg the menu is always on show and the
     burger is gone, so Bootstrap's collapse never runs. */
  .ch-site-nav.collapse:not(.show) { display: flex !important; }

  /* Brand hard left, the menu beside it, the two buttons hard right. */
  .ch-site-nav {
    display: flex;
    flex: 1 1 auto;
    flex-basis: auto;
    align-items: center;
    gap: 2rem;
  }

  .ch-site-nav__actions { margin-inline-start: auto; }

  .ch-site-burger { display: none; }
  .ch-site-brand { margin-inline-end: 0; }
  .ch-site-nav__list { flex-direction: row; gap: 1.75rem; margin: 0; }
  .ch-site-nav__list a { padding: 0; font-size: .875rem; }
  .ch-site-nav__actions { margin-block: 0; }
  .ch-site-nav__actions .btn { flex: 0 0 auto; }
}

/* ---- shared section furniture ---- */
.ch-site-section { padding-block: 3.5rem; }

.ch-site-section--tint { background-color: rgb(var(--body-bg-rgb)); }

@media (min-width: 768px) {
  .ch-site-section { padding-block: 5rem; }
}

.ch-site-eyebrow {
  margin-bottom: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ch-green-deep);
}

.ch-site-heading {
  max-width: 44rem;
  margin: 0 auto 2.75rem;
  text-align: center;
}

.ch-site-heading h2 {
  margin-bottom: .75rem;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ch-site-heading p { margin-bottom: 0; color: var(--text-muted); font-size: 1.0625rem; }

/* Bootstrap's default .btn lands at ~34px, under the 44px touch-target floor,
   and a marketing page is read on a phone more often than not. This puts a
   floor under every button here without disturbing the admin's denser buttons. */
.ch-site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
}

/* A light-on-dark button for the bands where .btn-outline-primary would
   disappear. Never filled — the filled button on a dark band is .btn-primary. */
.ch-site-btn-ghost {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  background-color: transparent;
}

.ch-site-btn-ghost:hover,
.ch-site-btn-ghost:focus-visible {
  border-color: var(--ch-green);
  background-color: rgba(255, 255, 255, .08);
  color: #fff;
}

/* Green ticks, used by the widget section and the price card. */
.ch-site-ticks { list-style: none; margin: 0 0 1.75rem; padding: 0; }

.ch-site-ticks li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-bottom: .75rem;
  font-size: 1rem;
  line-height: 1.5;
}

.ch-site-ticks i {
  flex-shrink: 0;
  margin-top: .1875rem;
  color: var(--ch-green-deep);
  font-size: 1rem;
}

/* ---- hero ---- */
.ch-site-hero {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background-color: var(--ch-dark);
  color: #fff;
}

/* Decorative glow, the same one the sign-in panel uses. */
.ch-site-hero::after {
  content: "";
  position: absolute;
  inset: -20% -25% auto auto;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ch-green-rgb), .18) 0%, rgba(var(--ch-green-rgb), 0) 70%);
  pointer-events: none;
}

.ch-site-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  align-items: center;
}

.ch-site-hero .ch-site-eyebrow { color: var(--ch-green); }

.ch-site-hero__title {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 1.35rem + 3vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
}

.ch-site-hero__title em { font-style: normal; color: var(--ch-green); }

.ch-site-hero__lede {
  max-width: 34rem;
  margin-bottom: 2rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

.ch-site-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.ch-site-hero__points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  font-size: .875rem;
  color: rgba(255, 255, 255, .78);
}

.ch-site-hero__points li { display: flex; align-items: center; gap: .4375rem; }
.ch-site-hero__points i { color: var(--ch-green); }

@media (min-width: 992px) {
  .ch-site-hero { padding-block: 5.5rem; }
  .ch-site-hero__inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---- hero product illustration ----
   Drawn in markup rather than shipped as a screenshot: it never goes stale as
   the app changes, it costs no bytes, and it stays sharp at any density. It is
   aria-hidden in the view — everything it shows is said in the copy. */
.ch-site-hero__visual { position: relative; }

.ch-site-preview {
  border-radius: .875rem;
  overflow: hidden;
  background-color: #fff;
  color: var(--ch-ink);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
}

.ch-site-preview__bar {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .75rem 1rem;
  background-color: #f4f5f7;
  border-bottom: 1px solid #e6e8ec;
}

.ch-site-preview__bar span {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: #cdd2da;
}

.ch-site-preview__bar p {
  margin: 0 0 0 .75rem;
  font-size: .75rem;
  font-weight: 500;
  color: #6b7280;
}

.ch-site-preview__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #eef0f3;
}

.ch-site-preview__stats div { padding: 1rem; text-align: center; }
.ch-site-preview__stats div + div { border-inline-start: 1px solid #eef0f3; }

.ch-site-preview__stats strong {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ch-ink);
}

.ch-site-preview__stats span { font-size: .6875rem; color: #6b7280; }

.ch-site-preview__list { list-style: none; margin: 0; padding: .5rem; }

.ch-site-preview__list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border-radius: .5rem;
  font-size: .8125rem;
}

.ch-site-preview__list li:nth-child(odd) { background-color: #fafbfc; }

.ch-site-preview__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ch-ink);
}

.ch-site-preview__who {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #55606f;
}

.ch-site-preview__who strong { color: var(--ch-ink); font-weight: 600; }

/* The "a booking just came in" card, tucked against the lower corner. Kept
   inside the container's own padding so it can never widen the page. */
.ch-site-preview__float {
  position: absolute;
  inset-inline-end: -1rem;
  bottom: -2.75rem;   /* mostly below the card: it must not sit on a status chip */
  padding: .75rem 1rem;
  border-radius: .625rem;
  border-inline-start: 3px solid var(--ch-green);
  background-color: #fff;
  box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .28);
}

.ch-site-preview__float-title {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ch-ink);
}

.ch-site-preview__float-body { margin: 0; font-size: .6875rem; color: #6b7280; }

@media (max-width: 575.98px) {
  .ch-site-preview__float { display: none; }
}

/* ---- how it works ---- */
.ch-site-steps {
  list-style: none;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.ch-site-steps li {
  padding: 1.75rem;
  border: 1px solid var(--default-border);
  border-radius: .875rem;
  background-color: var(--custom-white);
}

.ch-site-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: var(--ch-green);
  color: var(--ch-ink);
  font-weight: 700;
}

.ch-site-steps h3 { margin-bottom: .5rem; font-size: 1.125rem; font-weight: 600; }
.ch-site-steps p { margin-bottom: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.65; }

@media (min-width: 768px) {
  .ch-site-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---- two-column section (the widget) ---- */
.ch-site-split { display: grid; gap: 2.5rem; align-items: center; }

/* A grid item's min-width is auto, so the code block below would refuse to
   shrink past its longest line and widen the whole page on a phone. This lets
   it shrink; the <pre> then scrolls inside its own box. */
.ch-site-split > * { min-width: 0; }

.ch-site-split__copy h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ch-site-split__copy > p { margin-bottom: 1.75rem; color: var(--text-muted); font-size: 1rem; line-height: 1.65; }

@media (min-width: 992px) {
  .ch-site-split { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.ch-site-code {
  margin: 0;
  border-radius: .875rem;
  overflow: hidden;
  background-color: var(--ch-dark);
  box-shadow: 0 1rem 2.5rem rgba(3, 27, 78, .12);
}

.ch-site-code figcaption {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.ch-site-code pre {
  margin: 0;
  padding: 1.25rem;
  overflow-x: auto;
}

.ch-site-code code {
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--ch-green);
  white-space: pre;
}

/* ---- feature grid ---- */
.ch-site-grid {
  display: grid;
  gap: 1.25rem;
  /* 19rem lands on three columns at the container's width, so the nine feature
     cards fill 3x3 exactly instead of leaving one orphan on a fourth row. */
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.ch-site-grid > *,
.ch-site-pricing > *,
.ch-site-hero__inner > * { min-width: 0; }

.ch-site-card {
  padding: 1.5rem;
  border: 1px solid var(--default-border);
  border-radius: .875rem;
  background-color: var(--custom-white);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ch-site-card:hover {
  border-color: rgba(var(--ch-green-rgb), .55);
  transform: translateY(-.125rem);
  box-shadow: 0 .75rem 1.5rem rgba(3, 27, 78, .07);
}

.ch-site-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: .625rem;
  background-color: rgba(var(--ch-green-rgb), .18);
  color: var(--ch-green-deep);
  font-size: 1.25rem;
}

.ch-site-card h3 { margin-bottom: .5rem; font-size: 1.0625rem; font-weight: 600; }
.ch-site-card p { margin-bottom: 0; color: var(--text-muted); font-size: .9375rem; line-height: 1.6; }

/* ---- pricing ---- */
.ch-site-pricing { display: grid; gap: 1.5rem; align-items: start; }

@media (min-width: 992px) {
  .ch-site-pricing { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.ch-site-price {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--default-border);
  border-radius: 1rem;
  background-color: var(--custom-white);
  box-shadow: 0 1rem 2.5rem rgba(3, 27, 78, .07);
}

/* Brand green as a rule across the top of the card — a fill, not a text colour,
   so its contrast never has to carry any words. */
.ch-site-price::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: .25rem;
  border-radius: 1rem 1rem 0 0;
  background-color: var(--ch-green);
}

.ch-site-price__label {
  margin-bottom: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ch-site-price__figure {
  display: flex;
  align-items: flex-start;
  gap: .125rem;
  margin-bottom: 0;
  line-height: 1;
  color: var(--ch-ink);
}

.ch-site-price__currency { font-size: 1.75rem; font-weight: 600; margin-top: .5rem; }
.ch-site-price__amount { font-size: 4rem; font-weight: 700; letter-spacing: -.04em; }

.ch-site-price__unit {
  margin-bottom: 1.75rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-muted);
}

.ch-site-price__foot { margin: .75rem 0 0; text-align: center; font-size: .75rem; color: var(--text-muted); }

.ch-site-calc {
  padding: 2rem;
  border: 1px solid var(--default-border);
  border-radius: 1rem;
  background-color: var(--custom-white);
}

.ch-site-calc h3 { margin-bottom: .375rem; font-size: 1.125rem; font-weight: 600; }
.ch-site-calc > p { margin-bottom: 1.75rem; color: var(--text-muted); font-size: .9375rem; }

/* ---- the slider ----
   The native control is restyled rather than replaced, so it keeps its keyboard
   behaviour (arrows, Home/End) and its screen-reader semantics for free. The
   filled part of the track is a gradient driven by --ch-fill, which
   chairhog-marketing.js sets as the value changes. */
.ch-site-slider { margin-bottom: 1.5rem; }

.ch-site-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .875rem;
}

.ch-site-slider__label { margin: 0; font-size: .8125rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

.ch-site-slider__value {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ch-ink);
}

.ch-site-slider input[type="range"] {
  --ch-fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 1.5rem;              /* a 24px hit area around a 6px track */
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.ch-site-slider input[type="range"]::-webkit-slider-runnable-track {
  height: .375rem;
  border-radius: 999px;
  background: linear-gradient(to right,
              var(--ch-green-deep) var(--ch-fill),
              rgba(var(--ch-green-rgb), .18) var(--ch-fill));
}

.ch-site-slider input[type="range"]::-moz-range-track {
  height: .375rem;
  border-radius: 999px;
  background: rgba(var(--ch-green-rgb), .18);
}

.ch-site-slider input[type="range"]::-moz-range-progress {
  height: .375rem;
  border-radius: 999px;
  background: var(--ch-green-deep);
}

.ch-site-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: -.5rem;          /* centres a 22px thumb on a 6px track */
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: var(--ch-green-deep);
  box-shadow: 0 .125rem .5rem rgba(3, 27, 78, .25);
}

.ch-site-slider input[type="range"]::-moz-range-thumb {
  width: 1.375rem;
  height: 1.375rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: var(--ch-green-deep);
  box-shadow: 0 .125rem .5rem rgba(3, 27, 78, .25);
}

.ch-site-slider input[type="range"]:focus-visible { outline: none; }

.ch-site-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 .25rem rgba(var(--ch-green-rgb), .5);
}

.ch-site-slider input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 .25rem rgba(var(--ch-green-rgb), .5);
}

.ch-site-slider__scale {
  display: flex;
  justify-content: space-between;
  margin-top: .375rem;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ---- the total ---- */
.ch-site-calc__readout {
  margin-bottom: 1.75rem;
  padding: 1.5rem 1.25rem;
  border-radius: .875rem;
  background-color: var(--ch-dark);
  color: #fff;
  text-align: center;
}

.ch-site-calc__label {
  margin-bottom: .625rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* Baseline-aligned so the currency mark, the figure and the unit sit on one
   line however many digits the total runs to. Tabular figures stop the number
   jittering sideways while the slider is being dragged. */
.ch-site-calc__money {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .125rem;
  margin-bottom: .5rem;
  line-height: 1;
  color: #fff;
}

.ch-site-calc__cur { font-size: 1.5rem; font-weight: 600; color: var(--ch-green); }

.ch-site-calc__amount {
  font-size: clamp(2.75rem, 2.2rem + 2vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.ch-site-calc__per { font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, .6); margin-inline-start: .25rem; }

.ch-site-calc__users { margin-bottom: 0; font-size: .8125rem; color: rgba(255, 255, 255, .7); }
.ch-site-calc__users strong { color: var(--ch-green); font-weight: 600; }

.ch-site-calc__nots h4 {
  margin-bottom: .875rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ch-site-calc__nots ul { list-style: none; margin: 0; padding: 0; }

.ch-site-calc__nots li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .9375rem;
  color: var(--default-text-color);
}

.ch-site-calc__nots i { color: rgb(var(--ch-status-cancelled-rgb)); font-size: .75rem; }

/* ---- FAQ ---- */
.ch-site-faq .accordion-item {
  margin-bottom: .75rem;
  border: 1px solid var(--default-border);
  border-radius: .75rem;
  overflow: hidden;
  background-color: var(--custom-white);
}

.ch-site-faq .accordion-button {
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--custom-white);
  box-shadow: none;
}

.ch-site-faq .accordion-button:not(.collapsed) { color: rgb(var(--primary-rgb)); }
.ch-site-faq .accordion-body { font-size: .9375rem; line-height: 1.65; color: var(--text-muted); }

/* ---- closing call to action ---- */
.ch-site-cta {
  position: relative;
  overflow: hidden;
  padding-block: 4rem;
  background-color: var(--ch-dark);
  color: #fff;
  text-align: center;
}

.ch-site-cta::after {
  content: "";
  position: absolute;
  inset: auto auto -60% 50%;
  transform: translateX(-50%);
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ch-green-rgb), .2) 0%, rgba(var(--ch-green-rgb), 0) 70%);
  pointer-events: none;
}

.ch-site-cta .ch-site-container { position: relative; z-index: 1; }

.ch-site-cta h2 {
  margin-bottom: .75rem;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}

.ch-site-cta > .ch-site-container > p {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, .72);
}

.ch-site-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---- footer ---- */
.ch-site-footer {
  padding-block: 3rem 1.5rem;
  background-color: #161718;   /* a shade under --ch-dark, so the CTA band above it reads as a separate surface */
  color: rgba(255, 255, 255, .68);
  font-size: .875rem;
}

.ch-site-footer__top { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; }

.ch-site-footer__brand img { height: 1.75rem; width: auto; margin-bottom: 1rem; }
.ch-site-footer__brand p { max-width: 26rem; margin-bottom: 0; font-size: .875rem; line-height: 1.65; }

.ch-site-footer__links { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

.ch-site-footer__links h2 {
  margin-bottom: .875rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.ch-site-footer__links ul { list-style: none; margin: 0; padding: 0; }
.ch-site-footer__links li { margin-bottom: .5rem; }

.ch-site-footer__links a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.ch-site-footer__links a:hover { color: var(--ch-green); }

.ch-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .75rem;
  color: rgba(255, 255, 255, .5);
}

.ch-site-footer__bottom p { margin: 0; }

@media (min-width: 992px) {
  .ch-site-footer__top { grid-template-columns: 1.25fr 2fr; gap: 4rem; }
}

/* ---- legal pages (Privacy, Terms) ---- */
.ch-site-legal { padding-block: 3rem 4rem; }

.ch-site-legal__head { margin-bottom: 2.5rem; }

.ch-site-legal__head h1 {
  margin-bottom: .5rem;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.ch-site-legal__meta { margin-bottom: 0; font-size: .8125rem; color: var(--text-muted); }

/* A one-line summary above each policy. It has no legal effect and says so —
   it is there because nobody reads a wall of clauses cold. */
.ch-site-legal__summary {
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--default-border);
  border-inline-start: 3px solid var(--ch-green);
  border-radius: .75rem;
  background-color: rgb(var(--body-bg-rgb));
}

.ch-site-legal__summary p:last-child { margin-bottom: 0; }

.ch-site-legal h2 {
  margin: 2.5rem 0 .875rem;
  font-size: 1.25rem;
  font-weight: 600;
  scroll-margin-top: 6rem;
}

.ch-site-legal h3 { margin: 1.75rem 0 .625rem; font-size: 1rem; font-weight: 600; }

.ch-site-legal p,
.ch-site-legal li { font-size: .9375rem; line-height: 1.7; color: var(--default-text-color); }

.ch-site-legal p { margin-bottom: 1rem; }

.ch-site-legal a {
  color: rgb(var(--primary-rgb));
  text-decoration: underline;
  text-underline-offset: .15em;
}

.ch-site-legal a:hover { color: var(--ch-green-deep); }

/* The contents list is already obviously a list of links; underlining all
   fourteen of them just makes noise. */
.ch-site-legal__toc a { text-decoration: none; }
.ch-site-legal__toc a:hover { text-decoration: underline; }
.ch-site-legal ul { margin-bottom: 1.25rem; padding-inline-start: 1.25rem; }
.ch-site-legal li { margin-bottom: .5rem; }

.ch-site-legal table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  font-size: .875rem;
}

.ch-site-legal th,
.ch-site-legal td {
  padding: .75rem;
  border: 1px solid var(--default-border);
  text-align: start;
  vertical-align: top;
}

.ch-site-legal th { background-color: rgb(var(--body-bg-rgb)); font-weight: 600; }

/* Wide tables scroll inside their own box rather than widening the page. */
.ch-site-legal__table { overflow-x: auto; }

/* Contents list at the top of a long policy. */
.ch-site-legal__toc {
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--default-border);
  border-radius: .75rem;
}

.ch-site-legal__toc h2 { margin: 0 0 .75rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ch-site-legal__toc ol { margin: 0; padding-inline-start: 1.25rem; columns: 2; column-gap: 2rem; }
.ch-site-legal__toc li { margin-bottom: .375rem; font-size: .875rem; }

@media (max-width: 575.98px) {
  .ch-site-legal__toc ol { columns: 1; }
}


/* ==========================================================================
   10. Public website — the widget example, brand moments and flourishes
   --------------------------------------------------------------------------
   Added after the first pass on the landing page. Three jobs:

     - the demo band, which holds a worked example of the guest booking widget
       — self-contained test data, no link into the app;
     - the two places the full ChairHog lockup appears at size (the closing
       band, and as a watermark behind the hero);
     - the small motion and gradient touches that stop a one-plan, one-price
       page reading as a plain document.

   All of it respects prefers-reduced-motion — see the bottom of this section.
   ========================================================================== */

/* ---- brand lockup in the closing band ---- */
.ch-site-cta__logo {
  display: block;
  width: auto;
  height: clamp(8rem, 5rem + 10vw, 13rem);
  margin: 0 auto 2rem;
  filter: drop-shadow(0 .75rem 2rem rgba(0, 0, 0, .45));
}

/* ---- the mark, oversized and barely there, behind the hero ---- */
.ch-site-hero__watermark {
  position: absolute;
  inset-inline-start: -6rem;
  bottom: -8rem;
  width: 30rem;
  height: auto;
  opacity: .06;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 991.98px) {
  .ch-site-hero__watermark { display: none; }
}

/* ---- the demo band ----
   Dark, like the hero and the closing band, so the three dark surfaces read as
   the spine of the page and the white sections as the detail between them.
   Holds the worked example of the booking widget. */
.ch-site-demo {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem;
  background-color: var(--ch-dark);
  color: #fff;
}

.ch-site-demo::after {
  content: "";
  position: absolute;
  inset: auto -20% -50% auto;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ch-green-rgb), .16) 0%, rgba(var(--ch-green-rgb), 0) 70%);
  pointer-events: none;
}

.ch-site-demo__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 992px) {
  .ch-site-demo { padding-block: 5.5rem; }
  .ch-site-demo__inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .ch-site-demo__inner > * { min-width: 0; }
}

.ch-site-demo .ch-site-eyebrow { color: var(--ch-green); }

.ch-site-demo h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
}

.ch-site-demo h2 em { font-style: normal; color: var(--ch-green); }

.ch-site-demo__lede {
  margin-bottom: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

/* The three inputs the model reads, as labelled chips. */
.ch-site-demo__inputs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.75rem;
  padding: 0;
}

.ch-site-demo__inputs li {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .4375rem .75rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .05);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .85);
}

.ch-site-demo__inputs i { color: var(--ch-green); font-size: .9375rem; }

.ch-site-demo__uses { list-style: none; margin: 0 0 1.75rem; padding: 0; }

.ch-site-demo__uses li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-bottom: .75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}

.ch-site-demo__uses i { flex-shrink: 0; margin-top: .1875rem; color: var(--ch-green); }

.ch-site-demo__note {
  margin: 0;
  padding-inline-start: .875rem;
  border-inline-start: 2px solid rgba(var(--ch-green-rgb), .5);
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
}

/* ---- the worked example of the guest booking widget ----
   A self-contained demo: its own test venue, its own tables, driven by
   chairhog-marketing.js. It deliberately shares no data and no route with the
   real widget under /Widget — a visitor can play with this without anything
   behind a sign-in being exposed.

   Styled to look like the widget rather than reusing the .ch-widget block from
   section 5: that block is a full-page mobile layout with its own token set,
   and dropping it inside a marketing section would fight both. */
.ch-site-widget {
  border-radius: .875rem;
  overflow: hidden;
  background-color: #fff;
  color: var(--ch-ink);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
}

.ch-site-widget__head {
  padding: 1.25rem;
  border-bottom: 1px solid #eef0f3;
  text-align: center;
}

.ch-site-widget__venue {
  margin-bottom: .125rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ch-ink);
}

.ch-site-widget__tagline { margin-bottom: 0; font-size: .8125rem; color: #6b7280; }

.ch-site-widget__body { padding: 1.25rem; }

.ch-site-widget__group { border: 0; padding: 0; margin: 0 0 1.25rem; }
.ch-site-widget__group:last-child { margin-bottom: 0; }

.ch-site-widget__legend {
  float: none;                /* Bootstrap makes legends full-width blocks */
  width: auto;
  margin-bottom: .5rem;
  padding: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
}

.ch-site-widget__chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.ch-site-widget__chip {
  min-width: 2.75rem;
  min-height: 2.75rem;        /* 44px touch target */
  padding: .5rem .875rem;
  border: 1px solid #dfe3e8;
  border-radius: .5rem;
  background-color: #fff;
  color: var(--ch-ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ch-site-widget__chip:hover:not(:disabled) { border-color: var(--ch-green-deep); }

.ch-site-widget__chip:focus-visible {
  outline: 2px solid var(--ch-green-deep);
  outline-offset: 2px;
}

.ch-site-widget__chip[aria-pressed="true"] {
  border-color: var(--ch-green-deep);
  background-color: var(--ch-green-deep);
  color: #fff;
}

/* Taken: struck through and unclickable, not merely faded — a guest has to be
   able to tell at a glance, and so does anyone who cannot see the colour. */
.ch-site-widget__chip:disabled {
  border-color: #eceff2;
  background-color: #f6f7f9;
  color: #a6adb8;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ---- tables ---- */
.ch-site-widget__tables { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }

@media (min-width: 480px) {
  .ch-site-widget__tables { grid-template-columns: repeat(3, 1fr); }
}

.ch-site-widget__table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .125rem;
  min-height: 3.5rem;
  padding: .625rem .75rem;
  border: 1px solid #dfe3e8;
  border-radius: .5rem;
  background-color: #fff;
  color: var(--ch-ink);
  text-align: start;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.ch-site-widget__table:hover:not(:disabled) { border-color: var(--ch-green-deep); }

.ch-site-widget__table:focus-visible {
  outline: 2px solid var(--ch-green-deep);
  outline-offset: 2px;
}

.ch-site-widget__table[aria-pressed="true"] {
  border-color: var(--ch-green-deep);
  background-color: rgba(var(--ch-green-rgb), .14);
}

.ch-site-widget__table:disabled {
  border-color: #eceff2;
  background-color: #f6f7f9;
  color: #a6adb8;
  cursor: not-allowed;
}

.ch-site-widget__table-name { font-size: .875rem; font-weight: 600; line-height: 1.2; }
.ch-site-widget__table-note { font-size: .6875rem; color: #6b7280; }
.ch-site-widget__table:disabled .ch-site-widget__table-note { color: #a6adb8; }

/* ---- foot ---- */
.ch-site-widget__foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid #eef0f3; background-color: #fafbfc; }

.ch-site-widget__summary {
  margin-bottom: .75rem;
  font-size: .8125rem;
  color: #55606f;
  text-align: center;
  min-height: 1.25rem;
}

.ch-site-widget__summary strong { color: var(--ch-ink); font-weight: 600; }

.ch-site-widget__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: .625rem 1rem;
  border: 0;
  border-radius: .5rem;
  background-color: var(--ch-green-deep);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}

.ch-site-widget__cta:disabled { background-color: #c9cfd6; cursor: not-allowed; }
.ch-site-widget__cta:focus-visible { outline: 2px solid var(--ch-green); outline-offset: 2px; }

/* ---- the confirmed state ---- */
.ch-site-widget__done { padding: 2.5rem 1.5rem; text-align: center; }

.ch-site-widget__done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: rgba(var(--ch-green-rgb), .18);
  color: var(--ch-green-deep);
  font-size: 1.5rem;
}

.ch-site-widget__done h3 { margin-bottom: .375rem; font-size: 1.125rem; font-weight: 700; }
.ch-site-widget__done p { margin-bottom: 1.25rem; font-size: .875rem; color: #55606f; }

.ch-site-widget__again {
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border: 1px solid #dfe3e8;
  border-radius: .5rem;
  background: none;
  color: var(--ch-ink);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}

.ch-site-widget__again:hover { border-color: var(--ch-green-deep); }

/* A demo has to say so. */
.ch-site-widget__note {
  margin: .875rem 0 0;
  font-size: .75rem;
  text-align: center;
  color: rgba(255, 255, 255, .5);
}

/* ---- the one-liner, given its own moment ---- */
.ch-site-oneliner {
  position: relative;
  padding-block: 3rem;
  background-color: var(--ch-ink);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.ch-site-oneliner p {
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #fff;
}

.ch-site-oneliner p em { font-style: normal; color: var(--ch-green); }

/* ---- the one-liner band's supporting bits ---- */
.ch-site-code--center { max-width: 40rem; margin-inline: auto; text-align: start; }

.ch-site-oneliner__ticks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem 1.75rem;
  margin: 1.75rem 0;
  padding: 0;
  font-size: .875rem;
  color: rgba(255, 255, 255, .75);
}

.ch-site-oneliner__ticks li { display: flex; align-items: center; gap: .4375rem; }
.ch-site-oneliner__ticks i { color: var(--ch-green); }

/* ---- motion ----
   Sections lift in as they arrive. chairhog-marketing.js adds .is-in with an
   IntersectionObserver; if the script never runs, .ch-site-reveal is still
   fully visible, so nothing can leave the page blank. */
@media (prefers-reduced-motion: no-preference) {
  .ch-site-reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .5s ease, transform .5s ease;
  }

  .ch-site-reveal.is-in { opacity: 1; transform: none; }
}


/* ==========================================================================
   11. Public website — the lockup at the top, registration, cookie consent
   ========================================================================== */

/* ---- the lockup above the headline ----
   The header carries the wordmark; this is the full stacked lockup, and it is
   the first thing on the page. Kept off the headline's own leading so the two
   read as separate things rather than one crowded block. */
.ch-site-hero__logo {
  display: block;
  width: auto;
  height: clamp(4.5rem, 3rem + 4vw, 6.5rem);
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 .5rem 1.5rem rgba(0, 0, 0, .4));
}

/* ---- registration ---- */
.ch-site-register { padding-block: 3rem 4rem; }

.ch-site-register__inner { display: grid; gap: 3rem; align-items: start; }

@media (min-width: 992px) {
  .ch-site-register { padding-block: 4.5rem 5.5rem; }
  .ch-site-register__inner { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .ch-site-register__inner > * { min-width: 0; }
}

.ch-site-register__form h1 {
  margin-bottom: .625rem;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
}

.ch-site-register__lede { margin-bottom: 2rem; font-size: 1.0625rem; line-height: 1.6; color: var(--text-muted); }

.ch-site-field { margin-bottom: 1.5rem; }

.ch-site-field .form-label { margin-bottom: .375rem; font-size: .9375rem; font-weight: 600; }

/* form-control-lg on the template lands a little tight for a two-field form
   that is the whole point of the page. */
.ch-site-register .form-control-lg { padding: .75rem 1rem; font-size: 1rem; }

.ch-site-field__hint { margin: .4375rem 0 0; font-size: .8125rem; color: var(--text-muted); }

.ch-site-register__terms {
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

.ch-site-register__signin {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--default-border);
  font-size: .9375rem;
  color: var(--text-muted);
  text-align: center;
}

.ch-site-register a { color: rgb(var(--primary-rgb)); }

/* ---- what happens next ---- */
.ch-site-register__aside {
  padding: 2rem;
  border: 1px solid var(--default-border);
  border-radius: 1rem;
  background-color: rgb(var(--body-bg-rgb));
}

.ch-site-register__aside h2 {
  margin-bottom: 1.5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ch-site-next { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: none; }

.ch-site-next li { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.ch-site-next li:last-child { margin-bottom: 0; }

.ch-site-next__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background-color: var(--ch-green);
  color: var(--ch-ink);
  font-size: .875rem;
  font-weight: 700;
}

.ch-site-next h3 { margin-bottom: .25rem; font-size: 1rem; font-weight: 600; }
.ch-site-next p { margin-bottom: 0; font-size: .9375rem; line-height: 1.6; color: var(--text-muted); }

.ch-site-register__price {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--default-border);
}

.ch-site-register__price-figure {
  flex-shrink: 0;
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ch-ink);
}

.ch-site-register__price-figure span { font-size: 1.25rem; font-weight: 600; vertical-align: .35em; }
.ch-site-register__price-unit { margin-bottom: .25rem; font-size: .9375rem; font-weight: 600; }
.ch-site-register__price-note { margin-bottom: 0; font-size: .8125rem; line-height: 1.55; color: var(--text-muted); }

/* ---- cookie consent ----
   A bar across the foot of the window rather than a full-screen interstitial:
   it must not be one of the intrusive interstitials that page-experience
   guidance penalises, and the page behind it stays readable and usable. */
.ch-site-cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1060;
  padding: 1rem 1.25rem;
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--ch-dark);
  color: rgba(255, 255, 255, .82);
  border-top: 3px solid var(--ch-green);
  box-shadow: 0 -.5rem 2rem rgba(0, 0, 0, .3);
}

.ch-site-cookies[hidden] { display: none; }

.ch-site-cookies__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 71.25rem;
  margin-inline: auto;
}

@media (min-width: 992px) {
  .ch-site-cookies__inner { flex-direction: row; align-items: center; gap: 2.5rem; }
  .ch-site-cookies__copy { flex: 1 1 auto; }
}

.ch-site-cookies__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.ch-site-cookies__title i { color: var(--ch-green); font-size: 1.125rem; }

.ch-site-cookies p { margin-bottom: .5rem; font-size: .875rem; line-height: 1.6; }
.ch-site-cookies__links { margin-bottom: 0 !important; font-size: .8125rem; }
.ch-site-cookies a { color: var(--ch-green); text-decoration: underline; text-underline-offset: .15em; }

.ch-site-cookies__actions {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  flex-shrink: 0;
}

@media (min-width: 576px) {
  .ch-site-cookies__actions { flex-direction: row; }
  .ch-site-cookies__actions .btn { flex: 1 1 auto; white-space: nowrap; }
}

@media (min-width: 992px) {
  .ch-site-cookies__actions .btn { flex: 0 0 auto; }
}

/* Both choices are given equal visual weight — a refusal that is harder to see
   than an acceptance is not a free choice. Same size, same shape, one filled. */
.ch-site .ch-site-btn-outline {
  border: 1px solid rgba(255, 255, 255, .4);
  background-color: transparent;
  color: #fff;
  font-weight: 500;
}

.ch-site .ch-site-btn-outline:hover,
.ch-site .ch-site-btn-outline:focus-visible {
  border-color: var(--ch-green);
  background-color: rgba(255, 255, 255, .08);
  color: #fff;
}


/* ==========================================================================
   12. Public website — how the data is looked after, and the closed-account
       notice
   ========================================================================== */

/* ---- the trust band ----
   Ink rather than --ch-dark, so it separates the two light sections it sits
   between without reading as another hero. */
.ch-site-trust {
  padding-block: 3.5rem;
  background-color: var(--ch-ink);
  color: rgba(255, 255, 255, .78);
}

@media (min-width: 768px) {
  .ch-site-trust { padding-block: 4.5rem; }
}

.ch-site-trust__head { max-width: 44rem; margin: 0 auto 2.5rem; text-align: center; }

.ch-site-trust .ch-site-eyebrow { color: var(--ch-green); }

.ch-site-trust__head h2 {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
}

.ch-site-trust__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.ch-site-trust__grid > * { min-width: 0; }

.ch-site-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: .625rem;
  background-color: rgba(var(--ch-green-rgb), .18);
  color: var(--ch-green);
  font-size: 1.25rem;
}

.ch-site-trust h3 { margin-bottom: .5rem; font-size: 1.0625rem; font-weight: 600; color: #fff; }
.ch-site-trust p { margin-bottom: 0; font-size: .9375rem; line-height: 1.65; }

/* ---- the notice panel on a page whose main action is not available yet ---- */
.ch-site-notice {
  padding: 1.5rem;
  border: 1px solid var(--default-border);
  border-inline-start: 3px solid var(--ch-green);
  border-radius: .875rem;
  background-color: rgb(var(--body-bg-rgb));
}

.ch-site-notice__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ch-ink);
}

.ch-site-notice__title i { color: var(--ch-green-deep); font-size: 1.125rem; }
.ch-site-notice p { font-size: .9375rem; line-height: 1.6; color: var(--text-muted); }
.ch-site-notice .btn { margin-top: .75rem; }