/* Growing Women in Business, site stylesheet.
   Tokens follow the Brand OS palette used by scorecard.html (navy, berry, rose, sage).
   The variable names are unchanged from the earlier pink and mint set, so every
   component on every page re-skins without a rewrite. Headings use --font-heading,
   which points at Cormorant Garamond. */

/* Fonts are loaded by a <link> in each page's <head> (not @import here),
   so the browser fetches them in parallel with this file. */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  --ink: #0A1F3D;        /* navy, headings and body */
  --soft-ink: #4B5566;   /* secondary text */
  --pink: #B03A4E;       /* deep berry: buttons, links, eyebrows */
  --pink-deep: #7E2836;
  --rose: #DF8491;       /* accent only, never body text */
  --blush: #FBEBEA;
  --blush-deep: #EAD9D3; /* hairlines */
  --mint: #ADC1BB;       /* light sage */
  --mint-deep: #3F6E64;  /* deep sage, focus rings */
  --white: #FFFFFF;
  --paper: #FBF6F2;
  --cream: #FDF9F1;

  /* Both ends of each gradient carry white text at 4.5:1 or better
     (#7E2836 about 9.4:1, #B03A4E about 5.9:1). The old rose end (#DF8491)
     dropped white text to about 2.7:1. */
  --grad: linear-gradient(135deg, #7E2836 0%, #B03A4E 100%);
  --grad-deep: linear-gradient(135deg, #0A1F3D 0%, #7E2836 130%);

  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: var(--font-serif);

  --radius: 16px;        /* cards */
  --radius-btn: 12px;    /* buttons, inputs, small chips */
  --hairline: 1px solid var(--blush-deep);

  --shadow-card: 0 18px 40px -14px rgba(10, 31, 61, 0.16), 0 2px 10px rgba(10, 31, 61, 0.05);
  --shadow-btn: 0 10px 24px -8px rgba(176, 58, 78, 0.45);
  --shadow-btn-hover: 0 16px 30px -8px rgba(176, 58, 78, 0.5);

  --measure: 820px;
  --shell: 1180px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Nothing is allowed to push the page sideways. Every decorative glow sits
   inside a container that clips it, so no overflow clip is needed on body
   (which breaks painting on scroll). */

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}

h2 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 1.5rem;
}

h3 { line-height: 1.2; }

a { color: var(--ink); text-decoration: underline; }
a:hover { color: var(--pink); }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }

strong { font-weight: 700; }

/* The eyebrow is a gradient pill, matching the scorecard. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--grad);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 1rem;
  box-shadow: 0 6px 16px rgba(176, 58, 78, 0.22);
}

.small-line {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--soft-ink);
}

p.lede { color: var(--soft-ink); font-size: 1.1rem; }

/* ==========================================================================
   3. Accessibility utilities
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  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;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-btn);
  transition: top 0.15s ease-in-out;
}

.skip-link:focus { top: 0.75rem; }

:focus-visible {
  outline: 3px solid var(--mint-deep);
  outline-offset: 3px;
}

[id] { scroll-margin-top: 1.5rem; }

/* ==========================================================================
   4. Topbar and navigation
   ========================================================================== */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.5rem;
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--cream);
  position: relative;
  z-index: 3;
}

.topbar .wordmark {
  order: 1;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-width: 0;
}

.logo-mark {
  height: 84px;
  width: auto;
  display: block;
}

.site-nav { order: 2; }

.site-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a.navlink,
.topbar a.navlink {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
}

.site-nav a.navlink:hover,
.topbar a.navlink:hover { color: var(--pink); }

.navlink-quiz { color: var(--pink); }

.topbar-actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.btn-nav {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font-size: 0.74rem;
  box-shadow: 0 6px 16px -6px rgba(176, 58, 78, 0.45);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: var(--hairline);
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
}

/* Legacy mint badge wordmark, kept so any page still using it renders correctly. */
.badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
}

.topbar-word {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.topbar-word .accent { color: var(--pink); }

@media (max-width: 1040px) {
  .topbar { gap: 0.75rem 1rem; padding: 1rem; }
  .topbar-actions { margin-left: auto; }
  .site-nav ul { gap: 0.5rem 0.85rem; }
  .site-nav a.navlink, .topbar a.navlink { font-size: 0.72rem; letter-spacing: 0.06em; }
  .btn-nav { padding: 0.5rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.05em; }
}

/* The homepage carries six links; one tighter step keeps the topbar on a
   single row between here and the menu-button breakpoint. */
@media (min-width: 861px) and (max-width: 960px) {
  .topbar { gap: 0.5rem 0.75rem; }
  .site-nav ul { gap: 0.5rem 0.55rem; }
  .site-nav a.navlink, .topbar a.navlink { font-size: 0.68rem; letter-spacing: 0.03em; }
  .btn-nav { padding: 0.5rem 0.75rem; }
}

@media (max-width: 860px) {
  .topbar { padding: 0.75rem 1rem; gap: 0.5rem 0.75rem; }
  .logo-mark { height: 60px; }
  .nav-toggle { display: flex; }

  .site-nav {
    order: 4;
    display: none;
    flex: 1 0 100%;
    width: 100%;
    border-top: var(--hairline);
    padding-top: 0.5rem;
  }

  .topbar.is-open .site-nav { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .site-nav li { border-bottom: var(--hairline); }
  .site-nav li:last-child { border-bottom: none; }
  .site-nav a.navlink { display: block; padding: 0.85rem 0.25rem; }
}

@media (max-width: 460px) {
  .btn-nav { padding: 0.5rem 0.8rem; font-size: 0.68rem; letter-spacing: 0.04em; }
  .logo-mark { height: 56px; }
}

/* ==========================================================================
   5. Decorative glows (drift slowly, brand colours only)
   ========================================================================== */

.hero-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.blob-teal {
  background: var(--mint-deep);
  opacity: 0.22;
  width: 32vw; height: 32vw;
  min-width: 200px; min-height: 200px;
  max-width: 460px; max-height: 460px;
  top: -14%; left: -6%;
  animation: drift-a 34s ease-in-out infinite alternate;
}

.blob-gold {
  background: var(--blush);
  opacity: 0.7;
  width: 27vw; height: 27vw;
  min-width: 170px; min-height: 170px;
  max-width: 400px; max-height: 400px;
  top: 52%; left: 10%;
  animation: drift-b 40s ease-in-out infinite alternate;
}

.blob-pink {
  background: var(--rose);
  opacity: 0.34;
  width: 34vw; height: 34vw;
  min-width: 210px; min-height: 210px;
  max-width: 470px; max-height: 470px;
  top: -16%; right: -8%;
  animation: drift-c 36s ease-in-out infinite alternate;
}

.blob-lilac {
  background: var(--ink);
  opacity: 0.1;
  width: 29vw; height: 29vw;
  min-width: 180px; min-height: 180px;
  max-width: 420px; max-height: 420px;
  bottom: -22%; right: 6%;
  animation: drift-d 30s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5vw, 3vh, 0) scale(1.1); }
}

@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(4vw, -4vh, 0) scale(0.94); }
}

@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.96); }
  to   { transform: translate3d(-4vw, 4vh, 0) scale(1.08); }
}

@keyframes drift-d {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-5vw, -3vh, 0) scale(0.95); }
}

.sparks {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.4px 1.4px at 28% 68%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 46% 14%, rgba(255,255,255,0.90), transparent),
    radial-gradient(1.6px 1.6px at 63% 78%, rgba(255,255,255,0.80), transparent),
    radial-gradient(1.3px 1.3px at 78% 30%, rgba(255,255,255,0.90), transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 36% 44%, rgba(255,255,255,0.75), transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.3; }
  to   { opacity: 0.75; }
}

/* ==========================================================================
   6. Hero, centred panel (inner pages)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: 3.5rem 1.5rem 4.5rem;
  text-align: center;
}

.hero-panel {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 3rem 2.5rem;
}

.hero h1 { margin: 0 0 1rem; }
.hero h1 em { color: var(--pink); font-style: italic; }

.hero p.subhead {
  font-size: 1.12rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
  color: var(--soft-ink);
}

.hero p.subhead strong { color: var(--pink); font-weight: 700; }

@media (max-width: 560px) {
  .hero { padding: 2.25rem 1rem 3rem; }
  .hero-panel { padding: 2rem 1.25rem; }
  .hero p.subhead { font-size: 1.02rem; }
}

/* ==========================================================================
   7. Hero, split with photo (home)
   ========================================================================== */

.hero-home {
  text-align: left;
  padding: 2.5rem 1.5rem 3.5rem;
}

.hero-split {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
  }
}

.hero-copy { min-width: 0; }

/* The split hero headline is capped below the global h1 so the headline, the
   primary button and the photo all sit on the first screen at 1280 by 800. */
.hero-home h1 {
  font-size: clamp(2.3rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  margin: 0 0 0.85rem;
}

.hero-home p.subhead {
  font-size: 1.08rem;
  margin: 0 0 1.5rem;
  max-width: 34em;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
}

.hero-home .small-line { margin-top: 0.75rem; }

.hero-secondary-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-secondary-link:hover { color: var(--pink); }

/* A small portrait card (Alana asked for a quarter of the original size on
   25 Sep 2026): 280px wide on desktop, 160px on phones, a 4:5 crop of the
   photo so the face and shoulders fill it. The gradient edge is the wrapper's
   padding. */
.hero-figure {
  position: relative;
  margin: 0;
  padding: 5px;
  background: var(--grad);
  border-radius: 18px;
  box-shadow: 0 18px 40px -16px rgba(10, 31, 61, 0.35);
  min-width: 0;
  width: 100%;
  max-width: 280px;
  justify-self: end;
}

.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 14px;
}

.photo-chip {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem;
  border-radius: 99px;
  box-shadow: 0 8px 18px -8px rgba(10, 31, 61, 0.4);
}

/* On phones the copy comes first and the small portrait sits underneath it,
   left-aligned, with a smaller name chip so it fits the narrower card. */
@media (max-width: 899px) {
  .hero-figure {
    max-width: 160px;
    justify-self: start;
    padding: 4px;
    border-radius: 16px;
  }

  .hero-photo {
    object-position: center 15%;
    border-radius: 12px;
  }

  .photo-chip {
    left: 0.6rem;
    bottom: 0.6rem;
    font-size: 0.68rem;
    padding: 0.32rem 0.6rem;
  }
}

@media (max-width: 560px) {
  .hero-home { padding: 1.1rem 1rem 2.5rem; }
  .hero-split { gap: 1rem; }
  .hero-home h1 { font-size: 2.3rem; margin-bottom: 0.7rem; }
  .hero-home p.subhead { font-size: 1rem; line-height: 1.55; margin-bottom: 1.15rem; }
  .hero-home .eyebrow { margin-bottom: 0.7rem; }
  .hero-home .small-line { margin-top: 0.6rem; font-size: 0.84rem; }
  .hero-secondary-link { margin-top: 0.7rem; }
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  background: var(--grad);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 0.85rem 1.75rem;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
  filter: brightness(1.04);
}

.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.75; cursor: default; transform: none; }

/* Secondary: white with a 2px berry border. */
.btn-secondary {
  background: var(--white);
  color: var(--pink-deep);
  border: 2px solid var(--pink);
  box-shadow: 0 8px 20px -12px rgba(10, 31, 61, 0.35);
}

.btn-secondary:hover {
  background: var(--blush);
  color: var(--pink-deep);
  filter: none;
}

@media (max-width: 600px) {
  .btn { width: 100%; }
  .btn-nav,
  .quiz-retake { width: auto; }
  /* The menu button keeps its full 44 x 44 tap area at every width
     (WCAG 2.2 asks for at least 24 x 24). */
  .nav-toggle { width: 44px; min-width: 44px; height: 44px; flex: none; }
}

/* ==========================================================================
   9. Sections
   ========================================================================== */

section { padding: 4rem 1.5rem; }

section .inner {
  max-width: var(--measure);
  margin: 0 auto;
}

section.white { background: var(--white); }
section.blush { background: var(--blush); }

section > .inner > .eyebrow { display: inline-flex; }
section > .inner > p.lede { text-align: center; }

.center-head { text-align: center; }

@media (max-width: 560px) {
  section { padding: 2.75rem 1rem; }
}

/* ==========================================================================
   10. Proof strip (navy band, four tiles)
   ========================================================================== */

.proof-strip {
  background: var(--ink);
  color: var(--white);
  padding: 2.75rem 1.5rem;
}

.proof-grid {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; }
}

@media (min-width: 1000px) {
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
}

.proof-tile {
  font-family: var(--font-sans);
  padding-top: 0.9rem;
  border-top: 2px solid rgba(223, 132, 145, 0.55);
}

.proof-tile .figure {
  display: block;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.proof-tile p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   11. What you leave with (numbered cards)
   ========================================================================== */

.leave-grid {
  counter-reset: leave;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .leave-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .leave-grid { grid-template-columns: repeat(3, 1fr); }
}

.leave-card {
  counter-increment: leave;
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.25rem 1.5rem 1.6rem;
}

.leave-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--grad);
}

.leave-card::after {
  content: counter(leave);
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.leave-card h3 {
  font-size: 1.3rem;
  margin: 0 0 0.55rem;
  padding-right: 2.5rem;
}

.leave-card p {
  margin: 0;
  color: var(--soft-ink);
  font-size: 1rem;
}

.leave-closing {
  max-width: 44em;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 1.08rem;
  color: var(--ink);
}

/* ==========================================================================
   12. How AI fits (blush band)
   ========================================================================== */

.ai-band {
  background: var(--blush);
  padding: 3.5rem 1.5rem;
}

.ai-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.ai-inner h2 { margin-bottom: 1.1rem; }

.ai-inner p {
  color: var(--soft-ink);
  font-size: 1.08rem;
  margin: 0 0 1.75rem;
}

@media (max-width: 560px) {
  .ai-band { padding: 2.5rem 1rem; }
}

/* ==========================================================================
   13. Quotes and proof
   ========================================================================== */

.quote-block {
  border-left: 3px solid var(--rose);
  padding: 0.3rem 0 0.3rem 1.5rem;
  margin: 2rem 0;
  color: var(--ink);
  text-align: left;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.55;
}

.quote-block p { margin: 0 0 1rem; }

.quote-block cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--soft-ink);
}

.quote-short {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--soft-ink);
  margin: 2rem 0;
}

.quote-short cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
}

/* The label above a quote, so a one-to-one result never reads as a group one. */
.proof-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  margin: 1.5rem 0 0.25rem;
}

/* ---- Founder pull-quote ---- */

.founder-quote {
  text-align: center;
  padding: 3.5rem 1.5rem;
}

.founder-quote blockquote {
  margin: 0 auto;
  max-width: 680px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1.4;
  color: var(--ink);
}

.founder-quote cite {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
}

.founder-quote .work-1to1 {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.founder-quote .work-1to1:hover { color: var(--pink); }

/* ==========================================================================
   14. Panels
   ========================================================================== */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.panel {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.9rem 1.5rem 1.6rem;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--grad);
}

.panel .tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pink);
  margin-bottom: 0.6rem;
}

.panel h3 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.panel p { color: var(--soft-ink); margin: 0; font-size: 1rem; }

/* ==========================================================================
   15. Method block: CLIMB (cohort, home) and ORBIT (circle) share this
   ========================================================================== */

.climb-word {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 2.5rem 0 0.5rem;
  flex-wrap: wrap;
}

.climb-letter-big {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.climb-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--blush-deep);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-top: 1rem;
}

.climb-step {
  background: var(--white);
  padding: 1.75rem 1rem;
  text-align: center;
}

.climb-step .letter {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--pink);
  line-height: 1;
  display: block;
  margin-bottom: 0.8rem;
}

.climb-step h3 {
  font-size: 1.1rem;
  margin: 0 0 0.6rem;
}

.climb-step p {
  font-size: 0.97rem;
  color: var(--soft-ink);
  margin: 0;
}

.climb-step p.where {
  margin-top: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--soft-ink);
}

@media (max-width: 720px) {
  .climb-grid { grid-template-columns: 1fr; }

  .climb-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    text-align: left;
    padding: 1.25rem 1.5rem;
  }

  .climb-step .letter { margin-bottom: 0; flex: 0 0 auto; }
  .climb-step h3 { flex: 1 1 auto; margin-bottom: 0; }
  .climb-step p { flex: 1 1 100%; }
  .climb-letter-big { font-size: 2.6rem; }
}

/* ==========================================================================
   16. Offer box and PayPal
   ========================================================================== */

.offer-box {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.5rem;
  margin-top: 2rem;
  text-align: center;
}

.offer-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--grad);
}

.price {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--pink);
  font-weight: 600;
  margin: 0.25rem 0;
  line-height: 1.1;
}

hr.divider {
  border: none;
  border-top: var(--hairline);
  margin: 1.5rem auto;
  width: 60%;
}

.guarantee {
  font-size: 0.98rem;
  color: var(--soft-ink);
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

.pay-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.pay-cards {
  height: 22px;
  width: auto;
  max-width: 100%;
  display: block;
  overflow: hidden; /* if PayPal's image is blocked, the alt text stays inside the box */
}

/* Keeps the native PayPal button from stretching inside .offer-box or .offer-card. */
.paypal-slot,
#paypal-button-container-home,
#paypal-button-container-P-9B8548878P2205600NJOPVTA,
[id^="paypal-button-container"] {
  max-width: 320px;
  margin: 1.5rem auto 0;
}

.pay-direct-solo {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: var(--hairline);
  text-align: center;
}

/* ==========================================================================
   17. The offer card (home): facts row, price, guarantee
   ========================================================================== */

.offer-hero-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.5rem 2rem;
  margin-top: 2.25rem;
  text-align: center;
}

.offer-hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--grad);
}

.facts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.facts-row li {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--blush-deep);
  border-radius: 99px;
  padding: 0.4rem 0.9rem;
}

.offer-hero-card .price { margin-bottom: 0.1rem; }

.price-note {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--soft-ink);
  margin: 0 0 1.5rem;
}

.offer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.offer-actions .pay-form { margin: 0; width: 100%; align-items: center; }

@media (min-width: 600px) {
  .offer-actions .pay-form .btn { width: auto; }
}

.offer-note {
  font-size: 0.98rem;
  color: var(--soft-ink);
  max-width: 46em;
  margin: 0 auto 1rem;
}

.offer-note:last-of-type { margin-bottom: 0; }

.offer-details-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.offer-details-link:hover { color: var(--pink); }

@media (max-width: 560px) {
  .offer-hero-card { padding: 2rem 1.15rem; }
}

/* Three ways to work with Alana (25 Sep 2026): one-to-one AI consulting, the
   day, and The Circle. One column on phones, three across from 900px. */
.ways-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.25rem;
}

@media (min-width: 900px) {
  .ways-grid { grid-template-columns: repeat(3, 1fr); }
}

.way-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2rem 1.5rem 1.75rem;
  text-align: left;
}

.way-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--grad);
}

.way-card.way-circle::before { background: var(--grad-deep); }

.way-card .eyebrow { margin-bottom: 0.6rem; }

.way-card h3 {
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.way-card p {
  color: var(--soft-ink);
  font-size: 1rem;
  margin: 0 0 0.9rem;
}

.way-card .facts-row {
  justify-content: flex-start;
  margin: 0.25rem 0 1.1rem;
}

.way-card .price {
  font-size: 1.9rem;
  text-align: left;
  margin: 0.4rem 0 0.1rem;
}

.way-card .price-note { margin-bottom: 1rem; }

.way-card .btn {
  margin-top: auto;
  width: 100%;
}

.way-card .offer-details-link {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.86rem;
}

@media (max-width: 560px) {
  .way-card { padding: 1.6rem 1.15rem 1.5rem; }
}

/* ==========================================================================
   18. Offer cards (home page, Ways in) and the quieter two-card row
   ========================================================================== */

.offer-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .offer-cards { grid-template-columns: repeat(2, 1fr); }
}

.offer-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}

.offer-card h3 { color: var(--pink); margin: 0 0 0.6rem; font-size: 1.35rem; }
.offer-card p { color: var(--soft-ink); font-size: 1rem; }
.offer-card .price { font-size: 1.6rem; margin: 0.4rem 0 0.8rem; }

.offer-card .card-details-link {
  display: block;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--soft-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.offer-card .card-details-link:hover { color: var(--pink); }

.offer-card .status {
  display: inline-block;
  align-self: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--soft-ink);
  border: 1px solid var(--blush-deep);
  border-radius: 99px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.8rem;
}

/* Paused reads quieter without dropping text contrast below 4.5:1. */
.offer-card.paused { background: var(--paper); box-shadow: none; }
.offer-card.paused h3 { color: var(--soft-ink); }

.offer-card .newsletter-panel-form {
  flex-direction: column;
  max-width: none;
  margin: 0.9rem 0 0;
}

.offer-card .newsletter-panel-form input[type="email"] { flex: 0 0 auto; }

/* The quieter row under the main offer: two small cards, no gradient edge. */
.quiet-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .quiet-row { grid-template-columns: repeat(2, 1fr); }
}

.quiet-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  text-align: left;
}

.quiet-card h3 {
  font-size: 1.2rem;
  margin: 0 0 0.45rem;
  color: var(--ink);
}

.quiet-card p {
  color: var(--soft-ink);
  font-size: 0.98rem;
  margin: 0 0 0.75rem;
}

.quiet-card .quiet-price {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pink);
  margin: 0 0 0.9rem;
}

.quiet-card .quiet-link {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quiet-card .quiet-link:hover { color: var(--pink); }

.quiet-card .newsletter-panel-form {
  flex-direction: column;
  max-width: none;
  margin: auto 0 0;
}

.quiet-card .newsletter-panel-form input[type="email"] { flex: 0 0 auto; }

/* ==========================================================================
   19. About
   ========================================================================== */

.about-wrap {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.about-photo {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--rose), 0 18px 34px -16px rgba(10, 31, 61, 0.4);
}

.about-text { flex: 1 1 380px; min-width: 0; }
.about-text p { color: var(--soft-ink); margin: 0 0 1rem; }
.about-text p:last-child { margin-bottom: 0; }

.about-text .name-line {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.8rem;
}

@media (max-width: 560px) {
  .about-wrap { gap: 1.5rem; justify-content: center; }
  .about-photo { flex-basis: 150px; width: 150px; height: 150px; }
}

/* ==========================================================================
   20. Who it is for, who it is not for
   ========================================================================== */

.for-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.for-col {
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

.for-col h3 {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.2rem;
  color: var(--pink);
}

.for-col.not-for { background: var(--paper); box-shadow: none; }
.for-col.not-for h3 { color: var(--soft-ink); }

.for-col ul { margin: 0; padding: 0; list-style: none; }

.for-col li {
  padding: 0.75rem 0;
  border-top: var(--hairline);
  color: var(--ink);
  font-size: 1rem;
}

.for-col.not-for li { color: var(--soft-ink); border-top: 1px solid rgba(75, 85, 102, 0.2); }
.for-col li:first-child { border-top: none; padding-top: 0; }

/* ==========================================================================
   21. Pain contrast
   ========================================================================== */

.pain-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 2.5rem;
}

.pain-col { min-width: 0; }

.pain-col h3 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.2rem;
}

.pain-col.now h3 { color: var(--soft-ink); }
.pain-col.then h3 { color: var(--pink); }

.pain-col ul { margin: 0; padding: 0; list-style: none; }
.pain-col li { padding: 0.75rem 0; border-top: var(--hairline); }
.pain-col li:first-child { border-top: none; padding-top: 0; }
.pain-col p { font-size: 1rem; }
.pain-col.now li, .pain-col.now p { color: var(--soft-ink); }
.pain-col.then li, .pain-col.then p { color: var(--ink); }

.pain-arrow {
  font-size: 1.8rem;
  color: var(--mint-deep);
}

@media (max-width: 640px) {
  .pain-contrast { grid-template-columns: 1fr; gap: 1.5rem; }
  .pain-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ==========================================================================
   22. Forms
   ========================================================================== */

.apply-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 560px;
  margin: 2.5rem auto 0;
}

.apply-form label,
.form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.apply-form input,
.apply-form textarea,
.apply-form select {
  width: 100%;
  min-height: 48px;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--blush-deep);
  border-radius: var(--radius-btn);
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.apply-form input:focus,
.apply-form textarea:focus,
.apply-form select:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(223, 132, 145, 0.18);
}

.apply-form textarea { min-height: 120px; resize: vertical; }

@media (min-width: 601px) {
  .apply-form .btn { align-self: flex-start; }
}

/* Radio groups. The fieldset itself is invisible; each choice is a row that
   matches the quiz option look. */
.apply-form fieldset,
.radio-group {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.apply-form legend,
.radio-group > .form-label {
  display: block;
  padding: 0;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.apply-form fieldset label,
.radio-group label,
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 56px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--blush-deep);
  border-radius: var(--radius-btn);
  padding: 0.75rem 1rem;
  margin: 0 0 0.6rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.apply-form fieldset label:last-of-type,
.radio-group label:last-of-type { margin-bottom: 0; }

.apply-form fieldset label:hover,
.radio-group label:hover,
.radio-option:hover { border-color: var(--rose); }

.apply-form fieldset label:has(input:checked),
.radio-group label:has(input:checked),
.radio-option:has(input:checked) {
  background: var(--blush);
  border-color: var(--pink);
}

.apply-form input[type="radio"],
.apply-form input[type="checkbox"] {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--pink);
}

/* Editorial numbered rundown (cohort: how the six weeks run). */
ol.rundown {
  counter-reset: rundown;
  list-style: none;
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 0;
}

ol.rundown li {
  counter-increment: rundown;
  position: relative;
  padding: 1.15rem 0 1.15rem 3rem;
  border-top: var(--hairline);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}

ol.rundown li:first-child { border-top: none; padding-top: 0; }

ol.rundown li::before {
  content: counter(rundown);
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

ol.rundown li:first-child::before { top: 0.2rem; }

ol.rundown li strong,
ol.rundown li b {
  font-weight: 700;
  color: var(--ink);
}

.confirm {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.5rem;
}

.step-track {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 2rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--soft-ink);
}

.step-track span.current { color: var(--pink); font-weight: 700; }

.calendar-slot {
  border: 1px dashed var(--blush-deep);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--soft-ink);
  margin-top: 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

/* ==========================================================================
   23. Quiz
   ========================================================================== */

.quiz-box {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.5rem;
  margin: 2.5rem auto 0;
  max-width: 640px;
}

.quiz-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--grad);
}

.quiz-progress {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--soft-ink);
  text-align: center;
  margin-bottom: 1.25rem;
}

.quiz-question h3 {
  text-align: center;
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quiz-option {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
  min-height: 56px;
  background: var(--white);
  border: 2px solid var(--blush-deep);
  border-radius: var(--radius-btn);
  padding: 0.85rem 1.15rem;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.quiz-option:hover {
  border-color: var(--rose);
  background: var(--blush);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(10, 31, 61, 0.25);
}

.quiz-email-gate-form input { border-radius: var(--radius-btn); }

.quiz-result { text-align: center; }

/* The result chip. */
.quiz-result .archetype-name {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--white);
  background: var(--grad-deep);
  border-radius: 999px;
  padding: 0.35rem 1.5rem;
  margin: 0 0 1rem;
  box-shadow: 0 8px 18px -10px rgba(10, 31, 61, 0.45);
}

.quiz-result .archetype-desc { color: var(--soft-ink); margin: 0 0 1.5rem; }
.quiz-result .archetype-cta { font-weight: 700; margin: 0 0 1.5rem; }

.quiz-result .archetype-prompt {
  background: var(--blush);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.quiz-result .archetype-prompt-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 0.5rem;
}
.quiz-result .archetype-prompt-text { margin: 0 0 0.9rem; color: var(--ink); }
.quiz-result .archetype-prompt-copy {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pink);
  background: var(--white);
  border: 1px solid var(--pink);
  border-radius: var(--radius-btn);
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.quiz-result .archetype-prompt-copy:hover { background: var(--pink); color: var(--white); }

.quiz-divider {
  border: none;
  border-top: var(--hairline);
  margin: 2rem 0;
}

.quiz-retake {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--soft-ink);
}

@media (max-width: 560px) {
  .quiz-box { padding: 1.75rem 1.15rem; }
}

/* ==========================================================================
   24. Final CTA
   ========================================================================== */

.final-cta {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: 4.5rem 1.5rem;
}

.final-cta .inner {
  max-width: 640px;
  margin: 0 auto;
}

.final-cta hr.rule {
  border: none;
  border-top: 1px solid var(--mint);
  width: 60px;
  margin: 0 auto 1.5rem;
}

.final-cta .eyebrow {
  color: var(--mint);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.final-cta h2 { color: var(--white); }
.final-cta p { color: rgba(255, 255, 255, 0.85); }

.final-cta .btn {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}

.final-cta .btn:hover {
  background: var(--mint);
  color: var(--ink);
}

.final-cta .small-line { color: rgba(255, 255, 255, 0.82); }

.final-cta .small-line a,
.final-cta p a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.final-cta .small-line a:hover,
.final-cta p a:hover { color: var(--mint); }

/* ==========================================================================
   25. Newsletter panel
   ========================================================================== */

.newsletter-panel {
  background: var(--blush);
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.newsletter-panel .eyebrow { display: inline-flex; }
.newsletter-panel h2 { margin-bottom: 0.75rem; }
.newsletter-panel p.lede { max-width: 520px; margin: 0 auto 1.5rem; text-align: center; }

.newsletter-panel form,
.newsletter-panel-form,
#newsletter-panel-form {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
}

.newsletter-panel input,
.newsletter-panel-form input[type="email"],
#newsletter-panel-form input[type="email"] {
  font-family: var(--font-sans);
  font-size: 1rem;
  min-height: 54px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--blush-deep);
  border-radius: var(--radius-btn);
  background: var(--white);
  color: var(--ink);
  flex: 1 1 220px;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.newsletter-panel input:focus,
.newsletter-panel-form input[type="email"]:focus,
#newsletter-panel-form input[type="email"]:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(223, 132, 145, 0.18);
}

.newsletter-panel .confirm { margin-top: 0.5rem; }

/* ==========================================================================
   26. Footer
   ========================================================================== */

.site-footer,
body > footer {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  padding: 3rem 1.5rem;
  font-family: var(--font-sans);
}

.site-footer .footer-logo,
body > footer .footer-logo {
  height: 110px;
  margin: 0 auto 0.8rem;
}

.site-footer .badge,
body > footer .badge { margin: 0 auto 0.8rem; }

.site-footer .footer-word,
body > footer .footer-word {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.9rem;
}

.site-footer .handle,
body > footer .handle {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--mint);
  text-decoration: none;
}

.site-footer .handle:hover,
body > footer .handle:hover { text-decoration: underline; color: var(--mint); }

.site-footer .also-part-of,
body > footer .also-part-of {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.site-footer .also-part-of a,
body > footer .also-part-of a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
}

.site-footer .also-part-of a:hover,
body > footer .also-part-of a:hover { color: var(--mint); }

.site-footer .legal,
body > footer .legal {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 560px) {
  .site-footer .footer-logo,
  body > footer .footer-logo { height: 88px; }
}

/* ==========================================================================
   27. Reduced motion
   ========================================================================== */

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

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .blob,
  .sparks { animation: none !important; }

  .sparks { opacity: 0.5; }

  .btn:hover,
  .quiz-option:hover,
  .answer:hover { transform: none; }
}

/* The hidden attribute must always win, even over display: flex on forms. */
[hidden] { display: none !important; }

/* ==========================================================================
   28. Privacy page: long reading text, so left aligned at every width
   ========================================================================== */

.privacy h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0.75rem 0 1rem; }
.privacy h2 { text-align: left; margin: 2.5rem 0 0.75rem; }
.privacy h3 { margin: 1.5rem 0 0.4rem; font-size: 1.35rem; }
section > .inner.privacy > p.lede,
.privacy p { text-align: left; }

/* ==========================================================================
   29. Long paragraphs read left aligned on phones. Headings, eyebrows and
       buttons stay centred; only the multi-line body text changes.
   ========================================================================== */

@media (max-width: 560px) {
  .for-col li,
  .leave-card p,
  .ai-inner p,
  .offer-note,
  .guarantee,
  .hero .subhead,
  .final-cta p,
  section > .inner > p.lede,
  .newsletter-panel p.lede { text-align: left; }
}

/* Pages whose first heading was an h2: promoted to h1 for structure, styled the same as before. */
h1.as-h2 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.1; text-align: center; margin: 0 0 1.5rem; }