/* ============================================
   MOCK OVERRIDES — prototype only
   Loaded AFTER styles.css. Does not affect index.html.
   ============================================ */

/* --- 0a. CONTRAST FIXES (WCAG AA) ---
   Measured against --bg #08081a. --purple #c084fc is 7.50:1 and fine
   everywhere; these three were not. --- */

/* was 0.50 alpha = 4.46:1, just under the 4.5 needed for the footer
   copyright line and the social icons */
:root { --dim: rgba(232, 229, 240, 0.58); }   /* -> 5.70:1 */

/* The CTA gradient's pink stop sat at 118%, so the right end of every
   button rendered ~#ce98e3 — white label on it was 2.28:1, and even the
   blue start was only 3.32:1. Deepened ~25% and pulled the pale end out;
   same blue -> violet -> pink family, but white text now clears 4.5:1 at
   every point of the gradient (worst case 4.95:1 at #8a57c4). */
:root {
  --gradient-cta: linear-gradient(106deg, #1a63c4 18%, #4a3fb8 49%, #c86fd0 150%);
}

/* 11px/700 always needs 4.5:1 — no gradient position clears that, so the
   badge takes the gradient's mid colour as a flat fill (7.79:1). */
.popular-badge { background: #4a3fb8; }

/* --- 0. HIERARCHY ---
   Every section is a peer, so every section title is the same size.
   Hierarchy comes from the steps WITHIN a section instead:
     section title 48  >  card title 20  >  subtitle 17  >  body 14
   Previously subtitle (16) and body (14) sat almost on top of each
   other, which is what made the page read flat.                      */

.section-title {
  font-size: clamp(2rem, 3.4vw + 0.6rem, 3rem);
  letter-spacing: -2.2px;
}
.section-subtitle {
  font-size: 17px; line-height: 26px;
  max-width: 620px;
}
.section-header { gap: 14px; }

/* --- 1. SERVICES: wider container so 4 cards keep readable text width --- */
.section-services .container.container-wide { max-width: 1320px; }

.service-cards-4 { flex-wrap: wrap; }
.service-cards-4 .service-card {
  flex: 1 1 calc(25% - 18px);
  padding: 36px;
  min-height: 540px;
}

/* 4 -> 2x2 */
@media (max-width: 1180px) {
  .service-cards-4 .service-card { flex: 1 1 calc(50% - 12px); }
}
/* override global 960px rule that forces a single column */
@media (max-width: 960px) {
  .service-cards-4 { flex-direction: row; flex-wrap: wrap; }
  .service-cards-4 .service-card {
    flex: 1 1 calc(50% - 12px);
    width: auto;
    min-height: auto;
  }
}
/* 2x2 -> single column */
@media (max-width: 700px) {
  .service-cards-4 { flex-direction: column; }
  .service-cards-4 .service-card { flex: 1 1 auto; width: 100%; }
}

/* Single CTA under the section subtitle (replaces per-card buttons).
   The button belongs to the subtitle above it, so keep that gap tighter
   than the gap down to the cards — otherwise it reads as floating. */
.services-cta { margin-top: 6px; }      /* + .section-header gap 14 = 20 above */
.yt-spacer { height: 56px; }            /* was 32 — below must exceed above */

/* All four cards stay the same size — the popular one is marked by its
   border + glow only, not by being scaled up. */
.service-cards-4 .service-card-popular { transform: none; }
.service-cards-4 .service-card-popular:hover { transform: scale(1.1); }

/* "/mo" is a unit, not part of the number — step it down */
.price-unit { font-size: 15px; font-weight: 500; color: var(--muted); }

/* No taglines anymore, so the header is just name + price — collapse the
   140px reserve, they align on their own (all 1 line). */
.service-cards-4 .card-header { min-height: auto; }

/* Timeline footer — pinned to the bottom so all four align (clock + text) */
.service-cards-4 .card-features { padding-bottom: 24px; }
.card-timeline {
  margin-top: auto; width: 100%;
  padding-top: 18px; border-top: 1px solid rgba(232, 230, 240, 0.10);
  font-size: 13px; font-weight: 500; color: var(--purple);
}

/* small reassurance line above the CTA */
.card-note {
  font-size: 12px; line-height: 18px; color: var(--muted);
  text-align: left; margin-bottom: 12px;
}

/* --- 2. 3 WAYS I CAN HELP: left-aligned cards with bullet lists --- */
.pillar-cards .pain-card {
  align-items: flex-start; text-align: left;
  gap: 14px; padding: 40px 36px;
}
.pillar-cards .pain-desc {
  text-align: left; margin-top: -4px;
  padding-bottom: 16px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(232, 230, 240, 0.08);
  text-wrap: pretty;   /* fill each line before wrapping, don't balance */
}
.pillar-cards .card-features { padding: 4px 0 0; gap: 14px; }
.pillar-cards .feature { align-items: flex-start; }
/* bullets: fill the width too, so short lines don't leave the right empty */
.pillar-cards .feature span:last-child { text-wrap: pretty; }
.pillar-cards .feature .check { margin-top: 3px; }
@media (max-width: 700px) {
  .pillar-cards .pain-card { padding: 32px 24px; }
}

/* --- 3. ABOUT: centred stack, medium portrait, process as a diagram --- */
.about-card { padding: 56px 48px; gap: 24px; }

/* Bigger than the site's default 118px, still circular. */
.about-photo .photo-ring {
  width: 150px; height: 150px;
  border-radius: 50%; padding: 3px;
}
.about-photo .photo-img { border-radius: 50%; }

/* Body copy, centred and uniform — no emphasised line. The hierarchy
   in this card is carried by the type scale below (30px stat figures
   against 16px body), not by bolding a sentence. */
.about-text {
  max-width: 660px; text-align: center;
  font-size: 16px; line-height: 27px;
}
/* balance evens out the line lengths — without it the last line of a
   centred paragraph ends up half-width and the rag looks broken. */
.about-text p { text-wrap: balance; }

/* --- STATS ROW: three claims. No rule above it — the jump from
       16px muted body to 30px white figures is the divider. --- */
.about-stats {
  width: 100%; margin-top: 32px;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
/* Centred to match the copy above. No icons — the card already has one
   circle (the portrait); three more would compete with it, and the
   figures themselves are the strongest thing here. */
.stat {
  padding: 0 28px; text-align: center;
  border-right: 1px solid rgba(232, 230, 240, 0.09);
}
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; border-right: none; }

.stat-num {
  display: block; font-size: 34px; font-weight: 800;
  letter-spacing: -1.4px; line-height: 1.1; color: var(--white);
}
.stat-label {
  display: block; font-size: 13.5px; font-weight: 600;
  color: var(--purple); margin-top: 4px;
}
/* balance, not pretty — in a narrow centred column `pretty` still
   leaves a long first line over a short second one. */
.stat-desc {
  font-size: 14px; line-height: 21px; color: var(--muted);
  margin-top: 12px; text-wrap: balance;
}

@media (max-width: 860px) {
  .about-card { padding: 40px 24px; }
  .about-photo .photo-ring { width: 124px; height: 124px; }
  /* 3 items into 2 columns leaves an orphan — go straight to one */
  .about-stats { grid-template-columns: 1fr; gap: 26px; }
  .stat { padding: 0; border-right: none; }
}

/* --- 3b. CONTACT: one card, hierarchy lives inside it.
       Three separate blocks (2 cards + a band) made the booking CTA
       compete with the checklist. A single container with a loud top
       half and a quiet split bottom removes the competition — the
       secondary options are clearly part of the same offer, not
       rival choices. --- */
.section-contact .section-subtitle { max-width: none; }   /* keep it on one line */

.contact-panel {
  width: 100%; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(232, 230, 240, 0.12);
  background: rgba(232, 230, 240, 0.02);
}

/* --- loud half --- */
.contact-panel-top {
  position: relative; overflow: hidden;
  text-align: center; padding: 56px 40px 48px;
}
.contact-panel-top::after {
  content: ""; position: absolute; left: 50%; top: -180px;
  width: 680px; height: 440px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(192, 132, 252, 0.18), transparent 70%);
  filter: blur(26px); pointer-events: none;
}
.contact-panel-top > * { position: relative; z-index: 1; }

/* Must stay clearly below .section-title (48px) — it's a supporting
   line inside the card, not a second section heading. Wide enough
   to hold one line at desktop. */
.contact-headline {
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.875rem);
  font-weight: 800; letter-spacing: -0.8px; line-height: 1.2;
  color: var(--white); max-width: 860px; margin: 0 auto 20px;
}
.contact-accent {
  background: var(--gradient-title);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.contact-props {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 24px; margin-bottom: 26px;
  font-size: 13.5px; color: var(--muted);
}
.contact-props span { display: flex; align-items: center; gap: 7px; }
.contact-props i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--purple); display: block; flex-shrink: 0;
}

/* --- quiet half --- */
.contact-panel-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(232, 230, 240, 0.10);
}
/* Centred to match the top half of the panel — icon above the copy
   rather than beside it. */
.contact-half {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 30px 28px; text-align: center;
  text-decoration: none; transition: background 0.2s;
}
.contact-half:first-child { border-right: 1px solid rgba(232, 230, 240, 0.10); }
.contact-half:hover { background: rgba(192, 132, 252, 0.05); }
.contact-half-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(192, 132, 252, 0.10);
  border: 1px solid rgba(192, 132, 252, 0.20);
  color: var(--purple);
}
.contact-half-icon svg { width: 21px; height: 21px; }
.contact-half-copy { min-width: 0; }
.contact-half-copy h4 {
  font-size: 15.5px; font-weight: 700; color: var(--white); margin-bottom: 3px;
}
.contact-half-copy p { font-size: 13px; line-height: 19px; color: var(--muted); }
/* arrow rides inline with the title so the stack stays centred */
.contact-half-arrow { color: var(--purple); font-size: 15px; }

@media (max-width: 760px) {
  .contact-panel-top { padding: 40px 24px 36px; }
  .contact-props { gap: 8px 20px; }
  .contact-panel-bottom { grid-template-columns: 1fr; }
  .contact-half { padding: 20px 22px; }
  .contact-half:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(232, 230, 240, 0.10);
  }
}

/* Icon-only socials. aria-label carries the name now that the text is gone. */
.footer-right { gap: 18px; align-items: center; }
.footer-right .social {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim);
  border: 1px solid rgba(232, 230, 240, 0.10);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-right .social svg { width: 17px; height: 17px; display: block; }
.footer-right .social:hover {
  color: var(--white);
  border-color: rgba(192, 132, 252, 0.35);
  background: rgba(192, 132, 252, 0.08);
}

/* --- 4. FAQ accordion (inner wrapper animates, so the glass
       specular highlight doesn't jump) --- */
.section-faq .container {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
/* A list, not five floating panels — hairline rules instead of cards. */
.faq-list {
  display: flex; flex-direction: column; gap: 0;
  width: 100%; max-width: 820px;
}
.faq-item {
  padding: 0; overflow: hidden; border-radius: 0;
  border-bottom: 1px solid rgba(232, 230, 240, 0.12);
}
.faq-item:first-child { border-top: 1px solid rgba(232, 230, 240, 0.12); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 24px 4px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--white); text-align: left;
  position: relative; z-index: 2;
}
.faq-icon {
  font-size: 22px; font-weight: 400; color: var(--purple);
  flex-shrink: 0; line-height: 1;
  transition: transform 0.3s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
  position: relative; z-index: 2;
}
.faq-a-inner {
  padding: 0 4px 26px;
  font-size: 14px; line-height: 23px; color: var(--muted);
}
@media (max-width: 700px) {
  .faq-q { padding: 20px 2px; font-size: 15px; }
  .faq-a-inner { padding: 0 2px 22px; }
}

/* --- 5. HERO — spotlight / kinetic --- */

/* Soft breathing orb behind the headline */
.hero-orb {
  position: absolute; top: 46%; left: 50%;
  width: 900px; height: 900px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(236, 72, 153, 0.20) 0%,
    rgba(192, 132, 252, 0.16) 25%,
    rgba(96, 165, 250, 0.08) 50%,
    transparent 70%);
  filter: blur(20px);
  animation: heroBreath 8s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
@keyframes heroBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 0.85; }
}

/* Eyebrow pill — reuses the design system's .eyebrow letter-spacing */
.hero-eyebrow {
  display: inline-block;
  padding: 9px 22px; border-radius: 100px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  background: rgba(192, 132, 252, 0.05);
  color: var(--purple);
  font-size: 12px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 28px;
}

/* Title-case kinetic headline — lines rise into view on load */
.hero-headline-kinetic {
  font-size: clamp(2.475rem, 6.3vw + 0.45rem, 5.4rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.035em;
}
.hero-sub { max-width: 640px; }
.hero-headline-kinetic .kw { display: inline-block; overflow: hidden; padding: 0 0.05em; }
.hero-headline-kinetic .kw > span {
  display: inline-block;
  opacity: 0; transform: translateY(100%);
  animation: heroReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-headline-kinetic .kw:nth-of-type(1) > span { animation-delay: 0.05s; }
.hero-headline-kinetic .kw:nth-of-type(2) > span { animation-delay: 0.18s; }
.hero-headline-kinetic .kw:nth-of-type(3) > span { animation-delay: 0.31s; }
@keyframes heroReveal { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 700px) {
  .hero-orb { width: 600px; height: 600px; }
}

/* Respect reduced-motion: show everything, hold still */
@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
  .hero-headline-kinetic .kw > span {
    animation: none; opacity: 1; transform: none;
  }
}

/* --- 6. NAV: keep the primary CTA reachable on mobile --- */
.nav-cta-mobile { display: none; }
@media (max-width: 960px) {
  .nav-cta-mobile {
    display: block;
    color: #fff !important;
    font-weight: 600 !important;
  }
}

/* ============================================================
   7. RESPONSIVE
   The base stylesheet collapses every grid to a single column at
   960px. That is right for phones but leaves tablets with ~700px
   cards holding three short bullets, and 700px-tall video
   thumbnails. This restores a real tablet tier and fixes the
   touch-target and decorative-overflow issues found in testing.
   ============================================================ */

/* --- Tablet: 701–960px --- */
@media (min-width: 701px) and (max-width: 960px) {
  .pillar-cards { flex-direction: row; align-items: stretch; }
  .pillar-cards .pain-card {
    width: auto; min-height: 0; padding: 28px 22px; gap: 10px;
  }
  .pillar-cards .pain-icon { font-size: 26px; }
  .pillar-cards .pain-title { font-size: 17px; }
  .pillar-cards .pain-desc { font-size: 13px; line-height: 20px; padding-bottom: 12px; }
  .pillar-cards .feature { font-size: 13px; }

  .youtube-grid { flex-direction: row; align-items: stretch; }
  .youtube-card { width: auto; }

  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 0 16px; border-right: 1px solid rgba(232, 230, 240, 0.09); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { padding-right: 0; border-right: none; }
  .stat-num { font-size: 28px; }
}

/* --- The Most Popular badge overhangs the card top. Below 960px the
       base sheet pushes that one card down 16px, which breaks the pair
       in the 2-up layout. Give the row the headroom instead. --- */
@media (max-width: 960px) {
  .service-cards-4 { padding-top: 16px; }
  .service-cards-4 .service-card-popular { margin-top: 0; }
}

/* --- Touch targets. WCAG 2.5.8 asks for 24px minimum; 44px is the
       comfortable size and these were 34px and 38x32. --- */
@media (max-width: 960px) {
  .footer-right .social { width: 44px; height: 44px; }
  .footer-right .social svg { width: 19px; height: 19px; }
  .nav-hamburger { padding: 12px 11px; }
}

/* --- Decorative layers are fixed-size and render wider than a phone
       viewport. The hero clips them so there is no scrollbar, but they
       still cost a large composited layer — cap them. --- */
@media (max-width: 700px) {
  .hero-glow { width: 100%; max-width: 520px; height: 520px; }
  .hero-orb { width: 100%; max-width: 460px; height: 460px; }
}