/* ============================================================================
   SalonVindbaar - Component library
   ----------------------------------------------------------------------------
   Extracted from the live pages in dist/, not invented. Where a component had
   drifted between pages, the index.html / landing-page version won, because
   that is the one prospects actually see most.

   Reads tokens.css only. No raw hex below this line.
   Load order:  tokens.css  ->  components.css
   ============================================================================ */

/* ---------------------------------------------------------------- 0. base -- */
*,::after,::before{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-normal);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-heading);color:var(--ink);line-height:var(--lh-heading);
}
a{color:inherit}
::selection{background:var(--purple);color:var(--white)}

/* -------------------------------------------------------- 1. layout ------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-container)}
.container.narrow{max-width:var(--measure-narrow)}
section > .container{position:relative;z-index:var(--z-raised)}

/* -------------------------------------------------------- 2. wordmark ----- */
.wordmark{
  font-family:var(--font-serif);font-weight:var(--fw-bold);font-size:28px;
  letter-spacing:var(--tracking-wordmark);text-decoration:none;
  font-variation-settings:var(--opsz-display);
  background-image:var(--gradient-brand);
  background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* the full stop stays solid, it reads as a mark not as gradient text */
.wordmark .dot{-webkit-text-fill-color:currentColor;color:var(--ink)}
.wordmark--on-dark{background-image:var(--gradient-on-dark)}
.wordmark--on-dark .dot{color:var(--white)}

/* -------------------------------------------------------- 3. top nav ------ */
nav.top{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:var(--bd);
}
nav.top .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;padding-bottom:18px;gap:var(--s6);
}
.nav-links{display:flex;gap:36px;list-style:none;font-size:var(--fs-sm)}
.nav-links a{
  color:var(--ink-soft);text-decoration:none;font-weight:var(--fw-medium);
  transition:color var(--dur) var(--ease);
}
.nav-links a:hover{color:var(--purple)}
.nav-links a.active{color:var(--purple);font-weight:var(--fw-semibold);position:relative}
.nav-links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:var(--purple);border-radius:2px;
}
.nav-cta{
  background:var(--purple);color:var(--white);padding:12px 22px;
  border-radius:var(--radius-sm);text-decoration:none;
  font-size:var(--fs-meta);font-weight:var(--fw-semibold);white-space:nowrap;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.nav-cta:hover{background:var(--purple-deep);transform:var(--lift)}
.nav-cta--secondary{
  background:transparent;color:var(--ink);padding:12px 18px;
  border:1.5px solid var(--rule-strong);border-radius:var(--radius-sm);
  text-decoration:none;font-size:var(--fs-meta);font-weight:var(--fw-semibold);
  white-space:nowrap;line-height:1.2;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.nav-cta--secondary:hover{border-color:var(--purple);color:var(--purple);transform:var(--lift)}

/* -------------------------------------------------------- 4. buttons ------ */
.btn-primary{
  background:var(--purple);color:var(--white);padding:16px 28px;
  border-radius:var(--radius-sm);text-decoration:none;
  font-weight:var(--fw-semibold);font-size:var(--fs-sm);
  display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  font-family:var(--font-sans);box-shadow:var(--shadow-btn);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.btn-primary:hover{background:var(--purple-deep);transform:var(--lift-lg);box-shadow:var(--shadow-btn-hover)}
.btn-primary .arrow{transition:transform var(--dur-slow) var(--ease)}
.btn-primary:hover .arrow{transform:translate(3px,-3px)}

/* ghost is an underline, not an outlined pill. This is the house style. */
.btn-ghost{
  color:var(--ink);padding:16px 4px;text-decoration:none;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  border-bottom:2px solid var(--ink);background:none;border-top:0;border-left:0;border-right:0;
  cursor:pointer;font-family:var(--font-sans);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn-ghost:hover{color:var(--purple);border-color:var(--purple)}

.btn-outline{
  display:inline-block;text-align:center;padding:14px 20px;
  border-radius:var(--radius-sm);font-weight:var(--fw-semibold);font-size:var(--fs-meta);
  text-decoration:none;background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  cursor:pointer;font-family:var(--font-sans);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn-outline:hover{background:var(--ink);color:var(--white)}

.btn-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}

/* -------------------------------------------------------- 5. hero --------- */
.hero{
  padding:var(--s24) 0 var(--s20);position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 700px 500px at 85% 10%,rgba(105,80,243,.10) 0,transparent 60%),
    radial-gradient(ellipse 600px 500px at 10% 80%,rgba(254,236,235,.55) 0,transparent 60%),
    linear-gradient(180deg,var(--white) 0,var(--lavender) 100%);
}
.hero::before{
  content:'';position:absolute;width:340px;height:340px;border-radius:50%;
  background:var(--lavender-deep);opacity:.35;top:-120px;right:-140px;
  z-index:0;filter:blur(2px);
}
.hero::after{
  content:'';position:absolute;width:240px;height:240px;border-radius:50%;
  background:var(--peach);bottom:-100px;left:-80px;z-index:0;
}
.hero-h{
  font-size:var(--fs-hero);line-height:var(--lh-display);color:var(--ink);
  max-width:1080px;margin-bottom:28px;font-variation-settings:var(--opsz-display);
}
.hero-h .pop{color:var(--purple)}
.hero-h em{font-style:italic;font-weight:var(--fw-medium);color:var(--ink)}
.hero-h .strike{
  text-decoration:line-through;text-decoration-color:var(--purple);
  text-decoration-thickness:4px;color:var(--muted);
}
.hero-h .hl{background:var(--lavender-deep);padding:0 8px;border-radius:6px}
.hero-lede{
  font-family:var(--font-sans);font-size:var(--fs-lede);line-height:1.55;
  color:var(--ink-soft);max-width:var(--measure-lede);margin-bottom:var(--s10);
  font-weight:var(--fw-normal);
}
.hero-lede strong{color:var(--ink);font-weight:var(--fw-semibold)}

/* -------------------------------------------------------- 6. stat chip ---- */
.stat-chip{
  display:inline-flex;align-items:baseline;gap:12px;padding:14px 24px;
  border-radius:var(--radius-pill);white-space:nowrap;font-family:var(--font-sans);
  border:1px solid transparent;background:var(--white);
  transition:transform var(--dur) var(--ease);
}
.stat-chip:hover{transform:var(--lift)}
.stat-chip .n{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:22px;
  letter-spacing:-.025em;font-variation-settings:var(--opsz-display);color:var(--purple);
}
.stat-chip .t{font-size:var(--fs-meta);color:var(--ink-soft);font-weight:var(--fw-medium)}
.stat-chip--lavender{background:var(--lavender);border-color:var(--lavender-deep)}
.stat-chip--peach{background:var(--peach);border:var(--bd-purple-tint)}
.stat-chip--mint{background:var(--mint);border-color:var(--mint-deep)}
.stat-chip--mint .n{color:var(--ink-on-mint)}
.stat-chip--sky{background:var(--sky);border-color:var(--sky-deep)}
.stat-chip--sky .n{color:var(--ink-on-sky)}
.stat-chip--butter{background:var(--butter);border-color:var(--butter-deep)}
.stat-chip--butter .n{color:var(--ink-on-butter)}
.stat-chip--rose{background:var(--rose);border:var(--bd-rose-tint)}
.stat-chip--rose .n{color:var(--ink-on-rose)}
.stat-chip--white{background:var(--white);border-color:var(--rule-strong)}
.stat-chip--white .n{color:var(--ink)}

/* -------------------------------------------------------- 7. target grid -- */
.target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4);margin-top:var(--s10)}
.target-pill{
  padding:28px 22px;background:var(--white);border:var(--bd);
  border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--s2);
  text-decoration:none;transition:all .25s var(--ease);
}
.target-grid > .target-pill:nth-child(4n+1){background:var(--lavender);border-color:var(--lavender-deep)}
.target-grid > .target-pill:nth-child(4n+2){background:var(--peach);border:var(--bd-purple-tint)}
.target-grid > .target-pill:nth-child(4n+3){background:var(--lavender-deep);border:var(--bd-purple-tint-2)}
.target-grid > .target-pill:nth-child(4n+4){background:var(--rose);border:var(--bd-rose-tint)}
.target-pill .n{
  font-family:var(--font-serif);font-style:italic;color:var(--purple);
  font-size:var(--fs-meta);font-weight:var(--fw-medium);
}
.target-pill .name{
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:17px;
  color:var(--ink);letter-spacing:-.01em;line-height:1.2;
}
.target-pill:hover{
  background:var(--purple);border-color:var(--purple);
  transform:translateY(-3px);box-shadow:0 12px 24px rgba(105,80,243,.20);
}
.target-pill:hover .n{color:var(--lavender-deep)}
.target-pill:hover .name{color:var(--white)}
.target-pill.current{background:var(--purple);border-color:var(--purple);pointer-events:none}
.target-pill.current .n{color:var(--lavender-deep);font-style:normal}
.target-pill.current .name{color:var(--white)}
.target-pill.is-disabled{pointer-events:none;opacity:.55;cursor:not-allowed;position:relative;filter:saturate(.7)}

/* -------------------------------------------------------- 8. niche nav ---- */
.niche-nav-pill{
  padding:16px 18px;border-radius:var(--radius-md);background:var(--white);
  border:var(--bd);text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:var(--s1);
  transition:all var(--dur) var(--ease);
}
.niche-nav-pill:hover{border-color:var(--purple);transform:var(--lift);box-shadow:0 8px 20px rgba(105,80,243,.12)}
.niche-nav-pill .arrow{
  font-family:var(--font-sans);font-size:var(--fs-micro);color:var(--purple);
  font-weight:var(--fw-semibold);letter-spacing:.1em;text-transform:uppercase;
}
.niche-nav-pill .name{
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--fs-sm);
  color:var(--ink);letter-spacing:-.01em;
}
.niche-nav-pill.current{background:var(--purple);border-color:var(--purple);pointer-events:none}
.niche-nav-pill.current .arrow{color:var(--lavender-deep)}
.niche-nav-pill.current .name{color:var(--white)}

/* -------------------------------------------------------- 9. what card ---- */
.what-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s6);margin-top:var(--s8)}
.what-card{
  background:var(--white);border-radius:var(--radius-lg);padding:var(--pad-card);
  border:var(--bd);
  transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);
}
.what-grid > .what-card:nth-child(1){background:var(--peach);border:var(--bd-purple-tint)}
.what-grid > .what-card:nth-child(2){background:var(--lavender-deep);border:var(--bd-purple-tint-2)}
.what-grid > .what-card:nth-child(3){background:var(--rose);border:var(--bd-rose-tint)}
.what-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.what-card .icon{
  width:64px;height:64px;border-radius:18px;background:var(--purple);color:var(--white);
  display:flex;align-items:center;justify-content:center;margin-bottom:26px;
  box-shadow:var(--shadow-btn);
}
.what-card .icon svg{width:30px;height:30px;stroke-width:2.4}
.what-card h3{font-size:26px;line-height:1.15;letter-spacing:var(--tracking-heading);margin-bottom:var(--s3)}
.what-card p{color:var(--ink-soft);line-height:var(--lh-body);font-size:16px;font-family:var(--font-sans)}

/* ------------------------------------------------------- 10. pillar card -- */
.pillar-card{
  padding:28px 24px;border-radius:var(--radius-lg);background:var(--white);border:var(--bd);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.pillar-card:hover{transform:var(--lift-lg);box-shadow:var(--shadow-card)}
.pillar-card:nth-child(1){background:var(--lavender);border-color:var(--lavender-deep)}
.pillar-card:nth-child(2){background:var(--peach);border:var(--bd-purple-tint)}
.pillar-card:nth-child(3){background:var(--lavender-deep);border:var(--bd-purple-tint-2)}
.pillar-card h4{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:22px;
  line-height:1.2;color:var(--ink);letter-spacing:-.01em;margin:0 0 var(--s3);
}
.pillar-card p{font-family:var(--font-sans);font-size:var(--fs-sm);line-height:1.55;color:var(--ink-soft);margin:0}

/* ------------------------------------------------------- 11. proof card --- */
.proof-card{
  background:var(--lavender);border:var(--bd-lavender);border-radius:18px;
  padding:var(--pad-card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.proof-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(105,80,243,.08)}
.proof-num{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:44px;
  line-height:1;letter-spacing:var(--tracking-display);color:var(--purple);
  font-variation-settings:var(--opsz-display);display:block;margin-bottom:var(--s3);
}
.proof-card p{font-size:var(--fs-sm);line-height:1.55;color:var(--ink-soft)}
.proof-card--peach{background:var(--peach);border:var(--bd-purple-tint)}
.proof-card--white{background:var(--white);border:var(--bd)}
.proof-card--white .proof-num{color:var(--ink)}
.proof-card--rose{background:var(--rose);border:var(--bd-rose-tint)}
.proof-card--mint{background:var(--mint);border-color:var(--mint-deep)}
.proof-card--mint .proof-num{color:var(--ink-on-mint)}

/* ------------------------------------------------------- 12. quote card --- */
.quote-card{
  background:var(--ink);color:var(--white);padding:44px 40px;
  border-radius:var(--radius-lg);position:relative;box-shadow:var(--shadow-ink);
}
.quote-card .marks{
  font-family:var(--font-serif);font-size:64px;line-height:.5;
  color:var(--purple-2);margin-bottom:10px;display:block;
}
.quote-card .q{
  font-family:var(--font-serif);font-size:24px;line-height:1.3;color:var(--white);
  margin-bottom:var(--s6);letter-spacing:-.01em;font-weight:var(--fw-normal);font-style:italic;
}
.quote-card .a{
  font-family:var(--font-sans);font-size:12px;color:var(--lavender-deep);
  letter-spacing:.1em;text-transform:uppercase;font-weight:var(--fw-semibold);
}

/* ------------------------------------------------------- 13. pricing ------ */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5);align-items:stretch;margin-top:var(--s10)}
.pkg{
  background:var(--white);border:var(--bd-strong);border-radius:var(--radius-lg);
  padding:40px 32px 32px;display:flex;flex-direction:column;position:relative;
  transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),border-color var(--dur-slow) var(--ease);
}
.pkg:hover{transform:var(--lift-lg);box-shadow:0 18px 40px rgba(20,20,20,.08);border-color:var(--lavender-deep)}
.pkg--featured{
  border:2px solid var(--purple);box-shadow:var(--shadow-featured);
  background:linear-gradient(180deg,var(--white) 0%,var(--lavender) 100%);
}
.pkg--featured::before{
  content:attr(data-badge);position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--purple);color:var(--white);font-family:var(--font-sans);
  font-weight:var(--fw-bold);font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;padding:6px 16px;border-radius:var(--radius-pill);white-space:nowrap;
}
.pkg-tier{
  font-size:12px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s3);font-weight:var(--fw-semibold);
}
.pkg--featured .pkg-tier{color:var(--purple)}
.pkg-name{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:40px;line-height:1;
  color:var(--ink);letter-spacing:var(--tracking-display);margin-bottom:var(--s2);
  font-variation-settings:var(--opsz-display);
}
.pkg-role{font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--muted);margin-bottom:28px;line-height:1.4}
.pkg-price{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);padding:22px 0;
  border-top:var(--bd);border-bottom:var(--bd);margin-bottom:var(--s6);
}
.pkg-price .v{font-family:var(--font-serif);font-size:26px;font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:-.02em}
.pkg-price .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:var(--fw-semibold)}
.pkg--featured .pkg-price .v{color:var(--purple)}
.pkg-features{list-style:none;flex:1;margin-bottom:28px}
.pkg-features li{padding:10px 0 10px 26px;font-size:var(--fs-meta);line-height:1.5;color:var(--ink-soft);position:relative}
.pkg-features li::before{
  content:'';position:absolute;left:0;top:14px;width:16px;height:16px;
  background:var(--purple);border-radius:50%;opacity:.15;
}
.pkg-features li::after{
  content:'';position:absolute;left:5px;top:19px;width:5px;height:8px;
  border:solid var(--purple);border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* ------------------------------------------------------- 14. phases ------- */
.phases{border:var(--bd);border-radius:var(--radius-lg);overflow:hidden}
.phase{
  display:grid;grid-template-columns:240px 1fr 1.1fr;gap:var(--s12);
  padding:var(--s12) 44px;border-bottom:var(--bd);align-items:stretch;
  transition:background var(--dur-slow) var(--ease);
}
.phase:hover{background:var(--off-white)}
.phase:last-child{border-bottom:none}
.phase-tag{display:flex;flex-direction:column;justify-content:space-between;min-height:240px}
.phase-tag .month .of{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:96px;
  line-height:.95;color:var(--purple);letter-spacing:var(--tracking-wordmark);
  font-variation-settings:var(--opsz-display);display:block;
}
.phase-tag .month .unit{
  font-family:var(--font-sans);font-size:22px;font-weight:var(--fw-medium);
  color:var(--ink-soft);letter-spacing:-.01em;margin-top:var(--s1);display:block;
}
.phase-tag .label{
  font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple);font-weight:var(--fw-bold);background:var(--lavender);
  padding:12px 22px;border-radius:var(--radius-pill);display:inline-block;text-align:center;
}
.phases .phase:nth-child(1) .label{background:var(--peach);color:var(--ink-on-peach)}
.phases .phase:nth-child(2) .label{background:var(--sky);color:var(--ink-on-sky)}
.phases .phase:nth-child(3) .label{background:var(--butter);color:var(--ink-on-butter)}
.phase-headline{
  font-family:var(--font-serif);font-size:24px;line-height:1.25;color:var(--ink);
  letter-spacing:-.015em;font-weight:var(--fw-semibold);
}
.phase-headline em{font-style:italic;font-weight:var(--fw-medium);color:var(--purple)}
.phase-list{list-style:none}
.phase-list li{padding:var(--s2) 0 var(--s2) 28px;position:relative;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5}
.phase-list li::before{
  content:'';position:absolute;left:0;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--purple);
}
.phase-list li strong{color:var(--ink);font-weight:var(--fw-semibold)}

/* ------------------------------------------------------- 15. prose -------- */
.prose{max-width:var(--measure-prose)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:var(--fs-h2);margin-top:56px;margin-bottom:10px;scroll-margin-top:96px;line-height:1.22}
.prose h2 .num{
  display:inline-block;font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-bold);
  color:var(--purple);background:var(--lavender);padding:3px 10px;
  border-radius:var(--radius-pill);margin-right:10px;vertical-align:middle;
}
.prose h3{font-size:var(--fs-h3);margin-top:28px;margin-bottom:6px;scroll-margin-top:96px}
.prose p{color:var(--ink-soft);font-size:var(--fs-body-lg);line-height:var(--lh-prose)}
.prose strong{color:var(--ink);font-weight:var(--fw-semibold)}
.prose ul,.prose ol{padding-left:1.4em;color:var(--ink-soft)}
.prose ul li,.prose ol li{margin:.4em 0}
.prose ul li::marker{color:var(--purple)}
.prose blockquote{
  border-left:3px solid var(--purple);background:var(--lavender);
  padding:16px 20px;border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-style:italic;color:var(--ink-soft);margin:var(--s6) 0;
}
.prose code{
  font-family:var(--font-mono);font-size:.9em;background:var(--grey-50);
  padding:2px 6px;border-radius:4px;color:var(--purple-deep);
}

/* ------------------------------------------------------- 16. toc ---------- */
.toc{position:sticky;top:84px;font-size:13.5px;line-height:1.5}
.toc h6{
  font-family:var(--font-sans);font-size:var(--fs-micro);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:14px;
}
.toc ol{list-style:none;border-left:var(--bd);padding-left:0}
.toc a{
  display:block;padding:var(--s2) 14px;color:var(--muted);
  border-left:2px solid transparent;margin-left:-1px;text-decoration:none;
  font-weight:var(--fw-medium);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.toc a:hover{color:var(--ink)}
.toc a.active{color:var(--purple);border-left-color:var(--purple);font-weight:var(--fw-semibold)}

/* ------------------------------------------------------- 17. checklist ---- */
.checklist{
  background:var(--off-white);border:var(--bd);border-radius:var(--radius-md);
  padding:var(--pad-card-sm);margin:var(--s6) 0;
}
.checklist h4{font-family:var(--font-serif);font-size:18px;font-weight:var(--fw-semibold);margin-bottom:14px}
.checklist ol{list-style:none;padding:0;counter-reset:cl}
.checklist ol li{counter-increment:cl;padding:7px 0 7px 38px;position:relative;color:var(--ink-soft);font-size:var(--fs-sm)}
.checklist ol li::before{
  content:counter(cl);position:absolute;left:0;top:7px;width:24px;height:24px;
  background:var(--purple);color:var(--white);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-size:12px;font-weight:var(--fw-bold);
}

/* ------------------------------------------------------- 18. callout ------ */
.callout{
  border-left:3px solid var(--purple);background:var(--lavender);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:18px 22px;margin:var(--s6) 0;
}
.callout--mint{border-left-color:var(--green);background:var(--mint)}
.callout--butter{border-left-color:var(--ink-on-butter);background:var(--butter)}
.callout--peach{border-left-color:var(--peach-deep);background:var(--peach)}
.callout p{font-size:16px;color:var(--ink-soft)}
.callout strong{color:var(--ink)}

/* ------------------------------------------------------- 19. faq ---------- */
.faq{border-top:var(--bd);padding-top:36px;margin-top:var(--s16)}
.faq h2{margin-top:0}
.faq details{border-bottom:var(--bd);padding:18px 0}
.faq details summary{
  font-family:var(--font-serif);font-size:18px;font-weight:var(--fw-semibold);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s4);color:var(--ink);
}
.faq details summary::-webkit-details-marker{display:none}
.faq details summary::after{
  content:'+';font-family:var(--font-sans);font-size:24px;font-weight:var(--fw-normal);
  color:var(--purple);line-height:1;transition:transform var(--dur) var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:var(--s3);color:var(--ink-soft);font-size:16px;line-height:var(--lh-body)}

/* ------------------------------------------------------- 20. final cta ---- */
section.final-cta{
  padding:130px 0;background:var(--gradient-cta);color:var(--white);
  text-align:center;position:relative;overflow:visible;
}
section.final-cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at top left,rgba(254,236,235,.18) 0,transparent 50%),
    radial-gradient(ellipse at bottom right,rgba(219,221,255,.15) 0,transparent 55%);
}
.final-cta h2{
  font-family:var(--font-serif);font-weight:var(--fw-semibold);
  font-size:clamp(44px,7vw,88px);line-height:1;letter-spacing:var(--tracking-display);
  color:var(--white);max-width:1000px;margin:0 auto 28px;
  font-variation-settings:var(--opsz-display);
}
.final-cta h2 em{font-style:italic;font-weight:var(--fw-medium)}
.final-cta h2 .hl{
  background:var(--white);color:var(--purple);padding:0 16px;
  border-radius:var(--radius-sm);display:inline-block;transform:rotate(-1deg);
}
.final-cta .sub{
  font-family:var(--font-sans);font-size:var(--fs-lede);color:rgba(255,255,255,.95);
  max-width:680px;margin:0 auto 44px;line-height:1.55;
}
.final-cta .btn-row{justify-content:center}
.final-cta .btn-primary{background:var(--white);color:var(--purple);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.final-cta .btn-primary:hover{background:var(--ink);color:var(--white);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.final-cta .btn-ghost{color:var(--white);border-bottom-color:var(--white)}
.final-cta .btn-ghost:hover{color:var(--lavender-deep);border-color:var(--lavender-deep)}
.final-cta .note{
  margin-top:var(--s8);font-family:var(--font-sans);font-size:13px;
  color:rgba(255,255,255,.85);letter-spacing:.06em;
}

/* ------------------------------------------------------- 21. footer ------- */
.site-foot{background:var(--ink);color:var(--white);padding:var(--s20) 0 var(--s10)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s10)}
.foot-col h5{
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple-2);margin-bottom:var(--s4);font-weight:var(--fw-bold);
  font-family:var(--font-sans);
}
.foot-col ul{list-style:none;font-size:var(--fs-meta);line-height:2}
.foot-col a{color:rgba(255,255,255,.75);text-decoration:none;transition:color var(--dur) var(--ease)}
.foot-col a:hover{color:var(--white)}

/* ------------------------------------------------- reduced motion --------- */
/* Lives here, not in tokens.css: it re-declares --dur/--lift, and a last-wins
   token scanner would otherwise record the system's motion scale as 0ms. */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; --lift:none; --lift-lg:none; }
}

/* ------------------------------------------------------- responsive ------- */
@media(max-width:900px){
  .phase{grid-template-columns:1fr;gap:var(--s6);padding:var(--s8) var(--s6)}
  .phase-tag{min-height:0;flex-direction:row;align-items:center;gap:var(--s5)}
  .phase-tag .month .of{font-size:56px}
  .hero{padding:var(--s16) 0 var(--s12)}
}
@media(max-width:640px){
  .nav-links{display:none}
  .quote-card{padding:var(--s8) var(--s6)}
  .pkg{padding:var(--s8) var(--s6) var(--s6)}
  section.final-cta{padding:var(--s20) 0}
}