/* == /brand.css == */
/* ============================================================================
 * Good Dogz KC — Calendar PWA Brand Foundation
 * Palette + typography from ~/Projects/paper-test/gdkc-design-decisions.md
 * Wave 1-B (feat/ui-calendar) extends this file with the full calendar grid.
 * ============================================================================ */

:root {
  /* Base */
  --bg:          #0A091A;
  --bg-elev-1:  #14122A;
  --bg-elev-2:  #1E1B3C;
  --navy:       #2C2977;

  /* Accents */
  --teal:         #07EDBE;
  --pink:         #FF7EC0;
  --violet:       #9945FF;
  --mid-purple:   #C77DFF;
  --light-purple: #A08CFF;
  --blue:         #477ED6;
  --light-blue:   #A0C7FF;
  --lilac:        #F1E0FF;

  /* Text */
  --text:          #F8F8F8;
  --text-muted:    rgba(248, 248, 248, 0.55);
  --text-body:     rgba(248, 248, 248, 0.65);
  --heading-white: #F0EEFF;
  --gray-purple:   #5A5880;

  /* Surfaces */
  --surface:           var(--bg-elev-1);
  /* Haiti 900 — card fill in the newer sections. Split from --surface (#14122A)
   * is documented in docs/BRAND.md §1; collapsing to one value is Andrew's call. */
  --surface-card:      #16143A;
  --surface-border:    rgba(248, 248, 248, 0.08);
  --surface-border-strong: rgba(248, 248, 248, 0.16);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 500px;

  /* Mesh gradient — buttons/accents (135deg diagonal) */
  --mesh-gradient: linear-gradient(135deg, #A0C7FF 0%, #477ED6 30%, #C77DFF 65%, #9945FF 100%);
  /* Mesh text gradient — Paper Hero A2v4 canonical (90deg, teal→violet→pink→blue) */
  --mesh-text-gradient: linear-gradient(90deg, #07EDBE 0%, #9945FF 33.333%, #FF7EC0 66.667%, #477ED6 100%);
  /* Conic-gradient border for pill CTA buttons on dark surfaces */
  --mesh-conic-border: conic-gradient(from 0deg at 50% 50%, #07EDBE 0%, #9945FF 25%, #FF7EC0 50%, #477ED6 75%, #07EDBE 100%);
  --hero-gradient: linear-gradient(180deg, #9945FF 0%, #2C2977 100%);

  /* Elevation */
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow-teal: 0 8px 32px rgba(7, 237, 190, 0.25);
  --shadow-glow-violet: 0 8px 32px rgba(153, 69, 255, 0.25);
}

/* Fonts — self-hosted Cera Round (display) + Nunito (body).
   Both have rounded end caps — that's the GDKC brand feel. No Inter. */
@font-face {
  font-family: 'CeraRound';
  src: url('/assets/fonts/Cera-Round-Black-Web.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CeraRound';
  src: url('/assets/fonts/Cera-Round-Regular-Web.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/Nunito-Variable-Latin.woff2') format('woff2-variations'),
       url('/assets/fonts/Nunito-Variable-Latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/Nunito-Variable-Latin-Ext.woff2') format('woff2-variations'),
       url('/assets/fonts/Nunito-Variable-Latin-Ext.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: var(--bg); color: var(--text); min-height: 100vh; }
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'CeraRound', 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
}

h1 { font-size: 40px; line-height: 48px; }
h2 { font-size: 28px; line-height: 36px; }
h3 { font-size: 20px; line-height: 26px; }

@media (max-width: 640px) {
  h1 { font-size: 28px; line-height: 36px; }
  h2 { font-size: 22px; line-height: 30px; }
}

.muted { color: var(--text-muted); }

/* Gradient text (used on hero) */
.gradient-text {
  background: var(--mesh-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Mesh-gradient pill button (primary CTA) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'CeraRound', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 15px;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  border: 4px solid var(--violet);
  background: var(--bg) padding-box,
              var(--mesh-gradient) border-box;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}
.btn:hover { filter: brightness(1.1); box-shadow: var(--shadow-glow-violet); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-secondary {
  border-color: var(--surface-border-strong);
  background: var(--bg);
}

/* Big mesh-gradient CTA pill (full-fill interior, used on Confirm) */
.btn-mesh {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: 52px;
  border-radius: var(--radius-pill);
  border: 4px solid var(--teal);
  background: var(--bg);
  padding: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
  font-family: 'CeraRound', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.3px;
}
.btn-mesh::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  background: var(--mesh-gradient);
  z-index: 0;
}
.btn-mesh > span { position: relative; z-index: 1; }
.btn-mesh:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-teal); }
.btn-mesh:disabled { opacity: 0.4; pointer-events: none; }

/* Card surface */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  overflow: hidden;
}

/* Dot pattern utility */
.dot-pattern {
  position: absolute;
  inset: -24px;
  background-image: radial-gradient(circle, var(--navy) 8px, transparent 8px);
  background-size: 16px 16px;
  opacity: 0.88;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.1) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.1) 100%);
}

/* PWA viewport fixes */
@supports (padding: max(0px)) {
  body {
    padding-top: max(env(safe-area-inset-top), 16px);
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
  }
}

/* ============================================================================
 * Page layout + hero
 * ============================================================================ */

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 140px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (max-width: 640px) {
  .page { padding: 32px 16px 160px; gap: 24px; }
}

.hero {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; }
.hero .hello {
  font-size: 17px;
  color: var(--text-body);
  margin-top: 4px;
}
.hero .progress {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
}
.hero .progress::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

/* Hidden attribute helper */
[hidden] { display: none !important; }

/* == /site.css == */
/* ============================================================================
 * GDKC Landing Pages — site base
 * Layers on top of brand.css. Page-specific CSS lives in /public/<page>.css.
 * ============================================================================ */

/* Squiggle pattern lives on the body so it tiles continuously across the
   hero → pain-mirror boundary (and any other dark sections). Individual
   sections layer on top via transparent or solid backgrounds. */
body {
  background-color: var(--bg);
  background-image: url("/assets/squiggle-bg.svg");
  background-repeat: repeat;
  background-size: 480px 480px;
  background-position: 0 0;
}

/* Layout */
.container {
  width: min(100% - 40px, 1200px);
  margin: 0 auto;
}
main {
  display: block;
  padding-block: 0;
}
section {
  padding: clamp(56px, 8vw, 120px) 0;
}

/* --- Top nav --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 9, 26, 0.85);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--surface-border);
}
.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 20px;
}
.site-nav a.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: 'CeraRound', 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 18px;
}
.site-nav a.brand img {
  height: 28px;
  width: auto;
}
.site-nav ul.nav-links {
  list-style: none;
  display: flex;
  gap: 24px;
  align-items: center;
}
.site-nav ul.nav-links a {
  color: var(--text-body);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 140ms ease;
}
.site-nav ul.nav-links a:hover {
  color: var(--teal);
}
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--text);
}
.nav-burger svg { display: block; width: 24px; height: 24px; }

@media (max-width: 820px) {
  .site-nav ul.nav-links {
    position: fixed;
    inset: 56px 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 20px;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--surface-border);
    transform: translateY(-120%);
    transition: transform 220ms ease;
  }
  .site-nav ul.nav-links a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--surface-border);
    font-size: 16px;
  }
  .nav-burger { display: inline-flex; }
  body.nav-open .site-nav ul.nav-links {
    transform: translateY(0);
  }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-family: 'CeraRound', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: filter 140ms ease, transform 140ms ease;
  color: #FFFFFF;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--mesh-gradient);
  box-shadow: var(--shadow-glow-violet);
}
.btn-secondary {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--teal);
}
.btn-secondary:hover { background: rgba(7, 237, 190, 0.08); }

/* --- Hero (landing-site base) --- */
.hero {
  padding: clamp(60px, 10vw, 140px) 0 clamp(48px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 920px) {
  .hero .container {
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
  }
}
.hero h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.hero .lede {
  color: var(--text-body);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  max-width: 640px;
  margin-bottom: 28px;
}
.hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elev-1);
  border: 1px solid var(--surface-border);
}
.hero-media .rive-slot,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gradient-text {
  background: var(--mesh-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Retired banner (Board & Train redirect) --- */
.retired-banner {
  background: linear-gradient(90deg, var(--violet) 0%, var(--mid-purple) 100%);
  color: #FFFFFF;
  text-align: center;
  padding: 10px 48px 10px 16px;
  font-size: 14px;
  position: relative;
}
.retired-banner a {
  color: #FFFFFF;
  text-decoration: underline;
  font-weight: 600;
}
.retired-banner button {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* --- Contact form --- */
.contact-form {
  background: var(--bg-elev-1);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}
.contact-form .container {
  max-width: 640px;
}
.contact-form h2 {
  margin-bottom: 24px;
}
.contact-form form {
  display: grid;
  gap: 16px;
}
.contact-form label {
  display: grid;
  gap: 6px;
  color: var(--text-body);
  font-size: 14px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  transition: border-color 140ms ease, background 140ms ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(7, 237, 190, 0.04);
}
.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}
.contact-form label.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.contact-form label.consent input {
  margin-top: 2px;
}
.contact-form .hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.contact-form .form-error {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(255, 126, 192, 0.1);
  border: 1px solid var(--pink);
  border-radius: var(--radius-sm);
  color: var(--pink);
  font-size: 14px;
}
.contact-form button[type="submit"] {
  justify-self: start;
  margin-top: 8px;
}

/* --- FAQ accordion --- */
.faq h2 {
  text-align: center;
  margin-bottom: 32px;
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq details {
  background: var(--bg-elev-1);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 180ms ease;
  margin-left: 16px;
  flex-shrink: 0;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq .faq-body {
  padding: 0 20px 18px;
  color: var(--text-body);
  line-height: 1.6;
}

/* --- Service cards --- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.service-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service-card h3 { color: var(--text); }
.service-card p {
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
}
.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(7, 237, 190, 0.12);
  display: grid;
  place-items: center;
}
.service-icon img { width: 28px; height: 28px; }
.service-card .btn {
  align-self: flex-start;
}

/* --- Testimonial --- */
.testimonial {
  background: var(--bg-elev-1);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 720px;
  margin: 0 auto;
}
.testimonial .stars {
  color: var(--pink);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.testimonial p {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 14px;
  color: var(--text);
}
.testimonial cite {
  font-style: normal;
  color: var(--text-muted);
  font-size: 14px;
  display: block;
}
.testimonial cite .source {
  margin-left: 8px;
  opacity: 0.7;
}

/* --- Footer --- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--surface-border);
  padding-block: 56px 32px;
  color: var(--text-muted);
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (min-width: 720px) {
  .site-footer .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.site-footer h4 {
  color: var(--text);
  font-family: 'CeraRound', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 14px;
}
.site-footer ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.site-footer a {
  color: var(--text-body);
  text-decoration: none;
  font-size: 14px;
}
.site-footer a:hover { color: var(--teal); }
.site-footer .socials {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}
.site-footer .legal {
  padding-top: 24px;
  border-top: 1px solid var(--surface-border);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* == /components/nav-pill/style.css == */
/* ============================================================================
 * NavPill — vanilla port of NavPill.tsx
 * Tokens come from brand.css (--light-purple #A08CFF, --teal #07EDBE, --pink #FF7EC0).
 * Keyframes (shine) live here so they're scoped to nav-pill use.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 *  🔒 LOCKED LAYOUT — sign-off Andrew 2026-06-08. Do NOT change without asking.
 * ─────────────────────────────────────────────────────────────────────────────
 *  Mobile  (<640px)              Desktop (≥640px)
 *  ─────────────                 ────────────────
 *  pill height   96px           124px
 *  logo         86×86px         116×116px
 *  CTA label    "Call now"       "Book a free call"
 *  CTA href     tel:+1…          #consult-embed
 *  container gutter 20px        16px
 *  pill padding  0 18px 0 14px  0 48px 0 28px
 *  CTA inner pad 10px 16px      14px 28px
 *  CTA font/lh   13/16          16/20
 *
 *  RATIONALE: desktop visitors don't tap-to-dial — they research and book.
 *  Desktop CTA scrolls to the booking calendar. Mobile keeps tap-to-dial
 *  because phone-in-hand = call wins. Two separate <a> elements in markup
 *  (`--desktop` + `--mobile`); CSS toggles which one is visible.
 *  Curtain menu (burger-open state) is desktop+mobile shared and still
 *  surfaces the phone number, so desktop users who want it can find it.
 * ─────────────────────────────────────────────────────────────────────────────
 * ============================================================================ */

@keyframes nav-pill-shine {
  0%   { left: -100%; width: 30%; }
  50%  {              width: 30%; }
  100% { left:  100%; width: 10%; }
}

/* ---- Wrapper ---- */
.nav-pill {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  width: 100%;
  padding-top: 16px;
  pointer-events: none; /* allow click-through on the gutter; children re-enable */
  transition: transform 300ms ease;
}
.nav-pill[data-showcase="true"] {
  position: relative;
  padding-bottom: 16px;
}
.nav-pill__container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 0 16px;
  overflow: visible;
}

/* ---- Pill ---- */
.nav-pill__nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 9999px;
  min-height: 104px;
  padding: 0 32px 0 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: visible;
  pointer-events: auto;
}
@media (min-width: 640px) {
  .nav-pill__nav {
    min-height: 124px;
    padding: 0 48px 0 28px;
  }
}

/* ---- Progress ring ---- */
.nav-pill__ring {
  position: absolute;
  top: -16px;
  left: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 32px);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}
.nav-pill__ring-progress {
  visibility: hidden; /* JS reveals after first measurement */
}

/* ---- Logo (Rive canvas) ---- */
.nav-pill__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 0 0 -4px;
  position: relative;
  cursor: pointer;
  transition: transform 300ms ease;
  text-decoration: none;
}
.nav-pill__logo:hover { transform: scale(1.05); }
@media (min-width: 640px) {
  .nav-pill__logo { width: 116px; height: 116px; }
}
.nav-pill__rive {
  width: 100%;
  height: 100%;
  transform: scale(1.3) translateX(8px);
  display: block;
}

/* ---- CTA pill button ---- */
.nav-pill__cta-wrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px 0 8px;
}
@media (min-width: 640px) {
  .nav-pill__cta-wrap { padding-right: 32px; }
}
/* CTA — mirrors hero CTA: solid light-purple ring | dark gap | paper-mesh fill | white label */
.nav-pill__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;                       /* dark gap between outer ring and mesh fill */
  border: 4px solid var(--light-purple);
  border-radius: 999px;
  background: #FFFFFF;                /* matches the white pill behind it */
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 160ms ease, transform 160ms ease;
  box-shadow: 0 8px 16px rgba(160, 140, 255, 0.35);
}
.nav-pill__cta:hover { filter: brightness(1.08); }
.nav-pill__cta:active { transform: scale(0.98); }
.nav-pill__cta-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 12px 22px;
  background: linear-gradient(135deg, #A0C7FF 0%, #477ED6 35%, #A08CFF 70%, #07EDBE 100%);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 640px) {
  .nav-pill__cta-inner { padding: 14px 28px; }
}
.nav-pill__cta-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
.nav-pill__cta-mesh canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
}
.nav-pill__cta-label {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 18px;
  text-shadow: 0 1px 2px rgba(10, 9, 26, 0.35);
}
@media (min-width: 640px) {
  .nav-pill__cta-label { font-size: 16px; line-height: 20px; }
}

/* Desktop = "Book a free call" (anchor to #consult-embed).
   Mobile  = "Call now" (tel: link). One visible at a time, the other display:none. */
.nav-pill__cta--mobile  { display: none; }
@media (max-width: 639px) {
  .nav-pill__cta--desktop { display: none; }
  .nav-pill__cta--mobile  { display: inline-flex; }
}

/* Mobile sizing: taller pill, bigger logo, more breathing room on both sides
   so the pill never kisses the screen edges. Phone CTA stays as "Call now". */
@media (max-width: 639px) {
  .nav-pill__container { padding: 0 20px; }
  .nav-pill__nav {
    min-height: 96px;
    padding: 0 18px 0 14px;
  }
  .nav-pill__logo { width: 86px; height: 86px; margin-left: 0; }
  .nav-pill__cta-wrap { padding: 0 10px 0 6px; }
  .nav-pill__cta-inner { padding: 10px 16px; }
  .nav-pill__cta-label { font-size: 13px; line-height: 16px; }
}

/* ---- Hamburger ---- */
.nav-pill__burger {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  width: auto;
  height: auto;
}
.nav-pill__burger-line {
  display: block;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #A08CFF, #07EDBE);
  transition: transform 300ms ease, opacity 300ms ease;
}
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-line:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px);
}
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-line:nth-child(2) {
  opacity: 0;
}
.nav-pill__burger[aria-expanded="true"] .nav-pill__burger-line:nth-child(3) {
  transform: rotate(-45deg) translate(10px, -10px);
}

/* ---- Curtain menu ---- */
.nav-pill__curtain {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-150%);
  /* CLOSE = a rising curtain. The old close used a 400ms ease-OUT, which dumped
     ~95% of the travel in the first ~120ms — the panel snapped up and vanished
     instead of reading as a rise. This easing spreads the travel across the whole
     duration so you actually SEE the curtain lift up and reveal the page. */
  transition: transform 950ms cubic-bezier(0.45, 0, 0.55, 1);
  pointer-events: none;
}
.nav-pill__curtain[data-open="true"] {
  /* OPEN = the curtain drops DOWN from the top to cover the page (a curtain
     closing/lowering). Kept as its own slower ease-out so the two motions read
     distinctly: drop in, rise out. */
  transform: translateY(0);
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
.nav-pill__curtain-inner {
  /* Center within the VISIBLE viewport, not iOS Safari's taller layout
     viewport — inset:0 spans under the toolbars, which parked the whole stack
     high with dead space at the bottom (Andrew 2026-07-14). 100dvh tracks the
     visible height; top pad clears the fixed nav-pill bar. */
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 92px 16px calc(32px + env(safe-area-inset-bottom));
}
.nav-pill__curtain-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media (min-width: 640px) {
  .nav-pill__curtain-list { gap: 32px; }
}
.nav-pill__curtain-list a {
  display: inline-block;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #1f2937;
  text-decoration: none;
  transition: color 300ms ease, transform 300ms ease, opacity 300ms ease;
  transform: translateY(16px);
  opacity: 0;
}
@media (min-width: 640px) {
  .nav-pill__curtain-list a { font-size: 26px; }
}
.nav-pill__curtain-list a:hover { color: #A08CFF; }
.nav-pill__curtain[data-open="true"] .nav-pill__curtain-list a {
  transform: translateY(0);
  opacity: 1;
}
/* Stagger up to 6 items (homeItems is 4, landingItems is 3) */
.nav-pill__curtain[data-open="true"] .nav-pill__curtain-list li:nth-child(1) a { transition-delay: 100ms; }
.nav-pill__curtain[data-open="true"] .nav-pill__curtain-list li:nth-child(2) a { transition-delay: 150ms; }
.nav-pill__curtain[data-open="true"] .nav-pill__curtain-list li:nth-child(3) a { transition-delay: 200ms; }
.nav-pill__curtain[data-open="true"] .nav-pill__curtain-list li:nth-child(4) a { transition-delay: 250ms; }
.nav-pill__curtain[data-open="true"] .nav-pill__curtain-list li:nth-child(5) a { transition-delay: 300ms; }
.nav-pill__curtain[data-open="true"] .nav-pill__curtain-list li:nth-child(6) a { transition-delay: 350ms; }

/* Two stacked, centered CTAs (Andrew 2026-07-14): primary "Free Phone
   Consultation" over secondary "Start Training". */
.nav-pill__curtain-cta-wrap {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 300ms ease, opacity 300ms ease;
  transition-delay: 0ms;
}
.nav-pill__curtain[data-open="true"] .nav-pill__curtain-cta-wrap {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 400ms;
}
/* Curtain CTA reuses the hero-style ring + mesh treatment, just bigger label.
   min-width matches the two stacked pills on a phone; the inner flexes to fill
   so the mesh spans the whole pill instead of floating in a white gap. */
.nav-pill__curtain-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(280px, 76vw);
  padding: 5px;
  border: 5px solid var(--light-purple);
  border-radius: 999px;
  background: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 160ms ease, transform 160ms ease;
  box-shadow: 0 8px 16px rgba(160, 140, 255, 0.35);
}
.nav-pill__curtain-cta:hover { filter: brightness(1.08); }
.nav-pill__curtain-cta:active { transform: scale(0.98); }
.nav-pill__curtain-cta .nav-pill__cta-inner { flex: 1; padding: 15px 30px; }
.nav-pill__curtain-cta .nav-pill__cta-label {
  font-size: clamp(15px, 4.3vw, 18px);
  line-height: 1.25;
}
/* Primary label: "Get started"-style sticker lettering — dark glyphs wrapped
   in a thick white outline (paint-order draws the stroke behind the fill),
   matching .c-pricing__card-cta-label (Andrew 2026-07-14, reference image). */
.nav-pill__curtain-cta:not(.nav-pill__curtain-cta--secondary) .nav-pill__cta-label {
  color: #0A091A;
  -webkit-text-stroke: 3px #FFFFFF;
          text-stroke: 3px #FFFFFF;
  paint-order: stroke fill;
  text-shadow: none;
}

/* Secondary (Start Training → checkout): same pill silhouette as the primary,
   but a plain white fill + dark slate label (matches the menu list items, not
   a different purple — Andrew 2026-07-14) so it reads as the lighter action. */
.nav-pill__curtain-cta--secondary {
  box-shadow: 0 6px 14px rgba(160, 140, 255, 0.22);
}
.nav-pill__curtain-cta--secondary .nav-pill__cta-inner { background: #FFFFFF; }
.nav-pill__curtain-cta--secondary .nav-pill__cta-label {
  color: #1f2937;
  text-shadow: none;
}

/* Curtain bottom gradient edge (matches old NavPill aesthetic).
   Anchored to the bottom of the curtain (= bottom edge of the screen when open)
   instead of top:100% (which pushed it just past the bottom, off-screen). */
.nav-pill__curtain-edge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(90deg, #A08CFF 0%, #07EDBE 50%, #FF7EC0 100%);
  pointer-events: none;
}

/* When curtain is open, lock body scroll (set by JS via class on <body>) */
body.nav-pill--menu-open { overflow: hidden; }

/* Avoid double-applying the Rive logo when JS hasn't loaded yet — fallback is invisible canvas. */
.nav-pill__rive:not(.is-mounted) {
  background: transparent;
}

/* ---- Native scrollbar hidden site-wide ----
   The nav pill's gradient progress ring IS the site's scroll indicator, so the
   browser's own scrollbar on the right edge just doubles it up. Hide it in every
   engine; scrolling itself is unchanged. Lives here because every page that
   shows the pill loads this sheet (linked from partials/head). */
html {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge/IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;              /* Chrome / Safari / new Edge */
  width: 0;
  height: 0;
}

/* == /components/hero/style.css?v=4 == */
/* Hero A2v4 — pixel-port of Paper artboard 35T-0 */
.c-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Transparent so the body's squiggle pattern tiles through. Lets the
     pattern continue uninterrupted into the next section. */
  background: transparent;
  /* Clip horizontally so icons near the L/R edge never spawn a scrollbar, but
     allow VERTICAL bleed so bottom-edge icons cross the seam into the next
     section's top "breath" instead of being sliced off. z-index:1 lifts the
     bleeding icons above the (opaque) next section so they actually show. */
  overflow-x: clip;
  overflow-y: visible;
  /* Full-viewport hero — nothing else shares the screen with it. Andrew
     wants this to own 100% of the first fold and have room for the floating
     icons around it. svh wins on modern browsers so the hero height stays FIXED
     as the mobile URL bar hides/shows on scroll (100vh flexes with it, which
     dragged the %-positioned icons around mid-scroll). vh is the old fallback. */
  min-height: 100vh;
  min-height: 100svh;
}
.c-hero__pattern {
  /* Pattern lives on body now — keep this element for layout backward
     compat but visually inert. */
  display: none;
}
.c-hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  /* More top space than bottom so the H1 doesn't get crammed against the
     nav pill. Bottom is trimmed since pain-mirror takes over below. */
  padding: 120px 80px 40px;
  text-align: center;
}
.c-hero__headline {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  /* Fluid scale — fills the full-viewport hero on big screens, still
     comfortable on phones. */
  font-size: clamp(56px, 9vw, 132px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c-hero__accent {
  /* Sticker outline (Andrew 2026-07-12), two layers: this span is the WHITE
     base (thick stroke wrapped around the glyphs via paint-order), and the
     animated gradient paints on a COPY of the text stacked on top (::after,
     reads data-text). A gradient background can't sit above a stroked copy
     any other way: element backgrounds always paint below children. */
  color: #FFFFFF;
  -webkit-text-stroke: 0.17em #FFFFFF;
          text-stroke: 0.17em #FFFFFF;
  paint-order: stroke fill;
  display: inline-block;
  position: relative;
  z-index: 0;
}
.c-hero__accent::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  /* 5-stop palindromic gradient so the ping-pong animation loops seamlessly */
  background-image: linear-gradient(90deg, #07EDBE 0%, #9945FF 25%, #FF7EC0 50%, #9945FF 75%, #07EDBE 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-stroke inherits — zero it here or it covers the gradient */
  -webkit-text-stroke: 0;
          text-stroke: 0;
  animation: hero-accent-flow 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hero-accent-flow {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .c-hero__accent::after { animation: none; }
}
.c-hero__rest {
  /* Sticker lettering (Andrew 2026-07-12): dark fill + thick white border,
     same recipe as the pain-mirror Free Consultation pill. paint-order draws
     the stroke BEHIND the glyphs so it wraps around them instead of eating in;
     with line-height 1.0 neighbouring outlines run together on purpose. */
  color: #0A091A;
  -webkit-text-stroke: 0.17em #FFFFFF;
          text-stroke: 0.17em #FFFFFF;
  paint-order: stroke fill;
  display: inline-block;
  /* Balanced wrap so "Kansas City" stays together on its own line instead
     of breaking "Kansas / City" across rows. */
  text-wrap: balance;
  max-width: 14ch;
}
.c-hero__tags {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.01em;
  /* Balance so "Anxiety" never wraps onto its own line as an orphan. */
  text-wrap: balance;
  max-width: 32ch;
}

/* ---- CTA button (matches Paper "Get Started": solid ring | dark gap | mesh fill) ---- */
.c-hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;                    /* dark gap between outer ring and mesh fill */
  border: 5px solid var(--light-purple);
  border-radius: 999px;
  background: var(--bg);           /* the dark "gap" ring */
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease;
}
.c-hero__cta:hover { filter: brightness(1.08); }
.c-hero__cta:active { transform: scale(0.98); }
.c-hero__cta-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 22px 56px;
  /* Fallback gradient so the button looks right even if WebGL fails */
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  overflow: hidden;
  isolation: isolate;
}
.c-hero__cta-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
.c-hero__cta-mesh canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
}
.c-hero__cta-label {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 26px;
  text-shadow: 0 1px 2px rgba(10, 9, 26, 0.35);
}
.c-hero__rive {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- Floating brand illustrations (issue #34) ---------- */
.c-hero__float {
  position: absolute;
  inset: 0;
  z-index: 0;            /* behind .c-hero__content (z-index: 1) */
  pointer-events: none;
  /* Clip L/R (no scrollbar from edge icons) but let the bottom row bleed down
     across the section seam. */
  overflow-x: clip;
  overflow-y: visible;
}
/* Groups: desktop vs mobile arrangements, toggled at the 820px breakpoint.
   Each group fills the hero box so its icons' % left/top map to the hero. */
.c-hero__group {
  position: absolute;
  inset: 0;
}
.c-hero__group--mobile { display: none; }
.c-hero__icon {
  position: absolute;
  /* Inline left/top/width % + --r come from the playground arrangement.
     Centering + rest tilt live HERE, in pure CSS, and GSAP never touches this
     wrapper — so the icon always sits exactly where it was placed (identical to
     the playground). The float animation runs on the inner <img> instead, so it
     can't stack a second -50% on top of this centering.
     --px/--py are the "keep-out bulb" offsets: hero-float-icons.js measures the
     real text at the current screen width and nudges any icon that lands on the
     headline / tags / CTA just clear of it. Default 0 = sits exactly as placed. */
  transform:
    translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)))
    rotate(var(--r, 0deg));
  transition: transform 240ms ease;
}
.c-hero__icon > img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.c-hero__float.is-armed .c-hero__icon > img { opacity: 0; }
/* Reduced motion / no GSAP: icons stay visible at their inline position. */
@media (prefers-reduced-motion: reduce) {
  .c-hero__float.is-armed .c-hero__icon > img { opacity: 1; }
}

/* ---------- Mobile (Paper Hero Mobile v2) ---------- */
@media (max-width: 820px) {
  .c-hero__group--desktop { display: none; }
  .c-hero__group--mobile { display: block; }
  /* Mobile: full viewport too. */
  .c-hero__content {
    padding: 100px 24px 32px;
    gap: 28px;
  }
  .c-hero__headline {
    /* Mobile bump — clamp keeps it controlled on tiny phones. */
    font-size: clamp(48px, 13vw, 64px);
    line-height: 1.02;
  }
  .c-hero__tags { font-size: 16px; line-height: 22px; }
  .c-hero__cta { padding: 4px; border-width: 4px; }
  .c-hero__cta-inner { padding: 18px 36px; }
  .c-hero__cta-label { font-size: 17px; line-height: 22px; }
}
@media (max-width: 480px) {
  /* Phone breakpoint: 14vw rendered "Dog Training in Kansas City" at ~55px,
     which forced the heading_rest to break across 3 lines (orphaning "Dog").
     12vw / 50px cap lets the rest settle into a clean 2 lines on every phone
     width (360–430px), so the H1 reads In-Home / Dog Training / in Kansas
     City. Locked hero design (gradient, CTA, shader) is untouched. */
  .c-hero__headline { font-size: clamp(40px, 12vw, 50px); }
}

/* == /components/section-header/style.css?v=2 == */
.c-section-header {
  max-width: 760px;
  margin: 0 auto 48px;
}
.c-section-header--center { text-align: center; }
.c-section-header--left { text-align: left; margin-inline: 0; }
.c-section-header__title {
  margin: 0 0 16px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (matches "From First Call…" and "You're not alone"). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  /* Balance multi-line titles so they break evenly ("In-Home Dog Training" /
     "in Kansas City") instead of orphaning a word. */
  text-wrap: balance;
}
.c-section-header__subtitle {
  margin: 0;
  color: rgba(248, 248, 248, 0.55);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .c-section-header { margin-bottom: 32px; }
  /* title size now handled by the shared clamp above */
  .c-section-header__subtitle { font-size: 16px; }
}

/* == /components/service-cards/style.css?v=13 == */
/* Service Cards — pixel-port of Paper HS9-0 (Var B: Dots) */
.c-service-cards {
  position: relative;
  background: var(--bg);
  padding: 100px 0 clamp(56px, 9vw, 96px);  /* top padding clears the seam */
  /* The card entrance (motion-core [data-animate="cards"]) nudges each card a
     few px sideways + tilts it before it settles; clip x so a full-width mobile
     card can't flash a horizontal scrollbar mid-animation. x-only keeps the
     seam + peel lift (vertical) unclipped. */
  overflow-x: clip;
}
/* Wider stage than the default 1200 container so four ~302px cards sit with clear
   space from the page edges (≥40px each side). Reset to the default inset on
   mobile so single cards stay full-width. */
/* Stage widened from 1284 to 1320 so the larger 40px inter-card gap doesn't steal
   width from the cards — four ~300px cards still fit, just with more air between. */
.c-service-cards > .container { position: relative; z-index: 1; width: min(100% - 80px, 1320px); }

.c-service-cards__seam {
  position: absolute;
  top: -50px;            /* overflows half its height up into the white above */
  left: 0;
  width: 100%;
  height: 100px;
  display: block;
  pointer-events: none;
  z-index: 2;            /* sit above the section's flat dark bg */
}
.c-service-cards__seam-white { fill: #FFFFFF; }
.c-service-cards__seam-dark  { fill: var(--bg); }
.c-service-cards__seam-line {
  fill: none;
  /* Use vector-effect so stroke stays a uniform pixel thickness even though
     preserveAspectRatio=none stretches the SVG horizontally to full width. */
  stroke-width: 8;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 8px rgba(160, 140, 255, 0.5));
}
.c-service-cards__row {
  /* Flex-wrap (was a 4-col grid): with FIVE cards, a strict grid strands the
     odd one out at the left of its row; centered wrapping keeps any short row
     (the 5th card on desktop, the odd card in 2-up) centered instead. Card
     width is pinned to the old 4-col size via flex-basis below. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 0 auto;
  /* Stretch all cards in a row to the tallest one so a longer title/copy (e.g.
     Anxiety, Reactivity & Aggression wrapping to an extra line) doesn't make
     that card taller than the rest. */
  align-items: stretch;
}
/* 4-up width (container minus 3 gaps, split 4 ways) — same card size as the
   old grid. */
.c-service-cards__row > .c-service-card { flex: 0 1 calc((100% - 120px) / 4); min-width: 0; }

.c-service-card {
  position: relative;
  width: 100%;
  /* A FLOOR, not a fixed size. A fixed aspect-ratio kept the tall proportion but
     WebKit/Safari refuses to let align-items:stretch override it, so the tallest
     card's content overflowed and its button got clipped. min-height keeps the
     proportion while letting content (and the row's stretch) grow the card taller,
     so no card ever clips its button. */
  min-height: 420px;
  border-radius: 16px;
  border: 8px solid var(--card-color);
  overflow: clip;
  isolation: isolate;
  /* Card-tinted gradient: saturated top → near-black bottom (oklab-equivalent in sRGB) */
  background-image: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom, #1A1538) 100%);
  /* 3-row vertical rhythm: icon at the top, the words container fills the middle
     (1fr) and centres its copy, and the button is pinned to the bottom. Using auto
     for the icon row (not a % of card height) is what lets the card grow with its
     content instead of fixing the height. (Absolutely-positioned .c-service-card__dots
     is out of flow, so the grid rows only hold icon / body / CTA.) */
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  padding: 18px 16px 18px;   /* space above the icon + below the button */
  box-sizing: border-box;
}
/* Dark cards: near-black with just a hint of the card colour at the top. The
   bright --card-color stays for the border, the icon ring, and the CTA ring. */
/* Five cards sample the site's signature gradient LEFT TO RIGHT (the hero/CTA
   teal -> violet -> pink), so the whole row reads as one fluid fade:
   teal -> blue -> violet -> mid-purple -> pink. */
.c-service-card--teal         { --card-color: #07EDBE; --card-top: #0A373C; --card-bottom: #0B0A1B; }
.c-service-card--blue         { --card-color: #477ED6; --card-top: #16223C; --card-bottom: #0B0A1B; }
.c-service-card--violet       { --card-color: #9945FF; --card-top: #241641; --card-bottom: #0B0A1B; }
.c-service-card--mid-purple   { --card-color: #C77DFF; --card-top: #2C2147; --card-bottom: #0B0A1B; }
.c-service-card--pink         { --card-color: #FF7EC0; --card-top: #3C213C; --card-bottom: #0B0A1B; }

/* Dot pattern — Paper Var B: 8px-radius circles on a 16px grid so adjacent
   circles touch, leaving diamond-shaped negative space at every 4-circle
   junction. Vertical opacity fade mirrors Paper's per-row 0.88 → 0.005 ramp.
   #2C2977 = --navy. */
.c-service-card__dots {
  position: absolute;
  top: -24px; left: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  background-image: radial-gradient(circle at 8px 8px, #2C2977 8px, transparent 8.5px);
  background-size: 16px 16px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
}

.c-service-card__icon {
  position: relative;
  /* Big feature circle — the icon is the hero of the card's top third. */
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: var(--bg);
  border: 5px solid var(--card-color);
  display: grid;
  place-items: center;
  z-index: 1;
  flex-shrink: 0;
}
/* White icon discs on the service pages; home (index variant, no modifier)
   keeps the dark discs. Applied via the --light-discs modifier on each service
   variant's root section (Andrew 2026-07-14). */
.c-service-cards--light-discs .c-service-card__icon { background: #fff; }
.c-service-card__icon svg {
  width: 70px;
  height: 70px;
}
/* Real brand illustration inside the circle. Bounded by BOTH a max width (%)
   and a max height (definite px — a % height doesn't resolve inside the grid
   icon), so it fits whatever the aspect is: a portrait illustration is height-
   limited, a landscape one is width-limited. Either way it stays in the circle. */
.c-service-card__icon img {
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 104px;
  object-fit: contain;
}

.c-service-card__body {
  position: relative;
  width: 100%;
  /* Fill the middle row so the copy container reaches toward the icon and button
     (its dark panel covers what used to be empty card background), but keep a
     little clear space on each side via the margin. Text centred inside. */
  align-self: stretch;
  margin: 16px 0;
  padding: 18px 20px;
  border-radius: 12px;
  border: 4px solid var(--card-color);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1;
  box-sizing: border-box;
}
.c-service-card__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: center;
}
.c-service-card__desc {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--text-body);
  text-align: center;
}

/* CTA — solid colored ring, dark gap (4px), mesh-gradient fill, white CeraRound */
.c-service-card__cta {
  position: relative;
  width: 100%;             /* near full width, side to side */
  height: 52px;
  border-radius: 999px;   /* Nimiq pill */
  border: 4px solid var(--card-color);
  background: var(--bg);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: clip;
  z-index: 1;
  transition: filter 160ms ease, transform 160ms ease;
  box-sizing: border-box;
}
.c-service-card__cta::before {
  content: "";
  position: absolute;
  /* TWO concentric borders: the host's colored ring on the outside, then this
     black ring, then the gradient fill. The black ring is a real 4px BORDER on
     this layer (not an inset gap) so it follows the pill at uniform width and
     can't pool unevenly at the rounded tips. background-clip: padding-box keeps
     the gradient inside the black border. */
  inset: 0;
  border-radius: 999px;
  border: 4px solid var(--bg);
  box-sizing: border-box;
  /* 5-stop palindromic palette so the pan animation loops seamlessly */
  background: linear-gradient(135deg, #A0C7FF 0%, #467ED6 25%, #C77DFF 50%, #467ED6 75%, #A0C7FF 100%);
  background-clip: padding-box;
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: service-cta-flow 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  z-index: 0;
}
@keyframes service-cta-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* Per-variant stagger so no two CTAs share a phase. Different durations +
   negative delays + alternate gradient angle keep each button visually unique. */
.c-service-card--violet       .c-service-card__cta::before { animation-duration: 7s;  animation-delay: -1.2s; }
.c-service-card--mid-purple   .c-service-card__cta::before { animation-duration: 9s;  animation-delay: -3.5s;
  background-image: linear-gradient(95deg,  #C77DFF 0%, #9945FF 25%, #FF7EC0 50%, #9945FF 75%, #C77DFF 100%); }
.c-service-card--blue         .c-service-card__cta::before { animation-duration: 11s; animation-delay: -5.8s;
  background-image: linear-gradient(160deg, #A0C7FF 0%, #467ED6 25%, #07EDBE 50%, #467ED6 75%, #A0C7FF 100%); }
.c-service-card--teal         .c-service-card__cta::before { animation-duration: 8s;  animation-delay: -2.8s;
  background-image: linear-gradient(70deg,  #07EDBE 0%, #477ED6 25%, #A0C7FF 50%, #477ED6 75%, #07EDBE 100%); }
.c-service-card--pink         .c-service-card__cta::before { animation-duration: 15s; animation-delay: -6.2s;
  background-image: linear-gradient(30deg,  #FF7EC0 0%, #C77DFF 25%, #9945FF 50%, #C77DFF 75%, #FF7EC0 100%); }
@media (prefers-reduced-motion: reduce) {
  .c-service-card__cta::before { animation: none; }
}
.c-service-card__cta-label {
  position: relative;
  z-index: 1;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 22px;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(10, 9, 26, 0.4);
}
.c-service-card__cta:hover { filter: brightness(1.1); transform: scale(1.02); }
.c-service-card__cta:active { transform: scale(0.98); }

/* ---------- Tablet (4→2 cols) ---------- */
@media (max-width: 1280px) {
  .c-service-cards__row { max-width: 640px; margin: 0 auto; }
  /* 2-up: container minus 1 gap, split 2 ways */
  .c-service-cards__row > .c-service-card { flex-basis: calc((100% - 40px) / 2); }
}

/* ---------- Mobile: single column, full container width ---------- */
@media (max-width: 640px) {
  /* Reset to the default container inset so single cards stay full-width
     (matching the Training In Action widget / quote card = 350px), not the
     narrower desktop stage. */
  .c-service-cards > .container { width: min(100% - 40px, 1200px); }
  .c-service-cards__row {
    gap: 44px;                 /* a little more space between stacked cards */
    max-width: 100%;
  }
  .c-service-cards__row > .c-service-card { flex-basis: 100%; }
  .c-service-card {
    margin: 0 auto;           /* fill the container width = the reference cards */
  }
  /* Bigger feature icon on mobile (the top third has more room here than on the
     narrower desktop cards). */
  .c-service-card__icon { width: 156px; height: 156px; }
  .c-service-card__icon svg { width: 86px; height: 86px; }
  .c-service-card__icon img { max-height: 126px; }
  /* Bigger type on the full-width mobile cards — the desktop sizes read small
     here. */
  .c-service-card__title { font-size: 27px; line-height: 32px; }
  .c-service-card__desc  { font-size: 17px; line-height: 25px; }
}

/* == /components/how-it-works-text/style.css?v=3 == */
/* How It Works — Nimiq-foundation rebuild on the dark GDKC stage.
   Radical simplicity + white-space hierarchy: no toggle, no timeline glow, no
   left-accent stripe. Color appears only as the gradient number accents and the
   single CTA "break"; everything else is structured with breathing room. */
.c-hiw {
  position: relative;
  /* The squiggle is painted by ::before (a solid var(--bg) + squiggle layer) that
     extends a little past the section, top and bottom, so the pattern CREEPS into
     the solid neighbours with an organic, non-uniform wavy edge. z-index lifts the
     section (and that creep) above the section below it. */
  background: transparent;
  z-index: 1;
  /* Clip horizontally, but let the creep overflow vertically into the neighbours. */
  overflow: clip visible;
  display: flex;
  flex-direction: column;
  /* Override the global `section { padding: clamp(56px,8vw,120px) 0 }` on the
     BOTTOM only: that ~115px was stacking on top of the inner's own bottom
     padding, leaving a big gap below "Get Started". 16px here + 24px inner +
     32px lifetime top ≈ the 72px gap above the button, so the CTA sits balanced
     between the cadence cards above and the Investment section below. */
  padding-bottom: 16px;
}
.c-hiw::before {
  content: "";
  position: absolute;
  inset: -30px 0;          /* 30px of squiggle creeps up and down into neighbours */
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 480px 480px;
  background-repeat: repeat;
  /* Organic wavy creep at the TOP only (blends into the solid section above).
     The BOTTOM runs the squiggle solid all the way down to the wavy seam — the
     seam below is transparent now, so a bottom fade left a squiggle-less dark
     band just above the wave. */
  -webkit-mask:
    url("/assets/hiw-creep-top.svg") 0 0 / 100% 70px no-repeat,
    linear-gradient(#000, #000) 0 70px / 100% calc(100% - 70px) no-repeat;
          mask:
    url("/assets/hiw-creep-top.svg") 0 0 / 100% 70px no-repeat,
    linear-gradient(#000, #000) 0 70px / 100% calc(100% - 70px) no-repeat;
}
.c-hiw__inner {
  position: relative;
  z-index: 1;            /* above the ::before squiggle overlay */
  /* Tighter bottom padding pulls the "Get Started" CTA closer to the
     "An Investment…" section that follows. */
  padding: 112px 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Header ---- */
.c-hiw__header { display: flex; flex-direction: column; gap: 16px; align-items: center; max-width: 720px; }
.c-hiw__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (matches "How I Can Help" and "You're not alone"). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text);
  text-wrap: balance;
}
.c-hiw__accent {
  background: linear-gradient(90deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: hiw-accent-flow 12s ease-in-out infinite;
}
@keyframes hiw-accent-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.c-hiw__subtitle {
  margin: 0;
  color: var(--text-muted);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  line-height: 28px;
  max-width: 540px;
  text-align: center;
  text-wrap: pretty;
}

/* ---- Steps: four clean cards, sequence carried by the numbers + white space ---- */
.c-hiw__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Match the "How I Can Help" service-card row spacing (40px) so the two
     four-up card rows read as the same rhythm down the page. */
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.c-hiw__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 26px;
  border-radius: 20px;
  /* Solid outlined card — the site's card language (matches lifetime-support
     stat tiles + service-cards): solid dark fill, solid brand-colored border. */
  border: 2px solid var(--light-purple);
  background: var(--bg);
  /* Scroll-reveal entrance — JS adds .is-in to trigger */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms ease;
  transition-delay: calc(var(--step-i) * 110ms);
}
.c-hiw__step.is-in { opacity: 1; transform: translateY(0); }
.c-hiw__step:hover { box-shadow: 0 14px 32px rgba(153, 69, 255, 0.20); }
.c-hiw__num {
  display: inline-block;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 54px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
  background: linear-gradient(135deg, var(--light-purple) 0%, var(--mid-purple) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Zigzag the even cards (01, 03): number, title and body all align to the right
   edge instead of the left. text-align on the card cascades to the full-width
   flex children. */
.c-hiw__step:nth-child(even) { text-align: right; }

.c-hiw__step-title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 21px;
  line-height: 27px;
  color: var(--text);
}
.c-hiw__step-body {
  margin: 0;
  color: var(--text-body);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 26px;
}

/* ---- Cadence: a section title sitting directly above the note card ---- */
.c-hiw__cadence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.c-hiw__cadence-title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text);
  text-wrap: balance;
}

/* Two parallel cadence cards (non-aggressive vs aggressive) */
.c-hiw__cadence-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Match the "How I Can Help" service-card gap (40px). */
  gap: 40px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
.c-hiw__cadence-cards .c-hiw__callout { max-width: none; margin: 0; height: 100%; }
/* The frequency — the headline answer of each card */
.c-hiw__callout-cadence {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--light-purple) 0%, var(--mid-purple) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Recommended package — a quiet footer line, set off by a hairline divider */
.c-hiw__callout-rec {
  margin: 6px 0 0;
  margin-top: auto;            /* push to the card bottom so both cards align */
  padding-top: 14px;
  width: 100%;
  border-top: 1px solid rgba(248, 248, 248, 0.12);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  line-height: 21px;
  color: var(--text-muted);
}
.c-hiw__callout-rec strong { color: var(--text); font-weight: 800; }

/* ---- Cadence note: uniform-bordered card (no accent stripe) ---- */
.c-hiw__callout {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border: 2px solid var(--mid-purple);
  border-radius: 20px;
  background: var(--bg);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}
.c-hiw__callout-title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 19px;
  line-height: 25px;
  color: var(--text);
}
.c-hiw__callout-body {
  margin: 0;
  max-width: 600px;
  color: var(--text-body);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 26px;
}

/* ---- CTA: the one calculated break — filled brand pill, bottom-right radial spin ---- */
.c-hiw__cta-wrap { padding-top: 8px; }
.c-hiw__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 48px;
  border-radius: var(--radius-pill);
  /* The site's signature CTA pill (matches the "Free Consultation" button):
     brand gradient fill, dark text with a thick white outline, brand shadow. */
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  color: #0A091A;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(153, 69, 255, 0.35);
  transition: filter 160ms ease, transform 160ms ease;
  /* Thick white border around the label (paint-order keeps it around the glyphs). */
  -webkit-text-stroke: 6px #FFFFFF;
          text-stroke: 6px #FFFFFF;
  paint-order: stroke fill;
}
.c-hiw__cta:hover { filter: brightness(1.07); transform: translateY(-2px); }
.c-hiw__cta:active { transform: scale(0.98); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .c-hiw__accent { animation: none; }
  .c-hiw__step { opacity: 1; transform: none; transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .c-hiw__inner { padding: 80px 40px 24px; gap: 48px; }
  .c-hiw__steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  /* Cards are wider once they stack 2-up, so the title can read bigger. */
  .c-hiw__step-title { font-size: 24px; line-height: 30px; }
}
@media (max-width: 680px) {
  .c-hiw__cadence-cards { grid-template-columns: 1fr; max-width: 480px; gap: 44px; }
}
@media (max-width: 560px) {
  .c-hiw__inner { padding: 64px 20px 24px; }
  .c-hiw__steps { grid-template-columns: 1fr; gap: 44px; }
  .c-hiw__num { font-size: 50px; }
}

/* == /components/how-it-works-rail/style.css == */
/* How It Works — zigzag squiggly journey rail (desktop) / single-column
   vertical-squiggle (mobile). Visual language matches pain-mirror-v2. */

.c-hiwr {
  position: relative;
  width: 100%;
  background: transparent;
  overflow: clip;
  color: var(--text);
}
.c-hiwr__inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 96px 32px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  box-sizing: border-box;
}

/* ---- Header ---------------------------------------------------------- */
.c-hiwr__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.c-hiwr__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
}
.c-hiwr__accent {
  background: linear-gradient(90deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hiw-accent-flow 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes hiw-accent-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.c-hiwr__subtitle {
  margin: 0;
  max-width: 560px;
  color: rgba(248, 248, 248, 0.7);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
}

/* ---- Rail ------------------------------------------------------------ */
.c-hiwr__rail {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0;
}
.c-hiwr__steps {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ---- Spine — vertical squiggle pinned to the left rail (marker column) */
.c-hiwr__spine {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.c-hiwr__spine-draw {
  /* JS sets stroke-dasharray to path.getTotalLength() and dashoffset to match;
     adding .is-in transitions dashoffset to 0 to "draw" the squiggle. */
  transition: stroke-dashoffset 2000ms cubic-bezier(0.45, 0, 0.55, 1);
}

/* ---- Step rows ------------------------------------------------------- */
.c-hiwr__step {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--step-i) * 140ms);
}
.c-hiwr__step.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Marker — organic blob outline + big numeral, per-step brand color. */
.c-hiwr__marker {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blob-color, #A08CFF);
  filter: drop-shadow(0 8px 18px rgba(10, 9, 26, 0.5));
}
.c-hiwr__step.is-in .c-hiwr__marker {
  animation: hiw-marker-settle 1200ms cubic-bezier(0.16, 1, 0.3, 1)
             calc(var(--step-i) * 140ms + 200ms) both;
}
@keyframes hiw-marker-settle {
  0%   { transform: rotate(-6deg) scale(0.92); }
  60%  { transform: rotate(3deg)  scale(1.04); }
  100% { transform: rotate(0)     scale(1);    }
}
.c-hiwr__blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.c-hiwr__num {
  position: relative;
  z-index: 1;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blob-color, #A08CFF);
}

/* Content column */
.c-hiwr__step-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}
.c-hiwr__step-title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.c-hiwr__step-body {
  margin: 0;
  color: rgba(248, 248, 248, 0.75);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.55;
}

/* ---- CTA ------------------------------------------------------------- */
.c-hiwr__cta-wrap {
  display: flex;
  justify-content: center;
}
.c-hiwr__cta {
  display: inline-flex;
  align-items: center;
  padding: 18px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  background-size: 200% 100%;
  color: #0A091A;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(153, 69, 255, 0.32);
  animation: hiw-cta-pan 10s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: filter 160ms ease, transform 160ms ease;
}
.c-hiwr__cta:hover  { filter: brightness(1.07); transform: translateY(-1px); }
.c-hiwr__cta:active { transform: scale(0.98); }
@keyframes hiw-cta-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (max-width: 720px) {
  .c-hiwr__inner {
    padding: 72px 20px 72px;
    gap: 48px;
  }
  .c-hiwr__steps { gap: 48px; }
  .c-hiwr__step  { grid-template-columns: 80px 1fr; gap: 20px; }
  .c-hiwr__spine  { width: 80px; }
  .c-hiwr__marker { width: 80px; height: 80px; }
  .c-hiwr__num    { font-size: 26px; }
}

@media (max-width: 420px) {
  .c-hiwr__inner  { padding: 56px 16px 56px; }
  .c-hiwr__step   { grid-template-columns: 68px 1fr; gap: 16px; }
  .c-hiwr__spine  { width: 68px; }
  .c-hiwr__marker { width: 68px; height: 68px; }
  .c-hiwr__num    { font-size: 22px; }
}

/* ---- GSAP scrub mode (class added by /js/how-it-works-rail.js) -------- */
/* When ScrollTrigger owns the rail (scrubbed spine draw + per-marker pops),
   the CSS IO mechanism above is neutralized so CSS and GSAP never fight over
   the same properties: steps render visible (GSAP hides/reveals the marker +
   content itself, applied same-frame — the is-armed recipe), the marker
   keyframe is dropped, and so is the 2s dashoffset transition (it would
   smear every scrubbed frame). Without JS this class never appears. */
[data-component="how-it-works-rail"].is-scrub .c-hiwr__step {
  opacity: 1;
  transform: none;
  transition: none;
}
[data-component="how-it-works-rail"].is-scrub .c-hiwr__step.is-in .c-hiwr__marker {
  animation: none;
}
[data-component="how-it-works-rail"].is-scrub .c-hiwr__spine-draw {
  transition: none;
}

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .c-hiwr__accent,
  .c-hiwr__cta { animation: none; }
  .c-hiwr__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .c-hiwr__step.is-in .c-hiwr__marker { animation: none; }
  .c-hiwr__spine-draw {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* == /components/get-pricing-cta/style.css == */
/* Get Pricing — Mesh Gradient — port of Paper 2EG-0 (1440×420) + 2FM-0 mobile */
.c-get-pricing {
  position: relative;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  overflow: clip;
}
.c-get-pricing__overlay {
  position: absolute;
  inset: 0;
  background: rgba(160, 140, 255, 0.05);
  pointer-events: none;
}
.c-get-pricing__card {
  position: relative;
  width: 100%;
  max-width: 896px;
  min-height: 279px;
  background: #8B7FCC; /* Solid fallback if WebGL fails */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: clip;
  display: flex;
  align-items: stretch;
}
.c-get-pricing__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.c-get-pricing__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 48px;
  width: 100%;
}
.c-get-pricing__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
}
.c-get-pricing__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  color: var(--bg-elev-1);
  letter-spacing: -0.01em;
}
.c-get-pricing__subtitle {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(10, 9, 26, 0.7);
}
.c-get-pricing__form {
  display: flex;
  gap: 12px;
  min-width: 400px;
  flex-shrink: 0;
}
.c-get-pricing__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  line-height: 18px;
  color: var(--bg);
  background: rgba(10, 9, 26, 0.12);
  border: 1px solid rgba(10, 9, 26, 0.15);
  border-radius: 12px;
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.c-get-pricing__input::placeholder { color: rgba(10, 9, 26, 0.4); }
.c-get-pricing__input:focus {
  border-color: rgba(10, 9, 26, 0.45);
  background: rgba(255, 255, 255, 0.7);
}
.c-get-pricing__submit {
  flex-shrink: 0;
  padding: 16px 32px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  color: var(--text);
  background: var(--bg-elev-1);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 150ms ease, background 200ms ease;
}
.c-get-pricing__submit:hover { background: var(--bg); transform: translateY(-1px); }

/* Mobile (Paper 2FM-0, 390×428) */
@media (max-width: 720px) {
  .c-get-pricing { padding: 48px 20px; }
  .c-get-pricing__content {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 24px;
  }
  .c-get-pricing__form {
    flex-direction: column;
    min-width: 0;
    width: 100%;
    gap: 10px;
  }
  .c-get-pricing__submit { width: 100%; }
}

/* Visually-hidden helper for screen-reader-only labels */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* == /components/lifetime-support/style.css == */
/* Lifetime Support — pixel-port of Paper 2UL-0. DESIGN polish: mid-purple register.
   The full-bleed grid is dialled back and radially faded toward the edges (texture, not a
   wall), and a soft mid-purple blob sits behind the copy column. Light-touch — structure,
   stat tiles and the art card are unchanged.
   ANIMATION HOOKS: [data-animate] on the copy + the art card; [data-three-blob] on the blob. */
.c-lifetime {
  position: relative;
  /* Transparent (was an opaque var(--bg)) so the continuous body squiggle carries
     through from the pricing section above — otherwise the squiggle stops dead at
     this section's top edge and the edge-masked purple grid leaves a flat dark band
     in the gutters. The purple grid (.c-lifetime__pattern) + blob still overlay on
     top as this section's mid-purple accent; stat tiles + art card keep their own bg. */
  background: transparent;
  /* Top padding sets the breathing room above the "An Investment…" title from
     the "Get Started" button above. */
  padding: 48px 100px 60px;
  overflow: clip;
}
.c-lifetime__blob {
  position: absolute;
  top: 50%; left: 18%;
  transform: translate(-50%, -50%);
  width: 560px; height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(199, 125, 255, 0.22) 0%, transparent 75%);
  opacity: 0.7;
  pointer-events: none;
}
.c-lifetime__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 19px, rgba(199,125,255,0.22) 19px, rgba(199,125,255,0.22) 20px),
    repeating-linear-gradient(0deg, transparent 0, transparent 59px, rgba(199,125,255,0.18) 59px, rgba(199,125,255,0.18) 60px);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 0%, rgba(0,0,0,0.4) 55%, transparent 85%);
          mask-image: radial-gradient(110% 100% at 50% 50%, #000 0%, rgba(0,0,0,0.4) 55%, transparent 85%);
}
.c-lifetime__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  /* Top-align so the title sits just under the section's top padding instead of
     floating to the vertical center of the tall illustration (which left a big
     gap below the "Get Started" button above). */
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
}
.c-lifetime__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
  /* Center the header + copy (text and the constrained-width paragraph). */
  text-align: center;
  align-items: center;
}
.c-lifetime__eyebrow {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light-purple);
}
.c-lifetime__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (site-wide type scale). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  /* Balanced wraps on phones so "Dog" never orphans onto its own line. */
  text-wrap: balance;
}
.c-lifetime__title span { display: block; }
.c-lifetime__accent { color: var(--light-purple); }

.c-lifetime__desc {
  margin: 0;
  color: #BFBFBF;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
}
.c-lifetime__desc strong { color: var(--text); font-weight: 800; }

.c-lifetime__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 8px;
}
.c-lifetime__stat {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--light-purple);
  border-radius: 21px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.c-lifetime__stat-num {
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.0;
}
.c-lifetime__stat-label {
  color: #BFBFBF;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 15px;
  text-align: center;
}

.c-lifetime__art {
  position: relative;
  width: 480px;
  height: 480px;
  border-radius: 36px;
  padding: 5px;
  background: linear-gradient(135deg, #A08CFF 0%, #6B5ED9 100%);
  flex-shrink: 0;
}
.c-lifetime__art::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 30px;
  background: var(--surface-card);
  padding: 16px;
}
.c-lifetime__art::after {
  content: "";
  position: absolute;
  inset: 21px;
  border-radius: 18px;
  /* Zoomed in close on the in-home scene. cover-and-beyond (170%) crops the
     outer edges of the couch/floor on purpose so the people + dog read large. */
  background: #FFFFFF url("/assets/illustrations/light/home-training-scene.png") no-repeat;
  /* Horizontal 37.5% = halfway between the original center (50%) and the
     dog-centered 25%, so the dog reads near-center without the girl getting
     pushed off the left edge. */
  background-position: 37.5% 36%;
  background-size: 170%;
}

@media (max-width: 1100px) {
  .c-lifetime { padding: 48px 40px 56px; }
  .c-lifetime__row { grid-template-columns: 1fr; }
  /* Stacked layout: the art card spans the column width instead of sitting at a
     fixed size (which read as narrower than the copy above it). Capped so it
     doesn't balloon on a wide tablet. */
  .c-lifetime__art {
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .c-lifetime__stats { grid-template-columns: 1fr; gap: 12px; }
  .c-lifetime__stat { padding: 20px; }
  .c-lifetime__stat-num { font-size: 32px; }
  /* Phones: full-bleed. Break out of the section's 40px side padding so the
     purple frame's straight sides run flush to both screen edges; height
     follows the square ratio off the full width. Rounded corners kept (inside
     and out) per the brand card language. */
  .c-lifetime__art {
    width: calc(100% + 80px);
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-left: -40px;
    margin-right: -40px;
  }
}

/* == /components/about-andrew/style.css == */
/* About Andrew — pixel-port of Paper 2PI-0 */
.c-about {
  position: relative;
  background: var(--bg);
  overflow: clip;
  padding: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-about__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 19px, rgba(160,140,255,0.22) 19px, rgba(160,140,255,0.22) 20px);
  pointer-events: none;
}
.c-about__card {
  position: relative;
  width: 100%;
  max-width: 1100px;
  background: #FFFFFF;
  border-radius: 32px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: 60% 40%;
  overflow: clip;
  min-height: 520px;
}

.c-about__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  padding: 56px 48px;
}
.c-about__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (site-wide type scale). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #171717;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
}
.c-about__accent { color: var(--light-purple); }

.c-about__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-about__body p {
  margin: 0;
  color: #404040;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
}

.c-about__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  background: var(--light-purple);
  border-radius: 999px;
  padding: 16px 36px;
  color: var(--bg);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  margin-top: 12px;
  transition: filter 160ms ease, transform 160ms ease;
}
.c-about__cta:hover { filter: brightness(1.05); }
.c-about__cta:active { transform: scale(0.98); }

.c-about__photo {
  position: relative;
  display: flex;
}
.c-about__photo-frame {
  position: absolute;
  inset: 0;
  padding: 6px;
  background: linear-gradient(135deg, #9945FF 0%, #07EDBE 100%);
  /* Match the card's 32px outer radius on the right side so the gradient
     border follows the card's curvature instead of being cut by overflow. */
  border-radius: 0 32px 32px 0;
}
.c-about__photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0 26px 26px 0;
}
.c-about__photo-frame--placeholder::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #E5E5E5;
  /* Inner radius = outer radius (32) minus padding (6) = 26 */
  border-radius: 0 26px 26px 0;
}

/* Transparent "me" cutout video inside the gradient frame. object-fit: contain so
   Andrew is never cropped (head/feet stay in); the brand gradient shows through the
   transparent areas. Bottom-anchored so he stands on the frame floor. */
.c-about__photo-frame .me-vid {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0 26px 26px 0;
  /* Transparent: the video composites over the gradient frame behind it. */
}
.c-about__photo-frame .me-mobile { display: none; }

@media (max-width: 900px) {
  .c-about { padding: 40px 20px; }
  .c-about__card { grid-template-columns: 1fr; }
  .c-about__copy { padding: 40px 28px 28px; gap: 16px; }
  /* Square photo area so the 1:1 video fills it edge to edge (no letterbox gap
     where the dark section colour was seeping under the gradient). */
  .c-about__photo { min-height: 0; aspect-ratio: 1 / 1; }
  /* Stacked layout gets the 1:1 square crop (the 9:16 would be far too tall here).
     Breakpoint aligned to the card's single-column switch, not 600px. */
  .c-about__photo-frame { border-radius: 0 0 32px 32px; }
  .c-about__photo-frame .me-vid {
    border-radius: 0 0 26px 26px;
    object-fit: cover;              /* fill the square frame edge to edge */
    object-position: center top;    /* keep his head, crop from the bottom if needed */
  }
  .c-about__photo-frame .me-desktop { display: none; }
  .c-about__photo-frame .me-mobile { display: block; }
}

/* == /components/testimonials/style.css == */
/* Testimonials — plain centered quote on the dark stage (no card container).
   Previously a white blob whose text was painted to a canvas (shape-inside);
   the card was dropped, so this is now simple centered text on the page
   background, both desktop and mobile.
   Vars: quote (required), author (required). */
.c-testimonials {
  position: relative;
  background: var(--bg);
  padding: 80px 40px 96px;
  display: flex;
  justify-content: center;
}

.c-testimonials__card {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Nunito', system-ui, sans-serif;
}

.c-testimonials__title {
  margin: 0 0 18px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}

.c-testimonials__quote {
  margin: 0 0 14px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
}

.c-testimonials__cite {
  display: block;
  font-style: normal;
}
/* Author — matches the hero-testimonial author: brand violet, Nunito 700/16px. */
.c-testimonials__author {
  display: block;
  color: var(--violet);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  font-style: normal;
}

@media (max-width: 720px) {
  .c-testimonials { padding: 56px 20px 72px; }
}

/* == /components/hero-testimonial/style.css?v=6 == */
/* Hero Testimonial — pixel-port of Paper 2QS-0
   Acts as the smooth transition between the dark hero and the white sections below. */
.c-hero-testimonial {
  position: relative;
  /* Transparent so the BODY's dark squiggle shows through (same as the hero).
     This keeps the squiggle continuous across the wavy seams above and below —
     a section-level squiggle would be out of phase with the body at the seam. */
  background: transparent;
  /* Symmetric breathing room — same dark space below the card as above it. */
  padding: 160px 40px 160px;
  display: flex;
  justify-content: center;
  overflow: clip;
}
/* Squiggle now comes from the BODY background (section is transparent), so this
   section-level tile is no longer needed — it would double up / sit out of phase
   with the seams. */
.c-hero-testimonial::before { display: none; }
.c-hero-testimonial > * { position: relative; z-index: 1; }
/* Card background is the organic "Green-Blob-Large" shape from the GDKC brand
   mural. It's applied as an SVG mask on ::before so the card's own layout box
   stays rectangular (content positions normally) while only the white fill is
   cut to the blob silhouette. drop-shadow on the card follows the masked shape. */
.c-hero-testimonial__card {
  display: grid;
  /* Single column while the video-review slot is out (see index.html comment);
     restore `1fr 300px` when the videos ship. */
  grid-template-columns: 1fr;
  column-gap: 32px;
  align-items: center;            /* keep body + media centred in the blob */
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 1.82 / 1;         /* matches the blob's native ratio */
  position: relative;
  /* No drop-shadow: over the dark squiggle its soft 48px halo muted the squiggle
     into a "dark background" ring around the card. The white blob has plenty of
     contrast on its own, so the squiggle now reads cleanly right up to the edge. */
  /* Inscribed safe zone — the blob pinches inward at the upper-left neck
     and top, so left/top padding runs heavier than right/bottom. */
  padding: 110px 96px 120px 140px;
}
.c-hero-testimonial__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  -webkit-mask-image: url('/assets/blob-card.svg');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-image: url('/assets/blob-card.svg');
          mask-size: 100% 100%;
          mask-repeat: no-repeat;
          mask-position: center;
  z-index: 0;
}
.c-hero-testimonial__card > * { position: relative; z-index: 1; }
.c-hero-testimonial__body {
  /* Card-level padding handles the safe zone now. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* With the video slot out, cap the quote's line length and centre the column
     in the blob so the text doesn't stretch the full 1100px card. */
  max-width: 680px;
  justify-self: center;
}
.c-hero-testimonial__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Single KC brand mark (was a row of 5). Sized up so the K+C monogram reads
   clearly instead of looking cramped/"off" at thumbnail size. */
.c-hero-testimonial__badge { display: block; flex-shrink: 0; width: 42px; height: auto; }
/* Highlighted now that the KC marks are reduced to one — this trust line is
   the header's anchor: larger, bolder, brand navy instead of faint grey. */
.c-hero-testimonial__eyebrow {
  color: var(--navy);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 16px;
  text-transform: uppercase;
}
.c-hero-testimonial__quote {
  margin: 0;
  color: #171717;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  padding-right: 16px;
  font-style: normal;
}
.c-hero-testimonial__quote::before,
.c-hero-testimonial__quote::after { content: ""; }
.c-hero-testimonial__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  margin-top: 4px;
}
/* Author — darkened to brand violet at bold weight so it's clearly legible
   on white (the light-purple/teal it used to inherit was too low-contrast). */
.c-hero-testimonial__author {
  color: var(--violet);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

/* Second instance on a page (the bottom "happy clients" quote) right-aligns its
   quote + author. The general sibling combinator matches only a hero-testimonial
   preceded by another one, so the top quote stays left-aligned. */
.c-hero-testimonial ~ .c-hero-testimonial .c-hero-testimonial__body {
  text-align: right;
}

.c-hero-testimonial__media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.c-hero-testimonial__play {
  position: relative;
  aspect-ratio: 4 / 3;            /* fixed shape so it can't expand past the blob */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F3FF;
  border: 1px solid #E8E4F8;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 160ms ease;
}
.c-hero-testimonial__play:active { transform: scale(0.99); }
.c-hero-testimonial__play-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--htest-accent, var(--light-purple));
  display: grid;
  place-items: center;
}
.c-hero-testimonial__play-label {
  position: absolute;
  bottom: 12px;
  left: 16px;
  color: var(--htest-accent, var(--light-purple));
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 15px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .c-hero-testimonial {
    padding: 120px 20px 120px;
    /* Transparent here too (desktop is) so the body squiggle shows through on
       mobile — a solid var(--bg) here was covering it, leaving the middle dark. */
    background: transparent;
  }
  .c-hero-testimonial__card {
    grid-template-columns: 1fr;
    aspect-ratio: 0.9 / 1;         /* portrait blob on mobile */
    padding: 80px 56px 96px 64px;  /* safe zone inside the narrower blob */
    column-gap: 0;
  }
  .c-hero-testimonial__body { padding: 0; }
  .c-hero-testimonial__media { padding: 0; }
  .c-hero-testimonial__play { aspect-ratio: 16 / 10; }

  /* Mobile layout — Andrew's /edit arrangement, as a robust flow layout so it
     holds at every phone width: original blob, bigger centred KC, no trust
     line, quote, blue author, centred video card. */
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__card {
    aspect-ratio: auto;
    min-height: 0;
    padding: 40px 60px 48px 50px;
    row-gap: 16px;
  }
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__card::before {
    -webkit-mask-image: url('/assets/blob-card.svg');
            mask-image: url('/assets/blob-card.svg');
  }
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__header {
    justify-content: center;
  }
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__badge { width: 78px; }
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__eyebrow { display: none; }
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__quote {
    font-size: 17px; line-height: 26px; padding-right: 0;
  }
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__author { color: #477ED6; }
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__media {
    width: 96%;
    margin: 4px auto 0;
  }
  .c-hero-testimonial[data-ht-mobile="fit"] .c-hero-testimonial__play {
    aspect-ratio: 16 / 11;
  }
  /* stack — drop the blob mask entirely; a plain rounded white card that
     flows naturally. Most robust for very long quotes. */
  .c-hero-testimonial[data-ht-mobile="stack"] .c-hero-testimonial__card {
    aspect-ratio: auto;
    min-height: 0;
    padding: 28px 26px 30px;
    row-gap: 20px;
    background: #FFFFFF;
    border-radius: var(--htest-stack-radius, 24px);
  }
  .c-hero-testimonial[data-ht-mobile="stack"] .c-hero-testimonial__card::before {
    display: none;
  }
}

/* == /components/training-in-action/style.css == */
/* Training In Action — pixel-port of Paper 2RD-0 */
.c-training-action {
  position: relative;
  background: #FFFFFF;
  /* Bottom padding accounts for the 50px wave-seam overhang from the next
     section, so the widget has visible breathing room above the wave. */
  padding: 32px 40px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  overflow: clip;
}
/* __pattern removed — the hero-testimonial section now owns the squiggle
   fade-out, so training-in-action stays clean white. */
.c-training-action__title {
  position: relative;
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (site-wide type scale). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.08;
  color: var(--bg);
  text-align: center;
}
.c-training-action__widget {
  position: relative;
  width: 100%;
  max-width: 1100px;
  background: var(--bg);
  border-radius: 16px;
  padding: 2px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}
.c-training-action__widget-pattern {
  position: absolute;
  inset: 2px;
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 480px 480px;
  border-radius: 14px;
  pointer-events: none;
}
#tolstoy-stories {
  position: relative;
  width: 100%;
  min-height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-training-action__widget-label {
  color: rgba(248, 248, 248, 0.55);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 16px;
}

/* ---- "Videos are buried" placeholder (until the Tolstoy reel is live) ---- */
.c-training-action__oops {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 20px 32px;
  text-align: center;
}
.c-training-action__oops-dog {
  width: 150px;
  height: auto;
  margin-bottom: 8px;
}
.c-training-action__oops-title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}
.c-training-action__oops-body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(248, 248, 248, 0.65);
  text-wrap: balance;
}

@media (max-width: 640px) {
  .c-training-action { padding: 24px 20px 80px; gap: 14px; }
}

/* == /components/why-choose/style.css?v=3 == */
/* Why Choose — Nimiq-foundation rebuild on the dark GDKC stage.
   Editorial two-column: heading/intro on the left, four clean reason cards on the
   right. White space carries the structure; brand color lives only in the gradient
   title accent and the card numbers (color = highlight, not decoration). */
.c-why {
  position: relative;
  background: var(--bg);
  overflow: clip;
  display: flex;
  align-items: center;
}
.c-why__inner {
  position: relative;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 72px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 112px 80px;
  align-items: center;
  box-sizing: border-box;
}

/* ---- Heading (left) ---- */
.c-why__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.c-why__title {
  margin: 0 0 20px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-wrap: balance;
}
.c-why__title-accent {
  background: linear-gradient(90deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: why-accent-flow 12s ease-in-out infinite;
}
@keyframes why-accent-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.c-why__intro {
  margin: 0;
  max-width: 360px;
  color: var(--text-muted);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 26px;
  text-wrap: pretty;
}

/* ---- Reason cards (right) ---- */
.c-why__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.c-why__card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
  border-radius: 20px;
  /* Solid outlined card — the site's card language. Four brand border colors
     echo the service-cards set so the two card grids read as a family. */
  border: 2px solid var(--card-accent, var(--light-purple));
  background: var(--bg);
  transition: box-shadow 220ms ease, transform 220ms cubic-bezier(0.25, 0, 0, 1);
}
.c-why__card:nth-child(1) { --card-accent: #9945FF; } /* violet */
.c-why__card:nth-child(2) { --card-accent: #C77DFF; } /* mid-purple */
.c-why__card:nth-child(3) { --card-accent: #477ED6; } /* blue */
.c-why__card:nth-child(4) { --card-accent: #A08CFF; } /* light-purple */
.c-why__card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(153, 69, 255, 0.20); }
.c-why__num {
  display: block;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
  color: var(--card-accent, var(--light-purple));
}
.c-why__card-title {
  margin: 0 0 10px;
  color: var(--text);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.2;
}
.c-why__card-body {
  margin: 0;
  color: var(--text-body);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .c-why__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 40px;
  }
  .c-why__intro { max-width: 520px; }
}
@media (max-width: 560px) {
  .c-why__inner { padding: 64px 20px; }
  .c-why__cards { grid-template-columns: 1fr; }
}

/* == /components/contact-section/style.css == */
/* Contact Section — pixel-port of Paper 10E-0 */
.c-contact {
  background: var(--bg);
  padding: 64px 48px;
  overflow: clip;
  position: relative;
}
.c-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

/* ---- Left column: copy + steps ---- */
.c-contact__copy {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 8px 0;
  justify-content: center;
}
.c-contact__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-contact__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--heading-white);
}
.c-contact__title span { display: block; }
.c-contact__title-accent { color: var(--teal); }

.c-contact__lede {
  margin: 0;
  color: var(--gray-purple);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  max-width: 400px;
}

.c-contact__steps {
  display: flex;
  gap: 28px;
  align-items: stretch;
}
.c-contact__rail {
  flex-shrink: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #9945FF 0%, #07EDBE 50%, #FF7EC0 100%);
}
.c-contact__step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 32px;
}
.c-contact__step { display: flex; flex-direction: column; gap: 6px; }
.c-contact__step-num {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.c-contact__step-title {
  margin: 0;
  color: var(--heading-white);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.2;
}
.c-contact__step-body {
  margin: 0;
  color: var(--gray-purple);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

/* ---- Right column: light form card ---- */
.c-contact__card {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 0 60px rgba(160, 140, 255, 0.15), 0 20px 60px rgba(0, 0, 0, 0.25);
}
/* Gradient outline — replicates Paper's 1.5px masked border */
.c-contact__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.5px;
  background: linear-gradient(135deg, #9945FF 0%, #07EDBE 50%, #FF7EC0 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.c-contact__card-title {
  margin: 0 0 24px;
  text-align: center;
  color: var(--bg);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.01em;
}

.c-contact__form { display: flex; flex-direction: column; gap: 12px; }

.c-contact__field {
  position: relative;
  display: block;
  border-radius: 10px;
  padding: 1.5px;
  background: linear-gradient(135deg, #9945FF 0%, #07EDBE 50%, #FF7EC0 100%);
  transition: box-shadow 160ms ease;
}
.c-contact__field:focus-within {
  box-shadow: 0 0 0 3px rgba(160, 140, 255, 0.25);
}
.c-contact__field > input,
.c-contact__field > textarea {
  display: block;
  width: 100%;
  background: #FFFFFF;
  border: 0;
  border-radius: 9px;
  padding: 13px 15px;
  color: var(--bg);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  line-height: 18px;
  outline: none;
}
.c-contact__field > input::placeholder,
.c-contact__field > textarea::placeholder {
  color: rgba(10, 9, 26, 0.5);
}
.c-contact__field--textarea > textarea {
  min-height: 88px;
  resize: vertical;
}
.c-contact__label {
  /* Labels visually hidden — placeholders carry the context per Paper design */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.c-contact__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  color: rgba(10, 9, 26, 0.5);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.6;
}
.c-contact__consent input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #9945FF;
}

.c-contact__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.c-contact__submit {
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  padding: 18px 32px;
  background: linear-gradient(135deg, #9945FF 0%, #07EDBE 50%, #FF7EC0 100%);
  color: #FFFFFF;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(160, 140, 255, 0.3);
  cursor: pointer;
  transition: filter 160ms ease, transform 160ms ease;
}
.c-contact__submit:hover { filter: brightness(1.1); }
.c-contact__submit:active { transform: scale(0.98); }
.c-contact__submit:disabled { opacity: 0.6; cursor: wait; }

.c-contact__error {
  margin: 8px 0 0;
  padding: 10px 14px;
  background: rgba(255, 126, 192, 0.12);
  border: 1px solid var(--pink);
  border-radius: 8px;
  color: #E85C9E;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .c-contact__inner { grid-template-columns: 1fr; }
  .c-contact__copy { padding-bottom: 16px; }
}
@media (max-width: 560px) {
  .c-contact { padding: 48px 20px; }
  .c-contact__title { font-size: 36px; }
  .c-contact__card { padding: 28px 20px; }
}

/* == /components/faq/style.css == */
/* FAQ — pixel-port of Paper J0-1 */
.c-faq {
  position: relative;
  background: var(--bg);
  overflow: clip;
  padding: 96px 48px;
}
.c-faq__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 720px;
  margin: 0 auto;
}
.c-faq__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  width: 100%;
}
.c-faq__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (site-wide type scale). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.c-faq__title span { display: inline; }
.c-faq__accent { color: var(--light-purple); }
.c-faq__subtitle {
  margin: 0;
  color: rgba(248, 248, 248, 0.55);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}
/* When a page passes an empty subtitle (e.g. the home page), collapse the
   paragraph so it leaves no header gap. */
.c-faq__subtitle:empty { display: none; }

.c-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.c-faq__item {
  background: var(--surface-card);
  border: 1px solid var(--navy);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 160ms ease;
}
.c-faq__item:hover { border-color: var(--light-purple); }
.c-faq__item[open] { border-color: var(--light-purple); }
.c-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  /* Balanced multi-line wraps: no single-word orphans on phones. */
  text-wrap: balance;
}
.c-faq__item summary::-webkit-details-marker { display: none; }
.c-faq__chev {
  color: var(--light-purple);
  transition: transform 220ms ease;
  flex-shrink: 0;
}
.c-faq__item[open] .c-faq__chev { transform: rotate(180deg); }
.c-faq__body {
  padding: 0 28px 24px;
  color: rgba(248, 248, 248, 0.75);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
/* Empty-slot items (when q/a are left blank) vanish */
.c-faq__item:has(> summary:empty),
.c-faq__item summary:has(+ .c-faq__body:empty) {
  /* no-op; empty still renders but is hidden via next rule */
}
.c-faq__item summary:empty + .c-faq__body:empty {
  display: none;
}
.c-faq__item summary:empty { display: none; }

@media (max-width: 640px) {
  .c-faq { padding: 64px 20px; }
  /* Type sizes stay at their desktop values on phones (site-wide type scale) —
     only the paddings tighten. */
  .c-faq__item summary { padding: 20px; }
  .c-faq__body { padding: 0 20px 20px; }
}

/* == /components/footer/style.css == */
/* Footer — pixel-port of Paper HJ-1 */
.c-footer {
  position: relative;
  /* Start at the FAQ's exact background (#0A091A) so the seam above is invisible,
     then ease smoothly up through the elevated navy to the lighter #2C2977 at the
     very bottom — one continuous dark-to-light gradient into the footer. */
  background: linear-gradient(180deg, #0A091A 0%, #14122A 22%, #2C2977 100%);
  color: var(--text);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  padding: 64px 120px 0;
  overflow: clip;
}
.c-footer__row {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: flex-start;
  padding-bottom: 40px;
}

.c-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
}
.c-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.c-footer__logo img { flex-shrink: 0; }
.c-footer__logo span {
  color: var(--text);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
}
.c-footer__tagline {
  margin: 0;
  color: rgba(248, 248, 248, 0.5);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
.c-footer__socials {
  display: flex;
  gap: 20px;
  padding-top: 8px;
}
.c-footer__socials a {
  display: inline-flex;
  color: var(--text);
  transition: transform 160ms ease, opacity 160ms ease;
}
.c-footer__socials a:hover { transform: translateY(-2px); opacity: 0.9; }

.c-footer__eyebrow {
  color: rgba(248, 248, 248, 0.35);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 14px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.c-footer__nav ul,
.c-footer__contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.c-footer__nav a {
  color: rgba(248, 248, 248, 0.75);
  text-decoration: none;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  transition: color 160ms ease;
}
.c-footer__nav a:hover { color: var(--teal); }

.c-footer__contact ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.c-footer__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.c-footer__contact a {
  color: rgba(248, 248, 248, 0.75);
  text-decoration: none;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  line-height: 18px;
}
.c-footer__contact a:hover { color: var(--teal); }

.c-footer__cta {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 50px;
  background: linear-gradient(90deg, #9945FF 0%, #07EDBE 100%);
  text-decoration: none;
  margin-top: 8px;
  transition: filter 160ms ease;
}
.c-footer__cta:hover { filter: brightness(1.1); }
.c-footer__cta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 48px;
  padding: 14px 28px;
  color: var(--text);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -0.01em;
}

.c-footer__legal {
  padding: 0 0 36px;
}
.c-footer__legal hr {
  border: 0;
  height: 1px;
  background: rgba(160, 140, 255, 0.15);
  margin: 0 0 20px;
}
.c-footer__legal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(248, 248, 248, 0.3);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  line-height: 16px;
}

@media (max-width: 1024px) {
  .c-footer { padding: 48px 40px 0; }
  .c-footer__row { grid-template-columns: 1fr; gap: 40px; }
  .c-footer__nav ul { gap: 20px; }
}
@media (max-width: 480px) {
  .c-footer { padding: 40px 24px 0; }
}

/* Hard stop at the footer.
   brand.css adds `body { padding-bottom: max(env(safe-area-inset-bottom), 16px) }`
   for the iPhone home indicator. Because the footer is the last, full-bleed
   element, that padding sat *below* the footer and revealed a strip of the body's
   squiggle background (bigger on notched phones, where the inset is ~34px). Cancel
   it and let the footer's own navy background carry the safe-area inset instead, so
   the footer runs to the true bottom edge with no gap. Kept last so it wins over the
   responsive `padding` shorthands above. */
body { padding-bottom: 0; }
.c-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* == /components/sale-toast/style.css?v=2 == */
/* Sale Toast — the puzzle piece that "separated" from the white You're-not-alone
   band. Its TOP edge is the EXACT wave from wavy-seam-top (same control points,
   via /assets/sale-toast-wave-mask.svg) so it reads as the piece torn off that
   section; it appears only once the user scrolls past that seam (see JS).
   Border = the flowing wavy-seam gradient; surface = the homework band's white +
   light-squiggle tile. --wave = height of the wavy top band. */
.c-sale-toast {
  /* Full-bleed banner: edge to edge and docked to the bottom. The wave band is
     the SAME height as the real seam (100px) and both stretch their 480-unit
     curve across the full viewport width, so the toast's top edge is a 1:1
     copy of the section seam: same amplitude, same phase. */
  --wave: 100px;
  /* STICKY, not fixed: inside .sale-toast-scope (first child, natural position
     = the seam), sticky bottom:0 rides attached at the seam while the section
     scrolls in, then pins to the viewport bottom for the rest of the wrapper.
     The compositor drives it, so it tracks the finger with zero lag (the old
     JS-translated fixed element trailed by a frame on iOS = "shows up late").
     JS sets margin-bottom: -height so it takes no flow space. */
  position: -webkit-sticky;
  position: sticky;
  z-index: 60;                        /* above the nav pill (50) */
  /* Sticky TOP pinned at the dock line (viewport height - toast height): in
     flow (attached at the seam) until it rises to the bottom of the screen,
     then pinned there for the rest of the wrapper. Sticky BOTTOM is the
     inverse timeline (pins early, then scrolls away) — wrong direction.
     100dvh (not a JS innerHeight snapshot) so the dock line follows Chrome/
     Safari's collapsing URL bar live — a JS-measured top left a gap below the
     toast once the bar hid and the viewport grew. JS supplies only --toast-h
     (the measured height). */
  top: calc(100vh - var(--toast-h, 240px));
  top: calc(100dvh - var(--toast-h, 240px));
  width: 100%;
  border-radius: 0;
  /* Own compositor layer: Safari sometimes paints offscreen sticky content
     late (it "pops in" on arrival); promoting it keeps it pre-rendered. */
  transform: translateZ(0);
  will-change: top;
  transition: opacity 200ms ease;
  padding: 5px;                       /* = border thickness */
  background: linear-gradient(110deg,
    #07EDBE 0%, #9945FF 30%, #FF7EC0 55%, #9945FF 80%, #07EDBE 100%);
  background-size: 300% 100%;
  animation: sale-toast-flow 7s linear infinite;
  box-shadow: 0 18px 44px rgba(10, 9, 26, 0.45);
  /* Wavy top edge: the seam curve across the full width, solid below it. */
  -webkit-mask:
    url("/assets/sale-toast-wave-mask.svg") 0 0 / 100% var(--wave) no-repeat,
    linear-gradient(#000, #000) 0 var(--wave) / 100% calc(100% - var(--wave)) no-repeat;
          mask:
    url("/assets/sale-toast-wave-mask.svg") 0 0 / 100% var(--wave) no-repeat,
    linear-gradient(#000, #000) 0 var(--wave) / 100% calc(100% - var(--wave)) no-repeat;
}

/* Hamburger menu open: get the sale toast out of the way. It sits above the
   curtain (z 60 > 40), so without this it covers the menu (Andrew 2026-07-14).
   nav-pill.js sets body.nav-pill--menu-open on toggle; fades back on close. */
body.nav-pill--menu-open .c-sale-toast {
  opacity: 0;
  pointer-events: none;
}
@keyframes sale-toast-flow {
  from { background-position: 0% 50%; }
  to   { background-position: -300% 50%; }
}

.c-sale-toast__inner {
  position: relative;
  border-radius: 0;
  background: #FFFFFF url("/assets/squiggle-bg-light.svg") repeat;
  background-size: 480px 480px;
  overflow: hidden;
  /* Same wave on the white panel, scaled to the OUTER geometry (inner is inset
     5px each side, so the mask spans width+10px at -5px) — the two curves stay
     parallel and the gradient shows as a 5px band along the wavy top. */
  -webkit-mask:
    url("/assets/sale-toast-wave-mask.svg") -5px 0 / calc(100% + 10px) var(--wave) no-repeat,
    linear-gradient(#000, #000) 0 var(--wave) / 100% calc(100% - var(--wave)) no-repeat;
          mask:
    url("/assets/sale-toast-wave-mask.svg") -5px 0 / calc(100% + 10px) var(--wave) no-repeat,
    linear-gradient(#000, #000) 0 var(--wave) / 100% calc(100% - var(--wave)) no-repeat;
}
.c-sale-toast__link {
  display: block;
  /* Top padding clears the wave's deepest trough (y=76 of the 100px band);
     bottom padding rides above the iPhone home indicator. */
  padding: 88px 52px calc(18px + env(safe-area-inset-bottom, 0px)) 22px;
  text-decoration: none;
}
.c-sale-toast__title {
  margin: 0 0 4px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* The site's signature gradient on the headline keeps the panel fun. */
  background: linear-gradient(90deg, #07B896 0%, #9945FF 55%, #E8559D 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  width: fit-content;
}
.c-sale-toast__body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  color: #171717;
}
.c-sale-toast__code {
  display: inline-block;
  padding: 1px 13px 2px;
  border-radius: 500px;               /* true pill, matching everything round */
  background: #0A091A;
  color: #FFFFFF;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.c-sale-toast__close {
  position: absolute;
  /* Below the wave's trough near the right edge so the pink circle never gets
     clipped by the mask. */
  top: 84px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #0A091A;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 160ms ease;
}
.c-sale-toast__close:hover { background: #1E1B3C; }

@media (prefers-reduced-motion: reduce) {
  .c-sale-toast { animation: none; }
}
@media (max-width: 560px) {
  .c-sale-toast__title { font-size: 22px; }
  .c-sale-toast__link { padding: 86px 48px calc(16px + env(safe-area-inset-bottom, 0px)) 18px; }
}


/* == /components/pricing-packages/style.css == */
/* Pricing & Packages: collectible-card design (2026-07-08). Each tier is an art-forward
   flip "trading card" (inspired by the Discord Wumpus/Phibi cards): big white-outlined dog on
   a top-to-bottom tier gradient with a touching-dot "diamond" texture, a brand tile (top-left)
   + 3 distinct glyphs (top-right), price as the hero, one tagline, and a hero-style gradient
   pill CTA (light-purple ring -> dark gap -> mesh fill -> white-outline label). Tapping
   "what's included" flips to a clean dark panel with the details. Per-tier colour + art/icons
   live in the --four/--six/--eight modifier blocks at the bottom.
   Flip JS: /js/pricing-flip.js. */
.c-pricing {
  position: relative;
  /* Transparent (was an opaque var(--bg)) so the continuous body squiggle shows
     through the gutters around the cards — otherwise this section is a blank dark
     void between the whats-included and lifetime-support squiggle fields. The
     cards, FAQ and CTA keep their own backgrounds, so only the empty gaps change. */
  background: transparent;
  overflow: clip;
}
.c-pricing__inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}

/* ---- Header ---- */
.c-pricing__header { display: flex; flex-direction: column; align-items: center; }
.c-pricing__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (site-wide type scale). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--text);
}

/* ---- Cards row ---- */
.c-pricing__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
  width: 100%;
}

/* ---- Flip card ---- */
.c-pricing__card {
  width: 344px;
  max-width: 100%;
  height: 548px;
  perspective: 1600px;
}
.c-pricing__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1);
  transform-style: preserve-3d;
}
.c-pricing__card.is-flipped .c-pricing__card-inner { transform: rotateY(180deg); }
/* Midpoint crossfade (see .c-pricing__face comment). pointer-events keeps taps
   off whichever face is hidden. */
.c-pricing__front { opacity: 1; }
.c-pricing__back { opacity: 0; pointer-events: none; }
.c-pricing__card.is-flipped .c-pricing__front { opacity: 0; pointer-events: none; }
.c-pricing__card.is-flipped .c-pricing__back { opacity: 1; pointer-events: auto; }
.c-pricing__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* iOS WebKit ignores ancestor backface-visibility for children with their own
     filter (the hero art's drop-shadow outline), so the hidden face bled through
     during the rotation. Crossfade the faces around the flip's midpoint (0.6s
     flip; fade runs 240-360ms, centred on the edge-on 300ms mark). Opacity runs
     on the compositor in lockstep with the transform — a delayed visibility
     swap ran on the main thread and could blank the whole card mid-flip. */
  transition: opacity 120ms linear 240ms;
  border-radius: 26px;
  overflow: hidden;
  border: 8px solid var(--c);
  background: var(--bg-elev-1);
}

/* ---- Front: art panel ---- */
.c-pricing__art {
  position: relative;
  height: 52%;
  /* top-to-bottom tier gradient */
  background: linear-gradient(180deg, var(--c-top) 0%, var(--c) 55%, var(--c-deep) 100%);
  overflow: hidden;
}
/* touching dots -> the smooth gradient reads through as little diamonds */
.c-pricing__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 9px 9px, rgba(16, 14, 38, 0.34) 9px, transparent 9.6px);
  background-size: 18px 18px;
}
.c-pricing__hero {
  position: absolute;
  inset: 8% 11%;
  background: var(--art) center / contain no-repeat;
  /* white keyline (matches the sticker-style dogs) + soft depth shadow.
     16 evenly-spaced directions so the outline stays smooth/round on busy shapes
     (8 directions left visible polygon spikes on Dog-Speak). */
  filter:
    drop-shadow(2.6px 0 0 #fff) drop-shadow(2.4px 0.99px 0 #fff) drop-shadow(1.84px 1.84px 0 #fff) drop-shadow(0.99px 2.4px 0 #fff)
    drop-shadow(0 2.6px 0 #fff) drop-shadow(-0.99px 2.4px 0 #fff) drop-shadow(-1.84px 1.84px 0 #fff) drop-shadow(-2.4px 0.99px 0 #fff)
    drop-shadow(-2.6px 0 0 #fff) drop-shadow(-2.4px -0.99px 0 #fff) drop-shadow(-1.84px -1.84px 0 #fff) drop-shadow(-0.99px -2.4px 0 #fff)
    drop-shadow(0 -2.6px 0 #fff) drop-shadow(0.99px -2.4px 0 #fff) drop-shadow(1.84px -1.84px 0 #fff) drop-shadow(2.4px -0.99px 0 #fff)
    drop-shadow(0 8px 18px rgba(10, 9, 26, 0.4));
}
.c-pricing__tile {
  position: absolute;
  top: 16px; left: 16px;
  width: 54px; height: 54px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
}
.c-pricing__tile::after {
  content: "";
  width: 32px; height: 32px;
  background: var(--c-deep);
  -webkit-mask: var(--glyph) center / contain no-repeat;
          mask: var(--glyph) center / contain no-repeat;
}
.c-pricing__strip {
  position: absolute;
  top: 18px; right: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.c-pricing__strip span { width: 25px; height: 25px; background: rgba(255, 255, 255, 0.55); }
.c-pricing__strip .s1 { -webkit-mask: var(--g1) center / contain no-repeat; mask: var(--g1) center / contain no-repeat; }
.c-pricing__strip .s2 { -webkit-mask: var(--g2) center / contain no-repeat; mask: var(--g2) center / contain no-repeat; }
.c-pricing__strip .s3 { -webkit-mask: var(--g3) center / contain no-repeat; mask: var(--g3) center / contain no-repeat; }

/* ---- Front: band ---- */
.c-pricing__band {
  height: 48%;
  padding: 20px 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.c-pricing__eyebrow {
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-lt);
}
.c-pricing__price {
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 50px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 3px 0 0;
}
/* No box (house rule: no glassmorphism) — just the dot + line. */
.c-pricing__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
}
.c-pricing__tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-lt); flex-shrink: 0; }
.c-pricing__tag b { color: #F8F8F8; font-weight: 800; font-size: 15px; line-height: 1.3; }

/* Gradient-pill CTA — hero button treatment: light-purple ring -> dark gap -> mesh fill
   -> dark label with a thick white outline (paint-order stroke). */
.c-pricing__card-cta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 5px solid var(--light-purple);
  border-radius: 999px;
  background: var(--bg);
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease;
}
.c-pricing__card-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.c-pricing__card-cta:active { transform: scale(0.98); }
.c-pricing__card-cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  padding: 13px;
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
}
.c-pricing__card-cta-label {
  color: #0A091A;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 21px;
  -webkit-text-stroke: 4px #fff;
          text-stroke: 4px #fff;
  paint-order: stroke fill;
}
.c-pricing__flip {
  /* Plain tier-colored text link (Andrew: no pill-under-pill below the CTA) —
     the tier's light color makes it clearly tappable without competing with
     the Get-started pill above it. */
  margin: 12px auto 0;
  background: none;
  border: none;
  color: var(--c-lt);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: filter 160ms ease;
}
.c-pricing__flip:hover { filter: brightness(1.15); }
.c-pricing__flip svg { width: 15px; height: 15px; }

/* ---- Back: clean dark details panel ---- */
.c-pricing__back {
  transform: rotateY(180deg);
  /* Extra bottom padding reserves room for the flip-back button, which is
     pinned to the card's bottom edge (not floated mid-card after the list). */
  padding: 28px 26px 82px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.c-pricing__back-name {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}
.c-pricing__back-price { color: var(--c-lt); font-weight: 900; font-size: 26px; margin: 6px 0 12px; font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif; }
.c-pricing__back-note { color: rgba(248, 248, 248, 0.8); font-size: 15px; line-height: 1.5; margin: 0 0 13px; font-family: 'Nunito', system-ui, sans-serif; }
.c-pricing__back-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.c-pricing__back-list li {
  position: relative;
  padding-left: 19px;
  color: rgba(248, 248, 248, 0.85);
  font-size: 15px;
  line-height: 1.45;
  font-family: 'Nunito', system-ui, sans-serif;
}
.c-pricing__back-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-lt); }
/* Back flip control: symbol only, a centered round icon button. */
.c-pricing__flip--back {
  /* Pinned to the bottom edge of the back face so it never floats mid-card
     when the content is short. Tier-colored (see variant styles below). */
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--c);
  display: grid;
  place-items: center;
  gap: 0;
  color: var(--c-lt);
  transition: color 160ms ease, background 160ms ease;
}
.c-pricing__flip--back:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.c-pricing__flip--back svg { width: 19px; height: 19px; }

/* ---- Per-tier colour + art/icons ---- */
.c-pricing__card--four {
  --c: #477ED6; --c-top: #5B8FE0; --c-deep: #243a6b; --c-lt: #A0C7FF;
  --art: url("/assets/icons/playground/Dog-Wait.svg");
  --glyph: url("/assets/icons/playground/Paw-Print-Purple.svg");
  --g1: url("/assets/icons/playground/Loop-Teal.svg");
  --g2: url("/assets/icons/playground/Bone-Blue.svg");
  --g3: url("/assets/icons/playground/Dog-House-Blue.svg");
}
.c-pricing__card--six {
  --c: #9945FF; --c-top: #B06BFF; --c-deep: #4b1f80; --c-lt: #C9A6FF;
  --art: url("/assets/icons/playground/Dog-Playing-Catch.svg");
  --glyph: url("/assets/icons/playground/Lightning-Bolt-Purple.svg");
  --g1: url("/assets/icons/playground/Dog-Bone-Blue.svg");
  --g2: url("/assets/icons/playground/Loop-Purple-1.svg");
  --g3: url("/assets/icons/playground/Squiggle-Purple.svg");
}
.c-pricing__card--eight {
  --c: #C77DFF; --c-top: #D9A6FF; --c-deep: #6b3f8f; --c-lt: #E7CCFF;
  --art: url("/assets/icons/playground/Dog-Speak.svg");
  --glyph: url("/assets/icons/playground/Crown-Blue.svg");
  --g1: url("/assets/icons/playground/Shuttlecock.svg");
  --g2: url("/assets/icons/playground/Award.svg");
  --g3: url("/assets/icons/playground/Football-Teal.svg");
}

/* ---- FAQ (pricing logistics) ---- */
.c-pricing__faq {
  width: 100%;
  max-width: 820px;
  padding: 24px 28px 26px;
  border-radius: 16px;
  border: 1px solid var(--surface-border);
  /* Solid (was translucent) so the body squiggle behind the transparent section
     doesn't bleed through and hurt readability. */
  background: var(--bg-elev-1);
  box-sizing: border-box;
}
/* Title reads a full step above the question rows (26px CeraRound vs 16px
   Nunito) so the panel has clear hierarchy. */
.c-pricing__faq-title { margin: 0 0 10px; font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif; font-weight: 900; font-size: 26px; line-height: 1.15; color: var(--text); }
.c-pricing__faq-item { border-bottom: 1px solid var(--surface-border); }
.c-pricing__faq-item:last-child { border-bottom: none; }
.c-pricing__faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 2px; cursor: pointer; list-style: none;
  color: var(--text); font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; font-weight: 700;
  /* Balanced two-line wraps: no single-word orphans ("package?", "metro?"). */
  text-wrap: balance;
}
.c-pricing__faq-item summary::-webkit-details-marker { display: none; }
.c-pricing__faq-chev { flex-shrink: 0; color: var(--light-purple); transition: transform 180ms ease; }
.c-pricing__faq-item[open] .c-pricing__faq-chev { transform: rotate(180deg); }
.c-pricing__faq-body { padding: 0 2px 14px; color: rgba(248, 248, 248, 0.68); font-family: 'Nunito', system-ui, sans-serif; font-size: 16px; line-height: 1.6; }

/* ---- Bottom CTA: lead line + a button that matches the card CTAs (ring -> dark gap
   -> mesh fill -> white-outline label), but keeps the animated Paper mesh. ---- */
.c-pricing__cta-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.c-pricing__cta-lead {
  margin: 0;
  color: rgba(248, 248, 248, 0.72);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
.c-pricing__cta-solid {
  display: inline-flex;
  padding: 6px;
  border: 5px solid var(--light-purple);
  border-radius: 999px;
  background: var(--bg);
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.c-pricing__cta-solid:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-glow-violet); }
.c-pricing__cta-solid:active { transform: scale(0.98); }
.c-pricing__cta-solid-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 14px 40px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
}
.c-pricing__cta-mesh { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; }
.c-pricing__cta-mesh canvas { display: block; width: 100% !important; height: 100% !important; border-radius: inherit; }
.c-pricing__cta-solid-label {
  position: relative;
  z-index: 1;
  color: #0A091A;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 24px;
  -webkit-text-stroke: 4px #fff;
          text-stroke: 4px #fff;
  paint-order: stroke fill;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .c-pricing__inner { padding: 56px 20px; gap: 32px; }
}
/* Phones: cards fill the width (not the fixed 344px), but keep a comfortable
   side margin so they aren't edge-to-edge. */
@media (max-width: 560px) {
  .c-pricing__inner { padding: 56px 26px; }
  .c-pricing__cards { gap: 20px; }
  .c-pricing__card { width: 100%; max-width: 440px; height: 560px; }
}
@media (max-width: 480px) {
  .c-pricing__cta-solid-inner { padding: 13px 24px; }
  .c-pricing__cta-solid-label { font-size: 20px; }
  .c-pricing__faq { padding: 20px 18px 22px; }
}

/* == /components/pain-mirror/style.css == */
/* Pain-Mirror — "Sound familiar?" — behavior-segmented cards.
   DESIGN: pink/coral section accent. The full repeating squiggle is dialled back to a
   soft corner band (radial-masked, low opacity); a big coral blob (top-right) and a
   violet blob (bottom-left) carry the background interest instead. Each behavior group
   keeps its own accent so the categories still read as distinct.
   ANIMATION HOOKS: [data-animate] on header + cards (scroll-reveal / stagger),
   [data-three-blob] on the blob layer (a soft Three.js metaball could replace it later). */
.c-pain-mirror {
  position: relative;
  background: var(--bg);
  overflow: clip;
}
/* coral + violet gradient blobs — the new background interest */
.c-pain-mirror__blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: clip;
}
.c-pain-mirror__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
}
.c-pain-mirror__blob--coral {
  width: 540px; height: 540px;
  top: -200px; right: -160px;
  background: radial-gradient(circle at 35% 35%, #FF7EC0 0%, rgba(255, 126, 192, 0.35) 45%, transparent 72%);
}
.c-pain-mirror__blob--violet {
  width: 480px; height: 480px;
  bottom: -220px; left: -140px;
  background: radial-gradient(circle at 60% 40%, #9945FF 0%, rgba(153, 69, 255, 0.30) 45%, transparent 72%);
  opacity: 0.35;
}
/* squiggle pattern — kept only as a faded top-right corner wash */
.c-pain-mirror__pattern {
  position: absolute;
  inset: 0;
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 420px 420px;
  opacity: 0.16;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0,0,0,0.45) 38%, transparent 70%);
          mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0,0,0,0.45) 38%, transparent 70%);
}
.c-pain-mirror__inner {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}

/* ---- Header ---- */
.c-pain-mirror__header { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.c-pain-mirror__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface-card);
  border: 1px solid var(--navy);
  border-radius: 100px;
  color: var(--light-purple);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.c-pain-mirror__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--light-purple); flex-shrink: 0;
}
.c-pain-mirror__title {
  margin: 0;
  max-width: 880px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}
.c-pain-mirror__title-accent {
  background: linear-gradient(92deg, #FF7EC0 0%, #FFA98E 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.c-pain-mirror__eyebrow { color: var(--pink); }
.c-pain-mirror__eyebrow-dot { background: var(--pink); }
.c-pain-mirror__subtitle {
  margin: 0;
  max-width: 620px;
  color: rgba(248, 248, 248, 0.55);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* ---- Grid of behavior cards ---- */
.c-pain-mirror__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  align-items: start;
}
.c-pain-mirror__card {
  --accent: var(--light-purple);
  --accent-soft: rgba(160, 140, 255, 0.16);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 26px 28px;
  border-radius: 20px;
  border: 1px solid var(--surface-border);
  background: linear-gradient(180deg, rgba(20, 18, 42, 0.7) 0%, rgba(20, 18, 42, 0.35) 100%);
  transition: border-color 200ms ease, transform 200ms ease;
}
.c-pain-mirror__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 20px 0 0 20px;
  background: var(--accent);
}
.c-pain-mirror__card:hover { border-color: var(--accent-soft); transform: translateY(-3px); }
/* Behavior accents */
.c-pain-mirror__card--reactivity { --accent: var(--pink);        --accent-soft: rgba(255, 126, 192, 0.20); }
.c-pain-mirror__card--aggression { --accent: #E85C9E;           --accent-soft: rgba(232, 92, 158, 0.20); }
.c-pain-mirror__card--fear       { --accent: var(--light-blue);  --accent-soft: rgba(160, 199, 255, 0.20); }
.c-pain-mirror__card--puppy      { --accent: var(--teal);        --accent-soft: rgba(7, 237, 190, 0.20); }
.c-pain-mirror__card--general    { --accent: var(--light-purple); --accent-soft: rgba(160, 140, 255, 0.20); }

.c-pain-mirror__card-title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.c-pain-mirror__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.c-pain-mirror__list li {
  position: relative;
  padding-left: 22px;
  color: rgba(248, 248, 248, 0.78);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
}
.c-pain-mirror__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.c-pain-mirror__list em { font-style: italic; color: var(--text); }

/* ---- Closer ---- */
.c-pain-mirror__closer {
  margin: 4px 0 0;
  max-width: 720px;
  text-align: center;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(248, 248, 248, 0.85);
}
.c-pain-mirror__closer-accent {
  background: var(--mesh-text-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Animation hooks (markup only — no JS yet): [data-animate="fade-up"|"stagger"] on the
   header / grid / closer; [data-three-blob] on .c-pain-mirror__blobs. */

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .c-pain-mirror__inner { padding: 56px 24px; gap: 32px; }
  .c-pain-mirror__grid { grid-template-columns: 1fr; max-width: 560px; }
  .c-pain-mirror__title { font-size: 36px; }
  .c-pain-mirror__closer { font-size: 19px; }
  .c-pain-mirror__blob--coral { width: 360px; height: 360px; top: -140px; right: -120px; }
  .c-pain-mirror__blob--violet { width: 320px; height: 320px; }
}
@media (max-width: 480px) {
  .c-pain-mirror__title { font-size: 30px; }
  .c-pain-mirror__card { padding: 22px; }
}

/* == /components/pain-mirror-v2/style.css?v=2 == */
/* Pain Mirror v2 — "You're not alone."
   Dark→white section gradient (oklab interpolation, matches Hero Testimonial).
   Mesh squiggle pattern carried through from hero.
   Centered arched frame holds Andrew's video; 4 blob callouts overlay the
   frame corners with z-index above the gradient border. */

.c-pm2 {
  position: relative;
  width: 100%;
  /* Top padding leaves a small dark "breath" between the hero CTA and the
     headline. Hero itself is tall enough now to push pain-mirror below the
     fold on a typical viewport. */
  padding: 80px 80px 96px;
  /* Body owns the squiggle pattern. This section is a transparent-to-white
     gradient layered on top, so the squiggle continues from the hero into
     pain-mirror's upper portion, then fades out as the bg goes white. */
  background: linear-gradient(in oklab 180deg,
              transparent 0%,
              transparent 32%,
              #ffffff 75%);
  overflow: hidden;
}

/* Old inline SVG mesh disabled — section uses the same CSS background image
   as the hero (above) so the pattern tiles continuously instead of restarting. */
.c-pm2__mesh {
  display: none;
}

/* Headline */
.c-pm2__header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 56px;
}
.c-pm2__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (matches "How I Can Help" and "From First Call…"). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text, #F8F8F8);
}
.c-pm2__title-accent {
  background: linear-gradient(90deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Stage — fixed-height relative container so the frame + blobs anchor predictably */
.c-pm2__stage {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 720px;
  margin: 0 auto;
  z-index: 1;
}

/* Frame — absolutely centered, arched/tombstone shape, gradient border */
.c-pm2__frame {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 680px;
  padding: 6px;
  background: linear-gradient(90deg, #9945FF 0%, #07EDBE 100%);
  border-radius: 999px 999px 60px 60px;
  box-shadow: 0 30px 80px rgba(153, 69, 255, 0.25);
  z-index: 1;
}
.c-pm2__frame-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 993px 993px 54px 54px;
  background: #0A091A;
  overflow: hidden;
}
.c-pm2__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* Captions — a few words at a time in the open space ABOVE the video arch,
   styled like the Free Consultation pill (Andrew 2026-07-11): signature
   gradient pill, dark CeraRound text with a thick white outline. Fades per
   cue via .is-on. */
.c-pm2__captions {
  position: absolute;
  /* BOTTOM-anchored to a line just above the frame, so a two-line cue grows
     UPWARD instead of down into the video arch (the single-line spacing stays
     identical). Per-breakpoint values = stage height - (frame top - gap). */
  bottom: 674px;                       /* stage 720, frame top 60, 14px gap */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 94%;
  z-index: 2;
  padding: 12px 28px;
  border-radius: 500px;
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  box-shadow: 0 12px 30px rgba(10, 9, 26, 0.45);
  text-align: center;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #0A091A;
  -webkit-text-stroke: 5px #FFFFFF;
          text-stroke: 5px #FFFFFF;
  paint-order: stroke fill;
  text-wrap: balance;
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}
.c-pm2__captions.is-on { opacity: 1; }

/* Sound control — the blue blob (slot 4) IS the control now: quote removed,
   bare white speaker glyph centered in the kept blob shape (Andrew
   2026-07-11). Tap restarts from 0:00 with sound; tap again mutes. The blob
   layer has pointer-events:none, so the button re-enables its own. */
.c-pm2__sound {
  pointer-events: auto;
  width: 74px;                        /* generous tap target around the glyph */
  height: 74px;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  filter: drop-shadow(0 3px 10px rgba(10, 9, 26, 0.8));
  transition: transform 140ms ease;
}
.c-pm2__sound svg { width: 44px; height: 44px; }
.c-pm2__sound:hover { transform: scale(1.1); }
.c-pm2__sound:active { transform: scale(0.92); }

.c-pm2__frame-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Blobs — absolutely positioned, z-index above frame */
.c-pm2__blob {
  position: absolute;
  width: 500px;
  height: 300px;
  z-index: 10;
  /* Decorative callouts only — never swallow taps meant for the sound pill
     (blob 2 overlaps the pill's corner on mobile). */
  pointer-events: none;
  /* GSAP owns opacity/transform from frame 1; we just provide the rest-tilt
     fallback for users with prefers-reduced-motion. */
  opacity: 0;
  transform: rotate(var(--rest-tilt, 0deg));
  /* Subtle shape-aware shadow — pops the blob off the white half of the
     gradient without making a rectangular halo (drop-shadow follows alpha). */
  filter: drop-shadow(0 8px 18px rgba(10, 9, 26, 0.35));
  will-change: transform, filter;
}
/* Flip TL + TR blobs 180° so their wider lobe arches DOWNWARD and frames the video. */
.c-pm2__blob--1 .c-pm2__blob-shape,
.c-pm2__blob--4 .c-pm2__blob-shape {
  transform: rotate(180deg);
  transform-origin: center center;
}
.c-pm2__blob.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.c-pm2__blob-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.c-pm2__blob-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.c-pm2__blob-quote {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: var(--text, #F8F8F8);
  text-wrap: pretty;
  max-width: 400px;
  /* Italic body for that "quote from a real person" feel. */
  font-style: italic;
}
/* Curly quotation marks wrap every quote so they read as a person speaking,
   not a tagline. */
.c-pm2__blob-quote::before { content: "\201C"; margin-right: 1px; }
.c-pm2__blob-quote::after  { content: "\201D"; margin-left: 1px; }

/* Staggered diagonal sweep (desktop, ≥1024px) — not symmetric.
   TL highest → TR mid-high → BR mid-low → BL lowest.
   Each blob overlaps the frame edge by ~80–120px so they sit on top of the
   container, not float in white space beside it. The mid-row blobs are pulled
   slightly outward to add to the asymmetry. */
/* Vertical rhythm: left → right → left → right, evenly spaced so no two
   blobs overlap each other and the right pair stays anchored to the frame
   instead of drifting off the bottom. */
/* Paired layout: TR aligned with TL at the top, BR aligned with BL at the
   bottom, each with a small offset so they don't look like a rigid grid. */
.c-pm2__blob--1 { top: 30px;  left: 0;  } /* TL */
.c-pm2__blob--4 { top: 60px;  right: 0; } /* TR — the sound blob */
.c-pm2__blob--3 { top: 360px; left: 0;  } /* BL */
.c-pm2__blob--2 { top: 400px; right: 0; } /* BR — same band as BL */
.c-pm2__blob .c-pm2__blob-content { padding: 40px 56px; }
/* TR's path used to read as left-of-center because its geometry was biased
   left of the viewBox AND it gets flipped 180°. Now fixed at the SVG level
   (path transform translate(15 0)) so all blobs use the same padding. */

/* CTA */
.c-pm2__cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}
.c-pm2__cta-line {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 28px;
  color: rgba(10, 9, 26, 0.72);
  text-align: center;
}
.c-pm2__cta-pill {
  display: inline-flex;
  align-items: center;
  padding: 18px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  color: #0A091A;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(153, 69, 255, 0.35);
  transition: filter 160ms ease, transform 160ms ease;
  /* Thick white border around the label. paint-order draws the stroke first so
     it sits AROUND the dark text instead of eating into the glyphs. */
  -webkit-text-stroke: 6px #FFFFFF;
          text-stroke: 6px #FFFFFF;
  paint-order: stroke fill;
}
.c-pm2__cta-pill:hover  { filter: brightness(1.07); }
.c-pm2__cta-pill:active { transform: scale(0.98); }

/* ─── Tablet: 768–1023px — shrink frame, tighten blob positions ──────────── */
@media (max-width: 1023px) {
  .c-pm2 { padding: 72px 32px; }
  .c-pm2__stage { height: 720px; max-width: 720px; }
  .c-pm2__frame { width: 380px; height: 580px; top: 70px; }
  .c-pm2__captions { bottom: 664px; } /* stage 720, frame 70 */
  .c-pm2__blob { width: 280px; height: 170px; }
  .c-pm2__blob-quote { font-size: 16px; line-height: 22px; }
  .c-pm2__blob--1 { top: 80px;  left: 0;    }
  .c-pm2__blob--4 { top: 80px;  right: 0;   }
  .c-pm2__blob--3 { top: 480px; left: 0;    }
  .c-pm2__blob--2 { top: 480px; right: 0;   }
}

/* ─── Mobile: ≤767px — KEEP blobs absolutely positioned, just smaller.
       Frame shrinks; blobs hug the four corners and overlap the frame edges
       (so the CTA stays high on screen). ───────────────────────────────── */
@media (max-width: 767px) {
  .c-pm2 { padding: 56px 12px 56px; }
  /* title size now handled by the shared clamp above */
  .c-pm2__header { margin-bottom: 28px; }
  .c-pm2__stage {
    height: 700px;
    max-width: 100%;
  }
  .c-pm2__frame {
    /* Noticeably smaller than the old 320x560 (Andrew: "I need to be
       smaller") and EXACTLY 9:16 like the video so object-fit: cover crops
       nothing. */
    width: 270px;
    height: 480px;
    top: 84px;
  }
  /* Caption pill on phones: big type, sitting in the gap above the frame. */
  .c-pm2__captions { font-size: 24px; bottom: 636px; padding: 10px 22px; -webkit-text-stroke: 4px #fff; text-stroke: 4px #fff; } /* stage 700, frame 84, 20px gap */
  .c-pm2__sound svg { width: 36px; height: 36px; }
  /* Uniform mobile blob — sized once to fit the LONGEST quote across all
     topics (the 70-char reactivity TR), so every blob ends up the same
     dimensions regardless of content length. */
  .c-pm2__blob {
    width: 200px;
    height: 144px;
  }
  .c-pm2__blob .c-pm2__blob-content { padding: 14px 22px; }
  .c-pm2__blob-quote {
    font-size: 13px;
    line-height: 17px;
    max-width: 144px;
  }
  /* Mobile stagger — left → right → left → right.
     Positions tuned so every blob (including BR) overlaps the larger frame
     instead of floating off the bottom. */
  /* Tuned to Andrew's markup 2026-07-11 round 2: TL and TR up + further out
     (off Andrew's face/shoulders), BL down + out (off his hands, mirroring
     the BR corner), BR unchanged. Captions live above the frame now. */
  .c-pm2__blob--1 { top: 108px; left: -58px;  } /* 1st — up + a touch further left of Andrew's head */
  .c-pm2__blob--4 { top: 135px; right: -34px; } /* 2nd — the sound blob, over the right shoulder */
  .c-pm2__blob--3 { top: 470px; left: -30px;  } /* 3rd — bottom-left corner (Andrew: perfect) */
  .c-pm2__blob--2 { top: 520px; right: -18px; } /* 4th — raised a little on the bottom-right corner */
  .c-pm2__cta { margin-top: 16px; }
  .c-pm2__cta-pill { font-size: 23px; padding: 16px 30px; }
}

@media (max-width: 360px) {
  .c-pm2__stage { height: 660px; }
  .c-pm2__frame { width: 240px; height: 427px; top: 74px; }
  .c-pm2__blob  { width: 184px; height: 136px; }
  .c-pm2__blob .c-pm2__blob-content { padding: 12px 20px; }
  .c-pm2__blob-quote { font-size: 12px; line-height: 16px; max-width: 132px; }
  .c-pm2__captions { font-size: 20px; bottom: 604px; padding: 9px 18px; } /* stage 660, frame 74 */
  .c-pm2__sound svg { width: 32px; height: 32px; }
  .c-pm2__blob--1 { top: 100px; left: -50px;  }
  .c-pm2__blob--4 { top: 124px; right: -28px; }
  .c-pm2__blob--3 { top: 428px; left: -26px;  }
  .c-pm2__blob--2 { top: 468px; right: -18px; }
}

/* Reduced motion — no staggered fades, callouts visible immediately */
@media (prefers-reduced-motion: reduce) {
  .c-pm2__blob {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* == /components/my-approach/style.css == */
/* My Approach — philosophy block. DESIGN: violet section accent. Left-edge violet→teal
   vertical wash bleeds in from the start of the section; the repeating squiggle is dialled
   back to a faint diagonal band (linear-masked) instead of a full tile; a violet blob anchors
   the lower-left. Pairs visually with `the-tools` (multicolor sticker set) — same width & rhythm.
   ANIMATION HOOKS: [data-animate] on header / body / pillars; [data-rive-slot="calm-dog"] sits
   in the pillar row (a small Rive "settling dog" loop could live there); [data-three-blob] on
   the blob layer. */
.c-my-approach {
  position: relative;
  background: var(--bg);
  overflow: clip;
}
/* left-edge violet→teal wash */
.c-my-approach__wash {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(153, 69, 255, 0.16) 0%, rgba(7, 237, 190, 0.07) 50%, transparent 100%);
}
.c-my-approach__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.c-my-approach__blob--violet {
  width: 520px; height: 520px;
  bottom: -260px; left: -120px;
  background: radial-gradient(circle at 50% 40%, #9945FF 0%, rgba(153, 69, 255, 0.30) 45%, transparent 72%);
  opacity: 0.4;
}
.c-my-approach__blob--teal {
  width: 380px; height: 380px;
  top: -180px; right: 8%;
  background: radial-gradient(circle at 50% 50%, #07EDBE 0%, rgba(7, 237, 190, 0.22) 45%, transparent 72%);
  opacity: 0.22;
}
/* squiggle — faint diagonal band only */
.c-my-approach__pattern {
  position: absolute;
  inset: 0;
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 400px 400px;
  opacity: 0.14;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 55%, #000 70%, transparent 92%);
          mask-image: linear-gradient(120deg, transparent 30%, #000 55%, #000 70%, transparent 92%);
}
.c-my-approach__inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  box-sizing: border-box;
}

/* ---- Header ---- */
.c-my-approach__header { display: flex; flex-direction: column; gap: 16px; }
.c-my-approach__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface-card);
  border: 1px solid var(--navy);
  border-radius: 100px;
  width: fit-content;
  color: var(--light-purple);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.c-my-approach__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--light-purple); flex-shrink: 0;
}
.c-my-approach__title {
  margin: 0;
  max-width: 880px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
}
.c-my-approach__title-accent {
  background: linear-gradient(92deg, #9945FF 0%, #C77DFF 60%, #07EDBE 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---- Body prose ---- */
.c-my-approach__body {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.c-my-approach__body p {
  margin: 0;
  color: rgba(248, 248, 248, 0.72);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
.c-my-approach__body em { font-style: italic; color: var(--text); }
.c-my-approach__body p:first-child {
  font-size: 18px;
  color: rgba(248, 248, 248, 0.82);
}

/* ---- Pillars ---- */
.c-my-approach__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.c-my-approach__pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 28px;
  border-radius: 20px;
  border: 1px solid rgba(160, 140, 255, 0.14);
  background: linear-gradient(180deg, rgba(160, 140, 255, 0.06) 0%, rgba(160, 140, 255, 0) 100%);
  overflow: clip;
  transition: border-color 200ms ease, transform 200ms ease;
}
.c-my-approach__pillar:hover { border-color: rgba(160, 140, 255, 0.32); transform: translateY(-3px); }
.c-my-approach__pillar-mark {
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, rgba(7, 237, 190, 0.45) 0%, rgba(160, 140, 255, 0.25) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.c-my-approach__pillar-title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
  color: var(--text);
}
.c-my-approach__pillar-body {
  margin: 0;
  color: rgba(248, 248, 248, 0.6);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .c-my-approach__inner { padding: 56px 24px; gap: 28px; }
  .c-my-approach__title { font-size: 36px; }
  .c-my-approach__body p, .c-my-approach__body p:first-child { font-size: 16px; }
  .c-my-approach__pillars { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 480px) {
  .c-my-approach__title { font-size: 30px; }
}

/* == /components/the-tools/style.css == */
/* My go-to tools — Sticker Pinboard direction (Paper QQQ-0 → code).
   Scattered, tilted brand-color stickers on dark #0A091A with brand squiggle BG
   and small organic blob accents. No GSAP yet — idle drift + hover-expand pending
   sign-off. */

.c-the-tools {
  position: relative;
  background: var(--bg);
  padding: clamp(64px, 8vw, 96px) 0 clamp(80px, 9vw, 112px);
  overflow: hidden;
  min-height: 920px;
}

/* Brand squiggle pattern — same asset used by pain-mirror-v2 / my-approach */
.c-the-tools__pattern {
  position: absolute;
  inset: 0;
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 420px 420px;
  opacity: 0.13;
  pointer-events: none;
}

.c-the-tools__inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
}

/* ---- Header ---- */
.c-the-tools__header { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.c-the-tools__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 7vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--text);
}

/* ---- Pinboard ---- */
.c-the-tools__pinboard {
  position: relative;
  width: 100%;
  height: 760px;
  margin-top: 8px;
  /* Default: allow native scroll. touch-action: none gets applied only on
     desktop (≥1081px) inside the GSAP Draggable media query — below that,
     drag is disabled and the page needs to scroll normally. */
}

@media (min-width: 1081px) {
  .c-the-tools__pinboard { touch-action: none; }
}

/* ---- Sticker card — all cards are the same size now ---- */
.c-tool {
  position: absolute;
  width: 240px;
  height: 312px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--sticker-bg);
  color: #0A091A;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.c-tool:active { cursor: grabbing; }

.c-tool__photo {
  width: 100%;
  height: 156px;
  border-radius: 12px;
  background: #0A091A;
  border: 2px solid rgba(10, 9, 26, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.c-tool__photo svg { display: block; }

.c-tool__name {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
  color: #0A091A;
}
.c-tool__name--light { color: var(--text); }

.c-tool__desc {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  color: #0A091A;
}
.c-tool__desc--light { color: rgba(248, 248, 248, 0.94); }

/* ---- Organic blob badge (shared by "98% of my dogs" + "My go-to") ---- */
.c-tool__blob-badge {
  position: absolute;
  width: 92px;
  height: 68px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.c-tool__blob-badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.c-tool__blob-badge span {
  position: relative;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.05;
  color: #0A091A;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Chaser — "98% of my dogs" badge, top-right, slightly raised */
.c-tool__blob-badge:not(.c-tool__blob-badge--mygoto) {
  top: -36px;
  right: -14px;
  transform: rotate(8deg);
}
.c-tool__blob-badge:not(.c-tool__blob-badge--mygoto) span {
  transform: rotate(-6deg);
}

/* Slip leash — "My go-to" badge, top-left */
.c-tool__blob-badge--mygoto {
  top: -28px;
  left: -16px;
  transform: rotate(-12deg);
}
.c-tool__blob-badge--mygoto span {
  transform: rotate(8deg);
  color: #0A091A;
}

/* ---- TOP ROW positioning + colorways ---- */
/* All 9 cards: same 240x312 size. Per-card position + color + rest rotation
   (--tilt) — JS reads --tilt to restore rotation on drop. */

.c-tool--clicker  { --sticker-bg: var(--teal);         --tilt: -3deg; left:   0px; top:  20px; }
.c-tool--treats   { --sticker-bg: var(--pink);         --tilt:  4deg; left: 264px; top:  80px; }
.c-tool--chaser   { --sticker-bg: var(--violet);       --tilt: -2deg; left: 528px; top:   0px; }
.c-tool--slip     { --sticker-bg: var(--light-blue);   --tilt:  3deg; left: 792px; top:  80px; }
.c-tool--dogbed   { --sticker-bg: #F1E0FF;             --tilt: -4deg; left:1056px; top:  20px; }
.c-tool--longline { --sticker-bg: var(--mid-purple);   --tilt:  2deg; left: 132px; top: 400px; }
.c-tool--ecollar  { --sticker-bg: var(--light-purple); --tilt: -3deg; left: 396px; top: 420px; }
.c-tool--kennel   { --sticker-bg: var(--blue);         --tilt:  3deg; left: 660px; top: 400px; }
.c-tool--prong    { --sticker-bg: #F1E0FF;             --tilt: -2deg; left: 924px; top: 420px; }

.c-tool { transform: rotate(var(--tilt, 0deg)); }

/* Cards with light text on saturated dark backgrounds (violet, mid-purple, blue, light-purple) */
.c-tool--chaser .c-tool__name,
.c-tool--chaser .c-tool__desc,
.c-tool--kennel .c-tool__name,
.c-tool--kennel .c-tool__desc { color: var(--text); }
.c-tool--chaser .c-tool__desc,
.c-tool--kennel .c-tool__desc { color: rgba(248, 248, 248, 0.94); }

/* ---- Responsive ---- */

/* Tablet — 3 across, smaller cards */
@media (max-width: 1080px) {
  .c-the-tools__inner { padding: 0 32px; }
  .c-the-tools__pinboard {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 14px;
    padding: 24px 0 16px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .c-tool {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    height: 270px;
    cursor: default;
  }
  .c-tool__photo { height: 132px; }
  .c-tool__name { font-size: 18px; }
  .c-tool__desc { font-size: 11px; }
}

/* Phone — 2 across, compact so most of the tools fit on screen at once */
@media (max-width: 640px) {
  .c-the-tools__inner { padding: 0 16px; gap: 20px; }
  .c-the-tools__title { font-size: clamp(36px, 11vw, 48px); }
  .c-the-tools__pinboard {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
    padding: 16px 0 12px;
    max-width: 100%;
  }
  .c-tool {
    height: 222px;
    padding: 12px;
    border-radius: 14px;
    gap: 8px;
  }
  .c-tool__photo {
    height: 108px;
    border-radius: 10px;
    border-width: 1.5px;
  }
  .c-tool__photo svg { width: 64%; height: auto; }
  .c-tool__name { font-size: 15px; line-height: 1.1; }
  .c-tool__desc { font-size: 10.5px; line-height: 1.35; }
  /* Smaller blob badges so they don't blow out compact cards */
  .c-tool__blob-badge { width: 64px; height: 48px; }
  .c-tool__blob-badge span { font-size: 9px; }
  .c-tool__blob-badge:not(.c-tool__blob-badge--mygoto) { top: -22px; right: -8px; }
  .c-tool__blob-badge--mygoto { top: -18px; left: -8px; }
}

/* Tiny phones — keep 2 across but tighten further */
@media (max-width: 380px) {
  .c-tool { height: 208px; padding: 10px; }
  .c-tool__photo { height: 96px; }
  .c-tool__name { font-size: 14px; }
  .c-tool__desc { font-size: 10px; }
}

/* == /components/homework-into-your-life/style.css == */
/* Homework Built Into Your Life — compact callout block. DESIGN: dark
   mesh-bordered card on a WHITE stage (Andrew, 2026-07-03) with a soft teal
   blob bleeding out from behind it. The squiggle inside the card is dialled
   right down and edge-faded so it reads as texture, not pattern.
   ANIMATION HOOKS: [data-animate] on the card; [data-three-blob] on the blob layer. */
.c-homework {
  position: relative;
  /* Transparent stage: the WHITE + light-squiggle island lives on ::before so
     its bottom edge can be MASKED to transparent (see below). Where the mask
     fades the white out, the body's dark bg + dark squiggle shows straight
     through — so the squiggle field reads as ONE continuous texture from the
     white island down into whats-included, with no opaque-dark band hiding it.
     --fade = height of the bottom dissolve zone. */
  --fade: 420px;
  /* Height of the TOP band where the white island extends up UNDER the wavy
     seam (== the seam's 100px height) so the light squiggle reaches the wave. */
  --seam: 100px;
  background: transparent;
  /* Clip horizontally (blob is 720px wide) but let ::before overflow UP the
     --seam band into the wavy seam above. The blob is contained separately
     (.c-homework__blobs) so it can't bleed vertically now that y is visible. */
  overflow: clip visible;
}
/* The wavy seam above this section, raised so its animated wave LINE renders
   above the homework white island (which now extends up under the seam), but
   still below the card (.c-homework__inner, z-index 1, later in the DOM). */
.c-wavy-seam--homework {
  position: relative;
  z-index: 1;
}
/* Keep the blurred teal blob clipped to the section box (this used to be done by
   .c-homework's own overflow:clip, which is now clip+visible for the ::before). */
.c-homework__blobs {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}
/* The white island itself: same 480px light-squiggle tile as before, now on a
   pseudo-element so we can dissolve its BOTTOM edge with a tall, smoothstep-
   eased mask. Opaque at the top so it meets the white wavy-seam above with no
   seam; fades to fully transparent over --fade px at the bottom, revealing the
   continuous dark body squiggle underneath (no opaque-dark overlay, no band). */
.c-homework::before {
  content: "";
  position: absolute;
  /* Extend UP by --seam so the white island reaches under the wavy seam and the
     light squiggle can run right to the wave line. Bottom/sides unchanged. */
  inset: calc(var(--seam) * -1) 0 0 0;
  z-index: 0;
  background: #FFFFFF url("/assets/squiggle-bg-light.svg") repeat;
  background-size: 480px 480px;
  /* Shift the tile down by --seam so the squiggle phase inside the homework band
     is byte-identical to before the upward extension; the extension continues the
     same tile upward = one seamless field from the wave down into the band. */
  background-position: 0 var(--seam);
  pointer-events: none;
  /* Fixed-period wave tile (must match the visible seam line's period == the
     <pattern>/mask 480px tile in wavy-seam-homework). */
  --wave-period: 480px;
  /* Two mask layers, unioned (default `add`):
     (1) wave cut-out over the top --seam band: reveals the squiggle BELOW the
         wave, hides it ABOVE (dark body squiggle shows through to the line).
         The wave mask is a 480px tile REPEATED horizontally (repeat-x) so its
         boundary is the same fixed-period, non-stretched wave as the seam line
         above — identical crest shape on desktop and mobile.
     (2) the original bottom-dissolve, shifted to START at --seam so the homework
         band and its bottom fade are exactly as before, and it stays transparent
         in the top band so it can't fill in above the wave. */
  -webkit-mask-image:
    url("/assets/wavy-seam-homework-mask.svg"),
    linear-gradient(to top,
      rgba(0, 0, 0, 0)    0,
      rgba(0, 0, 0, 0.07) calc(var(--fade) * 0.10),
      rgba(0, 0, 0, 0.16) calc(var(--fade) * 0.20),
      rgba(0, 0, 0, 0.28) calc(var(--fade) * 0.30),
      rgba(0, 0, 0, 0.42) calc(var(--fade) * 0.40),
      rgba(0, 0, 0, 0.57) calc(var(--fade) * 0.50),
      rgba(0, 0, 0, 0.72) calc(var(--fade) * 0.60),
      rgba(0, 0, 0, 0.84) calc(var(--fade) * 0.70),
      rgba(0, 0, 0, 0.93) calc(var(--fade) * 0.80),
      rgba(0, 0, 0, 0.98) calc(var(--fade) * 0.90),
      rgba(0, 0, 0, 1)    var(--fade),
      rgba(0, 0, 0, 1)    100%);
  -webkit-mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: 0 0, 0 var(--seam);
  -webkit-mask-size: var(--wave-period) var(--seam), 100% calc(100% - var(--seam));
          mask-image:
    url("/assets/wavy-seam-homework-mask.svg"),
    linear-gradient(to top,
      rgba(0, 0, 0, 0)    0,
      rgba(0, 0, 0, 0.07) calc(var(--fade) * 0.10),
      rgba(0, 0, 0, 0.16) calc(var(--fade) * 0.20),
      rgba(0, 0, 0, 0.28) calc(var(--fade) * 0.30),
      rgba(0, 0, 0, 0.42) calc(var(--fade) * 0.40),
      rgba(0, 0, 0, 0.57) calc(var(--fade) * 0.50),
      rgba(0, 0, 0, 0.72) calc(var(--fade) * 0.60),
      rgba(0, 0, 0, 0.84) calc(var(--fade) * 0.70),
      rgba(0, 0, 0, 0.93) calc(var(--fade) * 0.80),
      rgba(0, 0, 0, 0.98) calc(var(--fade) * 0.90),
      rgba(0, 0, 0, 1)    var(--fade),
      rgba(0, 0, 0, 1)    100%);
          mask-repeat: repeat-x, no-repeat;
          mask-position: 0 0, 0 var(--seam);
          mask-size: var(--wave-period) var(--seam), 100% calc(100% - var(--seam));
}
.c-homework__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.c-homework__blob--teal {
  width: 720px; height: 420px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, #07EDBE 0%, rgba(7, 237, 190, 0.24) 45%, transparent 75%);
  opacity: 0.26;
}
.c-homework__inner {
  position: relative;
  z-index: 1;              /* card stays above the bottom fade strip */
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  /* Extra bottom room so the fade zone lives below the card, not over it
     (the fade's top ~60px overlaps this padding at <5% opacity, invisible). */
  padding: 40px 48px 170px;
  box-sizing: border-box;
}

.c-homework__card {
  position: relative;
  overflow: clip;
  border-radius: 24px;
  border: 6px solid transparent;
  background:
    linear-gradient(var(--bg-elev-1), var(--bg-elev-1)) padding-box,
    linear-gradient(135deg, #07EDBE 0%, #9945FF 55%, #FF7EC0 100%) border-box;
  box-shadow: 0 16px 48px rgba(7, 237, 190, 0.14), 0 16px 48px rgba(153, 69, 255, 0.12);
  padding: 36px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c-homework__card-pattern {
  position: absolute;
  inset: 0;
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 460px 460px;
  opacity: 0.07;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(110% 100% at 100% 0%, #000 0%, transparent 65%);
          mask-image: radial-gradient(110% 100% at 100% 0%, #000 0%, transparent 65%);
}
.c-homework__badge {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--surface-card);
  border: 1px solid var(--navy);
  color: var(--teal);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.c-homework__title {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 760px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Bigger card headline (32px floor on phones), balanced wrapping so "life"
     never orphans onto its own line. */
  font-size: clamp(32px, 4.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.c-homework__title-accent {
  background: var(--mesh-text-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.c-homework__body {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 820px;
  color: rgba(248, 248, 248, 0.72);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
.c-homework__body em { font-style: italic; color: var(--text); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .c-homework { --fade: 300px; }
  .c-homework__inner { padding: 32px 24px 130px; }
  .c-homework__card { padding: 28px 24px 30px; }
  .c-homework__blob--teal { width: 460px; height: 320px; }
}

/* == /components/whats-included/style.css == */
/* What's Included: V1 "gradient border panel" from the 2026-07-07 bake-off, per Andrew:
   - section TRANSPARENT so the global body squiggle backdrop shows around the card (V1 look)
   - centered plain-white headline inside the card (no accent word, no eyebrow, no subtitle)
   - six items: quiet light-blue dots, NO glow
   - guarantee row: Dog-Bone-Blue icon, centered
   Card = house double-background-clip GRADIENT BORDER treatment (from homework-into-your-life),
   blue-register ring over an elevated body, faint corner-masked squiggle inside.
   ANIMATION HOOKS: [data-animate] on panel + list. */
.c-whats-included {
  position: relative;
  /* transparent on purpose: the body's squiggle texture is the backdrop, like the bake-off page */
  background: transparent;
  overflow: clip;
}
.c-whats-included__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1060px);
  margin: 0 auto;
  padding: 76px 0;
  box-sizing: border-box;
}

/* ---- The card: house gradient-border panel, blue register ---- */
.c-whats-included__panel {
  position: relative;
  overflow: clip;
  border-radius: 24px;
  border: 6px solid transparent;
  background:
    linear-gradient(var(--bg-elev-1), var(--bg-elev-1)) padding-box,
    linear-gradient(135deg, #A0C7FF 0%, #477ED6 52%, #9945FF 100%) border-box;
  box-shadow: 0 16px 48px rgba(160, 199, 255, 0.12), 0 16px 48px rgba(71, 126, 214, 0.10);
  padding: 40px 44px 44px;
}
.c-whats-included__panel-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 460px 460px;
  opacity: 0.06;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 62%);
          mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 62%);
}

/* ---- Headline: centered, plain white, inside the card ---- */
.c-whats-included__title {
  position: relative;
  z-index: 1;
  margin: 0 0 30px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (site-wide type scale). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--text);
}

/* ---- List ---- */
.c-whats-included__list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 40px;
}
.c-whats-included__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
/* Quiet light-blue brand dot. NO glow (per Andrew). */
.c-whats-included__dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--light-blue);
}
.c-whats-included__list p {
  margin: 0;
  color: rgba(248, 248, 248, 0.82);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  /* avoid single-word orphan lines ("lifestyle.") */
  text-wrap: pretty;
}
.c-whats-included__list strong { color: var(--text); font-weight: 800; }

/* ---- Guarantee row: full-width, centered, bone icon ---- */
.c-whats-included__guarantee {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(160, 199, 255, 0.22);
  justify-content: center;
  align-items: center;
}
.c-whats-included__bone {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: url("/assets/icons/hero/Dog-Bone-Blue.svg") center / contain no-repeat;
}
.c-whats-included__guarantee p {
  font-size: 17.5px;
  color: rgba(248, 248, 248, 0.9);
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .c-whats-included__inner { padding: 56px 0; }
  .c-whats-included__panel { padding: 30px 22px 32px; }
  .c-whats-included__list { grid-template-columns: 1fr; gap: 16px; }
  .c-whats-included__guarantee { justify-content: flex-start; text-align: left; }
}

/* == /components/safe-to-start/style.css == */
/* Safe to Start — scannable risk-reversal grid. DESIGN: teal section accent (kept) — a
   calm, "you're covered" register. A teal blob anchors the top-left and a soft light-blue
   blob warms the lower-right; the repeating squiggle is dialled back to a faded top-left
   corner wash. Eyebrow + icon chips run teal so the whole block reads cool/reassuring.
   ANIMATION HOOKS: [data-animate] on header + the grid (stagger); [data-three-blob] on blobs.
   Scoped prefix: .c-safe-to-start__ */
.c-safe-to-start {
  position: relative;
  background: var(--bg);
  overflow: clip;
}
.c-safe-to-start__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.c-safe-to-start__blob--teal {
  width: 520px; height: 520px;
  top: -240px; left: -140px;
  background: radial-gradient(circle at 55% 55%, #07EDBE 0%, rgba(7, 237, 190, 0.26) 45%, transparent 72%);
  opacity: 0.3;
}
.c-safe-to-start__blob--blue {
  width: 380px; height: 380px;
  bottom: -200px; right: 4%;
  background: radial-gradient(circle at 50% 50%, #A0C7FF 0%, rgba(160, 199, 255, 0.20) 45%, transparent 72%);
  opacity: 0.2;
}
.c-safe-to-start__pattern {
  position: absolute;
  inset: 0;
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 420px 420px;
  opacity: 0.14;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 95% at 0% 0%, #000 0%, rgba(0,0,0,0.4) 40%, transparent 72%);
          mask-image: radial-gradient(120% 95% at 0% 0%, #000 0%, rgba(0,0,0,0.4) 40%, transparent 72%);
}
.c-safe-to-start__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}

/* ---- Header ---- */
.c-safe-to-start__header { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.c-safe-to-start__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface-card);
  border: 1px solid var(--navy);
  border-radius: 100px;
  color: var(--teal);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.c-safe-to-start__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
}
.c-safe-to-start__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text);
}
.c-safe-to-start__title-accent { color: var(--teal); }
.c-safe-to-start__subtitle {
  margin: 0;
  max-width: 520px;
  text-align: center;
  color: rgba(248, 248, 248, 0.55);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* ---- Grid ---- */
.c-safe-to-start__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* the 7th item: span and center it under the bottom row */
.c-safe-to-start__item:last-child {
  grid-column: 1 / -1;
  max-width: 520px;
  justify-self: center;
}
.c-safe-to-start__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(7, 237, 190, 0.14);
  background: linear-gradient(180deg, rgba(7, 237, 190, 0.05) 0%, rgba(7, 237, 190, 0) 100%);
  transition: border-color 200ms ease, transform 200ms ease;
}
.c-safe-to-start__item:hover { border-color: rgba(7, 237, 190, 0.30); transform: translateY(-3px); }
.c-safe-to-start__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(7, 237, 190, 0.12);
  color: var(--teal);
}
.c-safe-to-start__icon svg { width: 19px; height: 19px; }
.c-safe-to-start__item p {
  margin: 0;
  color: rgba(248, 248, 248, 0.66);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
}
.c-safe-to-start__item strong { color: var(--text); font-weight: 800; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .c-safe-to-start__inner { padding: 56px 24px; gap: 32px; }
  .c-safe-to-start__title { font-size: 36px; }
  .c-safe-to-start__grid { grid-template-columns: 1fr 1fr; }
  .c-safe-to-start__item:last-child { grid-column: 1 / -1; }
  .c-safe-to-start__blob--teal { width: 380px; height: 380px; top: -160px; left: -120px; }
  .c-safe-to-start__blob--blue { width: 300px; height: 300px; }
}
@media (max-width: 640px) {
  .c-safe-to-start__grid { grid-template-columns: 1fr; }
  .c-safe-to-start__item:last-child { max-width: none; }
}
@media (max-width: 480px) {
  .c-safe-to-start__inner { padding: 44px 18px; }
  .c-safe-to-start__title { font-size: 30px; }
}

/* == /components/reviews-badge/style.css == */
/* Reviews Badge — lightweight pill. Used inline inside other components, OR wrapped in a
   __band when it stands alone in a page flow (how-it-works). DESIGN: pink accent moment —
   a small faded pink blob sits behind the centred pill so it doesn't read as a stray chip.
   ANIMATION HOOK: [data-animate] on the pill. Scoped prefix: .c-reviews-badge__ */
.c-reviews-badge__band {
  position: relative;
  background: var(--bg);
  display: flex;
  justify-content: center;
  padding: 28px 24px;
  overflow: clip;
}
.c-reviews-badge__band-blob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 160px;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 126, 192, 0.22) 0%, transparent 75%);
  opacity: 0.7;
  pointer-events: none;
}
.c-reviews-badge {
  position: relative;
  z-index: 1;
}
.c-reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--surface-border-strong);
  background: rgba(20, 18, 42, 0.6);
}
.c-reviews-badge__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--pink);
  flex-shrink: 0;
}
.c-reviews-badge__stars svg { width: 16px; height: 16px; }
.c-reviews-badge__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.c-reviews-badge__count {
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--text);
}
.c-reviews-badge__sub {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(248, 248, 248, 0.55);
}

@media (max-width: 480px) {
  .c-reviews-badge { gap: 10px; padding: 9px 14px 9px 12px; }
  .c-reviews-badge__stars svg { width: 14px; height: 14px; }
  .c-reviews-badge__count { font-size: 13px; }
}

/* == /components/final-cta/style.css == */
/* Final CTA — the closer. DESIGN: full mesh register (teal→violet→pink). This is the
   "hero-ish" closing moment, so it gets a low-opacity Paper mesh-shader full-bleed wash
   ([data-paper-mesh], used sparingly here and on the hero CTA only), with three converging
   mesh blobs and a faded centre squiggle on top. Headline accent runs the mesh text gradient.
   Button styling mirrors pricing-packages (.c-final-cta__cta--solid / --ghost).
   ANIMATION HOOKS: [data-animate] on the whole inner stack; [data-three-blob] on the blob
   layer (a slow Three.js mesh-gradient plane could replace the paper-mesh wash later).
   Scoped prefix: .c-final-cta__ */
.c-final-cta {
  position: relative;
  background: var(--bg);
  overflow: clip;
}
/* Paper mesh-shader wash — kept subtle so the text stays readable */
.c-final-cta__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.22;
  pointer-events: none;
  background: var(--mesh-gradient);
}
.c-final-cta__mesh canvas { display: block; width: 100% !important; height: 100% !important; }
/* darkening veil so the wash never washes out the copy */
.c-final-cta__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, rgba(10, 9, 26, 0.45) 0%, rgba(10, 9, 26, 0.78) 60%, rgba(10, 9, 26, 0.9) 100%);
}
.c-final-cta__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  pointer-events: none;
  z-index: 0;
}
.c-final-cta__blob--teal   { width: 460px; height: 460px; top: -180px; left: 6%;  background: radial-gradient(circle at 50% 50%, #07EDBE 0%, rgba(7,237,190,0.24) 45%, transparent 72%); opacity: 0.26; }
.c-final-cta__blob--violet { width: 560px; height: 560px; bottom: -240px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle at 50% 50%, #9945FF 0%, rgba(153,69,255,0.26) 45%, transparent 72%); opacity: 0.3; }
.c-final-cta__blob--pink   { width: 420px; height: 420px; top: -120px; right: 4%; background: radial-gradient(circle at 50% 50%, #FF7EC0 0%, rgba(255,126,192,0.22) 45%, transparent 72%); opacity: 0.24; }
.c-final-cta__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/squiggle-bg.svg");
  background-size: 420px 420px;
  opacity: 0.12;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, transparent 0%, rgba(0,0,0,0.5) 55%, #000 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, transparent 0%, rgba(0,0,0,0.5) 55%, #000 100%);
}
.c-final-cta__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 92px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  box-sizing: border-box;
}
.c-final-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--surface-card);
  border: 1px solid var(--navy);
  border-radius: 100px;
  color: var(--light-purple);
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.c-final-cta__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--light-purple); flex-shrink: 0;
}
.c-final-cta__title {
  margin: 6px 0 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
}
.c-final-cta__title-accent {
  background: var(--mesh-text-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.c-final-cta__subtitle {
  margin: 0;
  color: rgba(248, 248, 248, 0.55);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* ---- Buttons ---- */
.c-final-cta__buttons {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
.c-final-cta__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 15px;
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.c-final-cta__cta--ghost {
  color: var(--text);
  border: 2px solid var(--surface-border-strong);
  background: var(--bg);
}
.c-final-cta__cta--ghost:hover { border-color: var(--light-purple); }
.c-final-cta__cta--solid {
  position: relative;
  color: #fff;
  border: 5px solid var(--light-purple);
  background: var(--bg);
  padding: 0 6px;
  overflow: hidden;
  isolation: isolate;
}
.c-final-cta__cta--solid .c-final-cta__cta-label {
  position: relative;
  z-index: 1;
  padding: 0 22px;
  text-shadow: 0 1px 2px rgba(10, 9, 26, 0.35);
}
.c-final-cta__cta-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #07EDBE 0%, #9945FF 50%, #FF7EC0 100%);
  pointer-events: none;
}
.c-final-cta__cta-mesh canvas { display: block; width: 100% !important; height: 100% !important; border-radius: inherit; }
.c-final-cta__cta--solid:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-glow-violet); }
.c-final-cta__cta--solid:active { transform: scale(0.98); }

/* ---- Microcopy strip ---- */
.c-final-cta__microcopy {
  margin: 18px 0 0;
  color: rgba(248, 248, 248, 0.5);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
}
.c-final-cta__dot { margin: 0 8px; color: rgba(160, 140, 255, 0.6); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .c-final-cta__inner { padding: 68px 24px; }
  .c-final-cta__title { font-size: 40px; }
  .c-final-cta__blob--teal   { width: 320px; height: 320px; top: -120px; }
  .c-final-cta__blob--violet { width: 380px; height: 380px; bottom: -160px; }
  .c-final-cta__blob--pink   { width: 300px; height: 300px; top: -90px; }
}
@media (max-width: 480px) {
  .c-final-cta__inner { padding: 52px 18px; }
  .c-final-cta__title { font-size: 30px; }
  .c-final-cta__buttons { flex-direction: column; align-items: stretch; width: 100%; }
  .c-final-cta__cta { width: 100%; }
  .c-final-cta__dot { display: block; height: 0; overflow: hidden; margin: 4px 0; }
}

/* == /components/consult-embed/style.css == */
/* Consult Embed — full-bleed booking calendar (iframe) on a flat dark section,
   framed by a single gradient border. No background blobs/gradients; the squiggle
   pattern lives inside the embedded calendar, not in this section. */
.c-consult {
  background: var(--bg);
  /* Gradient border runs flush to the left/right screen edges (no horizontal
     gutter). */
  padding: 64px 0;
  overflow: clip;
  position: relative;
}
.c-consult__inner {
  position: relative;
  z-index: 1;
  /* Full-bleed: the gradient-bordered calendar spans the section width
     (heading stays centered via its own text-align). */
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.c-consult__heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
}
.c-consult__title {
  margin: 0;
  font-family: 'CeraRound', 'Cera Round', 'Nunito', sans-serif;
  font-weight: 900;
  /* Shared section-header size (site-wide type scale). */
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--heading-white);
}
.c-consult__title span { display: block; }
.c-consult__title-accent { color: var(--teal); }
.c-consult__lede {
  margin: 0;
  color: var(--gray-purple);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
}

/* Iframe card — 6px gradient border matching the "Meet Andrew" frame's weight,
   no glow/shadow. The embedded page is flat var(--bg) with no inner border, so
   this gradient ring is the only outer frame around the calendar. */
.c-consult__frame {
  position: relative;
  border-radius: 20px;
  padding: 6px;
  background: linear-gradient(135deg, #9945FF 0%, #07EDBE 50%, #FF7EC0 100%);
}
.c-consult__iframe {
  display: block;
  width: 100%;
  border: 0;
  /* 14px = frame radius (20) minus the 6px gradient padding, so the ring is a
     uniform 6px all the way around the corners. */
  border-radius: 14px;
  background: var(--bg);
  /* Height is driven by the embedded calendar via postMessage (see the
     auto-size listener in index.html) so the frame hugs the calendar with no
     empty space, and grows for the intake form. min-height is just a floor for
     the brief moment before the first height beacon arrives (or if JS is off);
     keep it BELOW the real calendar height (~428px desktop / ~491px mobile) so
     it never forces empty space under the card. */
  min-height: 400px;
  /* The height beacon lands after the embed loads; ease into the new size
     instead of snapping (the "reshuffle" Andrew saw). */
  transition: height 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.c-consult__fallback { margin: 0; padding: 24px; text-align: center; }
.c-consult__fallback-link,
.c-consult__alt-link {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
}
.c-consult__fallback-link:hover,
.c-consult__alt-link:hover { text-decoration: underline; }

.c-consult__alt {
  margin: 0;
  text-align: center;
  color: var(--gray-purple);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 800px) {
  .c-consult__iframe { min-height: 440px; }
}
@media (max-width: 560px) {
  .c-consult { padding: 48px 0; }
  .c-consult__iframe { min-height: 460px; }
}

/* == /components/wavy-seam/style.css == */
/* Wavy Seam — standalone block (not an overflow). 100px tall, paints both
   the white-above and dark-below regions internally so it visually IS the
   transition between any pair of light→dark sections. */
.c-wavy-seam {
  display: block;
  width: 100%;
  height: 100px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  /* Bleed each half over the section above/below by 1px so anti-aliasing
     never leaves a hairline gap if the surrounding sections aren't pure
     white / pure --bg. */
  margin-top: -1px;
  margin-bottom: -1px;
}
.c-wavy-seam__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.c-wavy-seam__white { fill: #FFFFFF; }
.c-wavy-seam__dark  { fill: var(--bg); }
.c-wavy-seam__line {
  fill: none;
  /* Non-scaling stroke keeps the wave a uniform pixel thickness even though
     preserveAspectRatio="none" stretches the SVG horizontally to full width. */
  stroke-width: 8;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 8px rgba(160, 140, 255, 0.5));
}

/* Reduced motion: the gradient flow is SVG SMIL (<animate>), which CSS
   animation-play-state cannot pause (the old rule here was a no-op).
   /js/motion-core.js pauses it for real via svg.pauseAnimations() in the
   shared reduced-motion branch. */