@font-face {
  font-family: "Bethany Elingston";
  src: url("../assets/fonts/BethanyElingston.woff2") format("woff2"), url("../assets/fonts/BethanyElingston.otf") format("opentype");
  font-display: swap;
}
:root {
  --text-primary: #2a2a2a;
  --text-success: #07756c;
  --text-secondary: #6b7280;
  --text-unavailable: #bdbdc9;
  --text-selected: #ffffff;
  --text-destructive: #e90442;
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-brand: #e6f5f4;
  --border-default: #e7e7e8;
  --brand-main-green: #b2edd8;
  --brand-dark-green: #07756c;
  --cc-green: #c9ffec;
  --cc-salmon: #ffdce6;
  --cc-purple: #eadeff;
  --cal-pink: #ffdcfe;
  --cal-violet: #e3e5ff;
  --font-display: "Bethany Elingston", Georgia, serif;
  --gutter: clamp(16px, 8.333vw, 144px);
  --nav-h: 96px;
  --font-body: "Inter", system-ui, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-secondary); }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
/* The page background is painted once (html), not per section: body and sections stay transparent so the soft
   glows (z-index:-1, below) can drift across section edges instead of being cut off (Shane feedback). */
body {
  margin: 0;
  overflow: clip; /* glows may cross section edges, but nothing may hang past the page: scrolling hard-stops at the footer (Shane) */
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: none; }
section { position: relative; width: 100%; overflow-x: clip; } /* clip sideways only: glows may cross top/bottom edges */
/* Section-level glows sit behind every section's content and blend across the edges between sections. */
.salons-glow, .features-glow, .built-by-glow, .reviews-glow, .closing-glow, .closing-mglow { z-index: -1; }
.display { font-family: var(--font-display); font-weight: 400; line-height: normal; }
.inner { width: 100%; max-width: calc(1440px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Responsive system ----
   Design canvas: 1728px. Breakpoints: desktop >=1200 (design), tablet 900-1199 (fluid), mobile <900 (stacked).
   Fluid type: clamp(min, size/1728*100vw, size) — use --fs() pattern: font-size: clamp(MINpx, calc(SIZE / 1728 * 100vw), SIZEpx). */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Scale box: keeps a fixed-px mockup composition and scales it to fit its container.
   <div class="scale-box" style="--w:1440;--h:613.5"><div class="scale-box-inner">…fixed px content…</div></div>
   js/scale.js sets --s = container width / --w. */
.scale-box { position: relative; width: 100%; max-width: calc(var(--w) * 1px); aspect-ratio: var(--w) / var(--h); overflow: hidden; }
.scale-box-inner { position: absolute; top: 0; left: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform-origin: 0 0; transform: scale(var(--s, 1)); }

/* Headings: Bethany Elingston has a single weight — never let the browser synthesise bold. */
h1, h2, h3, h4 { font-weight: 400; }
.display, h1, h2 { font-synthesis: none; }