/* =========================================================
   SPUR — design-audit layer (6 Sept 2026).

   Loaded LAST on every page, after editorial.css and any
   per-page sheet. Purely additive: remove the <link> to
   /audit.css (or delete a lettered block below) to revert.
   Blocks map 1:1 to docs/DESIGN-AUDIT-2026-09.md.
   ========================================================= */


/* ---------- A. Site-wide ---------- */

/* A1. The mobile menu button was invisible. editorial.css turned the nav
   into a solid ink band but the three burger lines stayed ink-on-ink, so
   phones had no way to open the menu. */
.nav__burger span { background: #F2EEE8; }

/* A2. Legal-template heroes (About, Privacy, Terms, 404) started at the raw
   gutter while the nav wordmark and footer align to the 1440px column. */
.legal-hero {
  padding-left:  max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter)));
}


/* ---------- B. Homepage ---------- */

/* B1. Palette. Keep these two small cool-tone accents from the original
   landing treatment: they separate the signup panel and price badges from
   the surrounding warm bone surfaces without changing the broader palette. */
.dh-wait__panel {
  background: linear-gradient(135deg, rgba(206,220,242,0.34), rgba(225,217,240,0.34));
  border-color: var(--rule-strong);
}
.dh-chip__off {
  background: var(--violet-soft);
  color: var(--violet);
}

/* B2. "Book in minutes". The four phone frames showed screenshots of other
   marketing pages (the studio landing under "Arrive on time", About under
   "Pay the studio"). Drop the frames; run the steps as a numbered row with
   hairlines, matching the step table on /how-it-works. */
.dh-step__phone { display: none; }
.dh-steps__grid {
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--rule);
}
.dh-step {
  padding: 28px 32px 34px 0;
  border-bottom: 1px solid var(--rule);
}
.dh-step + .dh-step {
  border-left: 1px solid var(--rule);
  padding-left: 32px;
}
.dh-step__num {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink-40);
  margin: 0 0 16px;
}
.dh-step__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 30ch;
}
@media (max-width: 1024px) {
  .dh-step:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .dh-steps__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .dh-step + .dh-step { border-left: 0; padding-left: 0; }
  .dh-step { padding: 22px 0 26px; }
  .dh-step__body { max-width: none; }
}

/* B2b. Keep the ticker heading inside the same responsive column as .wrap.
   The overline is inline-flex, so text-align cannot inset it; sample mode
   only replaces its text in JS and keeps this class in place. */
.dh-ticker > .dh-ticker__head {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto 26px;
  padding-inline: var(--gutter);
}

/* B2c. One ink illustration beside the steps heading, in the style of the
   page heroes, filling the space the phone frames left. Generated with
   Higgsfield (Nano Banana Pro, referenced on how-it-works-manicure-ink.png),
   knocked out to a transparent PNG. Delete the .dh-steps__art block in
   index.html to remove it. */
.dh-steps__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px 56px;
  align-items: end;
}
/* The shared section rhythm is intentionally generous elsewhere, but it put
   a large dead area above this heading once the phone mockups were removed. */
.section:has(> .wrap > .dh-steps__head) {
  padding-top: clamp(64px, 6vw, 96px);
}
.dh-steps__art {
  width: 100%;
  max-width: 520px;
  justify-self: end;
  aspect-ratio: 4 / 3;
}
@media (max-width: 900px) {
  .dh-steps__head { grid-template-columns: 1fr; }
  .dh-steps__art { max-width: 380px; justify-self: center; margin-top: 8px; }
}

/* B3. Sample mode. With no live openings the ticker falls back to the mock
   set in /data/slots.js. fork-dealhero.js now flags that state on <body>;
   hide the made-up count in the hero CTA so it reads "Explore openings". */
.spur-sample-mode #dh-count { display: none; }

/* B4. The three-stat strip stacked into a tall single column on phones. */
@media (max-width: 720px) {
  .dh-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 40px var(--gutter);
  }
  .dh-stats__num { font-size: 22px; margin-bottom: 6px; }
  .dh-stats .overline { font-size: 9px; letter-spacing: 0.14em; }
}


/* ---------- C. For studios (/salons) ---------- */

/* C1. The hero stacked five layers of copy (headline, lede, "Become a
   founding partner now", "first 25 studios only", buttons, "no commitment").
   Keep headline, lede, buttons and the reassurance line — the founding
   pitch has its own section two screens down. */
.s-hero__cta-head,
.s-hero__cta-note { display: none; }

/* C2. Sections sat on white rounded sheets, with a bone panel inside, with a
   bordered box inside that. Sections now sit flat on bone; the cards and the
   founding panel are the only surfaces. */
.vp, .founding {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.founding__panel {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.founding__perks {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  gap: 0 40px;
  margin-top: 36px;
}
.founding__perk {
  background: transparent;
  padding: 24px 0 0;
}
/* Third "first 25" repeat inside one panel (overline, title, this line). */
.founding__scarcity { display: none; }

/* C3. Closing CTA. The headline rendered in grey (reads as disabled) with the
   scarcity line jammed against its baseline; that line was the fourth
   "first 25" repeat on the page. */
.nwyt-cta { padding-top: clamp(40px, 6vw, 80px); }
.nwyt-cta__line {
  color: var(--ink);
  margin-bottom: 32px;
}
.nwyt-cta__scarcity { display: none; }


/* ---------- D. How it works ---------- */

/* D1. The bullet before "Be the first to know what's coming" was absolutely
   positioned 18px outside a full-width line, so it floated far left. */
.hiw-cta__note {
  justify-content: flex-start;
  gap: 12px;
}
.hiw-cta__note .overline-dot {
  position: static;
  transform: none;
}


/* ---------- E. Product pages (Next.js) ---------- */

/* E1. /browse, /slot, /account heroes: the overline sat under the fixed
   marketing nav — clipped on phones, six pixels clear on desktop. */
.app-consumer .product-hero { padding-top: clamp(72px, 7vw, 96px); }
@media (max-width: 720px) {
  .app-consumer .product-hero { padding-top: 76px; }
}

/* E2. 404 (app/not-found.tsx): CTA row now shares the hero's left edge. */
.legal-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
}