/* ══════════════════════════════════════════════════════════════════
   CIRCLE & STAR — COMPONENTS KIT
   Webflow-proof, self-contained, drop-in.

   Scope everything to .cs under a wrapper element:
     <div class="cs cs-dark"> ... </div>

   • .cs            — base scope (fonts, tokens, reset)
   • .cs-dark       — dark theme (ink + gold)
   • .cs-light      — light theme (off-white + dark)

   Every load-bearing declaration uses !important so host-site CSS
   (Webflow, WordPress, Squarespace) can't override it from outside.
   ══════════════════════════════════════════════════════════════════ */


/* ── Alcyone — loaded from sibling alcyone.css ────────────────────
   In production this is replaced with R2 woff2 URLs. In the design
   system it pulls from ../fonts via alcyone.css.                   */
@import url('./alcyone.css');


/* ══════════════════════════════════════════════════════════════════
   1. SCOPED RESET
   Kills host-site margins/paddings/font-sizes inside .cs only.
   ══════════════════════════════════════════════════════════════════ */
.cs,
.cs *,
.cs *::before,
.cs *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  font-family: inherit;
}

.cs {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility;
}

/* Reset host-site heading weights/sizes — we set our own in components */
.cs h1, .cs h2, .cs h3, .cs h4, .cs h5, .cs h6 {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
  background: none !important;
  text-transform: none;
}
.cs p, .cs span, .cs li, .cs a, .cs label {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  color: inherit;
  background: none !important;
}
.cs a { text-decoration: none; }

/* Buttons — nuke host-site skins */
.cs button,
.cs .btn,
.cs a.btn,
.cs input[type="submit"],
.cs input[type="button"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
}

/* Inputs — nuke host-site skins */
.cs input,
.cs textarea,
.cs select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════
   2. DESIGN TOKENS (themed)
   ══════════════════════════════════════════════════════════════════ */

/* Strand accents — shared across themes */
.cs {
  --cs-voices:  #ef912d;  /* warm amber */
  --cs-stories: #3bbeed;  /* sky blue */
  --cs-stages:  #cbbba0;  /* linen */
  --cs-stages-deep: #987a59;
}

/* ── Dark theme (evening — ink + gold) ─────────────────────────── */
.cs.cs-dark {
  --cs-bg:      #0c0b09;
  --cs-surface: #131109;
  --cs-panel:   rgba(12,11,9,0.55);
  --cs-text:    #f5f0e8;
  --cs-muted:   #b8a88e;
  --cs-faint:   #7a7570;
  --cs-rule:    #2a2824;
  --cs-gold:    #c8a96e;
  --cs-gold-dim: rgba(200,169,110,0.08);
  --cs-gold-soft: rgba(200,169,110,0.18);

  background: var(--cs-bg) !important;
  color: var(--cs-text) !important;
}

/* ── Light theme (daytime — warm off-white + dark ink) ─────────── */
.cs.cs-light {
  --cs-bg:      #fafaf8;
  --cs-surface: #ffffff;
  --cs-panel:   rgba(255,255,255,0.6);
  --cs-text:    #1c1917;
  --cs-muted:   rgba(28,25,23,0.8);
  --cs-faint:   #6b6560;
  --cs-rule:    #e8e4de;
  --cs-gold:    #987a59;
  --cs-gold-dim: rgba(152,122,89,0.06);
  --cs-gold-soft: rgba(152,122,89,0.22);

  background: var(--cs-bg) !important;
  color: var(--cs-text) !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY PRIMITIVES
   ══════════════════════════════════════════════════════════════════ */

/* All typography is double-scoped (.cs + class) to guarantee higher
   specificity than host rules like `.wf-section h1` or `.hostile h2`. */

.cs .cs-eyebrow {
  display: block !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--cs-gold) !important;
  background: none !important;
  opacity: 0.85;
  margin-bottom: 1rem !important;
}

.cs .cs-display {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  font-size: clamp(2.4rem, 7vw, 4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  color: var(--cs-text) !important;
  background: none !important;
  margin: 0 0 1.2rem !important;
}

.cs .cs-h1 {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--cs-text) !important;
  background: none !important;
  margin: 0 0 1.2rem !important;
}

.cs .cs-h2 {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  font-size: clamp(1.4rem, 3.6vw, 1.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  color: var(--cs-text) !important;
  background: none !important;
  margin: 0 0 1rem !important;
}

.cs .cs-p {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  color: var(--cs-muted) !important;
  background: none !important;
  margin: 0 0 1.2rem !important;
}

.cs .cs-small {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  font-size: 0.82rem !important;
  color: var(--cs-faint) !important;
  background: none !important;
  line-height: 1.75 !important;
}

.cs .cs-rule {
  display: block !important;
  width: 40px !important;
  height: 1px !important;
  background: var(--cs-gold-soft) !important;
  margin: 2rem auto !important;
  border: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════
   4. BUTTONS — four reliable variants
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-btn {
  display: inline-block !important;
  font-family: 'Alcyone','DM Sans',system-ui,sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  padding: 0.95em 2.4em !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.1s, background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.cs .cs-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.cs .cs-btn:active { transform: translateY(0); }

/* Primary — solid gold (the "Become a member" button) */
.cs .cs-btn--primary {
  background: var(--cs-gold) !important;
  color: #0c0b09 !important;
  border-color: var(--cs-gold) !important;
}

/* Ghost — gold glass (the "Enter" portal button) */
.cs .cs-btn--ghost {
  background: rgba(200,169,110,0.14) !important;
  color: var(--cs-gold) !important;
  border-color: rgba(200,169,110,0.32) !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.cs .cs-btn--ghost:hover { background: rgba(200,169,110,0.2) !important; }

/* Secondary — outlined, muted */
.cs .cs-btn--outline {
  background: transparent !important;
  color: var(--cs-muted) !important;
  border-color: var(--cs-rule) !important;
}

/* Strand-tinted variants */
.cs .cs-btn--voices  { background: var(--cs-voices)  !important; color: #0c0b09 !important; border-color: var(--cs-voices) !important; }
.cs .cs-btn--stories { background: var(--cs-stories) !important; color: #0c0b09 !important; border-color: var(--cs-stories) !important; }
.cs .cs-btn--stages  { background: var(--cs-stages-deep) !important; color: #f5f0e8 !important; border-color: var(--cs-stages-deep) !important; }


/* ══════════════════════════════════════════════════════════════════
   5. INPUTS
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-input {
  display: block !important;
  width: 100% !important;
  padding: 0.8em 1em !important;
  font-size: 0.95rem !important;
  color: var(--cs-text) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--cs-rule) !important;
  border-radius: 6px !important;
  outline: none !important;
  transition: border-color 0.2s;
}
.cs .cs-input::placeholder { color: var(--cs-faint) !important; }
.cs .cs-input:focus { border-color: var(--cs-gold-soft) !important; }

.cs .cs-input--code {
  font-size: 1.3rem !important;
  letter-spacing: 0.22em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  background: rgba(10,8,5,0.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cs .cs-label {
  display: block !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--cs-faint) !important;
  margin-bottom: 0.5rem !important;
  text-align: left !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. GLASS VARIANTS — house rules
   Every glass surface needs something behind it to catch light.
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-glass {
  position: relative !important;
  overflow: hidden;
  border-radius: 16px !important;
  padding: 2.4rem !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  isolation: isolate;
}

/* Gold glass — the portal / membership / prestige surface */
.cs .cs-glass--gold {
  background: rgba(200,169,110,0.07) !important;
  border: 1px solid rgba(200,169,110,0.18) !important;
  border-top-color: rgba(200,169,110,0.28) !important;
  box-shadow:
    0 1px 0 rgba(200,169,110,0.12) inset,
    0 24px 64px rgba(0,0,0,0.55),
    0 0 40px rgba(200,169,110,0.05) !important;
}
.cs .cs-glass--gold::before {
  content: '';
  position: absolute;
  top: -50px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 160px;
  background: radial-gradient(ellipse at top, rgba(200,169,110,0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.cs .cs-glass--gold > * { position: relative; z-index: 1; }

/* Dark glass — neutral frost panel (used on the Northern Line map) */
.cs .cs-glass--dark {
  background: rgba(12,11,9,0.55) !important;
  border: 1px solid rgba(245,240,232,0.08) !important;
  border-top-color: rgba(245,240,232,0.12) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(245,240,232,0.05) inset,
    0 28px 80px rgba(0,0,0,0.5) !important;
}

/* Surface glass — subtle card tint */
.cs .cs-glass--surface {
  background: rgba(26,24,21,0.7) !important;
  border: 1px solid var(--cs-rule) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

/* Strand glass — tinted for event cards */
.cs .cs-glass--voices {
  background: rgba(239,145,45,0.08) !important;
  border: 1px solid rgba(239,145,45,0.22) !important;
}
.cs .cs-glass--stories {
  background: rgba(59,190,237,0.07) !important;
  border: 1px solid rgba(59,190,237,0.22) !important;
}
.cs .cs-glass--stages {
  background: rgba(203,187,160,0.08) !important;
  border: 1px solid rgba(203,187,160,0.22) !important;
}


/* ══════════════════════════════════════════════════════════════════
   7. AMBIENT GLOW — put this behind a glass surface so the blur
   has something to catch. Place as a sibling before the glass.
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-glow {
  position: absolute !important;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  width: 420px; height: 280px;
  background: radial-gradient(ellipse, rgba(200,169,110,0.13) 0%, transparent 68%);
  pointer-events: none;
  filter: blur(48px);
  z-index: 0;
}


/* ══════════════════════════════════════════════════════════════════
   8. PORTAL GATE — full-bleed image behind gold glass panel
   Wrap in <div class="cs cs-dark cs-gate">.
   ══════════════════════════════════════════════════════════════════ */

.cs-gate {
  position: relative !important;
  min-height: 100vh !important;
  overflow: hidden;
}
.cs-gate__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  background-position: 38% center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.cs-gate__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(10,8,5,0)    0%,
    rgba(10,8,5,0.1)  25%,
    rgba(10,8,5,0.65) 50%,
    rgba(10,8,5,0.94) 65%,
    rgba(10,8,5,0.98) 100%
  );
}
.cs-gate__inner {
  position: relative !important;
  z-index: 1;
  min-height: 100vh;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 7% 0 0 !important;
}

@media (max-width: 680px) {
  .cs-gate__bg { background-position: 60% 15% !important; }
  .cs-gate__bg::after {
    background: linear-gradient(
      to bottom,
      rgba(10,8,5,0.1)  0%,
      rgba(10,8,5,0.5)  42%,
      rgba(10,8,5,0.96) 68%,
      rgba(10,8,5,1)    100%
    );
  }
  .cs-gate__inner {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 2rem 3.5rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   9. BRAND LOCKUP — C&S emblem + Wonder Room mark, side by side
   The "church and state" pairing: venue + production company.
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-lockup {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.4rem !important;
  color: var(--cs-gold) !important;
}
.cs .cs-lockup__div {
  display: block !important;
  width: 1px !important;
  height: 14px !important;
  background: rgba(200,169,110,0.25) !important;
}
.cs .cs-lockup svg { display: block; }


/* ══════════════════════════════════════════════════════════════════
   9b. NAVIGATION — header with stacked brand anchor
   Broader, expansive, editorial. Anchor above, nav below.
   Three variants via modifier class:
     default   — anchor-left / menu-right single row
     --stacked — anchor centered, menu centered below (editorial)
     --split   — anchor centered, menu split 3L/3R around it
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-nav {
  width: 100% !important;
  padding: 2rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
}

.cs .cs-nav__anchor {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--cs-text) !important;
  opacity: 0.92 !important;
  transition: opacity 0.2s !important;
  background: none !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cs .cs-nav__anchor:hover { opacity: 1 !important; }

/* Anchor SVG — inherits currentColor from anchor */
.cs .cs-nav__anchor svg {
  display: block !important;
  height: 64px !important;
  width: auto !important;
}

.cs .cs-nav__menu {
  display: flex !important;
  align-items: center !important;
  gap: 2.2rem !important;
  list-style: none !important;
}

.cs .cs-nav__link {
  font-family: 'Alcyone','DM Sans','Inter',system-ui,sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--cs-muted) !important;
  text-decoration: none !important;
  position: relative !important;
  padding: 0.4rem 0 !important;
  transition: color 0.2s !important;
  background: none !important;
}
.cs .cs-nav__link:hover,
.cs .cs-nav__link[aria-current="page"] {
  color: var(--cs-text) !important;
}
.cs .cs-nav__link[aria-current="page"]::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  bottom: -2px !important;
  height: 1px !important;
  background: var(--cs-gold) !important;
}

.cs .cs-nav__cta {
  margin-left: 0.6rem !important;
}

/* Optional hairline rule below the nav — grounds it on the page */
.cs .cs-nav--ruled {
  border-bottom: 1px solid var(--cs-rule) !important;
}

/* ── Stacked variant — anchor centered, menu centered below ────── */
.cs .cs-nav--stacked {
  flex-direction: column !important;
  gap: 2rem !important;
  padding: 3.5rem 1.5rem 2rem !important;
  text-align: center !important;
}
.cs .cs-nav--stacked .cs-nav__anchor svg {
  height: 112px !important;   /* anchor breathes — this is the "broader" setting */
}
.cs .cs-nav--stacked .cs-nav__menu {
  gap: 2.6rem !important;
}

/* ── Split variant — anchor centered, menu split around it ─────── */
.cs .cs-nav--split {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  padding: 2.2rem 1.5rem !important;
  gap: 2rem !important;
}
.cs .cs-nav--split .cs-nav__menu--left {
  justify-content: flex-end !important;
}
.cs .cs-nav--split .cs-nav__menu--right {
  justify-content: flex-start !important;
}
.cs .cs-nav--split .cs-nav__anchor svg {
  height: 88px !important;
}

/* ── Mobile — mark shrinks, menu collapses to row with wrap ────── */
@media (max-width: 880px) {
  .cs .cs-nav--stacked { padding: 2.5rem 1rem 1.5rem !important; gap: 1.4rem !important; }
  .cs .cs-nav--stacked .cs-nav__anchor svg { height: 88px !important; }
  .cs .cs-nav--split { grid-template-columns: 1fr !important; row-gap: 1.2rem !important; text-align: center !important; }
  .cs .cs-nav--split .cs-nav__anchor { justify-content: center !important; }
  .cs .cs-nav--split .cs-nav__menu { justify-content: center !important; flex-wrap: wrap !important; }
}
@media (max-width: 640px) {
  .cs .cs-nav__menu { gap: 1.4rem !important; flex-wrap: wrap !important; justify-content: center !important; }
  .cs .cs-nav--stacked .cs-nav__anchor svg { height: 72px !important; }
  .cs .cs-nav__link { font-size: 0.65rem !important; letter-spacing: 0.22em !important; }
}


/* ══════════════════════════════════════════════════════════════════
   10. LAYOUT HELPERS
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-container { max-width: 1080px !important; margin: 0 auto !important; padding: 0 1.5rem !important; }
.cs .cs-narrow    { max-width: 560px  !important; margin: 0 auto !important; padding: 0 1.5rem !important; }
.cs .cs-section   { padding: 5rem 1.5rem !important; }
.cs .cs-center    { text-align: center !important; }
.cs .cs-stack > * + * { margin-top: 1rem !important; }


/* ══════════════════════════════════════════════════════════════════
   11. EVENT CARD — horizontal with strand ribbon
   Used on What's On listings and ticket pages.
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-event {
  display: grid !important;
  grid-template-columns: 6px 1fr auto !important;
  gap: 1.4rem !important;
  align-items: center !important;
  padding: 1.4rem 1.6rem !important;
  border: 1px solid var(--cs-rule) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.02) !important;
  transition: border-color 0.2s, background 0.2s;
}
.cs .cs-event:hover { border-color: var(--cs-gold-soft) !important; }

.cs .cs-event__ribbon {
  align-self: stretch !important;
  border-radius: 3px !important;
  background: var(--cs-gold) !important;
}
.cs .cs-event--voices  .cs-event__ribbon { background: var(--cs-voices) !important; }
.cs .cs-event--stories .cs-event__ribbon { background: var(--cs-stories) !important; }
.cs .cs-event--stages  .cs-event__ribbon { background: var(--cs-stages) !important; }

.cs .cs-event__body { min-width: 0 !important; }
.cs .cs-event__meta {
  display: flex !important;
  gap: 0.8rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--cs-faint) !important;
  margin-bottom: 0.5rem !important;
}
.cs .cs-event__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--cs-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}
.cs .cs-event__artist {
  font-size: 0.85rem !important;
  color: var(--cs-muted) !important;
  margin-top: 0.25rem !important;
  line-height: 1.5 !important;
}
.cs .cs-event__cta { flex-shrink: 0 !important; }


/* ══════════════════════════════════════════════════════════════════
   12. TICKET STATUS CHIP — four synced states
   Match Ticket Tailor webhook statuses.
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-chip {
  display: inline-block !important;
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 0.45em 0.9em !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}
.cs .cs-chip--available {
  background: rgba(140,190,120,0.12) !important;
  color: #9bc28a !important;
  border-color: rgba(140,190,120,0.3) !important;
}
.cs .cs-chip--limited {
  background: rgba(239,145,45,0.12) !important;
  color: var(--cs-voices) !important;
  border-color: rgba(239,145,45,0.3) !important;
}
.cs .cs-chip--final {
  background: rgba(200,169,110,0.14) !important;
  color: var(--cs-gold) !important;
  border-color: rgba(200,169,110,0.35) !important;
}
.cs .cs-chip--soldout {
  background: rgba(245,240,232,0.05) !important;
  color: var(--cs-faint) !important;
  border-color: var(--cs-rule) !important;
  text-decoration: line-through !important;
}


/* ══════════════════════════════════════════════════════════════════
   13. PRICE BLOCK — the "£100 per year" pattern
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-price { text-align: center !important; }
.cs .cs-price__amount {
  display: block !important;
  font-size: clamp(4.5rem, 14vw, 7rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: var(--cs-gold) !important;
  margin: 0 !important;
}
.cs .cs-price__unit {
  display: block !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(200,169,110,0.5) !important;
  margin-top: 0.4rem !important;
}


/* ══════════════════════════════════════════════════════════════════
   14. BENEFITS GRID — 3-col → 1-col
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-benefits {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2.5rem !important;
}
.cs .cs-benefit {
  border-top: 1px solid var(--cs-rule) !important;
  padding-top: 1.4rem !important;
}
.cs .cs-benefit__label {
  display: block !important;
  font-size: 0.52rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--cs-gold) !important;
  opacity: 0.85;
  margin-bottom: 0.7rem !important;
}
.cs .cs-benefit__lead {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--cs-text) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.7rem !important;
}
.cs .cs-benefit__body {
  font-size: 0.82rem !important;
  color: var(--cs-faint) !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

@media (max-width: 720px) {
  .cs .cs-benefits { grid-template-columns: 1fr !important; gap: 2rem !important; }
}


/* ══════════════════════════════════════════════════════════════════
   15. HERO — full-width image + overlay + title sheen
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-hero {
  position: relative !important;
  min-height: 420px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 3rem 2rem !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px !important;
}
.cs .cs-hero__img {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2;
  background-size: cover !important;
  background-position: center !important;
}
.cs .cs-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(10,8,5,0.95) 0%,
    rgba(10,8,5,0.6)  45%,
    rgba(10,8,5,0.1)  100%
  );
}
.cs .cs-hero__content { max-width: 620px !important; position: relative; }
.cs .cs-hero__eyebrow {
  display: block !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--cs-gold) !important;
  margin-bottom: 0.9rem !important;
}
.cs .cs-hero__title {
  font-size: clamp(2rem, 5.5vw, 3.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #f5f0e8 !important;
  margin: 0 !important;
  background: linear-gradient(110deg, #f5f0e8 0%, #f5f0e8 40%, #fff6df 50%, #f5f0e8 60%, #f5f0e8 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: cs-sheen 7s ease-in-out infinite;
}
@keyframes cs-sheen {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0 0; }
}


/* ══════════════════════════════════════════════════════════════════
   16. TOAST — inline flash for save states
   ══════════════════════════════════════════════════════════════════ */

.cs .cs-toast {
  display: inline-block !important;
  font-size: 0.78rem !important;
  padding: 0.6em 1em !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
}
.cs .cs-toast--ok {
  background: rgba(140,190,120,0.09) !important;
  color: #9bc28a !important;
  border-color: rgba(140,190,120,0.22) !important;
}
.cs .cs-toast--err {
  background: rgba(200,50,30,0.09) !important;
  color: #e8a090 !important;
  border-color: rgba(200,50,30,0.22) !important;
}


/* ══════════════════════════════════════════════════════════════════
   17. MOBILE-FIRST BREAKPOINTS — ritual pinch-points
   880 → 720 → 640 → 520
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
  .cs .cs-section { padding: 4rem 1.25rem !important; }
}
@media (max-width: 720px) {
  .cs .cs-glass { padding: 2rem !important; border-radius: 14px !important; }
}
@media (max-width: 640px) {
  .cs-display { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
  .cs-h1      { font-size: clamp(1.5rem, 6vw, 1.9rem) !important; }
}
@media (max-width: 520px) {
  .cs .cs-section { padding: 3rem 1rem !important; }
  .cs .cs-btn { padding: 0.9em 1.8em !important; }
}