/* =========================================================
   SPUR — editorial design layer, site-wide.
   Loaded last on every page, after styles.css and any
   per-page sheet. Overrides type, colour, spacing and
   treatment only — no copy, section or layout-order changes.
   ========================================================= */

:root {
  --ink: #1A1714;
  --paper: #F2EEE8;
  --ink-70: #6E6862;
  --ink-55: #6E6862;
  --ink-40: #A29A92;
  --rule: #DCD5CC;
  --rule-strong: #DCD5CC;
  --accent: #C4B2A4;
  --accent-strong: #1A1714;
  --accent-soft: #EAE4DC;
  --pink-micro: #C4B2A4;
  --cta: #1A1714;
  --cta-strong: #1A1714;
  --champagne: #EAE4DC;
  --beige: #EAE4DC;
  --blush: #EAE4DC;
  --paper-portal: #F2EEE8;
  --paper-60: rgba(242, 238, 232, 0.6);

  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-display-italic: "Instrument Serif", "Times New Roman", serif;
  --font-statement: "Instrument Serif", "Times New Roman", serif;
  --font-wordmark: "Shrikhand", "Recoleta", "Fraunces", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --grain: 0.05;
  --clay-deep: #8A7565;
}

/* ---------- Flat bone page, no gradients anywhere ---------- */
html {
  background-color: var(--paper);
  background-image: none;
}
body, body.blue-page { background: transparent; }
body.blue-page::before, body.blue-page::after { display: none; }
#bg-gl { display: none; }

/* Film grain — printed-editorial tooth over the whole page. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9998;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTgwJyBoZWlnaHQ9JzE4MCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

/* ---------- Type foundations ---------- */
body { font-family: var(--font-body); font-weight: 400; font-feature-settings: normal; }

.display, .display-italic {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.04;
}
h1, h2, h3 { letter-spacing: -0.005em; line-height: 1.04; }

.overline, .overline--muted {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6E6862;
  gap: 12px;
}
.overline-dot { width: 4px; height: 4px; background: var(--accent); }
.divider-rule { background: var(--rule); }
.pink, .ink-70, .ink-55 { color: inherit; }

/* Wordmark keeps its original Shrikhand cut. */
.wordmark { font-family: var(--font-wordmark); font-weight: 400; }

/* ---------- Nav: solid ink band ---------- */
.nav, .nav--scrolled {
  background: #1A1714;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}
.nav__inner { padding: 18px var(--gutter); transition: padding 220ms var(--ease-out); }
.nav--scrolled { border-bottom: 1px solid rgba(242, 238, 232, 0.15); }
.nav--scrolled .nav__inner { padding-top: 11px; padding-bottom: 11px; }
.nav__wordmark { font-size: 26px; color: #F2EEE8; }
.nav__links { gap: 34px; }
.nav__link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 238, 232, 0.72);
}
.nav__link:hover, .nav__link--active { color: #F2EEE8; }
/* Clay underline draws in left-to-right */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.nav__link:hover::after, .nav__link--active::after { transform: scaleX(1); background: var(--accent); }
.nav__pill::after { display: none; content: none; }
.nav__pill {
  border-radius: 2px;
  border: 1px solid #F2EEE8;
  background: transparent;
  color: #F2EEE8;
  padding: 9px 16px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav__pill:hover { background: #F2EEE8; border-color: #F2EEE8; color: #1A1714; }

/* ---------- Hero: left-anchored, underfilled ---------- */
.rhero { text-align: left; justify-content: flex-start; padding-left: 8vw; padding-right: 40vw; padding-bottom: clamp(48px, 7vh, 76px); }
.rhero__inner { max-width: none; width: 100%; margin: 0; align-items: flex-start; }

/* Right-hand image panel: hard-edged light/dark split against the bone. */
.rhero__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36%;
  z-index: 1;
  background: #E5DED4;
  overflow: hidden;
}
.rhero__panel image-slot { display: block; width: 100%; height: 100%; border-radius: 0; background: #E5DED4; --slot-bg: #E5DED4; }
.rhero__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 23, 20, 0.08);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 900px) {
  .rhero { padding-right: 8vw; }
  .rhero__panel { display: none; }
}
.rhero__wash { display: none; }
.rhero__inner { max-width: 760px; margin: 0; align-items: flex-start; display: flex; }

.rhero__eyebrow {
  justify-content: flex-start;
  gap: 12px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: #6E6862;
  margin: 0;
}
.rhero__eyebrow .overline-dot, .rhero__note .overline-dot {
  position: static;
  transform: none;
  margin: 0;
}

.rhero__brandline { justify-content: flex-start; text-align: left; margin: 56px 0 0; }
.rhero__wordmark { font-size: clamp(34px, 3.4vw, 52px); color: var(--ink); }

.rhero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 7.2vw, 142px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 14px 0 0;
  text-wrap: initial;
}
.rhero__headline em { font-style: normal; font-family: var(--font-display); font-weight: 400; }
.rhero__headline em::after { display: none; content: none; animation: none; }

.rhero__sub {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: #6E6862;
  max-width: 460px;
  margin: 44px 0 0;
}

/* Email capture: hairline field + plain letterspaced text link. */
.rhero__form {
  margin: 60px 0 0;
  max-width: 440px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0;
  gap: 20px;
  align-items: center;
  transition: border-color 300ms var(--ease-out);
}
.rhero__form:focus-within { border-bottom-color: var(--accent); }
.rhero__form input {
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 0;
  color: var(--ink);
}
.rhero__form input::placeholder { color: #A29A92; letter-spacing: 0.02em; }
.rhero__form .waitlist__submit {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.waitlist__success {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6E6862;
}

.rhero__note {
  justify-content: flex-start;
  gap: 12px;
  margin: 26px 0 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6E6862;
}

.rhero__scroll {
  left: auto;
  right: 8vw;
  margin: 0;
  text-align: right;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #6E6862;
}
.rhero__scroll:hover { color: var(--ink); transform: translateY(2px); }
.rhero__scroll:focus-visible { border-radius: 2px; }

/* ---------- Sections: same layout, quieter treatment ---------- */
.slots-head__title, .how__title, .why-spur__title, .salon-tease__title {
  font-weight: 400;
  letter-spacing: -0.03em;
}
.why-spur__spur { font-family: var(--font-wordmark); font-weight: 400; letter-spacing: 0.02em; }
.how__lede { font-family: var(--font-body); font-style: normal; font-size: 17px; line-height: 1.6; color: #6E6862; }
.why-spur__body, .salon-tease__body { font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: #6E6862; }
.how__step-body { color: #6E6862; }
.how__step-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; }
.how__step { background: transparent; border: 1px solid var(--rule); border-radius: 2px; }
.how__step:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: none; }
.step-num { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; color: #6E6862; }
.section-divider { background: var(--rule); }
.salon-tease__stats { border-top: 1px solid var(--rule); }
.salon-tease__pct { font-family: var(--font-body); font-weight: 400; color: var(--ink); }
.slots-foot { color: #6E6862; }

/* Search + cards: hairlines, near-square corners, no fills */
.slots-search__pill { background: transparent; border: 1px solid var(--rule); border-radius: 2px; }
.slots-search__pill select { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; }
.slots-search__divider { background: var(--rule); }
.slots-search__cta {
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 22px;
}
.slots-search__cta:hover { background: var(--ink); color: var(--paper); }
/* Base link colour — bare <a>s otherwise fall through to UA blue. */
a { color: var(--ink); }
.vcard, .vcard__media, .vcard__badge, .skeleton, .skeleton-line, .slot-card { border-radius: 2px; }
.vcard__badge {
  background: var(--paper);
  border: 1px solid var(--rule);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.skeleton, .skeleton-line { background: var(--accent-soft); }

/* Buttons: 1px ink, near-square, inverts on hover */
.btn, .btn--pink, .btn--ghost {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.btn:hover, .btn--pink:hover, .btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: none;
}
.btn__arrow { transition: transform 300ms var(--ease-out); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--rule); background: transparent; }
.footer__tagline { font-family: var(--font-display); font-style: normal; font-weight: 400; letter-spacing: -0.03em; }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6E6862;
}
.footer__col ul a { color: var(--ink); }
.footer__col ul a:hover { color: #6E6862; }
.footer__bottom { border-top: 1px solid var(--rule); color: #6E6862; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

a:hover { color: #6E6862; }

/* ---------- Motion: 8px rise, 600ms, ease-out only ---------- */
@media (prefers-reduced-motion: no-preference) {
  .spur-anim .reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .spur-anim .reveal--in { opacity: 1; transform: none; }
  .rhero__orb--a, .rhero__orb--b, .rhero__orb--c { animation: none; }
}

/* ---------- Carried across every surface ---------- */
.mobile-menu { background: var(--paper); }
.mobile-menu__link, .mobile-menu__close {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.mobile-menu__head { border-bottom: 1px solid var(--rule); }

.portal-nav, .portal-header, .portal-topbar, .portal-side {
  background: var(--paper);
  border-color: var(--rule);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.portal-nav__link, .portal-tab, .tab, .portal-side__link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E6862;
  border-radius: 2px;
}
.portal-nav__link--active, .portal-tab--active, .tab--active, .portal-side__link--active { color: var(--ink); }

.card, .panel, .surface, .tile, .stat-card, .form-card, .modal, .sheet,
input, select, textarea, .chip, .filter-chip, .badge, .pill, .tag, .avatar-tile, .monogram {
  border-radius: 2px;
  background-image: none;
}
.card, .panel, .surface, .tile, .stat-card, .form-card, .modal, .sheet {
  background: transparent;
  border: 1px solid var(--rule);
  box-shadow: none;
}
input, select, textarea {
  font-family: var(--font-body);
  background: transparent;
  border-color: var(--rule);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }
.chip, .filter-chip, .badge, .pill, .tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: #6E6862;
}
.chip--active, .filter-chip--active, .badge--active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.avatar-tile, .monogram, .pass, .wallet-card { background: var(--accent-soft); background-image: none; }
.legal-hero__title, .legal-section__label, .legal-page h1, .legal-page h2 { letter-spacing: -0.03em; }
.legal-section__num, .step-num { font-family: var(--font-body); letter-spacing: 0.22em; }
hr, .rule, .hairline { border-color: var(--rule); background: var(--rule); }

/* =========================================================
   VALUE CONTRAST — ink blocks against bone. No new colours.
   ========================================================= */

/* ---------- "For studios" section: full ink ---------- */
.salon-tease {
  background: #1A1714;
  color: #F2EEE8;
}
.salon-tease .overline, .salon-tease .overline--muted { color: rgba(242, 238, 232, 0.62); }
.salon-tease__title, .salon-tease__stat-num, .salon-tease__pct { color: #F2EEE8; }
.salon-tease__body { color: rgba(242, 238, 232, 0.78); }
.salon-tease__stats { border-top: 1px solid rgba(242, 238, 232, 0.2); }
.salon-tease .btn, .salon-tease .btn--pink {
  border-color: #F2EEE8;
  color: #F2EEE8;
  background: transparent;
}
.salon-tease .btn:hover, .salon-tease .btn--pink:hover {
  background: #F2EEE8;
  border-color: #F2EEE8;
  color: #1A1714;
}

/* ---------- Footer: full ink, generous ---------- */
.footer {
  background: #1A1714;
  color: #F2EEE8;
  border-top: 0;
  padding-top: clamp(80px, 10vw, 140px);
}
.footer__grid { padding: 24px 0 72px; }
.footer__tagline { color: #F2EEE8; }
.footer__col h4 { color: rgba(242, 238, 232, 0.5); }
.footer__col ul a, .footer__bottom span { color: #F2EEE8; }
.footer__col ul a:hover { color: #F2EEE8; }
.footer__bottom {
  border-top: 1px solid rgba(242, 238, 232, 0.15);
  color: rgba(242, 238, 232, 0.5);
  padding: 28px 0;
}
.footer__bottom span { color: rgba(242, 238, 232, 0.5); }

/* Clay underline draws in on text links */
.footer__col ul a, .legal-body a, .faq-a__inner a, .why-spur__body a, .salon-tease__body a {
  position: relative;
  display: inline-block;
}
.footer__col ul a::after, .legal-body a::after, .faq-a__inner a::after,
.why-spur__body a::after, .salon-tease__body a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.footer__col ul a:hover::after, .legal-body a:hover::after, .faq-a__inner a:hover::after,
.why-spur__body a:hover::after, .salon-tease__body a:hover::after { transform: scaleX(1); }

/* ---------- Step markers: clay, serif, large ---------- */
.step-num, .legal-section__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

/* ---------- Studio cards: hairline, invert on hover ---------- */
.vcard {
  border: 1px solid var(--rule);
  padding: 22px;
  gap: 16px;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.vcard:hover { background: #1A1714; border-color: #1A1714; color: #F2EEE8; }
.vcard:hover .vcard__name,
.vcard:hover .vcard__rate,
.vcard:hover .vcard__meta,
.vcard:hover .vcard__was,
.vcard:hover .overline { color: #F2EEE8; }
.vcard:hover .vcard__meta { border-top-color: rgba(242, 238, 232, 0.2); }
.vcard:hover .vcard__go { background: transparent; border-color: #F2EEE8; color: #F2EEE8; }
.vcard:hover .vcard__media image-slot, .vcard:hover .vcard__photo { transform: none; }
.vcard__go { border-radius: 2px; }
.vcard__time {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
}
.vcard__photo, .vcard__photo--img { background: #E5DED4; background-image: none; }
.vcard__photo--img::after { display: none; }
.vcard__mono { color: rgba(26, 23, 20, 0.28); }

/* ---------- Email capture: white field on bone ---------- */
.waitlist, .rhero__form, .app-hero__form, .hiw-cta__form {
  background: #FFFFFF;
  background-image: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 4px 4px 18px;
  gap: 18px;
  align-items: center;
  transition: border-color 300ms var(--ease-out);
}
.waitlist:focus-within, .rhero__form:focus-within,
.app-hero__form:focus-within, .hiw-cta__form:focus-within { border-color: var(--accent); }
.waitlist input, .rhero__form input, .app-hero__form input, .hiw-cta__form input {
  background: #FFFFFF;
  background-image: none;
  padding: 14px 0;
}
.waitlist__submit { padding: 0 16px 0 0; }

/* ---------- Product / portal nav (.pnav): ink band ---------- */
.pnav, .pnav--pink {
  background: #1A1714;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(242, 238, 232, 0.15);
  box-shadow: none;
}
.pnav .wordmark { font-size: 26px; color: #F2EEE8; }
.pnav__role-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 238, 232, 0.55);
  border-left: 1px solid rgba(242, 238, 232, 0.2);
}
.pnav__link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 238, 232, 0.72);
  position: relative;
}
.pnav__link:hover, .pnav__link--active { color: #F2EEE8; font-weight: 400; }
.pnav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.pnav__link:hover::after, .pnav__link--active::after { transform: scaleX(1); }
.pnav__user, .pnav__user span, .pnav__signout { color: rgba(242, 238, 232, 0.72); }
.pnav__avatar {
  border-radius: 2px;
  background: transparent;
  background-image: none;
  border: 1px solid rgba(242, 238, 232, 0.4);
  color: #F2EEE8;
}

/* Hub / index-of-screens page */
.hub-card { background: transparent; border-color: var(--rule); }
.hub-card:hover { background: #1A1714; }
.hub-card:hover .hub-card__name, .hub-card:hover .hub-card__desc,
.hub-card:hover .hub-card__go, .hub-card:hover .hub-card__idx { color: #F2EEE8; }
.hub-card__idx, .hub-group__count { font-family: var(--font-body); letter-spacing: 0.22em; }
.hub-card__name, .hub-group__title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; }
.hub-group, .hub-grid, .hub-card { border-color: var(--rule); }

/* Consumer app surfaces: kill the lavender wash + pink nav band */
.app-consumer, .product-page { background: transparent; background-image: none; }
.app-consumer .pnav {
  background: #1A1714;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(242, 238, 232, 0.15);
}
.app-consumer .filter-bar {
  background: var(--paper);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--rule);
}
.app-consumer .browse-empty, .app-consumer .browse-loading {
  background: transparent;
  background-image: none;
  border: 1px solid var(--rule);
}
[class*="grad"], .pass, .voucher, .wallet-card, .monogram-tile {
  background-image: none;
}

/* =========================================================
   Display-serif legibility pass — open the tracking, give the
   leading room for descenders. Applies on every page.
   ========================================================= */
.display, .display-italic,
h1, h2, h3,
.rhero__headline, .slots-head__title, .how__title, .why-spur__title, .salon-tease__title,
.how__step-title, .hub-hero__title, .hub-group__title, .hub-card__name,
.legal-hero__title, .s-hero__title, .hiw-hero__title, .hiw-cta__title, .hiw-step__title,
.app-hero__title, .vcard__name, .product-hero__title, .section-heading__title,
.footer__tagline, .vp__title, .founding__title, .faq__title, .nwyt-cta__line {
  letter-spacing: -0.005em;
  line-height: 1.04;
}
.rhero__headline { font-size: clamp(58px, 7.6vw, 150px); }

/* Two-step clay: hover/active go deeper */
a:hover { color: var(--clay-deep); }
.nav__link:hover::after, .nav__link--active::after,
.pnav__link:hover::after, .pnav__link--active::after,
.footer__col ul a:hover::after, .legal-body a:hover::after, .faq-a__inner a:hover::after,
.why-spur__body a:hover::after, .salon-tease__body a:hover::after { background: var(--clay-deep); }
.hub-card:hover .hub-card__go { color: var(--clay-deep); }
.legal-body a:hover, .faq-a__inner a:hover { color: var(--clay-deep); }
.footer__col ul a:hover, .footer__bottom a:hover { color: #F2EEE8; }
.rhero__form:focus-within { border-bottom-color: var(--clay-deep); }
.waitlist:focus-within, .app-hero__form:focus-within, .hiw-cta__form:focus-within { border-color: var(--clay-deep); }

/* =========================================================
   Photography slots — full-bleed, hard edges, warm overlay.
   ========================================================= */
.ph {
  position: relative;
  overflow: hidden;
  background: #E5DED4;
  border-radius: 0;
}
.ph image-slot,
.ph > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #E5DED4;
  object-fit: cover;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 23, 20, 0.08);
  pointer-events: none;
  z-index: 2;
}
/* Step cards: consistent 4:3 across all three, above the number */
.ph--step { aspect-ratio: 4 / 3; margin: 0 -28px 4px; }
.how__step { padding-top: 0; overflow: hidden; }
/* Why Spur: wide landscape spanning the content width */
.ph--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; margin: 8px 0 36px; }
/* Full-bleed bands */
/* html carries zoom: 0.9, so vw must be divided out to truly reach the edges. */
.ph--bleed {
  width: calc(100vw / 0.9);
  margin-left: calc(50% - (100vw / 0.9) / 2);
  height: clamp(320px, 34vw, 520px);
}
.ph--lineart {
  background: transparent;
}
.ph--lineart > img {
  object-fit: contain;
  background: transparent;
}
.ph--lineart::after { display: none; }
.ph--footer { margin-bottom: 0; }
.ph--hiw { aspect-ratio: 16 / 9; margin: 0 0 28px; }

/* =========================================================
   LANDING CONTINUITY — carries the homepage's treatment
   (soft radii, white cards, pill CTAs, hairline accordions)
   across every other surface. Loaded last, so it wins.
   ========================================================= */

/* Soft radii replace the 2px square everywhere */
.card, .panel, .surface, .tile, .stat-card, .form-card, .modal, .sheet,
.hiw-step, .vp, .founding, .hub-card, .vcard, .slot-card, .browse-empty,
.browse-loading, .legal-section, .pass, .wallet-card, .voucher {
  border-radius: 14px;
}
.chip, .filter-chip, .badge, .pill, .tag, .vcard__badge, .vcard__time,
.nav__pill, .btn, .btn--pink, .btn--ghost, .slots-search__pill,
.slots-search__cta, input, select, textarea, .waitlist, .rhero__form,
.app-hero__form, .hiw-cta__form {
  border-radius: 999px;
}

/* Cards sit as white paper on bone, like the homepage panels */
.card, .panel, .surface, .tile, .stat-card, .form-card,
.hiw-step, .vp, .founding, .vcard, .slot-card {
  background: #FFFFFF;
  border: 1px solid var(--rule);
}
.hiw-step:hover, .vcard:hover, .slot-card:hover { border-color: var(--ink); }
.vcard:hover { background: #FFFFFF; color: inherit; }
.vcard:hover .vcard__name, .vcard:hover .vcard__rate,
.vcard:hover .vcard__meta, .vcard:hover .vcard__was,
.vcard:hover .overline { color: inherit; }
.vcard:hover .vcard__go { border-color: var(--ink); color: var(--ink); }

/* Primary CTAs: solid ink pill (matches "Explore openings") */
.btn, .btn--pink, .slots-search__cta, .hub-card__go {
  background: var(--cta);
  border: 1px solid var(--cta);
  color: #F2EEE8;
  padding: 15px 26px;
  letter-spacing: 0.14em;
}
.btn:hover, .btn--pink:hover, .slots-search__cta:hover {
  background: var(--clay-deep);
  border-color: var(--clay-deep);
  color: #F2EEE8;
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
  padding: 15px 26px;
}
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.salon-tease .btn, .salon-tease .btn--pink, .footer .btn {
  background: #F2EEE8;
  border-color: #F2EEE8;
  color: #1A1714;
}
.salon-tease .btn:hover, .salon-tease .btn--pink:hover { background: #FFFFFF; border-color: #FFFFFF; color: #1A1714; }

/* Search pills + fields: white, hairline, soft shadow like the hero */
.slots-search__pill, .rhero__search .slots-search__pill, .filter-bar__pill {
  background: #FFFFFF;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 12px 32px rgba(26, 23, 20, 0.05);
}
input, select, textarea { background: #FFFFFF; }

/* Page heroes: left-anchored, homepage type scale + grey lede */
.hiw-hero, .s-hero, .app-hero, .legal-hero, .product-hero { text-align: left; }
.hiw-hero__title, .s-hero__title, .app-hero__title,
.legal-hero__title, .product-hero__title {
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 1.04;
  margin: 20px 0 0;
}
.hiw-hero__sub, .s-hero__sub, .app-hero__sub,
.legal-hero__sub, .product-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 52ch;
  margin: 24px 0 0;
  text-wrap: pretty;
}
.legal-hero { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Section headings pick up the homepage rhythm */
.hiw-cta__title, .faq__title, .section-heading__title, .nwyt-cta__line,
.reg-head__title, .founding__title {
  font-size: clamp(34px, 4.6vw, 68px);
  margin: 18px 0 0;
}

/* Accordions / FAQ rows: hairline rules, +/− marker */
.faq details, .faq__item, .faq-item {
  border-bottom: 1px solid var(--rule);
  background: transparent;
  border-radius: 0;
}
.faq details:first-of-type, .faq__item:first-of-type { border-top: 1px solid var(--rule); }
.faq summary, .faq__q, .faq-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: -0.005em;
  padding: 26px 4px;
}
.faq-a__inner, .faq__a {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 62ch;
}

/* Studio-page win-win cards match the homepage step cards */
.reg-card {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 34px 30px 30px;
}
.reg-card__num { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; color: var(--ink-70); }
.reg-card__label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-70); }
.reg-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.reg-card__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -0.005em; margin: 14px 0 10px; }
.reg-card__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-70); }
.reg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
@media (max-width: 900px) { .reg-steps { grid-template-columns: 1fr; } }

/* Studios "three reasons": 3-up row, title beside the eyebrow, cards sized to
   their content rather than a 2x2 grid with an empty fourth cell. */
.vp__head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 24px 40px;
  margin-bottom: 22px;
}
.vp__title { text-align: left; margin: 0; }
.vp__rule { margin: 0 0 32px; }
.vp__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.vp__card { padding: 36px 32px 30px; border-radius: 14px; background: #FFFFFF; }
.vp__proof { margin-top: 26px; padding-top: 20px; }
.vp__proof-num { font-size: clamp(30px, 2.8vw, 40px); }
@media (max-width: 780px) {
  .vp__head { grid-template-columns: 1fr; gap: 12px; }
  .vp__grid { grid-template-columns: 1fr; }
}

/* Studios hero: restore breathing room between the intro copy and the CTA block */
.s-hero__cta { margin-top: clamp(28px, 3vw, 44px); }

/* Browse filter bar: two tiers — controls on top, category chips below a
   hairline — so nothing scrolls half-hidden and the bar reads as one unit. */
.filter-bar { padding: 0; }
.filter-bar__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
}
.filter-controls {
  order: 1;
  padding: 14px 0;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}
.filter-search {
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: #FFFFFF;
  padding: 10px 18px;
  width: 220px;
  margin-right: auto;
}
.filter-search:focus { border-color: var(--ink); }
.filter-chips {
  order: 2;
  flex: 1 1 100%;
  flex-wrap: wrap;
  overflow: visible;
  align-items: center;
  gap: 8px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--rule);
}
.filter-chips::before {
  content: "Category";
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-right: 8px;
}
.filter-chip {
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 8px 16px;
  background: #FFFFFF;
}
.filter-chip--active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 620px) {
  .filter-search { width: 100%; margin-right: 0; }
  .filter-controls { justify-content: space-between; }
}

/* Card pricing: total leads, split sits underneath (no drip pricing).
   Kept close to the body scale so it sits with the name, not shouting over it. */
.vcard__price { align-items: baseline; gap: 10px; margin: 8px 0 0; }
.vcard__rate {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.vcard__rate-suffix {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.vcard__was {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-55);
}
.vcard__split {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--ink-55);
}

/* ---------- Fork: availability block living in the hero ---------- */
.rhero__avail { margin: 60px 0 0; }
.rhero__avail-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 46px);
  letter-spacing: -0.005em;
  line-height: 1.04;
  margin: 12px 0 0;
  color: var(--ink);
}
.rhero__search {
  margin: 28px 0 0;
  justify-content: flex-start;
  max-width: 640px;
}
.rhero__search .slots-search__pill { background: #FFFFFF; }
.section--slots { padding-top: clamp(56px, 7vw, 96px); }