/* ==========================================================================
   SoloPayLink — Premium design layer
   --------------------------------------------------------------------------
   Loaded LAST on every page. It only changes how things look: colour,
   typography, spacing rhythm, borders, shadows and radii. It never changes
   display, position, flex-direction or anything the scripts measure, so no
   behaviour can break.

   The approach: define one token set, then re-point every legacy variable at
   it. Existing rules keep working and inherit the new look automatically.

   Identity: this is an instrument for taking money and holding time, used by
   one person running one business. So: warm paper rather than cold grey,
   deep navy ink, a confident azure for action, emerald reserved strictly for
   money received, and brass used once or twice as a quiet luxury signal.
   ========================================================================== */

:root {
  /* ---- ink & paper ---- */
  --p-ink:        #101C2E;   /* headings, primary text */
  --p-ink-2:      #2B3A52;   /* body */
  --p-ink-3:      #47566c;   /* captions, meta */
  --p-paper:      #F7F5F1;   /* page ground — warm ivory, not slate */
  --p-paper-2:    #EFECE6;   /* recessed areas */
  --p-card:       #FFFFFF;
  --p-line:       #E6E0D7;   /* warm hairline */
  --p-line-2:     #D6CEC1;

  /* ---- action ---- */
  --p-accent:      #1657D0;  /* deep azure */
  --p-accent-2:    #0E3E9A;  /* pressed / gradient end */
  --p-accent-3:    #4C86F0;  /* light, for dark grounds */
  --p-accent-wash: #ECF1FD;
  --p-accent-line: #C9D9F8;

  /* ---- semantic ---- */
  --p-money:      #0B6B52;   /* paid / earned — money only */
  --p-money-wash: #E7F3EE;
  --p-warn:       #92600C;
  --p-warn-wash:  #FBF1DE;
  --p-danger:     #A8271B;
  --p-danger-wash:#FBEBE8;
  --p-brass:      #9A7B3F;   /* premium accent, used sparingly */

  /* ---- type ---- */
  --p-display: "Archivo", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --p-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --p-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale (fluid where it matters) */
  --p-t-hero:  clamp(2rem, 1.35rem + 2.8vw, 3.6rem);
  --p-t-h1:    clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem);
  --p-t-h2:    clamp(1.3rem, 1.1rem + 0.85vw, 1.75rem);
  --p-t-h3:    1.125rem;
  --p-t-body:  1rem;
  --p-t-small: 0.875rem;
  --p-t-cap:   0.78125rem;   /* 12.5px — nothing smaller anywhere */

  /* ---- rhythm ---- */
  --p-1: 4px;  --p-2: 8px;  --p-3: 12px; --p-4: 16px;
  --p-5: 24px; --p-6: 32px; --p-7: 48px; --p-8: 64px;

  --p-r-sm: 10px; --p-r: 14px; --p-r-lg: 20px; --p-r-pill: 999px;

  /* Layered shadows read as depth; a single flat shadow reads as a template. */
  --p-sh-1: 0 1px 2px rgba(16,28,46,.05);
  --p-sh-2: 0 1px 2px rgba(16,28,46,.05), 0 8px 20px -10px rgba(16,28,46,.14);
  --p-sh-3: 0 1px 3px rgba(16,28,46,.06), 0 18px 40px -18px rgba(16,28,46,.22);
  --p-sh-accent: 0 10px 26px -12px rgba(22,87,208,.55);

  /* ======================================================================
     Re-point every legacy token. Existing stylesheets inherit the new look.
     ====================================================================== */
  --color-primary: var(--p-accent);
  --color-primary-dark: var(--p-accent-2);
  --color-primary-light: var(--p-accent-3);
  --color-primary-ultralight: var(--p-accent-wash);
  --color-success: var(--p-money);
  --color-success-dark: #084F3C;
  --color-success-ultralight: var(--p-money-wash);
  --color-warning: var(--p-warn);
  --color-warning-dark: #744B08;
  --color-warning-ultralight: var(--p-warn-wash);
  --color-error: var(--p-danger);
  --color-error-dark: #85200F;
  --color-error-ultralight: var(--p-danger-wash);
  --color-bg: var(--p-paper);
  --color-card: var(--p-card);
  --color-border: var(--p-line);
  --color-text: var(--p-ink);
  --color-text-light: var(--p-ink-2);
  --color-text-ultralight: var(--p-ink-3);
  --color-text-inverted: #FFFFFF;
  --font-sans: var(--p-body);

  --spl-brand: var(--p-accent);
  --spl-brand-2: var(--p-accent-2);
  --spl-brand-3: var(--p-accent-3);
  --spl-ink: var(--p-ink);
  --spl-ink-soft: var(--p-ink-2);
  --spl-muted: var(--p-ink-3);
  --spl-line: var(--p-line);
  --spl-line-strong: var(--p-line-2);
  --spl-panel: var(--p-card);
  --spl-panel-solid: var(--p-card);
  --spl-rail: var(--p-paper-2);
  --spl-success: var(--p-money);
  --spl-warning: var(--p-warn);
  --spl-danger: var(--p-danger);
  --spl-shadow-sm: var(--p-sh-1);
  --spl-shadow-md: var(--p-sh-2);
  --spl-shadow-brand: var(--p-sh-accent);
  --spl-template-ink: var(--p-ink);
  --spl-template-muted: var(--p-ink-3);
  --spl-template-line: var(--p-line);
  --spl-template-surface: var(--p-card);
  --spl-template-soft: var(--p-paper);
  --spl-template-shadow: var(--p-sh-2);

  --shadow-sm: var(--p-sh-1);
  --shadow: var(--p-sh-2);
  --shadow-md: var(--p-sh-2);
  --shadow-lg: var(--p-sh-3);
  --border-radius-xs: 8px;
  --border-radius-sm: var(--p-r-sm);
  --border-radius-md: var(--p-r);
  --border-radius-lg: var(--p-r-lg);
  --border-radius-full: var(--p-r-pill);
  --landing-border: var(--p-line);
}

/* ==========================================================================
   Typography
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--p-body);
  color: var(--p-ink-2);
  background: var(--p-paper);
  font-size: var(--p-t-body);
  line-height: 1.6;
  letter-spacing: -0.003em;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  /* Never thin the glyphs: -webkit-font-smoothing:antialiased makes text look
     washed out on Mac and iOS. Subpixel rendering keeps it sharp. */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .card-title, .spl-title {
  font-family: var(--p-display);
  color: var(--p-ink);
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: var(--p-t-h1); font-weight: 800; }
h2 { font-size: var(--p-t-h2); font-weight: 700; }
h3 { font-size: var(--p-t-h3); font-weight: 700; letter-spacing: -0.014em; }
h4, h5, h6 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

p { line-height: 1.65; }
p, li { max-width: 68ch; }
.legal-text, .policy-body p, .policy-body li { max-width: 72ch; }

small, .help-text, .muted, .subtitle, .caption { font-size: var(--p-t-cap); color: var(--p-ink-3); }

/* Nothing below 12.5px anywhere — it was unreadable on phones. */
[style*="font-size:10px"], [style*="font-size: 10px"],
[style*="font-size:11px"], [style*="font-size: 11px"],
[style*="font-size:11.5px"], [style*="font-size: 11.5px"],
[style*="font-size:12px"], [style*="font-size: 12px"] { font-size: var(--p-t-cap) !important; }

/* Money, times, counters and ids line up and never wobble. */
.amount, .price, .total, .money, .kpi .v, .stat b, .mobile-kv-value,
time, .time, .slot-btn, code, .badge, td:last-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
code, kbd, pre, .mono { font-family: var(--p-mono); font-size: 0.9em; }

/* Eyebrow / label treatment */
.eyebrow, .label, .form-label, .mobile-kv-label, .policy-kicker {
  font-family: var(--p-body);
  font-size: var(--p-t-cap);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p-ink-3);
}

/* ==========================================================================
   Surfaces — border, fill, radius and shadow spent by role, not stamped
   uniformly on every block.
   ========================================================================== */
.card, .panel, .spl-card, .landing-card, .policy-card, .feature-card,
.pricing-card, .mobile-card, .booking-card, .spl-panel {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r-lg);
  box-shadow: var(--p-sh-2);
}
.card:hover, .feature-card:hover, .pricing-card:hover, .mobile-card:hover {
  box-shadow: var(--p-sh-3);
}
@media (prefers-reduced-motion: no-preference) {
  .feature-card, .pricing-card, .mobile-card, .card { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
  .feature-card:hover, .pricing-card:hover { transform: translateY(-2px); border-color: var(--p-line-2); }
}

hr, .divider { border: 0; border-top: 1px solid var(--p-line); }

/* ==========================================================================
   Buttons — one clear primary, everything else quiet
   ========================================================================== */
.btn, button.btn, a.btn, .button, .spl-btn {
  font-family: var(--p-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.006em;
  border-radius: var(--p-r-sm);
  min-height: 44px;                 /* comfortable thumb target */
  padding: 11px 18px;
}
.btn.primary, .btn-primary, .spl-btn-primary, button[type="submit"].btn,
.btn.btn-primary, .cta-primary {
  background-image: linear-gradient(180deg, var(--p-accent) 0%, var(--p-accent-2) 100%);
  background-color: var(--p-accent);
  border: 1px solid var(--p-accent-2);
  color: #fff;
  box-shadow: var(--p-sh-accent);
}
.btn.primary:hover, .btn-primary:hover, .cta-primary:hover { filter: brightness(1.06); }
.btn.primary:active, .btn-primary:active { transform: translateY(1px); box-shadow: var(--p-sh-1); }
.btn.secondary, .btn-secondary, .btn.ghost {
  background: var(--p-card);
  border: 1px solid var(--p-line-2);
  color: var(--p-ink);
  box-shadow: var(--p-sh-1);
}
.btn.secondary:hover, .btn-secondary:hover { background: var(--p-paper); border-color: var(--p-ink-3); }

:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 2px; border-radius: 6px; }

/* ==========================================================================
   Form controls
   ========================================================================== */
input, select, textarea, .input {
  font-family: var(--p-body);
  font-size: 1rem;                  /* 16px stops iOS zooming on focus */
  color: var(--p-ink);
  background: var(--p-card);
  border: 1px solid var(--p-line-2);
  border-radius: var(--p-r-sm);
  min-height: 46px;
  padding: 11px 13px;
}
textarea { min-height: 84px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: #9AA6B8; }
input:focus, select:focus, textarea:focus, .input:focus {
  border-color: var(--p-accent);
  box-shadow: 0 0 0 3px var(--p-accent-wash);
  outline: none;
}

/* ==========================================================================
   Badges & pills — state readable at a glance, colour never the only signal
   ========================================================================== */
.badge, .pill, .chip, .rescheduled-pill {
  font-family: var(--p-body);
  font-size: var(--p-t-cap);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--p-r-pill);
  padding: 4px 11px;
  border: 1px solid transparent;
}
.badge-success, .badge.success, .badge-paid { background: var(--p-money-wash); color: var(--p-money); border-color: rgba(11,107,82,.22); }
.badge-warning, .badge.warning, .badge-pending { background: var(--p-warn-wash); color: var(--p-warn); border-color: rgba(146,96,12,.22); }
.badge-error, .badge.error, .badge-cancelled { background: var(--p-danger-wash); color: var(--p-danger); border-color: rgba(168,39,27,.22); }
.badge-info, .badge.info { background: var(--p-accent-wash); color: var(--p-accent-2); border-color: var(--p-accent-line); }

/* Money reads as money. */
.amount, .price, .total, .money, .mobile-kv-value strong { color: var(--p-money); font-weight: 800; }

/* ==========================================================================
   Booking slots — the single most-tapped control in the product
   ========================================================================== */
.slot-btn {
  font-family: var(--p-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
  min-height: 48px;
  border-radius: var(--p-r-sm);
  border: 1px solid var(--p-line-2);
  background: var(--p-card);
  color: var(--p-ink);
  box-shadow: var(--p-sh-1);
}
.slot-btn:hover:not([disabled]) { border-color: var(--p-accent); background: var(--p-accent-wash); }
.slot-btn.selected, .slot-btn[aria-pressed="true"] {
  background-image: linear-gradient(180deg, var(--p-accent) 0%, var(--p-accent-2) 100%);
  border-color: var(--p-accent-2);
  color: #fff;
  box-shadow: var(--p-sh-accent);
}

/* ==========================================================================
   Tables — quiet lines, aligned figures
   ========================================================================== */
table { font-variant-numeric: tabular-nums; }
th {
  font-family: var(--p-body);
  font-size: var(--p-t-cap);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  border-bottom: 1px solid var(--p-line);
}
td { border-bottom: 1px solid var(--p-line); color: var(--p-ink-2); }
tbody tr:hover td { background: var(--p-paper); }

/* ==========================================================================
   Header / footer
   ========================================================================== */
header, .site-header, .landing-header {
  background: rgba(247,245,241,.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--p-line);
}
footer, .site-footer { background: var(--p-paper-2); border-top: 1px solid var(--p-line); color: var(--p-ink-3); font-size: var(--p-t-small); }
footer a, .site-footer a { color: var(--p-ink-2); }

/* The wordmark should look drawn, not typed. */
.logo, .brand, .site-logo, .logo-text {
  font-family: var(--p-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--p-ink);
}
.logo img, .brand img, .site-logo img { border-radius: 12px; }

/* Images never stretch, never overflow, and hold their space while loading. */
img { max-width: 100%; height: auto; }
img[width][height] { height: auto; }
.screenshot, .preview-img, .landing-shot {
  border-radius: var(--p-r);
  border: 1px solid var(--p-line);
  box-shadow: var(--p-sh-3);
  background: var(--p-card);
}

/* ==========================================================================
   Responsive — phone, tablet, desktop
   ========================================================================== */
/* Phone: one column, generous targets, tighter display type. */
@media (max-width: 640px) {
  :root { --p-t-hero: clamp(1.9rem, 1.3rem + 3.6vw, 2.5rem); }
  body { font-size: 1rem; }
  .card, .panel, .spl-card, .landing-card, .policy-card, .feature-card, .pricing-card {
    border-radius: var(--p-r);
    padding: var(--p-4);
  }
  .btn, button.btn, a.btn { min-height: 48px; width: auto; }
  h1 { letter-spacing: -0.028em; }
  /* Anything laid out in columns collapses cleanly. */
  .grid-2, .grid-3, .grid-4, .two-col, .three-col { grid-template-columns: 1fr !important; }
}

/* Tablet: two columns, roomier cards. */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid-3, .grid-4, .three-col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card, .feature-card, .pricing-card { padding: var(--p-5); }
}

/* Desktop: a measured container so text never runs edge to edge. */
@media (min-width: 1025px) {
  .container, .wrap, .shell, .landing-container { max-width: 1180px; margin-inline: auto; }
  .card, .feature-card, .pricing-card { padding: var(--p-5); }
}

/* Large desktop: let the grid breathe rather than stretching cards. */
@media (min-width: 1440px) {
  .container, .wrap, .shell, .landing-container { max-width: 1240px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Print: legal pages should print cleanly for an owner's records. */
@media print {
  header, footer, nav, .btn, .cookie-banner { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card, .policy-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ==========================================================================
   Refinements found by rendering the real pages
   ========================================================================== */

/* The check glyph replaces the emoji tick. It inherits colour, so it reads as
   part of the sentence rather than pasted-in clip art. */
.spl-pill, .trust-pill, .badge, .chip {
  font-variant-emoji: text;
}

/* Cookie notice: it was a full card covering the hero on a phone. Make it a
   slim bar anchored to the bottom, which is what people expect and what lets
   the first screen actually sell the product. */
.spl-cookie-banner {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 9990;
  background: rgba(16,28,46,.97) !important;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 0 !important;
  box-shadow: 0 -12px 40px rgba(16,28,46,.28) !important;
  color: #EDEFF3 !important;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
}
.spl-cookie-banner__inner {
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--p-4);
  flex-wrap: wrap;
}
.spl-cookie-badge { display: none; }
.spl-cookie-title {
  font-family: var(--p-display);
  font-size: 1rem !important;
  font-weight: 700;
  color: #fff !important;
  margin: 0 0 2px !important;
  letter-spacing: -0.015em;
}
.spl-cookie-text {
  font-size: var(--p-t-small) !important;
  color: #D6DCE6 !important;
  margin: 0 !important;
  line-height: 1.5;
  max-width: 62ch;
}
.spl-cookie-links { font-size: var(--p-t-cap); margin-top: 6px; }
.spl-cookie-links a, .spl-cookie-links button { color: #BBD3FA !important; text-decoration: underline; }
.spl-cookie-actions { display: flex; gap: var(--p-2); flex-wrap: wrap; margin-left: auto; }
.spl-cookie-btn { min-height: 42px; padding: 9px 16px; border-radius: var(--p-r-sm); font-weight: 700; font-size: 0.875rem; }
.spl-cookie-btn--primary { background: var(--p-accent) !important; color: #fff !important; border: 1px solid var(--p-accent-2) !important; }
.spl-cookie-btn--secondary, .spl-cookie-btn--ghost {
  background: rgba(255,255,255,.14) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.34) !important;
}
@media (max-width: 640px) {
  .spl-cookie-banner__inner { flex-direction: column; align-items: stretch; gap: var(--p-3); }
  .spl-cookie-actions { margin-left: 0; }
  .spl-cookie-actions .spl-cookie-btn { flex: 1 1 auto; }
  .spl-cookie-text { font-size: var(--p-t-cap) !important; }
}

/* Hero: the lavender wash read as a template. A quiet ivory ground with one
   soft azure bloom puts the words first. */
.spl-hero, .hero, .landing-hero, header.hero {
  background:
    radial-gradient(130% 100% at 50% -30%, rgba(22,87,208,.09) 0%, rgba(22,87,208,0) 62%),
    var(--p-paper);
  border-bottom: 1px solid var(--p-line);
}
.hero h1, .spl-hero h1, .landing-hero h1 { font-size: var(--p-t-hero); font-weight: 800; }
.hero p, .spl-hero p, .landing-hero p { font-size: 1.0625rem; color: var(--p-ink-2); max-width: 60ch; margin-inline: auto; }

/* Trust pills under the hero */
.spl-pill, .trust-pill {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  color: var(--p-ink);
  border-radius: var(--p-r-pill);
  padding: 8px 15px;
  font-weight: 600;
  font-size: var(--p-t-small);
  box-shadow: var(--p-sh-1);
}

/* The brand mark sits on a warm ground now, so the old hard indigo tile needs
   a softer frame. */
.logo img, .brand img, .site-logo img, .spl-logo img {
  box-shadow: 0 2px 8px rgba(16,28,46,.14);
}

/* The landing call to action carries a label and a reassurance line. Stack
   them so the label owns the button and the microcopy sits quietly beneath,
   instead of the two competing side by side on a phone. */
.primary-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  max-width: 520px;
  min-height: 62px;
  padding: 14px 26px;
  font-family: var(--p-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  border-radius: var(--p-r-pill);
  background-image: linear-gradient(180deg, var(--p-accent) 0%, var(--p-accent-2) 100%);
  border: 1px solid var(--p-accent-2);
  box-shadow: var(--p-sh-accent);
}
.primary-btn > span {
  font-family: var(--p-body);
  font-size: var(--p-t-cap) !important;
  font-weight: 500 !important;
  opacity: .88;
  letter-spacing: 0;
  margin-top: 2px !important;
}
.primary-btn:hover { filter: brightness(1.06); }
.primary-btn:active { transform: translateY(1px); box-shadow: var(--p-sh-1); }

.ghost-link-btn {
  min-height: 54px;
  border-radius: var(--p-r-pill) !important;
  border-color: var(--p-accent-line) !important;
  font-family: var(--p-body);
  font-weight: 700 !important;
  box-shadow: var(--p-sh-1) !important;
}
.ghost-link-btn:hover { background: var(--p-accent-wash) !important; border-color: var(--p-accent) !important; }

/* The header gradient was a purple wash. A clean ivory bar with one hairline
   keeps attention on the headline. */
.navbar, .spl-navbar-gradient {
  background: rgba(247,245,241,.9) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--p-line);
}

/* Section headings across the marketing pages */
section h2 { margin-bottom: var(--p-2); }
section > p, .section-lead { color: var(--p-ink-2); }

/* Feature and template cards: one consistent object, not a mixed set. */
.spl-card, .template-card, .spl-template-card, .feature-card {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r-lg);
  box-shadow: var(--p-sh-2);
}

/* Owner dashboard tables stay readable on a phone by scrolling in their own
   container rather than stretching the page. */
@media (max-width: 760px) {
  .table-wrap, .table-responsive, .spl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Only tables that actually sit in a scroll container get a min-width; an
     unwrapped table would otherwise push the whole page sideways. */
  .table-wrap > table, .table-responsive > table, .spl-table-wrap > table { min-width: 560px; }
}

/* Inline code shrinks relative to its parent, which compounded to under 11px
   inside small print. Give it a floor. */
code, kbd, samp { font-size: max(0.9em, 12.5px); }

/* ==========================================================================
   The Owner Console is a dark instrument on purpose: it is where money and
   keys live, and a dark ground keeps the numbers and status colours loud.
   The light page styles above must not leak into it.
   ========================================================================== */
[data-surface="console"] body {
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(22,87,208,.20) 0%, rgba(22,87,208,0) 58%),
    radial-gradient(820px 520px at 100% 0%, rgba(11,107,82,.14) 0%, rgba(11,107,82,0) 52%),
    #0B1220;
  color: #E9EDF5;
}
[data-surface="console"] {
  --bg: #0B1220; --bg-2: #101C2E;
  --panel: rgba(255,255,255,.045); --panel-2: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.11);
  --text: #E9EDF5;          /* 15.8:1 on the console ground */
  --muted: #AAB6CB;         /*  8.6:1 — readable, still clearly secondary */
  --dim:   #8C99B0;         /*  6.2:1 */
  --brand: #6D9BF5; --brand-2: #9BBBF8;
  --ok: #4ED2A6; --warn: #E8B55C; --bad: #F2887B; --info: #6D9BF5;
}
[data-surface="console"] h1, [data-surface="console"] h2,
[data-surface="console"] h3, [data-surface="console"] .logo { color: #F4F7FC; }
[data-surface="console"] .card,
[data-surface="console"] .tile,
[data-surface="console"] .row,
[data-surface="console"] .field {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -24px rgba(0,0,0,.8);
}
/* The console reuses .hero purely as a two-column grid wrapper. The marketing
   hero above paints it near-white, which left the Go-Live checklist sitting as
   light console text on light paper. Strip the page treatment here. */
[data-surface="console"] .hero,
[data-surface="console"] header.hero {
  background: none;
  border-bottom: 0;
}
[data-surface="console"] .hero p { max-width: none; margin-inline: 0; }

[data-surface="console"] .card .sub,
[data-surface="console"] .help,
[data-surface="console"] small,
[data-surface="console"] .empty { color: var(--muted); }
[data-surface="console"] input,
[data-surface="console"] select,
[data-surface="console"] textarea,
[data-surface="console"] .input {
  background: rgba(4,9,18,.55);
  border: 1px solid rgba(255,255,255,.16);
  color: #F4F7FC;
}
[data-surface="console"] input::placeholder { color: #7E8CA5; }
[data-surface="console"] input:focus,
[data-surface="console"] select:focus,
[data-surface="console"] textarea:focus,
[data-surface="console"] .input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(109,155,245,.22);
}
[data-surface="console"] th { color: var(--dim); border-bottom-color: rgba(255,255,255,.12); }
[data-surface="console"] td { color: #DCE3EF; border-bottom-color: rgba(255,255,255,.07); }
[data-surface="console"] tbody tr:hover td { background: rgba(255,255,255,.05); }
[data-surface="console"] code { background: rgba(255,255,255,.09); color: #CFE0FF; }
[data-surface="console"] a { color: var(--brand-2); }
[data-surface="console"] .btn { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #EDF2FA; }
[data-surface="console"] .btn:hover { background: rgba(255,255,255,.12); }
[data-surface="console"] .btn-primary {
  background-image: linear-gradient(180deg, #2E6BE0 0%, #1B4FB8 100%);
  border-color: #17429B; color: #fff;
}

/* ==========================================================================
   Form controls — the part an owner and a customer actually touch
   ========================================================================== */
label, .form-label, .field-label {
  display: block;
  font-family: var(--p-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--p-ink);
  margin-bottom: 6px;
}
label .optional, .form-label .optional { font-weight: 500; color: var(--p-ink-3); letter-spacing: 0; }

input:not([type="checkbox"]):not([type="radio"]),
select, textarea, .input {
  width: 100%;
  border-radius: var(--p-r);
  border: 1.5px solid var(--p-line-2);
  background: var(--p-card);
  box-shadow: 0 1px 2px rgba(16,28,46,.04) inset;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: #BFC7D4; }
input:focus, select:focus, textarea:focus, .input:focus {
  border-color: var(--p-accent);
  box-shadow: 0 0 0 4px rgba(22,87,208,.14);
  background: var(--p-card);
}
input:disabled, select:disabled, textarea:disabled { background: var(--p-paper-2); color: var(--p-ink-3); cursor: not-allowed; }
input[aria-invalid="true"], .input.invalid, .field.invalid input {
  border-color: var(--p-danger);
  box-shadow: 0 0 0 4px rgba(168,39,27,.12);
}
/* The select arrow, drawn rather than left to the platform default. */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232B3A52' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
[data-surface="console"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23AAB6CB' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Checkbox and radio, sized for a thumb. */
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px;
  accent-color: var(--p-accent);
  cursor: pointer;
}

/* ==========================================================================
   Messages — an owner should know what happened and what to do next, at a
   glance, from shape as well as colour.
   ========================================================================== */
.msg, .alert, .notice, .form-message, .spl-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--p-r);
  border: 1px solid transparent;
  border-left-width: 4px;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
}
.msg::before, .alert::before, .notice::before {
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.5;
  flex-shrink: 0;
}
.msg.error, .alert.error, .alert-error, .msg.err, .error-message, .spl-msg--error {
  background: var(--p-danger-wash); border-color: rgba(168,39,27,.28); border-left-color: var(--p-danger); color: #7A1C12;
}
.msg.error::before, .alert.error::before, .error-message::before { content: "!"; color: var(--p-danger); }
.msg.success, .alert.success, .alert-success, .msg.ok, .spl-msg--success {
  background: var(--p-money-wash); border-color: rgba(11,107,82,.28); border-left-color: var(--p-money); color: #084F3C;
}
.msg.success::before, .alert.success::before, .msg.ok::before { content: "✓"; color: var(--p-money); }
.msg.warn, .alert.warn, .alert-warning, .msg.warning, .spl-msg--warn {
  background: var(--p-warn-wash); border-color: rgba(146,96,12,.28); border-left-color: var(--p-warn); color: #6B4508;
}
.msg.warn::before, .alert.warn::before, .msg.warning::before { content: "!"; color: var(--p-warn); }
.msg.info, .alert.info, .spl-msg--info {
  background: var(--p-accent-wash); border-color: var(--p-accent-line); border-left-color: var(--p-accent); color: #0E3E9A;
}
.msg.info::before, .alert.info::before { content: "i"; color: var(--p-accent); font-style: italic; }
[data-surface="console"] .msg.error, [data-surface="console"] .msg.err { background: rgba(242,136,123,.12); color: #F6ADA2; border-left-color: #F2887B; }
[data-surface="console"] .msg.ok { background: rgba(78,210,166,.12); color: #8FE4C8; border-left-color: #4ED2A6; }

/* Toast: sits above everything, announces itself, then leaves. */
.toast, .spl-toast {
  border-radius: var(--p-r);
  box-shadow: 0 18px 44px -14px rgba(16,28,46,.5);
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.12);
}

/* ==========================================================================
   Waiting — a calm ring, not a jittery circle. One animation, one purpose.
   ========================================================================== */
.spinner, .loader, .spin, .spinner-circle {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(22,87,208,.18);
  border-top-color: var(--p-accent);
  animation: spl-spin .72s linear infinite;
  vertical-align: middle;
}
.btn .spinner, .btn .spin, .primary-btn .spinner {
  border-color: rgba(255,255,255,.32);
  border-top-color: #fff;
  width: 17px; height: 17px;
}
[data-surface="console"] .spinner, [data-surface="console"] .spin {
  border-color: rgba(109,155,245,.24); border-top-color: var(--brand);
}
@keyframes spl-spin { to { transform: rotate(360deg); } }

/* A skeleton says "content is coming", which beats a spinner for lists. */
.skeleton, .skel {
  background: linear-gradient(90deg, rgba(43,58,82,.07) 25%, rgba(43,58,82,.13) 37%, rgba(43,58,82,.07) 63%);
  background-size: 400% 100%;
  animation: spl-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--p-r-sm);
  color: transparent !important;
}
@keyframes spl-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.loading-overlay {
  background: rgba(247,245,241,.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: reduce) {
  .spinner, .loader, .spin, .skeleton, .skel { animation: none !important; }
  .skeleton, .skel { background: rgba(43,58,82,.10); }
}

/* ==========================================================================
   Tables — ledger, not spreadsheet
   ========================================================================== */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r-lg);
  overflow: hidden;
  box-shadow: var(--p-sh-2);
}
thead th {
  background: var(--p-paper);
  padding: 12px 14px;
  font-size: var(--p-t-cap);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p-ink-3);
  border-bottom: 1px solid var(--p-line);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 13px 14px; font-size: 0.9375rem; color: var(--p-ink-2); border-bottom: 1px solid rgba(16,28,46,.06); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: rgba(247,245,241,.55); }
tbody tr:hover td { background: var(--p-accent-wash); }
/* Figures right-aligned and monospaced so the eye can scan a column. */
td.num, th.num, td.amount, td.price, .table-num {
  text-align: right;
  font-family: var(--p-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
[data-surface="console"] table { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.11); }
[data-surface="console"] thead th { background: rgba(255,255,255,.05); }
[data-surface="console"] tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
[data-surface="console"] tbody tr:hover td { background: rgba(109,155,245,.10); }

/* ==========================================================================
   Cards — one object, consistent edges, depth spent by role
   ========================================================================== */
.card, .panel, .spl-card, .landing-card, .policy-card, .feature-card,
.pricing-card, .mobile-card, .booking-card {
  border-radius: var(--p-r-lg);
  border: 1px solid var(--p-line);
  background: var(--p-card);
  box-shadow: var(--p-sh-2);
  overflow-wrap: break-word;
}
/* The one card that matters on a page earns a heavier frame. */
.card--featured, .pricing-card.featured, .spl-card--primary {
  border-color: var(--p-accent-line);
  box-shadow: 0 1px 3px rgba(16,28,46,.06), 0 24px 50px -22px rgba(22,87,208,.4);
}
.card__header, .card-header { border-bottom: 1px solid var(--p-line); padding-bottom: var(--p-3); margin-bottom: var(--p-3); }
.card__footer, .card-footer { border-top: 1px solid var(--p-line); padding-top: var(--p-3); margin-top: var(--p-3); }

/* ==========================================================================
   Console overrides, last word.
   The component blocks above are written for the light surfaces, so the dark
   console has to restate them here or a white input lands on a dark card.
   ========================================================================== */
[data-surface="console"] input:not([type="checkbox"]):not([type="radio"]),
[data-surface="console"] select,
[data-surface="console"] textarea,
[data-surface="console"] .input {
  background: rgba(4,9,18,.6);
  border: 1.5px solid rgba(255,255,255,.16);
  color: #F4F7FC;
  box-shadow: 0 1px 2px rgba(0,0,0,.28) inset;
}
[data-surface="console"] input::placeholder,
[data-surface="console"] textarea::placeholder { color: #7E8CA5; }
[data-surface="console"] input:hover:not(:focus),
[data-surface="console"] select:hover:not(:focus),
[data-surface="console"] textarea:hover:not(:focus) { border-color: rgba(255,255,255,.26); }
[data-surface="console"] input:focus,
[data-surface="console"] select:focus,
[data-surface="console"] textarea:focus,
[data-surface="console"] .input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(109,155,245,.22);
  background: rgba(4,9,18,.75);
}
[data-surface="console"] input:disabled,
[data-surface="console"] select:disabled { background: rgba(255,255,255,.04); color: #7E8CA5; }
[data-surface="console"] label,
[data-surface="console"] .form-label,
[data-surface="console"] .lbl { color: #E9EDF5; }
[data-surface="console"] .eyebrow,
[data-surface="console"] .label,
[data-surface="console"] .help { color: var(--muted); }

/* Sign-in card: the two controls belong on one line only when there is room. */
[data-surface="console"] .gate-card { padding: 30px 26px; border-radius: 22px; }
[data-surface="console"] .gate-card .btn { width: 100%; }
[data-surface="console"] .gate-card > div[style*="display:flex"] { gap: 10px; }
@media (max-width: 420px) {
  [data-surface="console"] .gate-card > div[style*="display:flex"] { flex-direction: column; }
  [data-surface="console"] .gate-card > div[style*="display:flex"] .btn { width: 100%; }
}

/* Console messages and spinners on the dark ground */
[data-surface="console"] .msg { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--muted); }
[data-surface="console"] .toast { background: #131E31; border-color: rgba(255,255,255,.14); color: #EDF2FA; }
[data-surface="console"] .skeleton, [data-surface="console"] .skel {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
}

/* An empty message container should take no space at all. */
.msg:empty, .alert:empty, .notice:empty, .form-message:empty,
.spl-msg:empty, .err-text:empty, .test-result:empty { display: none !important; }

/* Form borders take a cool neutral rather than the warm page hairline, so a
   field reads as a crisp control rather than a panel edge. */
:root { --p-field-line: #C7CFDB; --p-field-line-strong: #AEB9C9; }
input:not([type="checkbox"]):not([type="radio"]),
select, textarea, .input {
  border-color: var(--p-field-line);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: var(--p-field-line-strong);
}

/* ==========================================================================
   Booking page — legibility floor and tap targets
   Visual only. Raises sub-12px labels to a readable minimum and brings
   every control up to the 44px touch target guideline.
   ========================================================================== */

/* No caption on a customer-facing page drops below 12px. */
.spl-section-eyebrow { font-size: 12.5px; letter-spacing: 0.06em; }
.date-row .date-label { font-size: 12.5px !important; color: var(--p-ink-2) !important; }
.spl-select-row .date-label { font-size: 13px !important; color: var(--p-ink) !important; }
#weekDays button .spl-day-name { font-size: 12.5px; letter-spacing: 0.03em; }
#weekDays button .spl-day-tag { font-size: 12px !important; opacity: 1; font-weight: 800; }
.spl-voice-step { font-size: 12px; }
.form-label,
.spl-modal-panel .form-label,
.modal-content .form-label { font-size: 12.5px !important; color: var(--p-ink-2) !important; }

/* Touch targets */
#todayBtn { min-height: 44px; padding-inline: 16px; }
footer a[href*="privacy.html"],
footer a[href*="terms.html"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
}