/* Tokens extracted from encoregaming.us (inline stylesheet), 2026-09-30. */
:root {
  --blue: #0959a7;
  --blue-light: #1a74cc;
  --blue-dim: #0a2a50;
  --blue-glow: rgba(9, 89, 167, 0.35);
  --black: #050505;
  --dark: #0d0d0d;
  --card: #111111;
  --card2: #161616;
  --border: #1e1e1e;
  --border-blue: rgba(9, 89, 167, 0.4);
  --white: #f0f0f0;
  --gray: #777777;
  --gray-light: #bbbbbb;
  --star: #fbbc04; /* Google review gold, from the live page's star rows */
  /* Tier accents: ours, not the live site's (it is single-accent blue). Text only, never backgrounds. */
  /* The border every typed control on the site already used as a literal; named here so the plan tabs can
     borrow the same edge instead of adding a fourth copy of it. */
  --border-input: #2a3a50;
  --tier-standard: #2ec8d8;
  --tier-plus: #1a74cc;
  --tier-premium: #9b7bff;
  --tier: var(--gray-light);
  --danger: #e5484d;
  --ok: #3fb950;
  --warn: #f59e0b;
  --hair: rgba(255, 255, 255, 0.1);
  --panel: rgba(255, 255, 255, 0.02);
  --display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
}
body.bar-on { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
[hidden] { display: none !important; }
a { color: var(--blue-light); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
img { max-width: 100%; }

/* ── Nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0;
  padding: calc(env(safe-area-inset-top, 0px)) 1.25rem 0;
  background: rgba(5, 5, 5, 0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav-logo {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0.1em;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 1rem 0;
}
.nav-logo span { color: var(--blue-light); }
.nav-links { display: none; flex: 1; }
.nav-link {
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  padding: 1rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--white); border-bottom-color: var(--blue); }
.nav-cta {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--blue);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--blue-light); }

/* ── Layout ── */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2.5rem 0 1.5rem;
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-light);
  white-space: nowrap;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.muted { color: var(--gray); }
.small { font-size: 13px; }

/* ── Hero ── */
.hero { padding: 2.5rem 0 2rem; }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1rem;
}
.hero-eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--blue); }
.hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 13vw, 100px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero-title .line1 { color: var(--white); display: block; }
.hero-title .line2 { color: transparent; -webkit-text-stroke: 2px var(--blue); display: block; }
.hero-sub { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--gray-light); max-width: 460px; margin: 0 0 2rem; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
}
.badge-blue { background: rgba(9, 89, 167, 0.2); color: var(--blue-light); border: 1px solid var(--border-blue); }
.badge-white { background: rgba(255, 255, 255, 0.06); color: var(--gray-light); border: 1px solid var(--border); }

/* ── Stats strip ── */
.info-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 1rem;
}
.info-cell { background: var(--card); padding: 1.25rem 1rem; text-align: center; }
.info-icon { font-size: 22px; margin-bottom: 6px; }
.info-label {
  font-family: var(--condensed);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
}
.info-value { font-family: var(--condensed); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--white); }

/* ── Reviews banner ── */
.reviews-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  background: rgba(26, 116, 204, 0.08);
  border: 1px solid rgba(26, 116, 204, 0.25);
  border-radius: 8px;
  text-decoration: none;
  color: var(--white);
}
.stars { color: var(--star); letter-spacing: 2px; line-height: 1; }
.reviews-badge .stars { font-size: 18px; }
.reviews-rating { font-family: var(--condensed); font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.reviews-tail { font-size: 13px; color: var(--gray-light); }

/* ── Packages ── */
.pkg-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.pkg-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pkg-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.pkg-card.featured { border: 2px solid var(--blue); box-shadow: 0 0 30px var(--blue-glow); }
.pkg-bar { height: 3px; background: linear-gradient(90deg, var(--border), var(--border-blue)); }
.pkg-card.featured .pkg-bar { background: var(--blue); }
.pkg-header { padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid var(--border); }
.popular-tag {
  display: inline-block;
  font-family: var(--condensed);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #134a88; /* a shade under --blue: the live page's tag renders darker than its stylesheet value */
  color: #fff;
  padding: 3px 10px;
  border-radius: 2px;
}
.pkg-name { font-family: var(--display); font-size: 32px; letter-spacing: 0.06em; line-height: 1; color: var(--white); margin-bottom: 4px; }
.pkg-capacity {
  font-family: var(--condensed);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1rem;
}
.pkg-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.pkg-currency { font-family: var(--condensed); font-size: 20px; font-weight: 600; color: var(--gray); }
.pkg-price { font-family: var(--display); font-size: 52px; letter-spacing: 0.02em; line-height: 1; color: var(--white); }
.pkg-overage { font-family: var(--condensed); font-size: 11px; letter-spacing: 0.05em; color: var(--gray); }
.pkg-overage span { color: var(--blue-light); }
.pkg-body { padding: 1.25rem 1.5rem; flex: 1; }
.pkg-tag-slot { min-height: 2.45rem; }
.feature-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: var(--gray-light);
}
.feature-row:last-child { border-bottom: none; }
.feature-row.inactive { opacity: 0.28; }
.check-wrap {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(9, 89, 167, 0.25);
  border: 1px solid var(--border-blue);
  display: grid;
  place-items: center;
  font-size: 9px;
  line-height: 1;
  color: var(--blue-light);
}
.check-wrap.off { background: rgba(255, 255, 255, 0.04); border-color: var(--border); color: var(--gray); }
.feature-highlight { color: var(--blue-light); font-weight: 500; }
.pkg-cta-wrap { padding: 0 1.5rem 1.5rem; }
.pkg-cta {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--gray-light);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.pkg-cta:hover { border-color: var(--blue); color: var(--blue-light); }
.pkg-cta.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.pkg-cta.primary:hover { background: var(--blue-light); border-color: var(--blue-light); color: #fff; }

/* ── Buyout callout ── */
.buyout {
  margin-top: 2.5rem;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(9, 89, 167, 0.45);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(9, 89, 167, 0.1), rgba(9, 89, 167, 0.02));
}
.buyout-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.buyout-main { flex: 1; min-width: 280px; }
.buyout-eyebrow {
  font-family: var(--condensed);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 0.5rem;
}
.buyout-title { font-family: var(--condensed); font-size: 28px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; margin-bottom: 0.5rem; }
.buyout p { font-size: 15px; line-height: 1.55; color: var(--gray-light); margin-bottom: 0.75rem; }
.buyout-facts { font-family: var(--condensed); font-size: 13px; letter-spacing: 0.04em; color: var(--gray); }
.buyout-side { text-align: right; }
.buyout-from { font-family: var(--condensed); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); }
.buyout-price { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: 0.02em; color: var(--white); }
.buyout-note { font-size: 12px; color: var(--gray); margin: 4px 0 0.9rem; }

/* ── Add-on showcase ── */
.addon-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.addon-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.addon-card.featured { border-color: var(--border-blue); background: linear-gradient(135deg, rgba(10, 42, 80, 0.4), var(--card)); }
.addon-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(9, 89, 167, 0.15);
  border: 1px solid var(--border-blue);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.addon-body { flex: 1; min-width: 0; }
.addon-name { font-family: var(--condensed); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--white); margin-bottom: 2px; }
.addon-tag {
  font-family: var(--condensed);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-left: 8px;
}
.addon-desc { font-size: 12px; color: var(--gray); }
.addon-price { flex-shrink: 0; font-family: var(--display); font-size: 22px; letter-spacing: 0.04em; color: var(--blue-light); }

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.faq-item { padding: 1.25rem 1.5rem; border: 1px solid var(--hair); border-radius: 8px; background: var(--panel); }
.faq-q { font-family: var(--condensed); font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
.faq-a { font-size: 14px; line-height: 1.55; color: var(--gray-light); }

/* ── Testimonials ── */
.quotes-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.quote-card { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--hair); border-radius: 8px; background: var(--panel); }
.quote-card .stars { font-size: 16px; margin-bottom: 0.85rem; }
.quote-text { flex: 1; font-size: 15px; line-height: 1.6; color: #dcdcdc; font-style: italic; }
.quote-who {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
}
.quote-src { font-family: var(--body); font-size: 12px; color: var(--gray); display: block; margin-top: 2px; }
.reviews-all { display: block; text-align: center; margin-top: 1.25rem; font-family: var(--condensed); font-size: 14px; letter-spacing: 0.06em; text-decoration: none; }

/* ── Buttons ── */
.btn {
  display: inline-block;
  font-family: var(--condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 5px;
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--blue-light); }
.btn-primary:disabled { background: #1c2a3a; color: var(--gray); }
.btn-ghost { background: transparent; color: var(--gray-light); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-light); }
.btn-danger { background: transparent; color: #ffb4b6; border-color: rgba(229, 72, 77, 0.5); }
.btn-block { display: block; width: 100%; }
.btn-sm { font-size: 13px; padding: 9px 14px; }

/* ── Booking engine panel ── */
.book-panel {
  background: linear-gradient(135deg, var(--blue-dim) 0%, #0a1a30 100%);
  border: 1px solid var(--border-blue);
  border-radius: 10px;
  padding: 1.75rem 1.25rem;
  scroll-margin-top: 72px;
}
.book-title { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 10vw, 56px); letter-spacing: 0.04em; line-height: 1; text-align: center; }
.book-sub { text-align: center; color: var(--gray-light); font-size: 15px; margin: 0.75rem auto 1.5rem; max-width: 38rem; }

/* Step indicator */
.steps { display: flex; gap: 6px; list-style: none; margin-bottom: 1.5rem; }
.steps li {
  flex: 1;
  text-align: center;
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 6px 2px 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}
.steps li.done { color: var(--gray-light); border-bottom-color: var(--blue-dim); }
.steps li.done button { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.steps li.done button:hover { color: var(--blue-light); }
.steps li.current { color: #fff; border-bottom-color: var(--blue-light); }

/* Held-date line */
.hold-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  background: rgba(5, 5, 5, 0.35);
  border: 1px solid var(--border-blue);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
}
.hold-line .what {
  flex-basis: 100%;
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.hold-line .when { font-family: var(--display); font-size: 26px; letter-spacing: 0.04em; line-height: 1.1; color: var(--white); }
.hold-line .timer { margin-left: auto; font-family: var(--display); font-size: 26px; letter-spacing: 0.06em; color: var(--white); font-variant-numeric: tabular-nums; }
.hold-line .timer.low { color: var(--warn); }

/* Step 1: weekend date grid */
.wk-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.wk-label { font-family: var(--condensed); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 8px; }
.wk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wk-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 116px;
  text-align: left;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--white);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.wk-card.open, .wk-card.request { border-color: var(--border-blue); }
.wk-card.open:hover, .wk-card.request:hover { border-color: var(--blue); transform: translateY(-2px); }
.wk-card.request { border-style: dashed; }
.wk-card.yours { border-color: var(--blue); background: linear-gradient(135deg, rgba(10, 42, 80, 0.6), var(--card)); }
.wk-card.yours .wk-state span { background: var(--blue); border-color: var(--blue); color: #fff; }
.wk-card.held, .wk-card.booked, .wk-card.blocked, .wk-card.past { background: var(--dark); color: var(--gray); }
.wk-date { font-family: var(--display); font-size: 26px; letter-spacing: 0.04em; line-height: 1.05; }
.wk-time { font-family: var(--condensed); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-light); }
.wk-card.held .wk-time, .wk-card.booked .wk-time, .wk-card.blocked .wk-time, .wk-card.past .wk-time { color: var(--gray); }
.wk-state { margin-top: auto; padding-top: 6px; font-family: var(--condensed); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.wk-state span { display: inline-block; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--border); }
.wk-card.open .wk-state span, .wk-card.request .wk-state span { background: rgba(9, 89, 167, 0.2); border-color: var(--border-blue); color: var(--blue-light); }
.wk-hint { font-family: var(--condensed); font-size: 12px; letter-spacing: 0.04em; color: var(--gray); margin-top: 4px; line-height: 1.3; }

/* Secondary asks under the grid */
.asks { margin-top: 1.5rem; display: grid; gap: 0.5rem; }
.ask-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 0.25rem; }
.ask-form .field { flex: 1 1 200px; }
.ask-note { flex-basis: 100%; font-size: 14px; color: var(--gray-light); }
.ask-error { flex-basis: 100%; font-size: 14px; color: #ffb4b6; }
.ask-error:empty, .ask-note:empty { display: none; }

/* Step 2: compact package chooser */
.pick-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pick-card {
  position: relative;
  background: rgba(5, 5, 5, 0.4);
  border: 1px solid var(--border-blue);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pick-card.featured { border-color: var(--blue); box-shadow: 0 0 24px var(--blue-glow); }
.pick-card .popular-tag { align-self: flex-start; margin-bottom: 0.6rem; }
.pick-card.chosen { border-color: var(--blue-light); }
.pick-name { font-family: var(--display); font-size: 30px; letter-spacing: 0.06em; line-height: 1; }
.pick-meta { font-family: var(--condensed); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-light); }
.pick-price-row { display: flex; align-items: baseline; gap: 5px; margin: 0.6rem 0 0.15rem; }
.pick-price-row .cur { font-family: var(--condensed); font-size: 18px; font-weight: 600; color: var(--gray); }
.pick-price { font-family: var(--display); font-size: 44px; letter-spacing: 0.02em; line-height: 1; }
.pick-extra { font-family: var(--condensed); font-size: 12px; letter-spacing: 0.04em; color: var(--gray); margin-bottom: 1rem; }
.pick-extra b { color: var(--blue-light); font-weight: 600; }
.pick-card .btn { margin-top: auto; width: 100%; }

/* Step 3: add-on options */
.opt-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.opt {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: rgba(5, 5, 5, 0.4);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.opt.on { border-color: var(--blue); background: linear-gradient(135deg, rgba(10, 42, 80, 0.55), rgba(5, 5, 5, 0.4)); }
.opt.disabled { opacity: 0.45; }
.opt-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.opt-price { font-family: var(--display); font-size: 22px; letter-spacing: 0.04em; line-height: 1; color: var(--blue-light); }
.opt-included { font-family: var(--condensed); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ok); }
.toggle { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--card2); border: 1px solid var(--border); }
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gray);
  transition: transform 0.15s, background 0.15s;
}
.opt.on .toggle { background: var(--blue); border-color: var(--blue); }
.opt.on .toggle::after { transform: translateX(18px); background: #fff; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.stepper button { width: 36px; height: 36px; background: var(--card2); border: 0; font-family: var(--display); font-size: 20px; color: var(--white); }
.stepper button:hover:not(:disabled) { background: var(--blue-dim); }
.stepper button:disabled { color: var(--gray); }
.stepper input {
  width: 40px;
  text-align: center;
  font-family: var(--display);
  font-size: 22px;
  line-height: 36px;
  background: transparent;
  border: 0;
  color: var(--white);
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.stepper input:focus { outline: none; background: var(--blue-dim); }

/* Step 4: form + summary */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.field label {
  display: block;
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  color-scheme: dark;
}
.field select { -webkit-appearance: none; appearance: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-light); }
.field.full { grid-column: 1 / -1; }
.pay-summary { margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: rgba(5, 5, 5, 0.35); border: 1px solid var(--border-blue); border-radius: 8px; }
.pay-summary .roll { display: flex; align-items: baseline; gap: 12px; }
.pay-summary .roll .total { font-family: var(--display); font-size: 34px; line-height: 1; letter-spacing: 0.02em; }
.deposit-math { font-family: var(--condensed); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--gray-light); margin-top: 0.5rem; }
.deposit-math b { color: var(--blue-light); }
.risk-line { font-family: var(--condensed); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-align: center; color: var(--gray-light); margin: 1.25rem 0 0.75rem; }
.fine { font-family: var(--condensed); font-size: 13px; letter-spacing: 0.04em; color: var(--gray-light); text-align: center; margin-top: 1rem; }
.summary-line {
  max-width: 720px;
  margin: 0 auto 1.25rem;
  font-family: var(--condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-light);
  text-align: center;
}
.summary-line b { color: var(--white); }
.hold-panel { text-align: center; }
.hold-caption { font-family: var(--condensed); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-light); }

/* ── Notices ── */
.notice {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-blue);
  background: rgba(9, 89, 167, 0.12);
  color: var(--gray-light);
  font-size: 14px;
}
.notice.error { border-color: rgba(229, 72, 77, 0.5); background: rgba(229, 72, 77, 0.1); color: #ffb4b6; }
.notice.warn { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.1); color: var(--warn); }
.notice .alts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.75rem; }
.chip {
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue-light);
  text-decoration: none;
}
.chip:hover { background: var(--blue); color: #fff; }

/* ── Sticky quote bar ── */
.quote-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: rgba(13, 13, 13, 0.97);
  border-top: 1px solid var(--border-blue);
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.quote-bar.show { transform: none; }
@media (prefers-reduced-motion: reduce) { .quote-bar { transition: none; } }
.quote-inner { max-width: 1100px; margin: 0 auto; }
.quote-main { display: flex; align-items: center; gap: 1rem; }
.quote-total { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: 0.02em; }
.quote-total.stale { color: var(--gray); }
.quote-split { font-family: var(--condensed); font-size: 13px; letter-spacing: 0.04em; color: var(--gray-light); line-height: 1.3; }
.quote-split b { color: var(--blue-light); font-weight: 700; }
.quote-toggle {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-light);
}
.quote-lines { list-style: none; margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.5rem; max-height: 40vh; overflow-y: auto; }
.quote-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: 14px; padding: 4px 0; color: var(--gray-light); }
.quote-lines li .inc { color: var(--ok); font-family: var(--condensed); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; }
.quote-cta { margin-top: 0.65rem; }
.quote-cta .btn { width: 100%; padding: 14px 16px; }

/* ── Confirmation page ── */
.confirm { max-width: 640px; margin: 0 auto; padding: 3rem 0 4rem; text-align: center; }
.confirm .hero-title { font-size: clamp(52px, 13vw, 88px); }
.confirm .hero-sub { max-width: 34rem; margin: 0 auto; }
.code-box {
  display: inline-block;
  margin: 1rem 0 0.5rem;
  font-family: var(--display);
  font-size: 40px;
  letter-spacing: 0.16em;
  padding: 0.4rem 1.25rem;
  border: 1px dashed var(--blue);
  border-radius: 6px;
}
.details { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-top: 1.5rem; }
.details dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; }
.details dt {
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  padding-top: 3px;
}
.details dd { text-align: right; }
.details .balance dd { font-family: var(--display); font-size: 28px; color: var(--blue-light); line-height: 1; }
.cal-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 1.25rem; }
.spinner {
  width: 44px;
  height: 44px;
  margin: 1.5rem auto;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--blue-light);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ── Admin ── */
/* The strip scrolls sideways rather than wrapping or squeezing: nine tabs do not fit a phone, and a tab
   that has been shrunk to fit is a tab nobody can read or hit. */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  margin-top: 1.5rem;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1rem;
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--white); border-bottom-color: var(--blue); }
.tab .count { color: var(--warn); margin-left: 4px; }
.cards { display: grid; gap: 0.75rem; margin-top: 1rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; }
.card.flagged { border-color: rgba(245, 158, 11, 0.5); }
.card.failed { border-color: rgba(229, 72, 77, 0.5); }
.card.cancelled { opacity: 0.55; }
.card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.card-title { font-family: var(--display); font-size: 26px; letter-spacing: 0.04em; line-height: 1.1; }
.card-meta { font-size: 14px; color: var(--gray-light); margin-top: 4px; overflow-wrap: anywhere; }
.card-meta b { color: var(--white); font-weight: 500; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.75rem; align-items: center; }
.pill {
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--gray-light);
}
.pill.ok { color: var(--ok); border-color: rgba(63, 185, 80, 0.4); }
.pill.warn { color: var(--warn); border-color: rgba(245, 158, 11, 0.4); }
.pill.bad { color: #ffb4b6; border-color: rgba(229, 72, 77, 0.5); }
.body-text { font-size: 13px; color: var(--gray); margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-callout {
  font-size: 14px;
  color: var(--white);
  margin-top: 6px;
  padding: 2px 10px;
  border-left: 3px solid var(--warn);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.notes-callout .notes-label {
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-right: 4px;
}
.login { max-width: 380px; margin: 4rem auto; }
/* Phone numbers and emails are the owner's job on a phone: one tap to call or write, and a tap target
   that survives a thumb. The underline is what says it is tappable without turning the card into links. */
.contact-link {
  color: var(--blue-light);
  text-decoration: underline;
  text-decoration-color: rgba(26, 116, 204, 0.45);
  text-underline-offset: 3px;
  padding: 2px 0;
}
.contact-link:hover { text-decoration-color: currentColor; }

/* ---- Manual booking entry ----
   Same dialog shape as the waitlist modal, sized for a form rather than two fields, and capped to the
   viewport so a long form scrolls inside the dialog instead of pushing the page. */
.manual-modal {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  background: var(--dark);
  color: var(--white);
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.manual-modal::backdrop { background: rgba(0, 0, 0, 0.75); }
#manual-form { display: flex; flex-direction: column; gap: 0.85rem; }
#manual-form .field { margin: 0; }
#manual-form .form-grid { gap: 0.85rem; }
.field-hint { font-family: var(--body); font-size: 12px; color: var(--gray); margin: 5px 0 0; }

.manual-addons, .manual-deposit {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem 1rem;
  margin: 0;
}
.manual-addons legend, .manual-deposit legend {
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
  padding: 0 6px;
}
/* The whole row is the label, so the row is the tap target and it clears 44px even though the checkbox
   itself is smaller. The owner is doing this one-handed on a phone while the parent is still talking. */
.manual-addon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--body);
  font-size: 14px;
}
.manual-addon:last-child { border-bottom: 0; }
.manual-addon-name { flex: 1; }
.manual-addon-price { font-family: var(--body); font-size: 13px; color: var(--blue-light); }
.addon-check { width: 22px; height: 22px; accent-color: var(--blue); flex: none; }
.addon-qty {
  width: 72px;
  min-height: 44px;
  flex: none;
  background: var(--black);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  color-scheme: dark;
}
.manual-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  font-family: var(--body);
  font-size: 14px;
}
.manual-radio input { width: 22px; height: 22px; accent-color: var(--blue); flex: none; }

/* The owner's date field: the funnel's segmented date control (see .date-seg) in the admin form. The box
   sizing lives here because the funnel's own is scoped to .bday-card, which this is not inside. */
.manual-date { min-height: 44px; }
.manual-date .seg {
  min-width: 34px;
  width: 34px;
  padding: 8px 2px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  color-scheme: dark;
}
.manual-date .seg-y { width: 56px; }
.manual-date .seg::placeholder { color: var(--gray); }
.manual-date .seg:focus { outline: none; background: rgba(26, 116, 204, 0.4); }
.manual-date .seg-cal { width: 38px; height: 38px; }
.manual-date .seg-cal:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 1px; }

/* What the server says that date is. Green only when the date can actually be booked, so "open" reads as
   permission and every other answer reads as a stop. */
.date-state {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--gray-light);
  min-height: 18px;
}
.date-state.ok { color: var(--ok); }
.date-state.bad { color: #ffb4b6; }
.date-check { font-size: 14px; line-height: 1; }
/* A weekday is bookable and is still worth stopping on, so it gets the same amber accent as a booking's
   notes rather than the red of something refused. */
.date-warn {
  margin-top: 6px;
  padding: 2px 10px;
  border-left: 3px solid var(--warn);
  font-family: var(--body);
  font-size: 13px;
  color: var(--white);
}

.manual-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 0.9rem 1rem;
  background: rgba(5, 5, 5, 0.4);
  border: 1px solid var(--border-blue);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.manual-total-sum b { color: var(--white); font-weight: 600; }
.manual-total-due { font-size: 13px; color: var(--gray-light); }
.manual-total-bad { font-size: 13px; color: #ffb4b6; }
.manual-actions { display: flex; gap: 10px; }
.manual-actions .btn { flex: 1; }

/* ---- Admin on a phone ----
   The owner runs this one-handed at the party, so every tap target clears 44px and the tab strip keeps
   its full-bleed scroll. Desktop is untouched: these only apply below the site's single breakpoint. */
@media (max-width: 768px) {
  /* Bleed the strip to the screen edges so a half-visible tab shows there is more to scroll to. */
  .tabs {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .tab { padding: 0.85rem 0.9rem; }
  .btn-sm { min-height: 44px; padding: 11px 16px; }
  .card-actions { gap: 10px; }
  .card-actions .btn { flex: 1 1 auto; min-width: 140px; }
  .card-title { font-size: 23px; }
  .manual-modal { padding: 1.25rem 1.1rem 1.1rem; }
  /* The form is taller than a phone, so the two decisions stay reachable without scrolling back down.
     The rule and the matching background are what stop it reading as content lying over content. */
  .manual-actions {
    position: sticky;
    bottom: -1.1rem;
    background: var(--dark);
    margin: 0 -1.1rem -1.1rem;
    padding: 12px 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
  }
  .manual-actions .btn { min-height: 48px; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}

/* ── Footer ── */
.page-footer {
  text-align: center;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  font-family: var(--condensed);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gray);
}
.page-footer a { color: var(--blue-light); text-decoration: none; }

/* ── Desktop: the live site's container and grids. One breakpoint, as on encoregaming.us. ── */
@media (min-width: 769px) {
  .wrap { padding: 0 2rem 4rem; }
  .nav { padding-left: 2rem; padding-right: 2rem; }
  .nav-logo { padding-right: 1.5rem; margin-right: 1.5rem; border-right: 1px solid var(--border); }
  .nav-links { display: flex; }
  .hero { padding: 3rem 0 2.5rem; }
  .hero-title { font-size: clamp(72px, 8vw, 100px); }
  .info-strip { grid-template-columns: repeat(4, 1fr); }
  .reviews-badge { flex-direction: row; gap: 0.75rem; }
  .pkg-grid { grid-template-columns: repeat(3, 1fr); }
  .addon-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes-grid { grid-template-columns: repeat(3, 1fr); }
  .book-panel { padding: 2.5rem 2.25rem; }
  .steps li { font-size: 12px; }
  .wk-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .pick-grid { grid-template-columns: repeat(3, 1fr); }
  .opt-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .buyout { padding: 2rem 1.75rem; }
}

/* ── Tier accents ─────────────────────────────────────────────────────────
   One variable, set on <html> by the funnel and locally on anything that
   names a tier, so children just use var(--tier). */
[data-tier="standard"] { --tier: var(--tier-standard); }
[data-tier="plus"] { --tier: var(--tier-plus); }
[data-tier="premium"] { --tier: var(--tier-premium); }
[data-tier="none"] { --tier: var(--gray-light); }

/* ── Landing: Door B panel ── */
.book-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 1.5rem; }

/* ── Funnel shell ── */
.funnel-body { padding-bottom: 0; }
/* The pill floats over the page; on desktop it shares a corner with the rail, which moves down to clear it. */
:root { --pill-clear: 0px; }
body.has-pill { --pill-clear: 52px; }
.banner {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px)) 1.25rem 0;
  background: rgba(5, 5, 5, 0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.banner .nav-logo { padding-top: 0.85rem; padding-bottom: 0.85rem; }
.banner-phone {
  margin-left: auto;
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray-light);
  text-decoration: none;
  white-space: nowrap;
}
.banner-phone:hover { color: var(--blue-light); }

.funnel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem calc(190px + env(safe-area-inset-bottom, 0px));
}
.step-head { margin-bottom: 1.25rem; }
.step-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 0.5rem;
}
.step-eyebrow .timer { font-family: var(--display); font-size: 22px; letter-spacing: 0.06em; color: var(--white); font-variant-numeric: tabular-nums; }
.step-eyebrow .timer.low { color: var(--warn); }
.step-title { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 9vw, 44px); letter-spacing: 0.04em; line-height: 1; }
.step-sub { font-size: 15px; color: var(--gray-light); margin-top: 0.6rem; max-width: 44rem; }

/* ── Tab strip, diff strip, popover ── */
.tabs-wrap { margin-bottom: 1.5rem; }
.tab-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tab-cell { position: relative; display: flex; align-items: stretch; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tab-cell.active { border-color: var(--tier); box-shadow: 0 0 0 1px var(--tier); }
.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  background: none;
  border: 0;
  padding: 12px 10px 12px 14px;
  text-align: left;
}
.tab-name { font-family: var(--condensed); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-light); }
.tab-cell.active .tab-name { color: var(--white); }
.tab-price { font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: 0.02em; color: var(--tier); }
.tab-info {
  flex: none;
  width: 30px;
  background: none;
  border: 0;
  border-left: 1px solid var(--border);
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray);
}
.tab-info:hover { color: var(--tier); }
.diff-strip {
  margin-top: 10px;
  min-height: 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tier);
}
.diff-strip b { font-weight: 600; }
.diff-delta { color: var(--gray-light); }
.diff-muted { color: var(--gray); }
.tab-pop { margin-top: 10px; background: var(--card); border: 1px solid var(--tier); border-radius: 8px; padding: 1rem 1.1rem; }
.pop-title { font-family: var(--condensed); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tier); margin-bottom: 0.6rem; }
.pop-list { list-style: none; display: grid; gap: 4px; margin-bottom: 0.75rem; }
.pop-line { font-size: 13px; color: var(--gray-light); }
.pop-line.unlock { color: var(--tier); font-weight: 500; }
.pop-line.off { opacity: 0.35; }
.tabs-foot { margin-top: 10px; }
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-light);
  text-decoration: underline;
}

/* price on the date cards, in the active tier's colour */
.wk-price { font-family: var(--condensed); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--tier); transition: color 200ms ease; }
.wk-price-num { font-family: var(--display); font-size: 19px; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) { .wk-price { transition: none; } }

/* ── Headcount on the extras step ── */
.headcount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.headcount-main { flex: 1; min-width: 200px; }
.headcount-label { font-family: var(--condensed); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.headcount-note { font-size: 13px; color: var(--gray-light); margin-top: 2px; }
.headcount .overage { color: var(--tier); font-weight: 600; }
.headcount .stepper button { width: 42px; height: 42px; }
.headcount .stepper input { width: 48px; font-size: 26px; line-height: 42px; }

/* ── Select Plan cards ── */
.pick-features { list-style: none; margin: 0.75rem 0 1rem; display: grid; gap: 5px; }
.pick-features li { font-size: 13px; color: var(--gray-light); padding-left: 16px; position: relative; }
.pick-features li::before { content: '✓'; position: absolute; left: 0; color: var(--tier); font-size: 11px; }
.pick-card .pick-price { color: var(--tier); }
.pick-go { margin-top: auto; }

/* ── Right rail / sticky summary ── */
.rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(13, 13, 13, 0.98);
  border-top: 1px solid var(--border-blue);
  backdrop-filter: blur(10px);
}
.rail-handle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 10px 1.25rem;
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-light);
  border-bottom: 1px solid var(--border);
}
.rail-handle-caret { transition: transform 0.2s; display: inline-block; }
.rail.open .rail-handle-caret { transform: rotate(180deg); }
.rail-body { display: none; padding: 0 1.25rem; max-height: 50vh; overflow-y: auto; }
.rail.open .rail-body { display: block; }
.rail-title { display: none; }
.rail-steps { list-style: none; padding: 0.75rem 0; display: grid; gap: 0.75rem; }
.rail-step { border-left: 2px solid var(--border); padding-left: 0.75rem; }
.rail-step.current { border-left-color: var(--tier); }
.rail-step.done { border-left-color: var(--blue-dim); }
.rail-step-head { display: flex; align-items: baseline; gap: 8px; }
.rail-num {
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray);
  min-width: 10px;
}
.rail-step.current .rail-num { color: var(--tier); }
.rail-label { font-family: var(--condensed); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-light); }
.rail-step.current .rail-label { color: var(--white); }
.rail-edit {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-light);
  text-decoration: underline;
}
.rail-value { font-size: 14px; color: var(--white); margin-top: 2px; overflow-wrap: anywhere; }
.rail-sub { font-size: 12px; color: var(--tier); margin-top: 2px; }
.rail-foot { padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: 0.6rem; }
.rail-money { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.rail-total { font-family: var(--display); font-size: 34px; line-height: 1; letter-spacing: 0.02em; }
.rail-split { font-family: var(--condensed); font-size: 13px; letter-spacing: 0.04em; color: var(--gray-light); }
.rail-split b { color: var(--tier); font-weight: 700; }
.rail-details {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 9px;
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-light);
}
.rail-note { font-family: var(--condensed); font-size: 12px; letter-spacing: 0.04em; color: var(--gray); text-align: center; }
.rail-note:empty { display: none; }
#advance { background: var(--tier); border-color: var(--tier); color: #04121f; }
#advance:hover:not(:disabled) { filter: brightness(1.12); }
#advance:disabled { background: #1c2a3a; border-color: #1c2a3a; color: var(--gray); }

/* ── Compare drawer ── */
.drawer {
  width: 100%;
  max-width: 820px;
  max-height: 88vh;
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--border-blue);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
}
.drawer::backdrop { background: rgba(0, 0, 0, 0.72); }
.drawer-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.drawer-title { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 0.04em; line-height: 1; }
.drawer-close { margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 4px; width: 32px; height: 32px; color: var(--gray-light); }
.drawer-body { padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); overflow: auto; max-height: calc(88vh - 70px); }
.drawer-lines { margin-top: 0; border-top: 0; }
.compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare th, .compare td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare thead th { position: sticky; top: 0; background: var(--dark); }
.compare thead th[data-tier] { text-align: center; }
.compare-name { display: block; font-family: var(--condensed); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tier); }
.compare-price { display: block; font-family: var(--display); font-size: 20px; color: var(--white); }
.compare tbody th { font-weight: 400; color: var(--gray-light); width: 40%; }
.compare td { text-align: center; color: var(--gray-light); }
.compare td.yes .compare-mark { color: var(--tier); }
.compare td.no { opacity: 0.35; }
.compare-mark { font-size: 13px; }
.compare-detail { display: none; }

@media (min-width: 769px) {
  .funnel {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
    padding: 2rem 2rem 4rem;
  }
  .banner { padding-left: 2rem; padding-right: 2rem; }
  .rail {
    position: sticky;
    top: calc(86px + var(--pill-clear));
    margin-top: var(--pill-clear);
    left: auto;
    right: auto;
    bottom: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    backdrop-filter: none;
  }
  .rail-handle { display: none; }
  .rail-body { display: block; padding: 1.1rem 1.25rem 0; max-height: none; overflow: visible; }
  .rail-title { display: block; font-family: var(--condensed); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); }
  .rail-foot { padding: 0.5rem 1.25rem 1.25rem; border-top: 1px solid var(--border); margin-top: 0.5rem; }
  .step-title { font-size: 44px; }
  .compare-detail { display: block; font-size: 12px; margin-top: 2px; }
  .compare td { text-align: left; }
  .drawer { margin: auto; border-bottom: 1px solid var(--border-blue); border-radius: 14px; }
}

/* Each plan card's action carries its own tier accent (the card sets --tier). */
.pick-card .pick-go { margin-top: auto; white-space: nowrap; font-size: 14px; padding: 12px 10px; background: var(--tier); border-color: var(--tier); color: #04121f; }
.pick-card .pick-go:hover { filter: brightness(1.12); }
.compare-says { font-family: var(--condensed); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--tier); }

/* Date cards follow the active plan's colour: open dates get a soft tier outline,
   the selected (or your held) date a full-strength one. With no plan chosen they keep Encore blue. */
.funnel { --tier-line: var(--border-blue); --tier-line-strong: var(--blue); }
[data-tier="standard"] .funnel, [data-tier="plus"] .funnel, [data-tier="premium"] .funnel {
  --tier-line: color-mix(in srgb, var(--tier) 55%, transparent);
  --tier-line-strong: var(--tier);
}
.wk-card.open, .wk-card.request { border-color: var(--tier-line); }
.wk-card.open:hover, .wk-card.request:hover { border-color: var(--tier-line-strong); }
.wk-card.yours { border-color: var(--tier-line-strong); box-shadow: 0 0 0 1px var(--tier-line-strong); background: linear-gradient(135deg, color-mix(in srgb, var(--tier-line-strong) 14%, transparent), var(--card)); }
.wk-card.open .wk-state span, .wk-card.request .wk-state span {
  border-color: var(--tier-line);
  color: var(--tier-line-strong);
  background: color-mix(in srgb, var(--tier-line-strong) 12%, transparent);
}
.wk-card.yours .wk-state span { background: var(--tier-line-strong); border-color: var(--tier-line-strong); color: #04121f; }

/* Selected / held date: a lit-up "loadout" card. The fill and glow come from the active plan colour,
   and the badge is a bright tint of it with light text so it reads on the dark card. */
.funnel { --tier-bright: color-mix(in srgb, var(--tier-line-strong) 55%, #fff); }
.wk-card.yours {
  border: 2px solid var(--tier-line-strong);
  padding: 13px; /* the 2px border replaces 1px, so the content does not shift */
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tier-line-strong) 27%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--tier-line-strong) 13%, var(--card)), var(--card) 75%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tier-line-strong) 30%, transparent),
    0 0 18px color-mix(in srgb, var(--tier-line-strong) 30%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--tier-line-strong) 12%, transparent);
  animation: lit 2.6s ease-in-out infinite;
}
@keyframes lit {
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--tier-line-strong) 38%, transparent),
      0 0 24px color-mix(in srgb, var(--tier-line-strong) 40%, transparent),
      inset 0 0 26px color-mix(in srgb, var(--tier-line-strong) 16%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) { .wk-card.yours { animation: none; } }
.wk-card.yours .wk-date { color: #f2f2f6; }
.wk-card.yours .wk-state span {
  background: color-mix(in srgb, var(--tier-line-strong) 30%, #05070d);
  border-color: var(--tier-line-strong);
  color: var(--tier-bright);
  text-shadow: 0 0 8px color-mix(in srgb, var(--tier-line-strong) 45%, transparent);
}
.wk-card.yours .wk-price { color: var(--tier-bright); }

/* Primary tier buttons (rail forward button, Select Plan): a mid-strength fill of the plan colour with
   white text, chosen for contrast (about 5:1 on all three tiers) instead of a bright fill with dark text. */
[data-tier="standard"] { --tier-btn: #13808e; }
[data-tier="plus"] { --tier-btn: #1b63bb; }
[data-tier="premium"] { --tier-btn: #6b49dc; }
[data-tier="none"] { --tier-btn: var(--blue); }
#advance, .pick-card .pick-go {
  background: var(--tier-btn, var(--blue));
  border: 1px solid var(--tier);
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 16px color-mix(in srgb, var(--tier) 28%, transparent);
}
#advance:hover:not(:disabled), .pick-card .pick-go:hover { filter: brightness(1.15); }
#advance:disabled { background: #1c2a3a; border-color: #1c2a3a; color: var(--gray); box-shadow: none; text-shadow: none; }

/* "Compare all plans": a visible button above the plans, not a small link below them. */
.tabs-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26, 116, 204, 0.12);
  border: 1px solid var(--blue-light);
  border-radius: 5px;
  padding: 8px 14px;
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe4ff;
}
.compare-btn::after { content: '⇄'; font-size: 14px; color: var(--blue-light); }
.compare-btn:hover { background: rgba(26, 116, 204, 0.28); }

/* Show more weekends */
.more-wrap { display: flex; justify-content: center; margin-top: 1.25rem; }
.more-btn {
  background: rgba(26, 116, 204, 0.1);
  border: 1px solid var(--blue-light);
  border-radius: 5px;
  padding: 11px 22px;
  font-family: var(--condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe4ff;
}
.more-btn:hover:not(:disabled) { background: rgba(26, 116, 204, 0.26); }
.more-btn:disabled { opacity: 0.6; }
.more-end { text-align: center; margin-top: 1.25rem; font-size: 14px; color: var(--gray-light); }

/* A selected add-on lights up a touch: faint blue wash, soft edge glow. Lighter than the selected date
   cards on purpose, and still Encore blue because add-on prices are not tied to a plan. */
.opt.on:not(.included) {
  border-color: var(--blue-light);
  background:
    radial-gradient(110% 120% at 100% 0%, rgba(26, 116, 204, 0.17), transparent 60%),
    linear-gradient(135deg, rgba(10, 42, 80, 0.55), rgba(5, 5, 5, 0.4));
  box-shadow:
    0 0 12px rgba(26, 116, 204, 0.2),
    inset 0 0 16px rgba(26, 116, 204, 0.09);
}
.opt.on:not(.included) .addon-name { color: #fff; }
.opt { transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }

/* The one inline note on the Drinks card when a Pizza Pack already covers drinks: green, like "Included". */
.opt { flex-wrap: wrap; }
.opt-note {
  flex: 1 0 100%;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(63, 185, 80, 0.22);
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: var(--ok);
}

/* ── Birthday finder ── */
.bday { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.bday label { font-family: var(--condensed); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.bday-opt { color: var(--gray); font-weight: 600; letter-spacing: 0.05em; text-transform: none; }
.bday input {
  background: var(--card);
  border: 1px solid var(--border-blue);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--white);
  font-family: var(--body);
  font-size: 15px;
  color-scheme: dark;
}
.bday input:focus { outline: none; border-color: var(--blue-light); }
.bday-msg { font-size: 13px; color: #ffb4b6; margin-top: 6px; }
.bday-msg:empty { display: none; }
.rail-sub-muted { color: var(--gray-light); }

.closest { margin-bottom: 1.25rem; }
.closest-title {
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tier);
  margin-bottom: 0.75rem;
}
.closest-title span { color: var(--gray-light); font-weight: 600; letter-spacing: 0.06em; }
.closest-none { font-size: 14px; color: var(--gray-light); margin-top: 0.75rem; }
.wk-note { color: var(--tier); font-weight: 600; letter-spacing: 0.08em; text-transform: none; }
.all-wk { margin-top: 0.5rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.015); }
.all-wk summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.all-wk summary::-webkit-details-marker { display: none; }
.all-wk summary::after { content: '▾'; transition: transform 0.2s; }
.all-wk[open] summary::after { transform: rotate(180deg); }
.all-wk .wk-grid { padding: 4px 16px 16px; }

/* ── Money block: a three-level hierarchy that swaps emphasis on the payment step ──
   Pre-payment: total (largest, white) / "$100 today" (the only accent) / remainder (small, muted, own line).
   Payment step: "Due now: $100" (largest, accent) / one calm line. Phones are the compact version. */
.rail-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.rail-total { font-size: 34px; }
.rail-total-accent { color: var(--tier); transition: color 200ms ease; }
.rail-today { font-family: var(--condensed); font-size: 15px; letter-spacing: 0.03em; color: var(--gray-light); }
.rail-today-amt { color: var(--tier); font-weight: 800; transition: color 200ms ease; }
.rail-reassure { display: none; color: var(--gray-light); font-weight: 500; }
.rail-due { display: none; flex-basis: 100%; font-family: var(--condensed); font-size: 13px; letter-spacing: 0.04em; color: var(--gray); }
.rail-calm { flex-basis: 100%; font-family: var(--condensed); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--white); }
.rail.open .rail-reassure { display: inline; }
.rail.open .rail-due { display: block; }
.rail-details { margin-left: auto; }
.rail-money.pending { opacity: 0.6; transition: opacity 120ms ease; }
.rail-money { transition: opacity 200ms ease; }

/* an amount that changed fades in rather than snapping: the same quiet beat as a tier price change */
.amt-fade { animation: amt-in 220ms ease-out; }
@keyframes amt-in { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .amt-fade { animation: none; } .rail-money, .rail-money.pending { transition: none; } }

.pay-summary .roll .total { color: var(--tier); transition: color 200ms ease; }
.pay-summary .deposit-math { color: var(--white); font-weight: 600; }

@media (min-width: 769px) {
  .rail-money { display: grid; gap: 3px; }
  .rail-total { font-size: 40px; }
  .rail-total-accent { font-size: 36px; }
  .rail-today { font-size: 16px; }
  .rail-reassure { display: inline; }
  .rail-due { display: block; font-size: 14px; }
  .rail-calm { font-size: 16px; }
  .rail-details { justify-self: start; margin: 8px 0 0; }
}

/* Birthday finder as a small feature card: same family as the Compare All Plans button, fixed brand blue. */
.bday-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(26, 116, 204, 0.1);
  border: 1px solid var(--blue-light);
  border-radius: 8px;
}
.bday-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: rgba(26, 116, 204, 0.16); color: var(--blue-light); }
.bday-icon svg { display: block; }
.bday-text { flex: 1 1 200px; min-width: 0; }
.bday-title { display: block; font-family: var(--condensed); font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #cfe4ff; line-height: 1.2; }
.bday-card .bday-opt { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: none; color: var(--gray-light); }
.bday-benefit { font-size: 13px; color: var(--gray-light); margin-top: 1px; }
.bday-pick { display: flex; align-items: center; gap: 10px; }

/* Birthday entry: three numeric boxes plus a calendar button, in place of the browser's date field. */
.date-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px 3px 8px;
  background: var(--black);
  border: 1px solid var(--blue-light);
  border-radius: 6px;
}
.date-seg:focus-within { border-color: #8cc3ff; box-shadow: 0 0 0 2px rgba(26, 116, 204, 0.3); }
.bday-card .date-seg .seg {
  width: 34px;
  padding: 6px 2px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--white);
  font-family: var(--body);
  font-size: 15px;
}
.bday-card .date-seg .seg-y { width: 56px; }
.bday-card .date-seg .seg::placeholder { color: var(--gray); }
.bday-card .date-seg .seg:focus { outline: none; background: rgba(26, 116, 204, 0.4); }
.seg-sep { color: var(--gray); user-select: none; }
.seg-cal { display: grid; place-items: center; width: 30px; height: 30px; margin-left: 4px; background: none; border: 0; border-radius: 4px; color: var(--gray-light); }
.seg-cal:hover { color: var(--blue-light); background: rgba(26, 116, 204, 0.16); }
.seg-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* A notch slimmer vertically (Compare button and birthday card) so the top of the date step feels less crowded. */
.compare-btn { padding: 6px 14px; }
.tabs-head { margin-bottom: 8px; }
.bday-card { padding: 7px 14px; margin-top: 10px; }
.bday-icon { width: 30px; height: 30px; }
.bday-card .date-seg { padding-top: 1px; padding-bottom: 1px; }
.bday-card .date-seg .seg { padding-top: 5px; padding-bottom: 5px; }
.seg-cal { height: 28px; }

/* Tighter gap under the step intro, so the controls sit closer to the sentence that introduces them. */
.step-head { margin-bottom: 0.5rem; }
.step-sub { margin-top: 0.4rem; }

/* The birthday control is a button-like unit: [calendar  mm / dd / yyyy]. Click anywhere on it opens the calendar. */
.bday-card .date-seg {
  gap: 1px;
  padding: 1px 12px 1px 8px;
  background: rgba(26, 116, 204, 0.12);
  border: 1px solid var(--blue-light);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bday-card .date-seg:hover { border-color: #8cc3ff; background: rgba(26, 116, 204, 0.2); }
.bday-card .date-seg:focus-within { border-color: #8cc3ff; background: rgba(26, 116, 204, 0.2); box-shadow: 0 0 0 2px rgba(26, 116, 204, 0.3); }
.bday-card .date-seg:not(:focus-within) .seg { cursor: pointer; }
.bday-card .date-seg .seg-cal {
  width: 26px;
  height: 28px;
  margin: 0 4px 0 0;
  color: var(--blue-light);
  background: none;
  cursor: pointer;
}
.bday-card .date-seg .seg-cal:hover { background: none; color: #8cc3ff; }
.bday-card .date-seg .seg-cal:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 1px; border-radius: 4px; }
.bday-card .date-seg .seg { background: transparent; }
.bday-card .date-seg .seg-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.bday-card .date-seg { padding-right: 9px; }
.bday-card .date-seg .seg { width: 27px; }
.bday-card .date-seg .seg-y { width: 44px; }
.bday-card .date-seg .seg { width: 34px; padding-left: 0; padding-right: 0; }
.bday-card .date-seg .seg-y { width: 50px; }

/* Boxes are for typing (text cursor); the icon and the rest of the control open the calendar (pointer). */
.bday-card .date-seg:not(:focus-within) .seg { cursor: text; }
.bday-card .date-seg .seg { cursor: text; }
.bday-card .date-seg .seg-cal { width: 32px; }

/* ── Money reads like a receipt ──────────────────────────────────────────
   Body font, sentence case, tabular figures, modest and bold. Never the display-caps face,
   and never caps + oversized + colour stacked on one line. */
.rail-total, .rail-today, .rail-today-amt, .rail-due, .rail-lead, .receipt, .pay-summary {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.rail-total { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--white); }
.rail-today { font-size: 14px; font-weight: 400; }
.rail-today-amt { font-weight: 700; }
.rail-due { font-size: 13px; }
.rail-lead { font-size: 17px; font-weight: 700; color: var(--tier); transition: color 200ms ease; }

/* The ledger: labels left, amounts right. */
.receipt { display: grid; gap: 3px; font-size: 14px; color: var(--gray-light); }
.rc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rc-amt { flex: none; }
.rc-row.rc-total { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); color: var(--white); font-weight: 700; }
.rc-row.rc-due-today { color: var(--tier); font-weight: 700; transition: color 200ms ease; }
.rc-note { font-size: 12px; color: var(--gray); margin-top: -1px; }

/* Exactly one money block per viewport: the rail on desktop, the inline block on a phone. */
.receipt { display: none; }
.rail.open .receipt { display: grid; }
.pay-summary { display: grid; margin-top: 1.25rem; padding: 1rem 1.1rem; background: rgba(5, 5, 5, 0.35); border: 1px solid var(--border-blue); border-radius: 8px; }
.pay-summary .receipt { display: grid; }

@media (min-width: 769px) {
  .rail-total { font-size: 18px; }
  .rail-today { font-size: 14px; }
  .rail-due { font-size: 13px; }
  .rail-lead { display: none; }
  .rail .receipt { display: grid; }
  .pay-summary { display: none; }
}

/* The calendar button is its own zone at the right edge: full height, divided off, the only picker trigger. */
.bday-card .date-seg { padding: 0 0 0 10px; overflow: hidden; cursor: auto; }
.bday-card .date-seg:hover { background: rgba(26, 116, 204, 0.12); }
.seg-fields { display: flex; align-items: center; gap: 1px; padding: 5px 0; cursor: text; }
.bday-card .date-seg .seg-cal {
  align-self: stretch;
  width: 40px;
  height: auto;
  margin: 0 0 0 10px;
  border-radius: 0;
  border-left: 1px solid rgba(26, 116, 204, 0.5);
  background: rgba(26, 116, 204, 0.12);
  color: var(--blue-light);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bday-card .date-seg .seg-cal:hover { background: rgba(26, 116, 204, 0.3); color: #cfe4ff; }
.bday-card .date-seg .seg-cal:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -2px; }

/* Transient delta chip: every change to the running total attributes itself, then gets out of the way.
   It is inserted already visible (no entry animation) and fades out, the same restraint as the price crossfade. */
.rail-total-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.rail-delta {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 3px;
  opacity: 1;
  transition: opacity 400ms ease;
}
.rail-delta:not(.show) { opacity: 0; }
/* Fixed brand blue, the same token as the card's "+$199" and the selected card's border: the toggle,
   the price on the card and the chip all speak one colour. Not the tier accent. */
.rail-delta.add { color: var(--blue-light); background: rgba(26, 116, 204, 0.15); }
.rail-delta.remove { color: var(--gray-light); background: rgba(255, 255, 255, 0.06); }
@media (prefers-reduced-motion: reduce) { .rail-delta { transition: none; } }
@media (min-width: 769px) { .rail-delta { font-size: 12px; } }

/* The cancel/reschedule promise sits with the button that spends the money, not across the page from it. */
.rail-policy { font-size: 12px; line-height: 1.45; color: var(--gray-light); text-align: center; margin: 2px 0 -2px; }
.policy-more { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-light); text-decoration: underline; }
.policy-full { display: block; margin-top: 6px; text-align: left; color: var(--gray); }

/* On phones the funnel's summary bar is fixed to the bottom, so the page footer, now the last thing on the page,
   has to clear it. (The funnel container used to reserve this space itself.) */
.funnel { padding-bottom: 1.5rem; }
.funnel-body .page-footer { padding-bottom: calc(230px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 769px) {
  .funnel { padding-bottom: 3rem; }
  .funnel-body .page-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
}

/* ── Hold header + timer: one persistent line in the shell, above whichever step is showing ── */
/* ── Hold pill: floats over whichever header the page has, and restyles neither ── */
.hold-pill {
  position: fixed;
  top: var(--pill-top, 78px);
  /* Anchored right, so it keeps a real margin from the edge even on a phone with a notch. */
  right: calc(1rem + env(safe-area-inset-right, 0px));
  /* Shrink-to-fit with no cap overflows past its own right edge once the content outgrows the screen,
     which is how it ran off the edge. This makes that impossible at any width or text size. */
  max-width: calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-blue);
  border-radius: 999px;
  background: var(--card2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.pill-icon { width: 14px; height: 14px; flex: none; color: var(--gray); }
.pill-clock {
  flex: none;
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--gray-light);
}
.pill-clock.low { color: var(--tier); font-weight: 600; }
/* Before a package is picked --tier is the muted grey, which would leave the low state invisible. */
[data-tier="none"] .pill-clock.low, :root:not([data-tier]) .pill-clock.low { color: var(--blue-light); }
.pill-when, .pill-when-short {
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-light);
}
/* If anything has to give, it is the date text: the countdown and the way out are the point of the pill. */
.pill-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill-time::before {
  content: "\00b7";
  display: inline-block;
  margin: 0 6px;
  color: var(--gray);
  font-weight: 400;
  letter-spacing: 0;
}
.pill-when-short, .pill-action-short { display: none; }
.pill-when::before, .pill-action::before {
  content: "\00b7";
  display: inline-block;
  margin-right: 8px;
  color: var(--gray);
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
}
.pill-action {
  flex: none;
  font-family: var(--condensed);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-light);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gray);
}
.pill-action:hover { color: var(--blue-light); text-decoration-color: var(--blue-light); }
.hold-pill[hidden] { display: none; }

/* The start time goes before any text is ever clipped, well before the pill actually runs out of room. */
@media (max-width: 720px) {
  .pill-time { display: none; }
}

/* Phone: a slim strip in the page flow, stuck directly under the header. It pushes content down instead of
   floating over it, so nothing is ever covered while a hold is active. */
@media (max-width: 640px) {
  .hold-pill {
    position: sticky;
    top: var(--pill-stick, 0px);
    left: auto;
    right: auto;
    max-width: none;
    height: 40px;
    box-sizing: border-box;
    justify-content: center;
    padding: 0 calc(1rem + env(safe-area-inset-right, 0px)) 0 calc(1rem + env(safe-area-inset-left, 0px));
    border: 0;
    border-bottom: 1px solid var(--border-blue);
    border-radius: 0;
    box-shadow: none;
  }
  body.has-pill { --pill-clear: 0px; }
  .pill-when { display: none; }
  .pill-when-short { display: inline; }
  .pill-action-long { display: none; }
  .pill-action-short { display: inline; }
}

/* ── "Still there?" modal: two buttons and nothing else ── */
.hold-modal {
  width: min(92vw, 420px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  background: var(--dark);
  color: var(--white);
}
.hold-modal::backdrop { background: rgba(0, 0, 0, 0.78); }
.hold-modal-body { padding: 1.5rem 1.4rem 1.4rem; display: grid; gap: 0.85rem; }
.hold-modal-title { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: 0.04em; line-height: 1; }
.hold-modal-text { font-size: 15px; color: var(--gray-light); }

/* ── Test-mode ribbon: sticky above whichever header the page has, so it is never scrolled away ── */
/* Both headers are sticky at top:0, so the ribbon pins above them and they pin below it. */
:root { --ribbon-h: 0px; }
body.has-ribbon { --ribbon-h: 30px; }
.test-ribbon {
  position: sticky;
  top: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ribbon-h);
  padding: calc(env(safe-area-inset-top, 0px)) 0.75rem 0;
  background: #3a2a05;
  border-bottom: 1px solid #6b4f0a;
  color: #ffd98a;
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
/* The headers carry the safe-area inset when they are the top of the page; the ribbon does it instead. */
body.has-ribbon .nav, body.has-ribbon .banner { padding-top: 0; top: var(--ribbon-h); }
.ribbon-short { display: none; }
/* One line on a phone, and short enough to stay one line: the notice is a standing condition, not a banner
   worth two rows of a small screen. */
@media (max-width: 640px) {
  body.has-ribbon { --ribbon-h: 28px; }
  .test-ribbon {
    font-size: 12px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .ribbon-long { display: none; }
  .ribbon-short { display: inline; }
}

/* ── Manage page: three plain panels, in the same card family as the rest of the site ── */
.manage-card {
  margin: 0 0 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
}
.manage-card h3 {
  margin: 0 0 0.35rem;
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.manage-card p { margin: 0 0 0.9rem; }
.manage-card p:last-child { margin-bottom: 0; }
/* The cancel confirmation is the one place the page raises its voice, and only once asked. */
.manage-card-warn { border-color: var(--border-blue); background: var(--card2); }
.manage-rows { display: grid; gap: 0.1rem; margin-bottom: 1rem; }
.manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.manage-row:last-child { border-bottom: 0; }
.manage-row-name { font-size: 15px; color: var(--white); }
.manage-price { font-size: 13px; color: var(--gray); font-variant-numeric: tabular-nums; }
.manage-stepper { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.manage-stepper .step {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card2);
  color: var(--gray-light);
  line-height: 1;
}
.manage-stepper .step:hover { border-color: var(--blue); color: var(--white); }
.manage-stepper .step-value { min-width: 1.5ch; text-align: center; font-variant-numeric: tabular-nums; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.manage-dates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.manage-date {
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card2);
  color: var(--white);
  font-family: var(--condensed);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.manage-date:hover { border-color: var(--blue); }
.manage-error:not(:empty) {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-blue);
  border-radius: 6px;
  background: var(--card2);
  color: var(--gray-light);
  font-size: 14px;
  text-align: left;
}
.manage-flash {
  margin: 1rem auto 0;
  color: var(--blue-light);
  font-family: var(--condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .manage-dates { grid-template-columns: 1fr; }
}

/* Turnstile's own widget host. Only ever populated while TURNSTILE_ENABLED is on. */
.turnstile-host { position: fixed; bottom: 0; left: 0; z-index: 200; }


/* ---- Card entry on Info + Deposit ----
   Square renders the card inputs inside a cross-origin iframe and ignores backgroundColor and color
   from its own style API (verified on SDK v1.86.0: a red background and green text both had no
   effect), so the inputs are white and cannot be made otherwise. Rather than leave a white slab
   floating in a dark form looking like a bug, the block is framed as a deliberate white payment
   panel: our label above it, our border around it, our note beneath. */
.card-block { margin-top: 1.5rem; }
.card-label {
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 0.5rem;
}
.card-host {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  min-height: 56px;
}
.card-note {
  font-family: var(--body);
  font-size: 12px;
  color: var(--gray);
  margin-top: 0.5rem;
}
.card-note-error { color: var(--warn); }


/* ---- Per-date waitlist ----
   A taken date is clickable so it can open the waitlist modal, but it must never read as available: the
   card keeps its BOOKED / ON HOLD styling and its state word, and only gains a quiet "Notify me"
   affordance. The modal lives once in the DOM (book.html) and is reused for whichever date was clicked,
   so opening it never touches the grid's own layout: the grid must never reflow. */
.wk-card.booked, .wk-card.held { cursor: pointer; }
.wk-notify {
  margin-top: auto;
  font-family: var(--condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Muted at rest on purpose: this sits on every BOOKED and ON HOLD card, a dozen of them against a
     handful of scarce OPEN ones, and OPEN is the color that has to win the page. Only the hover state
     (and focus, for the same reason via keyboard) borrows the brand blue, as a hint rather than a shout. */
  color: var(--gray);
  text-decoration: underline;
  text-decoration-color: var(--border);
}
.wk-card:hover .wk-notify, .wk-card:focus-visible .wk-notify {
  color: var(--blue-light);
  text-decoration-color: currentColor;
}
/* Once this page view has signed up for a date, the card says so in the same spot "Notify me" sat in,
   rather than opening the modal again for a date that is already on the list. */
.wk-joined {
  margin-top: auto;
  font-family: var(--body);
  font-size: 11px;
  color: var(--tier-standard);
}

.grid-foot {
  margin-top: 1rem;
  font-family: var(--body);
  font-size: 13px;
  color: var(--gray);
  text-align: center;
}
.grid-foot a { color: var(--blue-light); }

/* ---- Waitlist modal ----
   Same small centered-dialog shape as .hold-modal: a fixed cap that also behaves on a phone, so no
   separate mobile rule is needed. The backdrop opacity (0.6) is deliberately lighter than the other two
   dialogs: this one is a courtesy ask, not an interruption that demands full attention. */
.waitlist-modal {
  width: min(400px, calc(100% - 32px));
  margin: auto;
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid var(--border-blue);
  border-radius: 12px;
  background: var(--dark);
  color: var(--white);
  position: relative;
}
.waitlist-modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.waitlist-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--gray-light);
}
.waitlist-modal-close:hover { border-color: var(--blue); color: var(--white); }
.waitlist-modal-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 1.6rem 0.4rem 0;
}
.waitlist-modal-sub { font-family: var(--body); font-size: 14px; color: var(--gray-light); margin: 0 0 1rem; }
#waitlist-modal-form { display: flex; flex-direction: column; gap: 0.85rem; }
#waitlist-modal-form .field { margin: 0; }
.waitlist-modal-confirm { font-family: var(--body); font-size: 15px; color: var(--white); margin: 0 1.6rem 1rem 0; }

body.scroll-locked { overflow: hidden; }

/* ── Phone funnel: a stable summary bar, quiet toggles, a little more air ── */
.addon-desc.stacked { display: grid; }
.addon-desc.stacked > span { grid-area: 1 / 1; }
.opt:not(.disabled) .desc-locked, .opt.disabled .desc-copy { visibility: hidden; }

@media (max-width: 640px) {
  /* The bar is the same height whatever the toggles say: one nowrap row, the delta chip out of the flow,
     and the DETAILS button a fixed width so "1 item" and "12 items" read the same size. */
  .rail-money { flex-wrap: nowrap; align-items: center; min-height: 30px; }
  .rail-total-line { flex: none; }
  .rail-today { min-width: 0; white-space: nowrap; }
  .rail-details { flex: none; min-width: 8.75rem; text-align: center; white-space: nowrap; }
  .rail-delta {
    position: absolute;
    right: 1.25rem;
    bottom: calc(100% + 0.5rem);
    max-width: calc(100vw - 2.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    border: 1px solid var(--border-blue);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
  .rail-delta.add { background: #0c2440; }
  .rail-delta.remove { background: #1c1c1c; border-color: var(--border); }

  .opt-grid { gap: 1rem; }
  .headcount { margin-bottom: 1.5rem; }
  .tabs-wrap { margin-bottom: 1.75rem; }
  .card-block { margin-top: 1.75rem; }
  .form-grid { gap: 1.2rem; }

  #advance { box-shadow: 0 0 8px color-mix(in srgb, var(--tier) 16%, transparent); }
  #advance:disabled { box-shadow: none; }
}

/* ── The summary sheet on a phone: a height cap, and getting out of the keyboard's way ──
   The sheet is a bottom sheet from 0 to 768px; above that it is the desktop rail and none of this applies. */
@media (max-width: 768px) {
  /* Expanded, it never takes more than 70% of the screen: the step behind it stays legible on every step,
     whatever the rail has to say. The foot (amount and button) keeps its height and the steps list scrolls. */
  .rail { display: flex; flex-direction: column; max-height: 70vh; max-height: 70dvh; }
  .rail-handle, .rail-foot { flex: none; }
  .rail-body { max-height: none; }
  .rail.open .rail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

@media (max-width: 640px) {
  /* Two rows collapsed: the header line, then the button. Nothing else earns a row at this width. */
  .rail-handle { padding: 0 1.25rem; min-height: 44px; gap: 10px; }
  .rail-handle-label { flex: none; }
  /* The running total lives in the header while the sheet is shut, so the sheet does not need a money row. */
  .rail-handle-money {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    font-family: var(--body);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
  }
  .handle-total { font-weight: 700; color: var(--white); }
  .handle-today { color: var(--tier); font-weight: 600; }
  .rail-handle-caret { flex: none; margin-left: 2px; }

  .rail-foot { padding: 6px 1.25rem calc(6px + env(safe-area-inset-bottom, 0px)); gap: 5px; }
  #advance { min-height: 48px; padding-top: 0; padding-bottom: 0; }
  /* The promise sits between the header and the button it qualifies, tight to both. */
  .rail-policy { font-size: 12px; line-height: 1.3; margin: 0; }
  /* The caption is a footnote to the button, not a line of its own. */
  .rail-note { font-size: 11px; line-height: 1.25; margin-top: -2px; }
  /* Expanding the sheet is the way to see the breakdown, so the button that said so is redundant here. The
     "Due today" heading is redundant too: the header row above it already carries the same number. */
  .rail-details, .rail-lead { display: none; }
  /* Collapsed, the money is the header row's job, so this block gives up its height. It is flattened rather
     than hidden because the delta chip lives inside it, and that chip is out of flow and still has to paint
     above the sheet every time an add-on changes the total. */
  .rail:not(.open) .rail-money { height: 0; min-height: 0; gap: 0; overflow: visible; }
  .rail:not(.open) .rail-money > :not(.rail-total-line) { display: none; }
  .rail:not(.open) .rail-total-line { height: 0; }
  .rail:not(.open) .rail-total-line > :not(.rail-delta) { display: none; }

  /* Everything above the open sheet closes it, the banner and the hold strip included: while the sheet is
     expanded it is the only thing being used, so it sits above all the page chrome and the scrim just under it. */
  .rail-scrim { position: fixed; inset: 0; z-index: 102; background: rgba(5, 5, 5, 0.5); }
  .rail-scrim[hidden] { display: none; }
  body.sheet-open .rail { z-index: 103; }
  /* A scroll behind an open sheet used to carry the header row, and the only way to shut it, off the screen.
     Both elements: either one can be the scrolling box depending on the browser. */
  html.sheet-open, body.sheet-open { overflow: hidden; touch-action: none; overscroll-behavior: none; }

  /* Tucked: the header row and nothing else, so a focused field is never behind the sheet. The row is lifted
     onto the floor of the visual viewport by script; no transition, so it never animates or lags the keyboard. */
  .rail.tucked .rail-body, .rail.tucked .rail-foot { display: none; }
  .rail, .rail.tucked { transition: none; }
}

/* ── Plan tabs read as a segmented control, not three labels ──
   At rest each card carries the same 1px input border and its own tier accent held one stop back, so the row
   reads as three things you can press. The selected one takes its accent to full strength and keeps the
   doubled border it already had. */
.tab-cell {
  border-color: var(--border-input);
  /* The accent held back by mixing toward grey rather than toward black: darkening would take the Plus blue
     almost into the card it sits on while leaving the cyan bright, and the three have to read as one band at
     rest. Two tints, because the name and the price are different sizes and answer to different contrast
     floors: the price is 26px display type (large text, 3:1), the name is 13px (small text, 4.5:1). Plus is
     only 3.97:1 against the card even at full strength, so its name has to be lifted toward the light grey to
     stay readable at all while still carrying its own hue. Measured on all three tiers, not eyeballed. */
  --tier-rest: color-mix(in srgb, var(--tier) 70%, var(--gray));
  --tier-rest-sm: color-mix(in srgb, var(--tier) 55%, var(--gray-light));
  transition: border-color 0.15s, background 0.15s;
}
@media (prefers-reduced-motion: reduce) { .tab-cell { transition: none; } }
.tab-cell:hover { border-color: color-mix(in srgb, var(--tier) 55%, var(--border-input)); }
.tab-name { color: var(--tier-rest-sm); }
.tab-price { color: var(--tier-rest); }
/* Selected: full strength, and the name goes white so the chosen card leads with its label. */
.tab-cell.active .tab-name { color: var(--white); }
.tab-cell.active .tab-price { color: var(--tier); }
/* The divider between the price and its "i" is part of the control's edge, so it matches it. */
.tab-info { border-left-color: var(--border-input); }
.tab-btn, .tab-info { cursor: pointer; }
/* Pressed: a short tier wash over the half that was actually touched. */
.tab-btn:active, .tab-info:active { background: color-mix(in srgb, var(--tier) 16%, transparent); }