/* ============================================================
   site-styles.css — The Vitality Project marketing site

   The shared layer for every page rebuilt off the Showit site.
   Elizabeth Sep 3: "do not rebuild the salon owner or solo pro
   page" — those two stay exactly as they are and do NOT link
   this file. Everything else on the site does.

   Tokens are sampled off the live Showit build, not off the app,
   so they differ slightly from the sales pages on purpose:
   the site pink is #ff7feb where the sales pages use #ff6fe0.
   ============================================================ */

@font-face {
  font-family: 'Club Tropicana';
  src: url('fonts/club_tropicana.woff') format('woff');
  font-display: swap;
}

:root {
  /* sampled from the live site */
  --pink:   #ff7feb;
  --green:  #75eb63;
  --yellow: #fae851;
  --blue:   #026cce;
  --orange: #ff7c44;
  --purple: #ae5fe0;
  --black:  #000;
  --ink:    #17131d;
  --white:  #fff;
  --paper:  #f7f7f7;
  --muted:  #5d5568;

  --script: "Club Tropicana", "Caveat", cursive;
  --serif:  "Noto Serif", Georgia, serif;
  --sans:   "Raleway", system-ui, sans-serif;
  --body:   "DM Sans", system-ui, sans-serif;

  --rainbow: linear-gradient(100deg, #ff7feb 0%, #ae5fe0 20%, #026cce 40%,
                             #33d6c8 56%, #75eb63 70%, #fae851 85%, #ff7c44 100%);
  --wrap: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }
@media (max-width: 760px) { .wrap { width: calc(100% - 32px); } }

/* ── type ───────────────────────────────────────────────────── */
.script { font-family: var(--script); font-weight: 400; line-height: 1; }
.serif  { font-family: var(--serif); font-weight: 300; }

h1, h2, h3 { margin: 0; }

.display {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .98;
  font-size: clamp(34px, 5.4vw, 68px);
}
.serif-head {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.01em;
  line-height: 1.14; font-size: clamp(26px, 3.2vw, 44px);
}

/* the eyebrow: a rainbow bar and letterspaced caps. Used site-wide. */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: 800 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px;
}
.eyebrow::before {
  content: ""; width: 46px; height: 5px; flex: 0 0 auto;
  background: var(--rainbow);
}
.eyebrow.is-centred { justify-content: center; }
.eyebrow.on-dark { color: rgba(255,255,255,.72); }

/* the marker wash Elizabeth uses for emphasis */
.hl      { box-shadow: inset 0 -.34em 0 rgba(255,127,235,.40); font-weight: 700; }
.hl-green{ box-shadow: inset 0 -.34em 0 rgba(117,235,99,.42);  font-weight: 700; }
.hl-blue { box-shadow: inset 0 -.34em 0 rgba(2,108,206,.20);   font-weight: 700; }
.hl-yell { box-shadow: inset 0 -.34em 0 rgba(250,232,81,.62);  font-weight: 700; }

/* ── buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 30px; border-radius: 999px; border: 2px solid currentColor;
  font: 800 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; background: none;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark  { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-light { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-ghost { color: var(--black); }
.btn-ghost-light { color: var(--white); }

/* ── site header ────────────────────────────────────────────
   Elizabeth Sep 3: "put our real logo right in the middle and top and center,
   and then have the navigation bar below it." So the header is a stack, not a
   row: wordmark centred on top, nav centred beneath it on its own rule. */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.97); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.head-stack { display: grid; justify-items: center; gap: 12px; padding: 18px 0 0; }
.site-logo { display: block; }
.site-logo img { width: clamp(190px, 22vw, 268px); height: auto; }

/* Elizabeth Sep 3: "not so cramped ... Join Vitality and Book a Demo could be
   farther out", set against Culture Amp's bar, which is sentence case and airy.
   space-between pushes the two coloured buttons to the ends and lets the plain
   links breathe between them. The chevrons are gone: a panel that opens on
   hover does not need to announce itself. */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(14px, 2.2vw, 34px); flex-wrap: wrap;
  width: 100%; padding: 16px 0 18px; margin-top: 2px;
  border-top: 1px solid rgba(0,0,0,.08);
}
/* Elizabeth Sep 3 asked whether this was our font. It was DM Sans, our body
   font, while the two buttons and every headline are Raleway, so the bar was
   mixed. All Raleway now, at 600 for the lighter Culture Amp feel. */
.site-nav a {
  font: 600 16.5px/1 var(--sans); letter-spacing: 0; text-transform: none;
  text-decoration: none; color: var(--black); white-space: nowrap;
}
/* Elizabeth Sep 3: blue on the top bar rather than purple, as the more gender
   neutral read. This is the bar only; the panels below keep their own colours. */
.site-nav a:hover { color: var(--blue); }

/* The two coloured buttons, measured off the live Showit nav:
   35px tall, 10px radius (a soft rectangle, not a capsule), Raleway 17px/800 black.
   Pink #ff7feb sits at the left end, yellow #fae851 at the right end. */
.site-nav .nav-drop-btn,
.site-nav .join {
  min-height: 40px; padding: 0 22px; border-radius: 999px;
  font: 700 16.5px/1 var(--sans); letter-spacing: 0; text-transform: none;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Elizabeth Sep 3: trying a blue gradient here for the same gender-neutral read
   as the bar. Every stop stays dark enough for white text to clear 4.5:1, which is
   why the light end stops at #1774cd rather than going brighter. Revert to
   background: var(--pink) with black text for the original. */
.site-nav .nav-drop-btn { border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(100deg, #043f8d 0%, #026cce 58%, #1774cd 100%); }
.site-nav .nav-drop-btn:not(.plain):hover,
.site-nav .nav-drop-btn:not(.plain)[aria-expanded="true"] { color: #fff; filter: brightness(1.08); }
/* "How it works" is a plain nav item that happens to open a panel, not a coloured button */
.site-nav .nav-drop-btn.plain {
  background: none; min-height: auto; padding: 0; border-radius: 0;
  font: 600 16.5px/1 var(--sans); letter-spacing: 0; color: var(--black);
}
.site-nav .nav-drop-btn.plain:hover,
.site-nav .nav-drop-btn.plain[aria-expanded="true"] { color: var(--blue); filter: none; }
.site-nav .join         { background: var(--yellow); }
.site-nav .nav-drop-btn:hover, .site-nav .nav-drop-btn[aria-expanded="true"] { filter: brightness(.94); color: var(--black); }
.site-nav .join:hover   { filter: brightness(.94); color: var(--black); }
/* Elizabeth Sep 3, against Culture Amp's bar: "I like how the sign in is near
   the Book a Demo", so Login and Book a demo are one group at the right end
   rather than being spread by space-between. Three children now: Join Vitality,
   the middle links, and that pair. */
/* A three-column panel is far wider than its button, and Resources sits in the
   middle of the bar, so anchoring to the button would push it off one edge or the
   other. Making that one .nav-drop static lets the panel resolve against the nav
   itself and span its full width instead. */
.site-nav { position: relative; }
.nav-drop.is-wide { position: static; }
.nav-drop-menu.nav-mega-wide { left: 0; right: 0; width: auto; min-width: 0; }
.nav-mega-inner.nav-mega-cols {
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: clamp(20px,2.4vw,38px); }
/* Elizabeth Sep 3: "we kind of highlight the words with these cute little lines,
   I wonder if we should do that underneath Educational Resources and Community
   Partnerships." Same device as the sales pages, an inset box-shadow sitting
   behind the text rather than a text-decoration, one brand colour per column. */
.nav-col h3 { margin: 0 0 15px; font: 800 13.5px/1.3 var(--sans); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink); }
/* Elizabeth Sep 3: pastel fills, not the brand colours at full strength. These are
   her own tints, lifted from the salon owner page's .voice-tint set, so the nav uses
   a palette that already exists rather than a new one. Every pill now carries dark
   text, which also removes the white-on-blue exception the full-strength version
   needed. --mark is the wash behind the heading, --fill the hover pill. */
.nav-col { --mark: rgba(255,127,235,.45); --fill: #fbe1f1; }
.nav-mega-cols .nav-col:nth-of-type(1) { --mark: rgba(255,127,235,.45); --fill: #fbe1f1; }
.nav-mega-cols .nav-col:nth-of-type(2) { --mark: rgba(2,108,206,.22);   --fill: #dcebfd; }
.nav-mega-cols .nav-col:nth-of-type(3) { --mark: rgba(117,235,99,.48);  --fill: #ddf6e4; }
.nav-col h3 span { box-shadow: inset 0 -0.42em 0 var(--mark); }
/* Results runs two link columns beside the featured card, not three, so its panel
   is sized to that rather than stretching across the whole bar and leaving a third
   of itself empty. */
.nav-drop-menu.nav-mega-wide.is-narrow { right: auto; width: min(880px, 94vw); }
/* Elizabeth Sep 5: "extra white space can go away". The four-track rule above outranked
   this one, so Results kept an empty fourth column. Same specificity now, so three tracks win. */
.nav-mega-inner.nav-mega-cols.nav-mega-cols-3 { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr); }
.nav-mega-cols-3 .nav-col:nth-of-type(1) { --mark: rgba(250,232,81,.62); --fill: #fdf3a6; }
.nav-mega-cols-3 .nav-col:nth-of-type(2) { --mark: rgba(2,108,206,.22);  --fill: #dcebfd; }
.nav-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.nav-main { display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 42px); }
.nav-end { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }

/* Book a demo goes black like theirs */
.site-nav .join { background: var(--black); color: var(--white); }
.site-nav .nav-drop-btn.plain { color: var(--black); }
.site-nav .join:hover { background: #2b2533; color: var(--white); filter: none; }

/* Elizabeth Sep 3: the highlight was meant for Join Vitality, not Pricing, and
   she likes the pink, so it keeps the pink and takes the shimmer and the shake.
   Same 5.4s loop as the newsletter button so the two rhyme. Pricing is a plain
   link again. */
.site-nav .nav-drop-btn:not(.plain) { position: relative; overflow: hidden;
  animation: joinNudge 5.4s ease-in-out infinite; }
.site-nav .nav-drop-btn:not(.plain) > span { position: relative; z-index: 1; }
.site-nav .nav-drop-btn:not(.plain)::after { content: ""; position: absolute; z-index: 0;
  top: 0; left: -60%; width: 42%; height: 100%; transform: skewX(-18deg);
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.72), transparent);
  animation: joinShimmer 5.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-drop-btn:not(.plain) { animation: none; }
  .site-nav .nav-drop-btn:not(.plain)::after { display: none; }
}

.nav-toggle { display: none; background: none; border: 0; padding: 8px 10px;
  font-size: 22px; line-height: 1; cursor: pointer; }

@media (max-width: 1080px) {
  .head-stack { padding-bottom: 10px; }
  .nav-toggle { display: block; }
  .site-nav {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 0 8px; margin-top: 0;
  }
  .site-nav[hidden] { display: none; }
  .site-nav a { padding: 13px 4px; text-align: center; border-bottom: 1px solid rgba(0,0,0,.06); }
  .site-nav .join { margin-top: 12px; border-bottom: 0; }
}

/* ── the rainbow rule used between bands ────────────────────── */
.rule-rainbow { height: 7px; background: var(--rainbow); }

/* ── generic bands ──────────────────────────────────────────── */
.band       { padding: clamp(56px, 7vw, 104px) 0; }
.band-dark  { background: var(--black); color: var(--white); }
.band-paper { background: var(--paper); }
.band-tight { padding: clamp(40px, 5vw, 72px) 0; }

/* ── the four "people" cards ────────────────────────────────── */
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.people-card {
  padding: 26px 22px 24px; border-radius: 4px; background: var(--white);
  border-top: 5px solid var(--e, var(--pink));
  box-shadow: 0 10px 26px rgba(23,19,29,.09);
  text-align: center;
}
.people-card img { width: 54px; height: 54px; object-fit: contain; margin: 0 auto 14px; }
.people-card h3 { font: 800 14px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 9px; }
.people-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.people-card:nth-child(1) { --e: var(--purple); }
.people-card:nth-child(2) { --e: var(--blue); }
.people-card:nth-child(3) { --e: var(--pink); }
.people-card:nth-child(4) { --e: var(--green); }
@media (max-width: 940px) { .people-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .people-grid { grid-template-columns: 1fr; } }

/* ── stat row ───────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; text-align: center; }
.stat b { display: block; font: 800 clamp(38px,5vw,64px)/1 var(--sans); letter-spacing: -.03em; }
.stat span { display: block; margin-top: 6px; font: 800 11.5px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.band-dark .stat span { color: rgba(255,255,255,.66); }
@media (max-width: 620px) { .stat-row { grid-template-columns: 1fr; gap: 30px; } }

/* ── testimonial cards ──────────────────────────────────────── */
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.quote-card {
  padding: 28px 26px; border-radius: 18px; background: var(--white); color: var(--ink);
  box-shadow: 0 14px 32px rgba(23,19,29,.10); display: flex; flex-direction: column; gap: 14px;
}
.quote-card blockquote { margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: 16px; line-height: 1.55; }
.quote-card cite { margin-top: auto; font-style: normal; }
.quote-card cite b { display: block; font: 800 12px/1.3 var(--sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--purple); }
.quote-card cite span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
@media (max-width: 940px) { .quote-grid { grid-template-columns: 1fr; } }

/* ── free-resource cards ────────────────────────────────────── */
.free-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.free-card { padding: 26px 24px 24px; border-radius: 20px; background: var(--white);
  box-shadow: 0 12px 28px rgba(23,19,29,.10); display: flex; flex-direction: column; gap: 12px; }
.free-card img { width: 46px; height: 46px; object-fit: contain; }
.free-card h3 { font: 800 13px/1.25 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.free-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.free-card .go { margin-top: auto; font: 800 12px/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--purple); text-decoration: none; }
@media (max-width: 1000px) { .free-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .free-grid { grid-template-columns: 1fr; } }

/* ── site footer ────────────────────────────────────────────── */
.site-foot { background: var(--black); color: var(--white); padding: 66px 0 34px; }
.foot-top { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,1fr));
  gap: 34px; padding: 44px 0 38px; }
.foot-brand img { width: 190px; margin-bottom: 16px; }
.foot-brand p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 34ch; }
.foot-col h4 { font: 800 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--yellow); margin: 0 0 14px; }
.foot-col a { display: block; padding: 5px 0; font-size: 14px; color: rgba(255,255,255,.78);
  text-decoration: none; }
.foot-col a:hover { color: var(--white); }
/* The newsletter strip. Elizabeth Sep 3: the heart lockup, her own copy, and a
   name field beside the email with a green button, matching the live band. */
.foot-sign { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 44px;
  align-items: center; padding: 0 0 30px; }
.foot-heart { width: 62px; height: auto; margin: 0 0 16px; }
.foot-sign h3 { margin: 0; font: 800 clamp(22px,2.4vw,32px)/1.1 var(--sans); letter-spacing: -.02em; }
.foot-sign .eyebrow-loop { margin: 0 0 10px; color: #c7c7c7;
  font: 700 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.foot-sign .script { display: block; color: var(--yellow); font-size: clamp(30px,3.4vw,50px);
  line-height: 1.06; margin-bottom: 2px; }
.foot-sign p { margin: 12px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,.76); }
.signup { display: grid; gap: 12px; }
.signup input {
  min-height: 54px; padding: 0 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2);
  background: #ededed; color: #17131d; font: 500 15px/1 var(--body);
}
.signup input::placeholder { color: #8b8b8b; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; font-size: 14px; }
.signup input:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(117,235,99,.3); }
/* Elizabeth Sep 3: the light purple from the sales pages (#c49bff, the one used
   most across both), and "make it shimmer and shake a little bit". One 5.4s loop
   drives both, so the sweep and the wiggle land together rather than fighting. */
.signup .join-list { position: relative; overflow: hidden; justify-self: end;
  min-height: 52px; padding: 0 34px; border: 0; border-radius: 999px;
  background: #c49bff; color: #17131d; cursor: pointer;
  font: 800 17px/1 var(--sans); letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(196,155,255,.34);
  animation: joinNudge 5.4s ease-in-out infinite; }
.signup .join-list span { position: relative; z-index: 1; }
.signup .join-list::after { content: ""; position: absolute; z-index: 0; top: 0; left: -60%;
  width: 42%; height: 100%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  animation: joinShimmer 5.4s ease-in-out infinite; }
.signup .join-list:hover { filter: brightness(1.05); }
@keyframes joinShimmer {
  0%, 60%   { left: -60%; }
  84%, 100% { left: 132%; }
}
@keyframes joinNudge {
  0%, 58%, 94%, 100% { transform: translateX(0) rotate(0); }
  64% { transform: translateX(-2px) rotate(-.7deg); }
  70% { transform: translateX(2px)  rotate(.7deg); }
  76% { transform: translateX(-1.5px) rotate(-.5deg); }
  82% { transform: translateX(1px)  rotate(.35deg); }
}
@media (prefers-reduced-motion: reduce) {
  .signup .join-list { animation: none; }
  .signup .join-list::after { display: none; }
}
/* No consent checkbox. US CAN-SPAM does not ask for one, and GDPR consent is valid
   when the act of submitting is informed, which this line makes it. A checkbox is
   friction that buys nothing here; double opt-in in the provider is what matters. */
.signup .signup-terms { margin: 4px 0 0; grid-column: 1 / -1; text-align: right;
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.55); }
.signup .signup-terms a { color: rgba(255,255,255,.8); font-weight: 700; }
.signup .signup-note { margin: 2px 0 0; font-size: 13px; line-height: 1.45;
  color: rgba(255,255,255,.62); }
.signup .signup-note a { color: var(--yellow); font-weight: 700; }
.foot-social { display: flex; gap: 22px; align-items: center; justify-content: center;
  padding: 6px 0 34px; border-bottom: 1px solid rgba(255,255,255,.14); }
.foot-social a { display: grid; place-items: center; width: 34px; height: 34px;
  color: rgba(255,255,255,.82); transition: color .18s, transform .18s; }
.foot-social a:hover { color: var(--yellow); transform: translateY(-2px); }
.foot-social svg { width: 25px; height: 25px; display: block; }
/* ── Footer: Instagram strip (Sep 8) ─────────────────────────────────
   Sits between the social icons and the link columns. Full-bleed like the
   Hair Love strip it was modelled on: a label block on the left, six square
   posts edge to edge on the right. */
.foot-insta { display: grid; grid-template-columns: minmax(220px, .95fr) minmax(0, 4.05fr); align-items: stretch;
  width: 100vw; margin: 0 calc(50% - 50vw) 34px; border-bottom: 1px solid rgba(255,255,255,.14); }
.foot-insta-label { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 26px 32px;
  text-decoration: none; color: #fff; background: linear-gradient(135deg, rgba(255,127,235,.22), rgba(174,95,224,.18)); }
.foot-insta-label .script { color: var(--pink); font-family: var(--script); font-size: clamp(30px, 3vw, 44px); line-height: 1; transform: rotate(-3deg); transform-origin: left; }
.foot-insta-label b { font: 800 14px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.foot-insta-label i { font: 500 13px/1.4 var(--body); font-style: normal; color: rgba(255,255,255,.62); }
.foot-insta-label:hover .script { color: var(--yellow); }
.foot-insta-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.foot-insta-grid a { display: block; aspect-ratio: 1; overflow: hidden; }
.foot-insta-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.foot-insta-grid a:hover img { transform: scale(1.06); }
@media (max-width: 900px) {
  .foot-insta { grid-template-columns: 1fr; }
  .foot-insta-label { padding: 22px 20px; text-align: center; align-items: center; }
  .foot-insta-label .script { transform: none; }
  .foot-insta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.foot-legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-legal-links a { text-decoration: none; color: inherit; }
.foot-legal-links a:hover { color: var(--yellow); }
.foot-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  font: 700 11.5px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.52); }
@media (max-width: 940px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-sign { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .foot-top { grid-template-columns: 1fr; }
  .signup .join-list { justify-self: stretch; }
}

/* ── reveal on scroll (progressive; content shows without JS) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* Visually hidden but still read aloud. Clip rather than off-canvas positioning:
   left:-9999px keeps the element's width in the document and causes horizontal
   overflow on every page that uses it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Decorative blobs sit outside their column by design; the band clips them so they
   never widen the document. */
.band, .hero, .wiv-hero { overflow-x: clip; }

/* ── nav dropdowns ───────────────────────────────────────────
   Elizabeth Sep 3: "when I wiggle my mouse at all, the drop down area goes
   away." That was a gap between the button and the panel: the panel sat 12px
   below, so crossing that dead space dropped :hover and the menu vanished.
   Fixed two ways. The panel now starts flush at top:100% and creates its own
   visual offset with padding-top, so the hover target is continuous. And JS
   holds it open for 260ms after the pointer leaves, so a wobble does not
   close it. Also removed the rainbow bar she did not want. */
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  min-width: 244px; margin: 0; padding: 14px 8px 8px; list-style: none; z-index: 70;
}
.nav-drop-menu > li { margin: 0; }
.nav-drop-menu::after {                 /* the visible panel, inset from the hover area */
  content: ""; position: absolute; left: 0; right: 0; top: 10px; bottom: 0; z-index: -1;
  background: var(--white); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(23,19,29,.18), 0 0 0 1px rgba(23,19,29,.07);
}
.nav-drop-menu[hidden] { display: none; }

/* Culture Amp's shape: a featured card on the left, the real list on the right,
   sentence case, nothing shouting. Swap the featured image and line freely, they
   are just the first thing worth pointing at. */
/* A 700 wide panel centred on its own button runs off the left edge of the
   window, because both buttons sit in the left half of the bar. Anchor it to the
   button instead. */
.nav-drop-menu.nav-mega { left: 0; transform: none;
  min-width: min(700px, 94vw); padding: 14px 0 0; }
.nav-mega-inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px;
  padding: 28px 32px 30px; }
/* .site-nav a sets white-space: nowrap for the bar itself, which would run this
   caption out of its column and across the links. */
.nav-featured { display: block; padding-right: 22px; text-decoration: none;
  color: var(--ink); border-right: 1px solid rgba(23,19,29,.12);
  white-space: normal; }
/* Elizabeth Sep 3: the Featured label takes the script from the sales pages, and
   the photograph shows whole rather than being cropped to a fixed ratio. */
.nav-featured-label { display: block; margin-bottom: 10px; color: var(--purple);
  font-family: var(--script); font-weight: 400; font-size: 26px; line-height: 1; }
/* A square box with contain: nothing is cropped, and the three panels come out
   the same depth even though the Method photo is portrait and the other two are
   landscape. */
.nav-featured img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 14px; background: var(--paper); }
/* Elizabeth Sep 3: "a tiny bit smaller so it doesn't take as much room", and
   using the full width of its column rather than sitting in a narrow measure. */
.nav-featured-title { display: block; margin-top: 12px; width: 100%; max-width: none;
  white-space: normal; font: 500 14.5px/1.45 var(--body); color: var(--ink); }
.nav-featured:hover .nav-featured-title { text-decoration: underline; }
/* Elizabeth Sep 3: a title over these too, so all three panels match. The colour
   is per panel: pink, blue and green are already spoken for in Resources. */
.nav-col--purple { --mark: rgba(174,95,224,.32); --fill: #eae0fb; }
.nav-col--yellow { --mark: rgba(250,232,81,.62); --fill: #fdf3a6; }
/* Elizabeth Sep 3: "make the How It Works options look like the resource
   options." One rule for both, so every panel reads the same. */
.nav-col a { display: block; padding: 10px 12px; border-radius: 999px;
  font: 500 16.5px/1.35 var(--body); letter-spacing: 0; text-transform: none;
  color: var(--ink); text-decoration: none; white-space: normal;
  transition: background .16s, color .16s; }
.nav-col a:hover, .nav-col a:focus-visible { background: var(--fill); color: var(--ink); }

@media (max-width: 1080px) {
  .nav-drop { width: 100%; order: 0; }
  .nav-main, .nav-end { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .site-nav .nav-drop-btn, .site-nav .join {
    width: 100%; min-height: 46px; font-size: 15px; border-radius: 10px; }
  .nav-drop-menu { position: static; transform: none; min-width: 0; padding: 6px 0;
    background: var(--paper); border-radius: 10px; margin: 8px 0; }
  .nav-drop-menu.nav-mega { min-width: 0; }
  .nav-drop-menu::after { display: none; }
  .nav-mega-inner, .nav-mega-inner.nav-mega-cols { grid-template-columns: 1fr;
    gap: 18px; padding: 14px 16px 16px; }
  .nav-featured { display: none; }
  .nav-col h3 { text-align: center; }
  .nav-col a { text-align: center; }
}

@media (max-width: 1080px) {
  .nav-drop { width: 100%; }
  .nav-drop { order: 0; }
  .site-nav .join { order: 0; }
  .site-nav .nav-drop-btn, .site-nav .join {
    width: 100%; min-height: 46px; font-size: 15px; border-radius: 10px; }
  .nav-drop-menu { position: static; transform: none; min-width: 0; box-shadow: none;
    background: var(--paper); margin: 6px 0; }
  .nav-drop-menu::before { display: none; }
  @media (hover: hover) { .nav-drop:hover .nav-drop-menu[hidden] { display: none; } }
}

/* ── mobile pass, Sep 6 ───────────────────────────────────────
   Phone only, and shared chrome only: the header, the footer and the
   generic band rhythm. Nothing here fires above 700px, so every desktop
   layout on the site is byte-for-byte what it was. The header is the one
   real change: at 190px the wordmark and its rule stood 190px tall on a
   phone and, being sticky, took that back off every screen. Scaled down it
   is still her lockup, centred, with the bar beneath it. */
@media (max-width: 700px) {
  .head-stack { padding: 12px 0 0; gap: 8px; }
  .site-logo img { width: 152px; }
  .nav-toggle { padding: 6px 12px; font-size: 21px; }
  .site-nav a { padding: 12px 4px; }
  .site-nav .nav-drop-btn, .site-nav .join { min-height: 48px; font-size: 15.5px; }

  /* .22em tracking on a 12px label costs about four characters a line,
     which is what pushed most eyebrows onto three lines */
  .eyebrow { letter-spacing: .15em; gap: 11px; margin-bottom: 14px; }
  .eyebrow::before { width: 34px; height: 4px; }

  .band { padding: 54px 0; }
  .band-tight { padding: 38px 0; }

  .btn { min-height: 50px; padding: 0 22px; }

  .quote-card { padding: 24px 20px; }
  .free-card { padding: 22px 20px; }

  .site-foot { padding: 46px 0 28px; }
  .foot-top { gap: 26px; padding-bottom: 30px; }
  .foot-brand img { width: 158px; }
  .foot-col a { padding: 7px 0; }
  .foot-sign { padding: 30px 0 26px; gap: 24px; }
  .foot-heart { width: 52px; }
  /* right-aligned under a full-width button on a phone the line hung off
     on its own; it reads as part of the form set flush left */
  .signup .signup-terms { text-align: left; }
  .foot-social { gap: 16px; padding: 24px 0 20px; }
  .foot-legal { gap: 10px; padding-top: 18px; }
  .foot-legal-links { gap: 16px; }
}

/* ── phone header + drawer, Sep 7 ─────────────────────────────
   Elizabeth: "I hate what we currently have on mobile." A compact bar
   (menu, logo, Join) and a full screen drawer with a search field,
   icon rows, accordion groups and the two actions pinned at the bottom.
   Everything here lives under 1080px; the desktop header is untouched.
   The drawer chrome is injected by site-nav.js. */
.head-cta, .mnav-top, .mnav-search, .mnav-home, .mnav-ic, .mnav-plus { display: none; }
@media (max-width: 1080px) {
  .site-head { border-bottom: 1px solid rgba(0,0,0,.08); }
  .head-stack { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; justify-items: center; gap: 8px; padding: 8px 0; }
  .nav-toggle { display: grid; place-items: center; order: 0; width: 44px; height: 44px; padding: 0; font-size: 22px; border-radius: 12px; }
  .site-logo { order: 1; }
  .site-logo img { width: 128px; }
  .head-cta { order: 2; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px;
    background: var(--black); color: #fff; text-decoration: none; font: 800 12.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
  .head-cta svg { width: 16px; height: 16px; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  /* backdrop-filter on the sticky header turns it into the containing block for anything fixed inside it,
     which pinned the drawer to a 90px strip. Drop it while the drawer is open. */
  html.nav-open .site-head { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .site-nav { display: none; }
  .site-nav.is-open { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0; position: fixed; inset: 0; z-index: 1000; width: auto; margin: 0; padding: 0 0 calc(200px + env(safe-area-inset-bottom));
    background: #fff; border-top: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .site-nav[hidden] { display: none; }
  .site-nav.is-open[hidden] { display: flex; }

  .mnav-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 10px 18px; border-bottom: 1px solid rgba(0,0,0,.08); }
  .mnav-logo img { width: 128px; height: auto; display: block; }
  .mnav-close { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #f3f2f5; color: var(--ink); display: grid; place-items: center; }
  .mnav-close svg { width: 22px; height: 22px; }

  .mnav-search { display: flex; align-items: center; gap: 10px; margin: 14px 18px 6px; padding: 0 14px; height: 48px; border-radius: 14px; background: #f3f2f5; position: relative; }
  .mnav-search svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
  .mnav-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 500 16px/1 var(--body); color: var(--ink); outline: none; }
  .mnav-search input::placeholder { color: #8a8395; }
  .mnav-none { position: absolute; left: 18px; top: 56px; font: 500 13px/1.4 var(--body); color: var(--muted); }
  .site-nav.is-searching .mnav-search { margin-bottom: 30px; }

  .mnav-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; color: var(--ink); }
  .mnav-ic svg { width: 22px; height: 22px; }
  .mnav-row, .site-nav .nav-main > a, .site-nav .nav-drop-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 0 18px; margin: 0;
    border: 0; border-bottom: 1px solid rgba(0,0,0,.07); border-radius: 0; background: none; color: var(--ink); text-align: left;
    font: 700 17px/1.2 var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: normal; animation: none; filter: none; }
  .site-nav .nav-drop-btn:not(.plain) { overflow: visible; }
  .site-nav .nav-drop-btn:not(.plain)::after { display: none; }
  .site-nav .nav-drop-btn > span { position: static; }
  .site-nav .nav-drop-btn:hover, .site-nav .nav-drop-btn[aria-expanded="true"] { filter: none; color: var(--ink); background: #faf9fb; }
  .mnav-plus { display: block; margin-left: auto; width: 22px; height: 22px; position: relative; flex: 0 0 auto; }
  .mnav-plus::before, .mnav-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%,-50%); transition: transform .2s; }
  .mnav-plus::before { width: 16px; height: 2px; } .mnav-plus::after { width: 2px; height: 16px; }
  .nav-drop-btn[aria-expanded="true"] .mnav-plus::after { transform: translate(-50%,-50%) rotate(90deg); }

  .site-nav .nav-main { display: block; }
  .site-nav .nav-drop { position: static; display: block; }
  .site-nav .nav-drop-menu { position: static; display: block; width: auto; min-width: 0; max-width: none; margin: 0; padding: 4px 18px 16px 58px; border: 0; box-shadow: none;
    background: #faf9fb; border-bottom: 1px solid rgba(0,0,0,.07); transform: none; opacity: 1; }
  .site-nav .nav-drop-menu[hidden] { display: none; }
  .site-nav .nav-mega-inner, .site-nav .nav-mega-inner.nav-mega-cols { display: block; padding: 0; }
  .site-nav .nav-featured { display: none; }
  .site-nav .nav-col { margin-top: 14px; }
  .site-nav .nav-col h3 { margin: 0 0 6px; font: 800 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: left; }
  .site-nav .nav-col h3 span { box-shadow: none; }
  .site-nav .nav-col ul { list-style: none; margin: 0; padding: 0; }
  .site-nav .nav-col li a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border: 0; text-align: left; font: 600 15.5px/1.3 var(--sans); color: var(--ink); white-space: normal; }
  .site-nav .nav-col li a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mark, var(--pink)); flex: 0 0 auto; }

  .site-nav .nav-end { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(8px); }
  .site-nav.is-searching .nav-end { display: none; }
  .site-nav .nav-end a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 16px; border-radius: 999px;
    border: 2px solid var(--ink); font: 800 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; margin: 0; }
  .site-nav .nav-end a.join { background: var(--ink); color: #fff; border-color: var(--ink); }
  .site-nav .nav-end .mnav-ic { display: none; }
  .site-nav > .nav-drop > .nav-drop-btn:not(.plain) { background: none; }
  .site-nav .nav-drop-btn.plain, .site-nav .nav-drop-btn:not(.plain), .site-nav .nav-drop-btn:not(.plain)[aria-expanded="true"], .site-nav .nav-drop-btn.plain[aria-expanded="true"],
  .site-nav .nav-drop-btn:not(.plain):hover, .site-nav .nav-drop-btn.plain:hover { min-height: 58px; padding: 0 18px; font: 700 17px/1.2 var(--sans); color: var(--ink); filter: none; background: none; }
  .site-nav .nav-drop-btn[aria-expanded="true"] { background: #faf9fb; }
  .mnav-row svg, .site-nav .nav-main > a > svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .mnav-row { text-decoration: none; }
  .site-nav .mnav-logo { padding: 0; border: 0; }
  .site-nav .mnav-top a { border-bottom: 0; }
  .site-nav .nav-drop[hidden], .site-nav .nav-col[hidden], .site-nav li[hidden], .site-nav .mnav-row[hidden], .site-nav .nav-main > a[hidden] { display: none; }
}