/* ═══════════════════════════════════════════════════════════════════
   CABANA · DESIGN SYSTEM OVERRIDE  v1
   ───────────────────────────────────────────────────────────────────
   Loaded LAST on every page — after brand.css and page <style>.
   One job: lift the whole product to a professional, premium standard.

     • Typography  → Geist (display) + Inter (body). No more serif.
     • Eyebrows    → clean letter-spaced labels, no sparkle glyphs.
     • Wordmark    → Cabana becomes the primary brand in the header.
     • Buttons     → one refined auth control, tuned hero CTA.

   Rules: never fights layout, only refines. Idempotent. Self-contained.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · TYPEFACE SYSTEM ─────────────────────────────────────────────
   Geist is a modern, technical, premium grotesque (headings).
   Inter is the most trusted, versatile UI face on the web (body).
   Both are variable, open-source, and load fast from Google Fonts.
   We re-point every existing font token so the entire codebase — which
   references --font-display / --font-body / --font-d / --font-b — moves
   over with zero per-page markup changes.                              */
:root{
  --font-display:'Geist','Inter',system-ui,-apple-system,sans-serif !important;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  --font-data:'Geist','Inter',ui-monospace,'SF Mono',monospace !important;
  --font-d:'Geist','Inter',system-ui,sans-serif !important;
  --font-b:'Inter',system-ui,-apple-system,sans-serif !important;
}

body,
button, input, select, textarea{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.011em;
}

/* Headings + any display-class element get Geist with a tight,
   confident tracking. Serif italics are neutralised — Geist has no
   italic personality to lean on, so emphasis comes from weight/colour. */
h1, h2, h3, h4,
.font-display, .hero-title, .section-headline, .promise-headline,
.final-headline, .tb-brand, .nav-brand, .chero-title, .stmt-key,
.dr-title, .dpr-title{
  font-family:'Geist','Inter',system-ui,sans-serif !important;
  font-optical-sizing:auto;
  font-variation-settings:normal !important;
  letter-spacing:-0.028em;
  font-weight:600;
}
h1, .hero-title, .final-headline, .chero-title{
  letter-spacing:-0.038em;
  font-weight:640;
}

/* Kill the old hand-drawn serif italic treatment everywhere. In Geist,
   the accent phrase reads as a colour/gradient shift, not a wonky slant. */
h1 em, h2 em, h3 em,
.hero-title em, .section-headline em, .promise-headline em,
.final-headline em, .chero-title em, .tb-brand em, .nav-brand em,
.loader-word em, em.wonk{
  font-family:'Geist','Inter',system-ui,sans-serif !important;
  font-style:normal !important;
  font-variation-settings:normal !important;
  font-weight:680;
}

/* Numbers / prices / stats — Geist tabular for an engineered feel */
.price, .stat, [data-num], .svc-price, .amount, time,
.pstat-num, .hero-stat-num{
  font-family:'Geist','Inter',ui-monospace,monospace !important;
  font-feature-settings:'tnum' 1,'cv01' 1;
  letter-spacing:-0.02em;
}

/* ── 2 · EYEBROW LABELS — de-AI'd ────────────────────────────────────
   Remove the ✦ sparkle prefix that made every label read "AI-generated".
   Replaced (via JS in cabana-rebrand) with clean labels; here we make
   sure the type treatment is premium: uppercase, wide tracking, no glyph. */
.hero-eyebrow, .section-eyebrow, .promise-eyebrow, .chero-eyebrow,
.tb-chip, .bc-chip, .eyebrow, [class*="-eyebrow"]{
  font-family:'Geist','Inter',system-ui,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase;
  font-feature-settings:'cv01' 1;
}

/* ── 3 · PRIMARY AUTH CONTROL ────────────────────────────────────────
   One refined "Sign in / up" button replacing the twin pills.          */
.cab-auth{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Geist','Inter',system-ui,sans-serif;
  font-size:13.5px;font-weight:600;letter-spacing:-0.01em;
  color:#fff;text-decoration:none;white-space:nowrap;
  padding:10px 20px;border-radius:100px;
  background:linear-gradient(135deg,#6D28FF 0%,#4F6DFF 100%);
  box-shadow:0 4px 16px rgba(109,40,255,.28),inset 0 1px 0 rgba(255,255,255,.16);
  border:none;cursor:pointer;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;
}
.cab-auth:hover{
  transform:translateY(-1.5px);
  box-shadow:0 8px 24px rgba(109,40,255,.4),inset 0 1px 0 rgba(255,255,255,.22);
}
.cab-auth:active{transform:translateY(0);}
.cab-auth svg{width:15px;height:15px;stroke-width:2.2;flex-shrink:0;}
.nav.on-dark .cab-auth,
.hero .cab-auth{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.nav.on-dark .cab-auth:hover,
.hero .cab-auth:hover{
  background:rgba(255,255,255,.2);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
@media(max-width:560px){
  .cab-auth{padding:9px 16px;font-size:13px;}
  .cab-auth svg{width:14px;height:14px;}
}

/* ── 4 · CABANA HEADER WORDMARK ──────────────────────────────────────
   The Cabana wordmark now sits where the old SOS/chip clutter lived.
   Clean, single brand asset — the professional identity, front & centre. */
.cab-wordmark{
  display:inline-flex;align-items:center;height:100%;
  text-decoration:none;flex-shrink:0;line-height:0;
}
.cab-wordmark img{
  height:22px;width:auto;display:block;
  transition:opacity .2s,transform .2s;
}
.cab-wordmark:hover img{opacity:.82;transform:translateY(-0.5px);}
.nav.on-dark .cab-wordmark img,
.hero .cab-wordmark img{filter:none;}
@media(max-width:560px){.cab-wordmark img{height:19px;}}

/* On dark surfaces the colour wordmark still reads well; on very dark
   heroes we keep it as-is (it's a luminous gradient mark). */

/* ── 5 · SILENCE THE OLD SPARKLE IN CSS-GENERATED CONTENT ───────────*/
.hero-eyebrow::before, .section-eyebrow::before{content:none !important;}

/* ── 6 · TOPBAR LOGO PAIR (icon + wordmark) ─────────────────────────
   Every page topbar shows cabana-emblem.png (icon) + cabana-wordmark-color.png
   (wordmark) side by side. These classes make them the right size and
   keep them pixel-crisp at all viewport widths.                       */
.tb-icon-sm{
  height:28px;width:28px;
  object-fit:contain;flex-shrink:0;
  border-radius:7px;
}
.tb-cab-wm{
  height:26px;width:auto;
  display:block;flex-shrink:0;
}
.rm-tb-logo{
  height:26px;width:auto;
  display:block;flex-shrink:0;
}
.drawer-icon{
  height:30px;width:30px;
  object-fit:contain;flex-shrink:0;
}
.drawer-logo-cab{
  height:28px;width:auto;
  display:block;flex-shrink:0;
}
/* Pair container alignment */
.tb-left .tb-icon-sm + .tb-logo,
.tb-left .tb-icon-sm + .tb-cab-wm{
  margin-left:0;
}
@media(max-width:480px){
  .tb-icon-sm{height:24px;width:24px;}
  .tb-cab-wm,.rm-tb-logo{height:22px;}
}

/* ── 9 · SILK LAYER — feel, focus & motion discipline ────────────────
   Appended polish pass. Interaction feel only: tap response, focus
   visibility, selection, scroll. No layout opinions.                  */

/* Instant, clean taps on mobile — no gray flash, no double-tap zoom lag */
a, button, [role="button"], input, select, textarea, label, summary{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Keyboard focus: one confident brand ring, only when it should appear */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--violet, #6D28FF);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Text selection carries the brand */
::selection{ background: rgba(109,40,255,.16); color: inherit; }

/* Headlines never orphan; paragraphs rag cleanly (progressive) */
h1, h2, h3, .hero-title, .section-headline{ text-wrap: balance; }
p, li, .svc-tile-desc{ text-wrap: pretty; }

/* Quiet, brand-tinted scrollbars */
*{ scrollbar-width: thin; scrollbar-color: rgba(109,40,255,.28) transparent; }
::-webkit-scrollbar{ width: 9px; height: 9px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(109,40,255,.26);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ background-color: rgba(109,40,255,.45); }

/* In-page anchors glide — but only for people who want motion */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* Full respect for reduced motion: everything settles instantly */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Rendered images stay crisp when scaled */
img{ image-rendering: auto; }