/* ── Brand wordmark font: Coustard BPO (custom B, P, O with pink pole/dancer) ── */
@font-face {
  font-family: "Coustard BPO";
  src: url("/assets/font/Coustard-BPO-Color.woff2") format("woff2"),
       url("/assets/font/Coustard-BPO-Color.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* The custom B/O/P bake their base stroke to black (palette entry 0). On the
   black footer that disappears, so remap entry 0 to white there. Pink stays. */
@font-palette-values --bop-on-dark {
  font-family: "Coustard BPO";
  override-colors: 0 #ffffff;
}

:root {
      /* ── Brand core ── */
      --charcoal: #000000;
      --charcoal-mid: #374151;
      --charcoal-light: #374151;
      /* ── Brand accent palette ── */
      --rose: #D4374D;          /* Accent Strong - primary CTA, buttons, highlights */
      --accent: #E390B6;        /* Accent - soft pink, tags, labels, icons */
      --accent-warm: #EC6C5C;   /* Accent Warm - coral, warm callouts */
      --rose-light: #FFE2E9;    /* Support 2 - light pink backgrounds */
      --rose-mid: rgba(212,55,77,0.08); /* Tint of Accent Strong - cards, hover states */
      --support-peach: #F4C994; /* Support 1 - warm peach, decorative accents */
      /* ── Neutrals ── */
      --offwhite: #FDF8F9;
      --white: #ffffff;
      --border: #E5E7EB;
      --text: #000000;
      --muted: #374151;
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      --font-brand: 'Coustard BPO', 'Playfair Display', Georgia, serif;
      --radius: 14px;

      /* ── TYPE SCALE ──
         Minimum is 14px. Nothing on this site should be smaller.
         Change a value here and it updates everywhere. */
      --text-xs:   14px;   /* captions, meta, notes, labels - the floor */
      --text-sm:   15px;   /* secondary and supporting text */
      --text-base: 16px;   /* body copy */
      --text-md:   17px;
      --text-lg:   18px;   /* lead paragraphs */
      --text-xl:   20px;
      --text-2xl:  22px;

      /* Accessible text version of --accent.
         --accent (#E390B6) is 2:1 on white and fails WCAG AA.
         Use --accent-text for any TEXT on a light background.
         Keep --accent for borders, icons and dark-background text. */
      --accent-text: #C1305F;   /* 5.45:1 on white - passes AA */
      --shadow: 0 2px 16px rgba(31,41,55,0.08);
      --shadow-lg: 0 10px 44px rgba(31,41,55,0.14);
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
      font-size: var(--text-base);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ── TYPOGRAPHY ── */
    h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; }
    h1 { font-size: clamp(36px, 5vw, 56px); }
    h2 { font-size: clamp(26px, 3.5vw, 38px); }
    h3 { font-size: var(--text-xl); }
    p { color: var(--muted); line-height: 1.75; }
    a { color: var(--rose); text-decoration: none; }
    a:hover { text-decoration: underline; }
    strong { color: var(--text); font-weight: 600; }

    /* ── LAYOUT ── */
    .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
    section { padding: 80px 0; }
    .section-label {
      font-size: var(--text-xs); font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px;
    }
    .section-title { margin-bottom: 16px; }
    .section-intro { font-size: var(--text-lg); color: var(--muted); max-width: 600px; line-height: 1.7; }

    /* ── BUTTONS ── */
    .btn {
      display: inline-block; font: 700 var(--text-base)/1 var(--font-body);
      padding: 16px 28px; border-radius: 999px; text-decoration: none;
      cursor: pointer; border: 2px solid var(--rose); transition: all 0.2s;
    }
    .btn-primary { background: var(--rose); color: var(--white); }
    .btn-ghost { background: transparent; color: var(--rose); }
    .btn-primary:link, .btn-primary:visited, .btn-primary:hover, .btn-primary:active, .btn-primary:focus { color: var(--white); }
    a.btn-primary, a.btn-primary:link, a.btn-primary:visited, a.btn-primary:hover, a.btn-primary:active { color: var(--white); }
    .btn-primary:hover { background: #d4457e; text-decoration: none; color: var(--white); }
    /* .nav-links a (0-1-1) outranks .btn-primary (0-1-0), which left the nav CTA
       with charcoal text. .nav-links a.btn-primary (0-2-1) wins it back. The base
       state was the gap here - only :hover was covered before. */
    .nav-links a.btn-primary,
    .nav-links a.btn-primary:link,
    .nav-links a.btn-primary:visited,
    .nav-links a.btn-primary:hover,
    .nav-links a.btn-primary:focus,
    .nav-links a.btn-primary:active { color: var(--white); }
    .btn-outline {
      background: transparent; color: var(--charcoal);
      border: 1.5px solid var(--border);
    }
    .btn-outline:hover { border-color: var(--charcoal); text-decoration: none; }
    .btn-sm { font-size: var(--text-sm); padding: 11px 19px; }

    /* ══════════════════════════════════════════
       NAV
    ══════════════════════════════════════════ */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 24px; max-width: 1120px; margin: 0 auto;
    }
    .nav-logo {
      font-family: var(--font-brand); font-size: var(--text-xl); font-weight: 400;
      color: var(--charcoal); text-decoration: none; font-synthesis: none;
    }
    /* The font supplies its own pink B/P/O; keep the rest one colour so nothing clashes. */
    .nav-logo span { color: inherit; }
    .nav-links { display: flex; align-items: center; gap: 32px; }
    .nav-links a { font-size: var(--text-xs); color: var(--charcoal); font-weight: 500; text-decoration: none; }
    .nav-links a:hover { color: var(--rose); }

    /* ══════════════════════════════════════════
       HERO
    ══════════════════════════════════════════ */
    .hero {
      padding: 96px 0 80px;
      background: var(--offwhite);
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; top: -200px; right: -200px;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212,55,77,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--rose-mid); border: 1px solid rgba(212,55,77,0.18);
      color: var(--rose); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; padding: 6px 14px; border-radius: 20px; margin-bottom: 20px;
    }
    .hero h1 { color: var(--charcoal); margin-bottom: 20px; }
    .hero h1 em { font-style: italic; color: var(--rose); }
    .hero-sub { font-size: var(--text-lg); color: var(--muted); line-height: 1.7; margin-bottom: 32px; max-width: 480px; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .hero-note { font-size: var(--text-xs); color: var(--charcoal-light); margin-top: 12px; }
    .hero-stats {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    .hero-stat {
      background: var(--white); border-radius: var(--radius);
      border: 1px solid var(--border); padding: 24px 20px;
      box-shadow: var(--shadow);
    }
    .hero-stat-num {
      font-family: var(--font-display); font-size: 32px; font-weight: 700;
      color: var(--charcoal); line-height: 1; margin-bottom: 6px;
    }
    .hero-stat-num span { font-size: var(--text-lg); color: var(--rose); }
    .hero-stat-label { font-size: var(--text-xs); color: var(--muted); line-height: 1.4; }
    .hero-stat.featured {
      grid-column: 1 / -1;
      background: var(--charcoal); border-color: var(--charcoal);
    }
    .hero-stat.featured .hero-stat-num { color: var(--white); }
    .hero-stat.featured .hero-stat-label { color: rgba(255,255,255,0.6); }
    .hero-stat.featured .hero-stat-num span { color: var(--rose); }

    /* hero media (image + semi-opaque hover card) */
    .hero-media { position: relative; }
    .hero-media-img { display: block; width: 100%; height: 440px; box-shadow: var(--shadow-lg); }
    .hero-media-card {
      position: absolute; left: 16px; right: 16px; bottom: 16px;
      background: rgba(255,255,255,0.45);
      border: 1px solid rgba(255,255,255,0.65);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
      opacity: 0; transform: translateY(8px); pointer-events: none;
      transition: opacity .25s ease, transform .25s ease, background .25s ease;
    }
    .hero-media:hover .hero-media-card,
    .hero-media:focus-within .hero-media-card {
      opacity: 1; transform: translateY(0); background: rgba(255,255,255,0.82);
    }

    /* ══════════════════════════════════════════
       PROBLEM
    ══════════════════════════════════════════ */
    .problem { background: var(--white); }
    .problem-cred {
      display: flex; align-items: baseline; gap: 14px;
      margin: 20px 0 4px; padding: 16px 20px;
      background: var(--rose-mid); border: 1px solid rgba(212,55,77,0.18);
      border-radius: var(--radius);
    }
    .problem-cred-num {
      font-family: var(--font-display); font-size: 30px; font-weight: 700;
      color: var(--charcoal); line-height: 1; white-space: nowrap;
    }
    .problem-cred-num span { font-size: var(--text-base); color: var(--rose); }
    .problem-cred-label { font-size: var(--text-xs); color: var(--muted); line-height: 1.45; }
    .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
    .problem-grid > div { min-width: 0; }
    .problem-list { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }

    /* ── PROBLEM HERO FIELD: rolling "cloud" ticker behind the heading ──
       No .container here on purpose - this field is meant to bleed the full
       width of the viewport (the section tag itself has 0 horizontal padding
       by default; only .container normally adds the 24px/1120px constraint). */
    /* overflow is intentionally NOT hidden here - only .problem-ticker-track (below)
       clips the scrolling cards. Hiding overflow on this outer field would also clip
       the heading card's own box-shadow, cutting it off along the field's edges. */
    .problem-hero-field { position: relative; min-height: 320px; display: flex; align-items: center; }
    .problem-ticker-track {
      position: absolute; inset: 0; overflow: hidden;
      display: flex; align-items: center;
    }
    .problem-ticker-track::before, .problem-ticker-track::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
    }
    .problem-ticker-track::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
    .problem-ticker-track::after  { right: 0; background: linear-gradient(to left, var(--white), transparent); }
    .problem-ticker {
      display: flex; align-items: center; gap: 22px; width: max-content;
      padding: 16px 0;
      animation: problemCloudsDrift 48s linear infinite;
    }
    .problem-ticker:hover { animation-play-state: paused; }
    @keyframes problemCloudsDrift {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    /* Fixed width + min-height keeps every card the same size regardless of how
       much copy it holds; content is vertically centered within that box. */
    .problem-cloud {
      flex-shrink: 0; width: 280px; min-height: 128px;
      display: flex; gap: 12px; align-items: center;
      padding: 16px 18px; border-radius: 26px;
      background: rgba(253,248,249,0.9);
      border: 1px solid var(--border);
      box-shadow: 0 10px 28px rgba(31,41,55,0.06);
    }
    .problem-cloud:nth-child(odd)  { margin-top: -16px; }
    .problem-cloud:nth-child(even) { margin-top: 16px; }
    .problem-cloud .problem-icon { flex-shrink: 0; }
    .problem-cloud strong { display: block; font-size: var(--text-xs); color: var(--charcoal); }
    .problem-cloud strong:not(:only-child) { margin-bottom: 3px; }
    .problem-cloud p { font-size: var(--text-base); color: var(--muted); margin: 0; line-height: 1.5; }
    .problem-heading-card {
      position: relative; z-index: 3;
      background: rgba(255,255,255,0.8);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      box-shadow: var(--shadow-lg);
      border-radius: var(--radius);
      padding: 30px 32px;
      max-width: 440px;
      margin-left: max(24px, calc((100vw - 1120px) / 2 + 24px));
      margin-right: 24px;
    }
    @media (prefers-reduced-motion: reduce) { .problem-ticker { animation: none; } }
    @media (max-width: 900px) {
      /* Mobile: heading card sits on top, drifting problem strip runs full-bleed below it */
      .problem-hero-field { display: flex; flex-direction: column; min-height: 0; align-items: stretch; }
      .problem-heading-card {
        order: -1; position: relative; z-index: 3;
        max-width: none; margin: 0 16px 22px; padding: 22px 22px;
        background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none;
      }
      /* clip only the horizontal axis so card shadows aren't cut off top/bottom */
      .problem-ticker-track { position: relative; inset: auto; height: auto; overflow-x: clip; overflow-y: visible; }
      .problem-ticker { padding: 20px 0; }
      .problem-ticker:hover { animation-play-state: running; }  /* keep drifting; no pause on touch */
      .problem-cloud { width: 230px; min-height: 118px; }
      /* hide the solution-panel image on mobile (base .pivot-media rule sits later in source, so !important is required) */
      .pivot-media { display: none !important; }
    }
    /* Entrance animation deliberately animates opacity + margin-top only (never transform).
       Hover below uses transform for its lift. Per CSS spec, a "forwards"-filled animation
       permanently owns any property it touches, even after finishing, which would silently
       block a transition on that same property - keeping the two effects on separate
       properties means there's no JS cleanup needed and no risk of the hover lift being
       blocked once the fade-in completes. */
    @keyframes problemFadeUp { from { opacity: 0; margin-top: 16px; } to { opacity: 1; margin-top: 0; } }
    @keyframes iconPop { 0%, 100% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(1.05) rotate(5deg); } }
    .problem-item {
      position: relative; overflow: hidden; isolation: isolate;
      display: flex; gap: 14px; align-items: flex-start;
      padding: 18px 20px; border-radius: var(--radius);
      background: var(--offwhite); border: 1px solid var(--border);
      opacity: 0; animation: problemFadeUp 0.55s cubic-bezier(.2,.7,.3,1) forwards;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
      cursor: default;
    }
    /* Spotlight follows the cursor - position set by JS via --mx/--my */
    .problem-item::after {
      content: ''; position: absolute; inset: 0; z-index: 0;
      background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(227,144,182,0.4), transparent 72%);
      opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
    }
    .problem-item:hover::after { opacity: 1; }
    .problem-item > * { position: relative; z-index: 1; }
    .problem-item:nth-child(1) { animation-delay: 0.05s; }
    .problem-item:nth-child(2) { animation-delay: 0.16s; }
    .problem-item:nth-child(3) { animation-delay: 0.27s; }
    .problem-item:nth-child(4) { animation-delay: 0.38s; }
    .problem-item:hover, .problem-item:focus-within {
      transform: translateY(-5px); box-shadow: var(--shadow-lg);
      border-color: var(--accent); background: var(--white);
    }
    .problem-icon {
      font-size: var(--text-md); flex-shrink: 0; width: 38px; height: 38px;
      border-radius: 50%; background: var(--rose-mid);
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.3s ease, background 0.3s ease;
    }
    .problem-item:hover .problem-icon { animation: iconPop 0.5s ease; background: var(--rose-light); }
    @media (prefers-reduced-motion: reduce) {
      .problem-item { opacity: 1; animation: none; }
      .problem-item::after { display: none; }
      .problem-item:hover .problem-icon { animation: none; }
    }
    .problem-item strong { display: block; font-size: var(--text-sm); margin-bottom: 4px; color: var(--charcoal); }
    .problem-item p { font-size: var(--text-base); margin: 0; }
    .problem-right { padding-top: 20px; }
    /* Gradient-highlight card: shared "featured quote/callout" treatment used site-wide
       (homepage testimonial + pivot, About page quote + rebuttal, Found page testimonial).
       Light background with an animated gradient-ring border via ::before. */
    @keyframes borderSweep { to { background-position: 300% 0%; } }
    .problem-quote, .problem-answer {
      position: relative; z-index: 0;
      background: var(--white);
      border-radius: var(--radius); padding: 26px 24px;
      box-shadow: var(--shadow-lg);
    }
    .problem-quote::before, .problem-answer::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      padding: 2px; z-index: -1;
      background: linear-gradient(90deg, var(--rose), var(--accent-warm), var(--support-peach), var(--accent), var(--rose), var(--accent-warm), var(--rose));
      background-size: 300% 100%;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: borderSweep 5s linear infinite;
      will-change: background-position;
    }
    @media (prefers-reduced-motion: reduce) { .problem-quote::before, .problem-answer::before { animation: none; } }
    .problem-quote {
      color: var(--charcoal); padding: 32px;
      font-size: var(--text-md); font-style: italic;
      line-height: 1.65; margin-bottom: 20px;
      font-family: var(--font-display);
    }
    .problem-quote cite {
      display: block; margin-top: 16px; font-size: var(--text-xs);
      font-style: normal; color: var(--muted);
    }
    .problem-quote-attr { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
    .problem-quote-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px dashed var(--accent); background: rgba(227,144,182,0.15); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; overflow: hidden; }
    .problem-quote-name { font-size: var(--text-xs); font-style: normal; color: var(--charcoal); font-family: var(--font-body); line-height: 1.4; }
    .problem-quote-name span { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
    .problem-answer { margin-top: 6px; }
    .problem-answer h2, .problem-answer h3 { font-size: var(--text-lg); color: var(--charcoal); margin-bottom: 10px; }
    /* Featured variant - homepage "There's a better way" callout: tinted background
       and darker copy so it stands out more than a plain white card, plus a CTA. */
    .problem-answer-cta { background: var(--rose-light); box-shadow: 0 12px 46px rgba(212,55,77,0.20); }
    .problem-answer-cta::before { padding: 3px; }   /* thicker animated gradient ring */
    .problem-answer-cta h2 { font-size: 30px; }
    .problem-answer-cta p { color: var(--charcoal); }
    .problem-answer-cta .btn { margin-top: 18px; }
    .problem-answer p { font-size: var(--text-base); }
    /* gold "The fix" eyebrow tab */
    .pa-eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: var(--text-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: #8a6d3b; background: var(--support-peach);
      padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
    }
    .pa-eyebrow svg { width: 13px; height: 13px; }
    /* gold shimmer sweep on the CTA button */
    .pa-cta-shine { position: relative; overflow: hidden; }
    .pa-cta-shine::after {
      content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), rgba(244,201,148,0.55), transparent);
      transform: skewX(-18deg); animation: pillShimmer 2.8s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) { .pa-cta-shine::after { animation: none; } }
    .testimonial-pivot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
    .pivot-media { display: block; width: 100%; height: 100%; min-height: 340px; border-radius: 16px; box-shadow: var(--shadow); }

    
    /* Live email embed: the real edition renders responsively at the frame's own width (its true
       layout at that size), and the frame crops the top via a fixed aspect-ratio. No scaling maths,
       so it can never overflow the frame on any device. */

    /* ══════════════════════════════════════════
       PACKAGES
    ══════════════════════════════════════════ */
    .packages { background: var(--offwhite); }
    .packages-header { text-align: center; max-width: 600px; margin: 0 auto 48px; }
    .packages-header .section-intro { margin: 0 auto; }
    .packages-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    .pkg-card {
      background: var(--white); border-radius: var(--radius);
      border: 1px solid var(--border); padding: 28px;
      box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s;
      display: flex; flex-direction: column;
    }
    .pkg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .pkg-card.featured {
      border-color: var(--rose); background: var(--charcoal); grid-column: 1 / -1;
      display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
    }
    .pkg-card.featured h3 { color: var(--white); }
    .pkg-card.featured p { color: rgba(255,255,255,0.6); }
    .pkg-tag {
      display: inline-block; font-size: var(--text-xs); font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase;
      padding: 4px 10px; border-radius: 20px; margin-bottom: 14px;
    }
    .tag-free { background: rgba(148,163,184,0.15); color: #9ca3af; }
    .tag-community { background: rgba(167,139,250,0.15); color: #a78bfa; }
    .tag-seo { background: rgba(251,146,60,0.15); color: #fb923c; }
    .tag-email { background: rgba(52,211,153,0.15); color: #34d399; }
    .tag-content { background: rgba(244,114,182,0.15); color: #f472b6; }
    .pkg-card h3 { margin-bottom: 8px; font-size: var(--text-2xl); }
    .pkg-desc { font-size: var(--text-base); margin-bottom: 20px; flex: 1; }
    .pkg-price { margin-bottom: 20px; }
    .pkg-price-num {
      font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--charcoal);
    }
    .pkg-card.featured .pkg-price-num { color: var(--white); }
    .pkg-price-num span { font-size: var(--text-sm); font-weight: 400; color: var(--muted); }
    .pkg-card.featured .pkg-price-num span { color: rgba(255,255,255,0.5); }
    .pkg-price-setup { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; }
    .pkg-card.featured .pkg-price-setup { color: rgba(255,255,255,0.4); }
    .techy { background: var(--white); padding: 60px 0; }
    .techy-inner { max-width: 760px; margin: 0 auto; background: var(--rose-light); border: 1px solid var(--accent); border-radius: var(--radius); padding: 38px 36px; }
    .techy-inner h2 { font-family: var(--font-display); font-size: clamp(24px,3vw,32px); font-weight: 700; margin-bottom: 18px; color: var(--charcoal); }
    .techy-inner p { font-size: var(--text-base); line-height: 1.75; color: var(--charcoal); margin-bottom: 16px; }
    .techy-inner p:last-child { margin-bottom: 0; }
    .techy-inner p.techy-close { font-weight: 600; }
    .pkg-reassure { margin-top: 12px; font-size: var(--text-base); line-height: 1.6; color: var(--muted); }
    @media (max-width: 700px) { .techy-inner { padding: 28px 22px; } }
    .whowhat { background: var(--offwhite); padding: 56px 0; }
    .whowhat-intro { font-size: var(--text-md); color: var(--muted); max-width: 640px; margin-bottom: 28px; line-height: 1.7; }
    .whowhat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
    .whowhat-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; }
    .whowhat-col h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: 14px; color: var(--charcoal); }
    .whowhat-col.ww-you { border-top: 3px solid var(--accent); }
    .whowhat-col.ww-me { border-top: 3px solid var(--rose); }
    .whowhat-col ul { list-style: none; padding: 0; margin: 0; }
    .whowhat-col li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: var(--text-sm); line-height: 1.65; color: var(--charcoal); }
    .whowhat-col li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--rose); font-weight: 700; }
    .whowhat-time { margin-top: 22px; padding: 16px 18px; background: var(--rose-light); border-radius: 10px; font-size: var(--text-sm); line-height: 1.6; color: var(--charcoal); }
    .whowhat-time strong { color: var(--rose); }
    .whowhat-note { margin-top: 16px; font-size: var(--text-base); color: var(--muted); font-style: italic; line-height: 1.6; }
    @media (max-width: 800px) { .whowhat-grid { grid-template-columns: 1fr; } }
    .pkg-price-total { font-size: var(--text-xs); color: var(--charcoal); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.5; }
    .pkg-card.featured .pkg-price-total { color: rgba(255,255,255,0.85); border-top-color: rgba(255,255,255,0.2); }
    .pkg-includes { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
    .pkg-includes li { font-size: var(--text-base); color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
    .pkg-card.featured .pkg-includes li { color: rgba(255,255,255,0.65); }
    .pkg-includes li::before { content: '✓'; color: var(--rose); font-weight: 700; flex-shrink: 0; }
    .pkg-card-cta .btn { width: 100%; text-align: center; }

    /* ── "Tell me more" native dropdown ── */

    /* ── Three column cards below the gold panel ── */
    .pkg-cards-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
    @media (max-width: 900px) { .pkg-cards-three { grid-template-columns: 1fr; } }

    /* ══════════════════════════════════════════
       PACKAGE POP - icons, benefit lines, colour accents, CTAs
    ══════════════════════════════════════════ */
    .pkg-cards-three .pkg-card {
      position: relative; overflow: hidden; padding-top: 32px;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    /* colour-coded top accent bar per service */
    .pkg-cards-three .pkg-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    }
    .pkg-cards-three .card-found::before   { background: linear-gradient(90deg, #fb923c, #f4c994); }
    .pkg-cards-three .card-email::before   { background: linear-gradient(90deg, #34d399, #7ee0be); }
    .pkg-cards-three .card-content::before { background: linear-gradient(90deg, #ec4899, #f9a8d4); }
    .pkg-cards-three .pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .card-found:hover   { border-color: #fb923c; }
    .card-email:hover   { border-color: #34d399; }
    .card-content:hover { border-color: #ec4899; }

    /* icon chip */
    .pkg-icon {
      width: 58px; height: 58px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px; transition: transform 0.3s ease;
    }
    .pkg-icon svg { width: 30px; height: 30px; }
    .pkg-cards-three .pkg-card:hover .pkg-icon { transform: scale(1.08) rotate(-4deg); }
    .icon-found   { background: rgba(251,146,60,0.16); color: #ea6a0c; }
    .icon-email   { background: rgba(52,211,153,0.18); color: #0e9f70; }
    .icon-content { background: rgba(236,72,153,0.15); color: #db2777; }
    .icon-advice  { background: rgba(255,255,255,0.6); color: #b07414; }

    /* benefit headline - big, skimmable */
    .pkg-benefit {
      font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
      color: var(--charcoal); line-height: 1.3; margin: 2px 0 10px;
    }

    /* colour-matched CTA buttons */
    .btn-found   { background: #cf6209; color: var(--white); }
    .btn-found:hover   { background: #b35207; color: var(--white); text-decoration: none; }
    .btn-email   { background: #0b855e; color: var(--white); }
    .btn-email:hover   { background: #096f4e; color: var(--white); text-decoration: none; }
    .btn-content { background: #c92069; color: var(--white); }
    .btn-content:hover { background: #a81a58; color: var(--white); text-decoration: none; }

    /* gold panel: header row + icon-led info boxes */

    

    /* ══════════════════════════════════════════
       SHIMMERING ZIG-ZAG FLOW CONNECTOR (SVG, edge-to-edge)
    ══════════════════════════════════════════ */
    #page-home { position: relative; }
    .flow-svg {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 1; overflow: visible;
    }
    .flow-svg .zz-base {
      fill: none; stroke: #ecaecb; stroke-width: 2.5;
      stroke-linecap: round; stroke-linejoin: round; opacity: .5;
    }
    .flow-svg .zz-glow {
      fill: none; stroke: #f4c994; stroke-width: 3;
      stroke-linecap: round; stroke-linejoin: round;
      filter: drop-shadow(0 0 4px rgba(244,201,148,0.9));
    }
    /* keep the connected boxes above the connector so the line tucks under their edges */
    .problem-answer-cta { position: relative; z-index: 2; }

    /* Packages "pill" - the endpoint the shimmer flow arrives at */
    .pkg-pill-wrap { text-align: center; margin: 0 0 22px; position: relative; z-index: 2; }
    .pkg-pill {
      display: inline-block;
      font-size: var(--text-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
      color: var(--charcoal); background: var(--white);
      border: 1.5px solid #e0ad6f; padding: 9px 22px; border-radius: 999px;
    }
    @keyframes pillShimmer { 0% { left: -60%; } 100% { left: 140%; } }

    @media (prefers-reduced-motion: reduce) {
      .pkg-pill::after { animation: none; }
    }

    /* ══════════════════════════════════════════
       HOW IT WORKS
    ══════════════════════════════════════════ */
    .how { background: var(--white); }
    .how-header { max-width: 560px; margin-bottom: 48px; }
    .how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .how-step {
      background: var(--offwhite); border-radius: var(--radius); padding: 28px 24px;
      border: 1px solid var(--border); position: relative;
    }
    .how-num {
      font-family: var(--font-display); font-size: 48px; font-weight: 700;
      color: var(--border); line-height: 1; margin-bottom: 12px;
    }
    .how-step h3 { font-size: var(--text-lg); margin-bottom: 10px; }
    .how-step p { font-size: var(--text-base); }

    /* ══════════════════════════════════════════
       FAQ - AEO OPTIMISED
    ══════════════════════════════════════════ */
    .faq { background: var(--offwhite); }
    .faq-header { max-width: 560px; margin-bottom: 40px; }
    .faq-aeo-note {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: var(--text-xs); color: var(--charcoal-light);
      background: var(--white); border: 1px solid var(--border);
      padding: 5px 12px; border-radius: 20px; margin-bottom: 32px;
    }
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .faq-item {
      background: var(--white); border-radius: var(--radius); border: 1px solid var(--border);
      overflow: hidden;
    }
    .faq-q {
      /* button reset - these are real <button> elements for keyboard access */
      width: 100%; background: none; border: none; font-family: inherit; text-align: left;
      font-size: var(--text-sm); font-weight: 600; color: var(--charcoal);
      padding: 20px 22px; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
    }
    .faq-q:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
    .faq-q::after { content: '+'; color: var(--rose); font-size: var(--text-xl); flex-shrink: 0; font-weight: 400; }
    .faq-a {
      font-size: var(--text-base); color: var(--muted); padding: 0 22px 20px;
      line-height: 1.75; display: none;
    }
    .faq-item.open .faq-a { display: block; }
    .faq-item.open .faq-q::after { content: '−'; }

    /* ══════════════════════════════════════════
       ABOUT
    ══════════════════════════════════════════ */
    .about { background: var(--white); overflow: hidden; }
    .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    /* Without this, the ticker's huge intrinsic content width (below) blows out this
       grid column - "auto" is the implicit minimum on a 1fr track, so a grid item with
       wide unbreakable content can force the whole row (and page) wider than the
       viewport. Same fix already applied to .problem-grid > div above. */
    .about-inner > div { min-width: 0; }
    .about-img-placeholder {
      background: var(--offwhite); border-radius: var(--radius);
      aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
      border: 2px dashed var(--border); color: var(--muted); font-size: var(--text-xs); flex-direction: column; gap: 8px;
    }
    .about-img-placeholder span { font-size: 32px; }
    .about-credentials { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
    .about-cred {
      display: flex; gap: 12px; align-items: flex-start;
      font-size: var(--text-lg); color: var(--muted); line-height: 1.6;
    }
    .about-cred-icon { color: var(--rose); flex-shrink: 0; margin-top: 1px; font-size: var(--text-xl); }

    /* ══════════════════════════════════════════
       CTA BAND
    ══════════════════════════════════════════ */
    .cta-band { background: var(--rose); padding: 64px 0; }
    .cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
    .cta-band h2 { font-size: clamp(24px, 3vw, 34px); color: var(--white); max-width: 540px; }
    .cta-band p { color: rgba(255,255,255,0.75); font-size: var(--text-base); margin-top: 10px; }
    .btn-white { background: var(--white); color: var(--rose); }
    .btn-white:hover { background: var(--offwhite); text-decoration: none; }

    /* ══════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════ */
    footer { background: var(--charcoal); padding: 48px 0 32px; }
    .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
    .footer-brand-name {
      font-family: var(--font-brand); font-size: var(--text-xl); font-weight: 400;
      color: var(--white); margin-bottom: 12px; font-synthesis: none;
      font-palette: --bop-on-dark;
    }
    .footer-brand-name span { color: inherit; }
    .footer-tagline { font-size: var(--text-xs); color: rgba(255,255,255,0.4); line-height: 1.6; max-width: 280px; }
    .footer-col h4 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 14px; font-family: var(--font-body); }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .footer-links a { font-size: var(--text-xs); color: rgba(255,255,255,0.6); text-decoration: none; }
    .footer-links a:hover { color: var(--rose); }
    .footer-social { display: flex; gap: 12px; margin-top: 14px; }
    .footer-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: 50%;
      background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
      transition: background .15s, color .15s;
    }
    .footer-social a:hover { background: var(--rose); color: var(--white); }
    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center;
      border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; flex-wrap: wrap; gap: 12px;
    }
    .footer-legal { font-size: var(--text-xs); color: rgba(255,255,255,0.25); }
    .footer-badges { display: flex; gap: 10px; }
    .footer-badge {
      font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
      padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.35);
    }

    /* ══════════════════════════════════════════
       TASK TICKER
    ══════════════════════════════════════════ */
    .task-ticker-outer {
      margin: 20px 0 24px;
      border-radius: 8px;
      overflow: hidden;
      max-width: 100%;
      border: 1px solid var(--border);
      background: var(--offwhite);
    }
    .task-ticker-label {
      font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--charcoal-light);
      padding: 8px 16px 6px; margin: 0;
    }
    .task-ticker-track {
      overflow: hidden;
      position: relative;
      padding: 0 0 10px;
    }
    .task-ticker-track::before,
    .task-ticker-track::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 50px; z-index: 1; pointer-events: none;
    }
    .task-ticker-track::before { left: 0; background: linear-gradient(to right, var(--offwhite), transparent); }
    .task-ticker-track::after  { right: 0; background: linear-gradient(to left,  var(--offwhite), transparent); }
    .task-ticker-inner {
      display: flex; align-items: center; gap: 0;
      animation: tickerscroll 55s linear infinite;
      width: max-content;
    }
    .task-ticker-inner:hover { animation-play-state: paused; }
    .tti {
      font-size: var(--text-xs); color: var(--muted); padding: 0 10px;
      white-space: nowrap;
    }
    .ttd { font-size: var(--text-xs); color: var(--accent); flex-shrink: 0; }
    @keyframes tickerscroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── PROBLEM STORY CARDS ── */
    .problem-stories { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
    .problem-story {
      display: flex; gap: 10px; align-items: flex-start;
      background: rgba(212,55,77,0.06); border: 1px solid rgba(227,144,182,0.25);
      border-radius: 8px; padding: 12px 14px;
    }
    .ps-icon { font-size: var(--text-xs); flex-shrink: 0; margin-top: 1px; }
    .problem-story p { font-size: var(--text-base); font-style: italic; color: var(--charcoal-mid); margin: 0; line-height: 1.6; }

    /* ══════════════════════════════════════════
       WIREFRAME ANNOTATION OVERLAY
    ══════════════════════════════════════════ */
    .wireframe-bar {
      background: #1e293b; border-bottom: 2px solid var(--rose);
      padding: 10px 24px; display: flex; justify-content: space-between; align-items: center;
    }
    .wireframe-bar-label { font-size: var(--text-xs); font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; }
    .wireframe-bar-meta { font-size: var(--text-xs); color: rgba(255,255,255,0.4); display: flex; gap: 16px; }
    .wireframe-bar-meta span { display: flex; align-items: center; gap: 5px; }
    .dot-green { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex-shrink: 0; }
    .dot-orange { width: 7px; height: 7px; border-radius: 50%; background: #fb923c; flex-shrink: 0; }

    /* ══════════════════════════════════════════
       GLOSSARY (Free Resources)
       All classes prefixed glossary- to avoid any collision with existing site classes.
    ══════════════════════════════════════════ */
    .tag-resources { background: rgba(212,55,77,0.1); color: var(--rose); }
    .glossary-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
    .glossary-filter-label { font-size: var(--text-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; }
    .glossary-filter-btn {
      font-family: var(--font-body); font-size: var(--text-xs); padding: 7px 15px; border-radius: 20px;
      border: 1.5px solid var(--accent); background: var(--white); color: var(--charcoal);
      cursor: pointer; transition: all 0.15s;
    }
    .glossary-filter-btn:hover, .glossary-filter-btn.active { background: var(--rose); border-color: var(--rose); color: var(--white); }
    .glossary-search-wrap { margin-top: 18px; max-width: 480px; }
    .glossary-search-input {
      width: 100%; font-family: var(--font-body); font-size: var(--text-xs); padding: 12px 16px;
      border: 1.5px solid var(--border); border-radius: 8px; outline: none; color: var(--charcoal);
    }
    .glossary-search-input:focus { border-color: var(--rose); }
    .glossary-category-group { margin-bottom: 48px; }
    .glossary-category-group:last-child { margin-bottom: 0; }
    .glossary-category-heading {
      font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
      color: var(--muted); padding-bottom: 10px; border-bottom: 2px solid var(--rose-light);
      margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
    }
    .glossary-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); flex-shrink: 0; }
    .glossary-term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
    .glossary-term-card {
      background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px 22px; box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s;
    }
    .glossary-term-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }
    .glossary-term-card.hidden { display: none; }
    .glossary-term-name { font-size: var(--text-sm); font-weight: 700; color: var(--charcoal); margin-bottom: 8px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
    .glossary-term-badge { font-size: var(--text-xs); font-weight: 700; padding: 3px 9px; border-radius: 10px; letter-spacing: 0.5px; text-transform: uppercase; flex-shrink: 0; }
    .glossary-badge-content { background: var(--rose-light); color: var(--rose); }
    .glossary-badge-strategy { background: rgba(96,160,224,0.15); color: #2060a0; }
    .glossary-badge-platform { background: rgba(42,138,16,0.12); color: #2a6a10; }
    .glossary-badge-seo { background: rgba(138,80,0,0.12); color: #8a5000; }
    .glossary-term-def { font-size: var(--text-base); color: var(--muted); line-height: 1.65; }
    .glossary-term-example {
      margin-top: 12px; padding: 10px 14px; background: var(--offwhite); border-radius: 6px;
      font-size: var(--text-base); color: var(--charcoal); font-style: italic; line-height: 1.55;
    }
    .glossary-term-example::before { content: "Example: "; font-weight: 700; font-style: normal; color: var(--rose); }
    .glossary-no-results { text-align: center; padding: 56px 0; color: var(--muted); display: none; }
    @media (max-width: 640px) {
      .glossary-term-grid { grid-template-columns: 1fr; }
      .glossary-filter-bar { gap: 8px; }
    }

    /* ══════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════ */
    @media (max-width: 900px) {
      .hero-inner, .problem-grid, .about-inner, .testimonial-pivot-grid { grid-template-columns: 1fr; }
      .packages-grid { grid-template-columns: 1fr; }
      .pkg-card.featured { grid-template-columns: 1fr; grid-column: auto; }
      .how-steps { grid-template-columns: 1fr; }
      .faq-grid { grid-template-columns: 1fr; }
      .hero-stats { grid-template-columns: 1fr 1fr; }
      .footer-inner { grid-template-columns: 1fr 1fr; }
      .cta-band-inner { flex-direction: column; text-align: center; }
    }

    @media (max-width: 640px) {
      .footer-inner { grid-template-columns: 1fr; gap: 32px; }
      .footer-tagline { max-width: none; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .footer-badges { flex-wrap: wrap; }
    }

    /* ══════════════════════════════════════════
       MULTI-PAGE SHELL
    ══════════════════════════════════════════ */

    

    /* Page-switcher top bar update */
    .nav-links a.nav-active { color: var(--rose); }
    .nav-dd { position: relative; }
    .nav-dd-menu {
      position: absolute; top: 100%; left: 0;
      background: var(--white); border: 1px solid var(--border);
      border-radius: 8px; box-shadow: var(--shadow-lg);
      padding: 8px 0; min-width: 200px; z-index: 200; margin-top: 6px;
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: translateY(-4px);
      transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    }
    /* Invisible bridge over the margin-top gap above, so moving the mouse from the
       trigger link down into the menu doesn't briefly leave every hoverable box and
       cause the menu to disappear before the cursor arrives. */
    .nav-dd-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
    .nav-dd:hover .nav-dd-menu,
    .nav-dd-menu:hover,
    .nav-dd.nav-dd-open .nav-dd-menu {
      opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
      transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
    }
    .nav-dd-menu a {
      display: block; padding: 9px 18px;
      font-size: var(--text-xs); color: var(--charcoal); font-weight: 500;
    }
    .nav-dd-menu a:hover { color: var(--rose); background: var(--offwhite); }
    .nav-dd > a::after { content: ' ▾'; font-size: var(--text-xs); opacity: .5; }
    @media (prefers-reduced-motion: reduce) { .nav-dd-menu { transition: none; } }

    /* ── MOBILE NAV / BURGER MENU ── */
    .nav-toggle {
      display: none; flex-direction: column; justify-content: center; gap: 5px;
      width: 42px; height: 42px; padding: 9px;
      background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
    }
    .nav-toggle span {
      display: block; width: 100%; height: 2px; background: var(--charcoal);
      border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
    }
    nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 900px) {
      .nav-toggle { display: inline-flex; }
      .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        display: none; flex-direction: column; align-items: stretch; gap: 0;
        background: var(--white); border-top: 1px solid var(--border);
        box-shadow: var(--shadow-lg); padding: 8px 0 16px;
        max-height: calc(100vh - 60px); overflow-y: auto;
      }
      nav.nav-open .nav-links { display: flex; }
      .nav-links > a { padding: 13px 24px; font-size: var(--text-sm); }
      .nav-dd { position: static; }
      .nav-dd > a { display: block; padding: 13px 24px; font-size: var(--text-sm); }
      .nav-dd-menu {
        position: static; opacity: 1; visibility: visible; pointer-events: auto;
        transform: none; box-shadow: none; border: none; border-radius: 0;
        margin: 0; padding: 0; min-width: 0; background: var(--offwhite);
        max-height: 0; overflow: hidden; transition: max-height .28s ease;
      }
      nav .nav-dd.nav-dd-open .nav-dd-menu { max-height: 460px; }
      .nav-dd-menu::before { display: none; }
      .nav-dd-menu a { padding: 10px 24px 10px 40px; font-size: var(--text-xs); }
      .nav-dd > a::after { transition: transform .2s ease; display: inline-block; }
      nav .nav-dd.nav-dd-open > a::after { transform: rotate(180deg); }
      .nav-links .btn { display: block; margin: 10px 24px 0; text-align: center; }
      .nav-links .btn-sm { padding: 12px 20px; font-size: var(--text-xs); }
    }

    /* ── BREADCRUMB ── */
    .breadcrumb {
      padding: 12px 0 0; font-size: var(--text-xs); color: var(--charcoal-light);
      display: flex; align-items: center; gap: 6px;
    }
    .breadcrumb a { color: var(--charcoal-light); }
    .breadcrumb a:hover { color: var(--rose); }
    .breadcrumb span { color: var(--border); }

    /* ── URL STRIP ── */
    .url-strip {
      background: #1e293b; padding: 6px 18px;
      font-size: var(--text-xs); font-family: monospace; color: var(--muted);
      display: flex; align-items: center; gap: 8px;
    }
    .url-strip .us-lock { color: #34d399; }
    .url-strip .us-url  { color: #93c5fd; }

    /* ── PACKAGE PAGE LAYOUT ── */
    .pkg-page-hero { padding: 64px 0 48px; background: var(--offwhite); }
    .pkg-page-hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
    .pkg-page-tag {
      display: inline-block; font-size: var(--text-xs); font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase;
      padding: 4px 10px; border-radius: 20px; margin-bottom: 14px;
    }
    .pkg-page-price {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
    }
    .pkg-page-price h3 { font-size: var(--text-base); margin-bottom: 16px; }
    .pkg-page-price-num {
      font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--charcoal);
    }
    .pkg-page-price-num span { font-size: var(--text-base); font-weight: 400; color: var(--muted); }
    .pkg-page-price-setup { font-size: var(--text-xs); color: var(--muted); margin: 4px 0 20px; }
    .pkg-page-includes { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
    .pkg-page-includes li { font-size: var(--text-base); color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
    .pkg-page-includes li::before { content: '✓'; color: var(--rose); font-weight: 700; flex-shrink: 0; }
    .pkg-page-includes li strong { color: var(--charcoal); font-weight: 600; }

    .deliverables-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
    .deliv-img-slot {
      flex-shrink: 0;
      width: 110px;
      aspect-ratio: 9/16;
      background: var(--rose-light);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 2px dashed var(--accent);
      color: var(--accent);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      overflow: hidden;
      position: relative;
    }
    .deliv-img-slot svg { opacity: 0.5; }
    .deliv-img-slot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      border-radius: 6px;
    }
    .deliv-card-media {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 16px;
    }
    .deliv-card-media .deliv-card-text { flex: 1; min-width: 0; }
    .deliv-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
    }
    .deliv-card h4 { font-size: var(--text-base); margin-bottom: 8px; color: var(--charcoal); }
    .deliv-card p { font-size: var(--text-base); }

    /* ── BLOG ── */
    .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .blog-card {
      background: var(--white); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
      display: flex; flex-direction: column; transition: transform .2s;
    }
    .blog-card:hover { transform: translateY(-3px); }
    .blog-card[hidden] { display: none; }
    .blog-card-img {
      background: var(--box, var(--offwhite)); height: 160px;
      display: flex; align-items: center; justify-content: center;
      font-size: 32px; border-bottom: 1px solid var(--border);
    }
    .blog-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
    .blog-cat {
      display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--rose); margin-bottom: 8px;
    }
    .blog-card-body h3 { font-size: var(--text-base); margin-bottom: 8px; line-height: 1.4; }
    .blog-card-body p { font-size: var(--text-base); flex: 1; }
    .blog-card-meta { font-size: var(--text-xs); color: var(--charcoal-light); margin-top: 14px; }
    .blog-cats-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
    .bcat-btn {
      padding: 7px 16px; border-radius: 20px; font-size: var(--text-xs); font-weight: 600;
      border: 1.5px solid var(--border); background: var(--white); color: var(--muted);
      cursor: pointer; font-family: var(--font-body);
    }
    .bcat-btn.active { background: var(--rose); border-color: var(--rose); color: var(--white); }

    /* ── ARTICLE ── */
    .article-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
    .article-body h2 { font-size: 24px; margin: 28px 0 12px; }
    .article-body h3 { font-size: var(--text-lg); margin: 22px 0 10px; }
    .article-body p { font-size: var(--text-sm); line-height: 1.8; margin-bottom: 16px; }
    .article-body ul { margin: 12px 0 16px 20px; }
    .article-body ul li { font-size: var(--text-base); color: var(--muted); margin-bottom: 7px; line-height: 1.7; }
    .article-toc { background: var(--offwhite); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 24px; }
    .article-toc h4 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--charcoal-light); margin-bottom: 10px; font-family: var(--font-body); }
    .article-toc ol { margin-left: 16px; }
    .article-toc ol li { font-size: var(--text-xs); color: var(--rose); margin-bottom: 5px; }
    .article-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
    .sidebar-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
    .author-box { display: flex; gap: 12px; align-items: flex-start; }
    .author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--rose-mid); border: 2px solid var(--rose); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); }
    .author-avatar-img { object-fit: cover; }
    .author-box-link { text-decoration: none; color: inherit; }
    .author-box-link:hover strong { color: var(--rose); }
    .article-inline-cta { background: var(--rose-mid); border: 1px solid rgba(212,55,77,.18); border-radius: var(--radius); padding: 20px 22px; margin: 28px 0; }
    .article-inline-cta h4 { font-size: var(--text-base); margin-bottom: 8px; color: var(--charcoal); }
    .article-inline-cta p { font-size: var(--text-base); margin-bottom: 12px; }

    /* ── CONTACT ── */
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .contact-form label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--charcoal); margin-bottom: 5px; margin-top: 14px; }
    .contact-form input, .contact-form select, .contact-form textarea {
      width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
      border-radius: 8px; font-size: var(--text-xs); font-family: var(--font-body); color: var(--text);
      background: var(--white); outline: none;
    }
    .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--rose); }
    .contact-form textarea { height: 100px; resize: vertical; }
    .cal-embed {
      background: var(--offwhite); border: 1.5px dashed var(--border);
      border-radius: var(--radius); height: 260px;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 8px; color: var(--muted); font-size: var(--text-xs); text-align: center;
    }

    /* ── PACKAGES COMPARE ── */
    .compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); margin-top: 32px; }
    .compare-table th { background: var(--charcoal); color: var(--white); padding: 12px 14px; text-align: center; font-size: var(--text-xs); font-weight: 700; }
    .compare-table th:first-child { background: var(--charcoal); text-align: center; }
    .compare-table th a { color: var(--rose); cursor: pointer; }
    .compare-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--white); vertical-align: middle; text-align: center; }
    .compare-table tr:hover td { background: var(--offwhite); }
    /* Sample edition next to Recent editions */

    /* Compare table in its own full-width section, content centred */

    .compare-cta { margin: 20px auto 0; max-width: 860px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
    .compare-cta .btn { flex: 1 1 240px; text-align: center; }

    .compare-table td:first-child { font-weight: 600; color: var(--charcoal); font-size: var(--text-xs); text-align: center; }
    .ct-yes { color: #16a34a; font-weight: 700; text-align: center; }
    .ct-no  { color: #d1d5db; text-align: center; }
    .ct-hi  { color: var(--rose); font-weight: 700; text-align: center; }

    @media (max-width: 900px) {
      .pkg-page-hero-inner, .deliverables-grid, .contact-grid,
      .article-layout, .sp-page-inner { grid-template-columns: 1fr; }
      .blog-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .deliv-card-media { flex-direction: column; }
      .deliv-card-media .deliv-img-slot { width: 100%; aspect-ratio: 16/9; }
    }
    .found-testimonial-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 28px; align-items: stretch; }
    .found-reel-slot { border: 2px dashed var(--accent); background: var(--rose-light); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--accent); font-size: var(--text-xs); font-weight: 600; text-align: center; padding: 20px; aspect-ratio: 9/16; width: 100%; }
    .found-reel-slot svg { opacity: 0.6; }
    @media (max-width: 900px) {
      .found-testimonial-grid { grid-template-columns: 1fr; }
      .found-reel-slot { aspect-ratio: auto; height: 320px; }
    }

/* ══════════════════════════════════════════
   FOUND PAGE REFRESH - 2026-07-08
   Scoped additions only. Existing shared component
   classes (.pkg-page-price, .pkg-page-hero, .contact-grid,
   .faq, .problem-list/.problem-item, etc.) are reused as-is
   or via found-* scoped variants so other package pages are
   not affected. The .pkg-page-includes li fix below is the
   one intentional exception - it corrects a checkbox-list
   layout bug that also existed on the other package pages.
   ══════════════════════════════════════════ */
.found-problem-list { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.found-problem-item { display: flex; gap: 12px; align-items: flex-start; padding: 15px 16px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--border); }
.found-problem-icon { font-size: var(--text-lg); flex-shrink: 0; margin-top: 1px; }
.found-problem-item strong { font-size: var(--text-base); color: var(--charcoal); font-weight: 600; line-height: 1.5; }

/* Bugfix: checkmark list items with inline <strong> tags broke under the old
   flex layout (each bold word became its own flex item). Positioned checkmark
   instead, so rich text flows normally. Applies site-wide to all package pages. */
.pkg-page-includes li { font-size: var(--text-base); color: var(--muted); line-height: 1.6; position: relative; padding-left: 22px; display: block; }
.pkg-page-includes li::before { content: '✓'; color: var(--rose); font-weight: 700; position: absolute; left: 0; top: 0; }

.pkg-page-tag-dark { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; background: rgba(227,144,182,0.1); color: var(--accent); border: 1.5px solid rgba(227,144,182,0.6); }

.img-slot { border: 2px dashed var(--accent); background: var(--rose-light); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--accent); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; padding: 12px; }
.img-slot svg { opacity: 0.55; }
.img-slot-wide { height: 180px; margin-bottom: 16px; }

.found-hero-top { padding: 56px 0 48px; background: var(--offwhite); }
.found-hero-top-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
.found-hero-top h1 { color: var(--charcoal); margin-bottom: 16px; }
.found-hero-top .subtext { font-size: var(--text-lg); color: var(--charcoal-mid); line-height: 1.7; margin-bottom: 24px; max-width: 480px; }

.found-problem-section { padding: 48px 0 64px; background: var(--white); }

.how-it-works-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.pkg-page-price .stage-label { font-size: var(--text-xs); color: var(--muted); margin-bottom: 16px; display: block; }

/* Background-image section: swap the background-image url() below for the final photo.
   Desktop source: 2400x1200px (2:1), JPG or WebP, under ~350KB, keep the focal subject
   centered in the middle 60% of the frame so it survives cover-crop on ultra-wide screens.
   Mobile crop: same file works via background-position:center, but if a dedicated crop is
   preferred, swap in a 1080x1350px (4:5) portrait version at the max-width:700px breakpoint. */
.solution-section {
  /* Once the photo is ready, use:
     background-image: linear-gradient(rgba(17,24,39,0.72), rgba(17,24,39,0.72)), url('your-image.jpg');
     Keep the gradient layer - it's what keeps the white pill/labels/heading readable over a photo. */
  position: relative;
  padding: 8px 0 72px;
  background-color: var(--charcoal);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.solution-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(227,144,182,0.07) 0px, rgba(227,144,182,0.07) 2px, transparent 2px, transparent 16px);
  pointer-events: none;
}
.solution-section .container { position: relative; z-index: 1; }
.solution-section .section-label { color: var(--accent); }
.solution-section .section-title { color: var(--white); }
.solution-bg-flag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; margin: 20px 0 18px; }

.choose-adventure-intro { max-width: 720px; margin-bottom: 40px; }
.choose-adventure-intro h3 { color: var(--rose); font-size: var(--text-xs); letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; margin-top: 20px; margin-bottom: 0; }
.adventure-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.adventure-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.adventure-col h4 { font-size: var(--text-lg); color: var(--charcoal); margin-bottom: 6px; }
.adventure-col > p { font-size: var(--text-base); margin-bottom: 4px; }
.content-matrix { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px; }
.content-matrix-2col { grid-template-columns: repeat(2,1fr); }
.content-matrix-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 15px; }
.content-matrix-col h5 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; font-family: var(--font-body); }
.content-matrix-col ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.content-matrix-col li { font-size: var(--text-base); color: var(--charcoal-mid); display: flex; gap: 6px; line-height: 1.45; }
.content-matrix-col li::before { content: '•'; color: var(--accent); flex-shrink: 0; }
.content-matrix-plus { margin-top: 14px; background: var(--rose-mid); border: 1px solid rgba(212,55,77,0.18); border-radius: var(--radius); padding: 15px 17px; }
.content-matrix-plus p { font-size: var(--text-base); margin: 0 0 6px; color: var(--charcoal-mid); }
.content-matrix-plus p:last-child { margin-bottom: 0; }
.content-matrix-plus strong { color: var(--rose); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; }

/* NOTE: the AI-check form is now fully styled by the scoped assets/form-aicheck.css
   (loaded only on the Found page). The old unscoped .ai-check-* rules that used to
   live here leaked onto the niche checkboxes (input{width:100%;border} turned each
   checkbox into a full-width box), so they were removed. Do not re-add form styling
   here; edit form-aicheck.css instead. */

.faq-draft-flag { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: var(--support-peach); color: #7a5210; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }

.contact-side { background: var(--offwhite); border-radius: var(--radius); padding: 24px; border: 1px solid var(--border); }
.contact-side h4 { font-size: var(--text-sm); color: var(--charcoal); margin-bottom: 12px; }
.contact-side ol { margin-left: 16px; display: flex; flex-direction: column; gap: 8px; }
.contact-side ol li { font-size: var(--text-base); color: var(--muted); }

@media (max-width: 900px) {
  .found-hero-top-inner, .how-it-works-grid, .content-matrix-2col, .adventure-grid { grid-template-columns: 1fr; }
}

/* ── Found page: AI-check card pinned across the hero + problem sections ── */
.found-sticky-wrap { position: relative; }
.found-sticky-rail { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.found-sticky-rail-inner { height: 100%; display: flex; justify-content: flex-end; }
.found-sticky-card { pointer-events: auto; }

/* Desktop: card sticks in the right column and rolls over both sections.
   Left content reserves 400px on the right so nothing is cut off. */
@media (min-width: 901px) {
  .found-hero-top-inner { display: block; padding-right: 400px; }
  .found-hero-top .subtext { max-width: none; }
  .found-problem-inner { padding-right: 400px; }
  .found-sticky-card {
    position: sticky; top: 88px;
    width: 360px; margin-top: 56px;
    align-self: flex-start;
  }
}

/* Mobile: card returns to normal flow, sitting between the hero and the problem list. */
@media (max-width: 900px) {
  .found-sticky-wrap { display: flex; flex-direction: column; }
  .found-hero-top { order: 1; }
  .found-sticky-rail { order: 2; position: static; inset: auto; pointer-events: auto; }
  .found-sticky-rail-inner { height: auto; display: block; }
  .found-sticky-rail-inner.container { padding: 0 16px; }
  .found-problem-section { order: 3; }
  .found-sticky-card { width: auto; margin-top: 0; margin-bottom: 24px; }
}

    /* ══════════════════════════════════════════════════════════
       NEW PACKAGES PAGES (merged 21 July 2026)
       Scoped under .pkg2 so nothing leaks to the rest of the site.
       Only the .btn* rules above are global, by decision.
       ══════════════════════════════════════════════════════════ */
.pkg2 h1, .pkg2 h2, .pkg2 h3, .pkg2 h4{font-family:var(--font-display);font-weight:700;line-height:1.18;margin:0}
.pkg2 p{margin:0 0 1em}
.pkg2 ul{margin:0;padding-left:1.15em}
.pkg2 li{margin-bottom:.45em}
.pkg2 a{color:var(--accent-text)}
.pkg2 .viewport{height:80vh;overflow-y:auto;position:relative;background:var(--white)}
.pkg2 .page.on{display:block}
.pkg2 /* ---- sticky hero, .pkg2 card straddles image and page ---- */ .hero-sticky{position:sticky;top:0;height:470px;overflow:hidden;z-index:0}
.pkg2 .hero-img{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#F0E4E9,#F0E4E9 16px,#EBDDE3 16px,#EBDDE3 32px);display:flex;align-items:flex-start;justify-content:center;text-align:center;padding:46px 30px}
.pkg2 .hero-img span{max-width:46ch;color:var(--accent-text);font-size:var(--text-xs);font-weight:700;line-height:1.6}
.pkg2 .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.16) 100%)}
.pkg2 .hero-cardwrap{position:relative;z-index:4;max-width:1000px;margin:0 auto;padding:0 36px}
.pkg2 .hero-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:36px 38px 32px;max-width:640px;margin-top:-210px}
.pkg2 .hero-card h1{font-size:40px;margin-bottom:14px}
.pkg2 .hero-card .lead{font-size:var(--text-lg);color:var(--muted);max-width:48ch}
.pkg2 /* white page begins halfway up the card, .pkg2 so its top half sits on the photo */ .content{position:relative;z-index:3;background:var(--white);margin-top:-118px;padding-top:130px}
.pkg2 .wrap{max-width:1000px;margin:0 auto;padding:0 36px}
.pkg2 .eyebrow{font-size:var(--text-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:700;margin-bottom:12px}
.pkg2 .btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;align-items:center}
.pkg2 .reassure{font-size:var(--text-sm);color:var(--muted);margin-top:16px;padding-left:26px;position:relative;max-width:56ch}
.pkg2 .reassure:before{content:"♥";position:absolute;left:0;color:var(--accent-text)}
.pkg2 section.band{padding:58px 0;border-bottom:1px solid var(--border)}
.pkg2 section.band.tint{background:var(--offwhite)}
.pkg2 .band h2{font-size:32px;margin-bottom:10px}
.pkg2 .band .sect-lead{color:var(--muted);font-size:var(--text-lg);max-width:58ch;margin-bottom:32px}
.pkg2 .note{font-size:var(--text-xs);color:var(--muted);margin-top:12px}
.pkg2 .spec{font-size:var(--text-xs);color:var(--accent-text);background:var(--rose-light);border-radius:8px;padding:10px 14px;margin-top:12px;font-weight:700}
.pkg2 .slot{background:repeating-linear-gradient(45deg,#F7F1F3,#F7F1F3 12px,#F2EAED 12px,#F2EAED 24px);border:1.5px dashed var(--accent);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--accent-text);font-size:var(--text-xs);font-weight:700;line-height:1.5}
.pkg2 .slot span{max-width:32ch}
.pkg2 .slot.med{min-height:230px}
.pkg2 .ico{width:34px;height:34px;stroke:var(--rose);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pkg2 .ico-sm{width:22px;height:22px}
.pkg2 /* stepper */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:14px}
.pkg2 .steps:before{content:"";position:absolute;top:34px;left:9%;right:9%;height:2.5px;background:var(--accent)}
.pkg2 .step{text-align:center;padding:0 12px}
.pkg2 .step .bub{width:68px;height:68px;border-radius:50%;background:var(--white);border:2.5px solid var(--rose);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.pkg2 .step .wk{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--accent-text);margin-bottom:6px}
.pkg2 .step h4{font-size:var(--text-md);margin-bottom:8px}
.pkg2 .step p{font-size:var(--text-sm);color:var(--muted);margin:0}
.pkg2 /* outcome cards */ .ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pkg2 .ocard{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.pkg2 .ocard .top{padding:24px 24px 0}
.pkg2 .ocard h3{font-size:var(--text-xl);margin:0 0 8px}
.pkg2 .ocard p{font-size:var(--text-sm);color:var(--muted)}
.pkg2 .ocard .art{margin-top:auto;padding:18px 24px 24px}
.pkg2 /* artefact mocks */ .serp{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow);font-size:var(--text-sm)}
.pkg2 .serp .u{color:#5f6368;font-size:var(--text-xs);display:flex;align-items:center;gap:7px;margin-bottom:5px}
.pkg2 .serp .fav{width:19px;height:19px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.pkg2 .serp .t{color:#1a0dab;font-size:var(--text-lg);font-family:var(--font-body);margin-bottom:4px}
.pkg2 .serp .d{color:#4d5156}
.pkg2 .serp .stars{color:#8a5a00;font-size:var(--text-xs);margin-top:6px}
.pkg2 .chatcard{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:16px 18px;font-size:var(--text-sm);box-shadow:var(--shadow)}
.pkg2 .chatcard .who{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:8px}
.pkg2 .chatcard b{color:var(--accent-text)}
.pkg2 .docmock{background:var(--white);border:1.5px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:18px}
.pkg2 .docmock .dh{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:10px}
.pkg2 .docmock .ln{height:8px;background:#EFE9EB;border-radius:4px;margin-bottom:7px}
.pkg2 .docmock .ln.s{width:62%}
.pkg2 .docmock .ln.m{width:84%}
.pkg2 .docmock .hl{background:var(--rose-light)}
.pkg2 .phone{width:210px;border:9px solid #171516;border-radius:26px;background:var(--white);overflow:hidden;box-shadow:var(--shadow-lg)}
.pkg2 .phone .ph-top{background:#075E54;color:var(--white);padding:9px 11px;font-size:var(--text-xs);font-weight:700}
.pkg2 .phone .ph-img{aspect-ratio:1/1;background:repeating-linear-gradient(45deg,#F7F1F3,#F7F1F3 10px,#F2EAED 10px,#F2EAED 20px);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);color:var(--accent-text);font-weight:700;text-align:center;padding:12px}
.pkg2 .phone .ph-cap{padding:11px;font-size:var(--text-xs);line-height:1.5}
.pkg2 .gal{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.pkg2 .gal.rev .g-txt{order:2}
.pkg2 .g-txt h3{font-size:26px;margin-bottom:10px}
.pkg2 .g-txt .tagline{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--accent-text);font-weight:700;margin-bottom:10px}
.pkg2 .g-txt p{font-size:var(--text-md);color:var(--muted)}
.pkg2 .g-txt ul{font-size:var(--text-md)}
.pkg2 /* time commitment */ .timebox{background:var(--charcoal);color:var(--white);border-radius:var(--radius);padding:26px 30px;margin-top:26px}
.pkg2 .timebox .th{display:flex;align-items:center;gap:12px;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--support-peach);margin-bottom:20px}
.pkg2 .timebox .th svg{stroke:var(--support-peach)}
.pkg2 .timerow{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pkg2 .timerow>div{padding:0 22px}
.pkg2 .timerow>div:first-child{border-right:1.5px solid rgba(255,255,255,.22);padding-left:0}
.pkg2 .timerow>div:last-child{padding-right:0}
.pkg2 .timerow .amt{font-family:var(--font-display);font-size:34px;line-height:1.1;color:var(--white);margin-bottom:6px}
.pkg2 .timerow .when{font-size:var(--text-base);color:var(--white);line-height:1.5}
.pkg2 .timebox .foot{margin:22px 0 0;padding-top:18px;border-top:1.5px solid rgba(255,255,255,.22);font-size:var(--text-base);color:var(--white);line-height:1.6}
.pkg2 .timebox .foot b{color:var(--support-peach)}
.pkg2 /* free tool */ .freetool{border:2px dashed var(--accent);border-radius:var(--radius);padding:28px 30px;background:var(--white)}
.pkg2 .freetool .tag{display:inline-block;background:var(--accent);color:#000;font-size:var(--text-xs);font-weight:700;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.pkg2 .freetool h3{font-size:var(--text-2xl);margin-bottom:8px}
.pkg2 .fields{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pkg2 .fields input{flex:1 1 200px;font:400 var(--text-base)/1 var(--font-body);padding:14px;border:1.5px solid var(--border);border-radius:8px}
.pkg2 .freetool .next{font-size:var(--text-sm);color:var(--muted);margin-top:12px}
.pkg2 .delivery{display:inline-flex;align-items:center;gap:8px;background:var(--offwhite);border:1.5px solid var(--border);border-radius:999px;padding:7px 15px;font-size:var(--text-sm);font-weight:700;margin-top:14px}
.pkg2 .delivery svg{width:18px;height:18px;stroke:var(--accent-text);fill:none;stroke-width:1.7}
.pkg2 .quote{background:var(--rose-light);border-radius:var(--radius);padding:26px 30px;font-size:var(--text-lg);font-family:var(--font-display);line-height:1.45}
.pkg2 .quote .attr{font-family:var(--font-body);font-size:var(--text-sm);color:var(--muted);margin-top:14px;font-weight:700}
.pkg2 /* testimonial */ .testi{display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:start}
.pkg2 .testi-main{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);padding:30px 34px;box-shadow:var(--shadow)}
.pkg2 .statline{display:flex;gap:22px;align-items:center;padding-bottom:22px;margin-bottom:22px;border-bottom:1.5px solid var(--border)}
.pkg2 .statline .stat{font-family:var(--font-display);font-size:60px;line-height:1;color:var(--rose);flex:none}
.pkg2 .statline .stat sup{font-size:28px;top:-.55em;position:relative}
.pkg2 .statline p{margin:0;font-size:var(--text-md);color:var(--muted);line-height:1.5}
.pkg2 .testi blockquote{margin:0;padding:0}
.pkg2 .testi blockquote p{font-size:var(--text-md);line-height:1.65;margin-bottom:14px}
.pkg2 .testi blockquote p:last-child{margin-bottom:0}
.pkg2 .attrib{display:flex;align-items:center;gap:16px;margin-top:24px;padding-top:22px;border-top:1.5px solid var(--border)}
.pkg2 .attrib .face{width:64px;height:64px;border-radius:50%;flex:none;padding:0}
.pkg2 .attrib b{display:block;font-size:var(--text-md)}
.pkg2 .attrib span{font-size:var(--text-sm);color:var(--muted)}
.pkg2 .reel-slot{aspect-ratio:9/16;width:100%;background:var(--rose-light)}
.pkg2 /* price */ .pricelate{border:2px solid var(--charcoal);border-radius:var(--radius);padding:32px 34px;background:var(--white);max-width:600px}
.pkg2 .priceline{font-family:var(--font-display);font-size:38px;line-height:1.25;margin-bottom:6px}
.pkg2 .priceline .amt{color:var(--rose)}
.pkg2 .pricelate .sub{font-size:var(--text-md);color:var(--muted);margin-bottom:20px}
.pkg2 .pricelate .total{background:var(--rose-light);border-radius:10px;padding:16px 19px;font-size:var(--text-base);margin-bottom:18px;font-weight:700}
.pkg2 .breakdown{border:1.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:20px;font-size:var(--text-sm)}
.pkg2 .breakdown div{display:flex;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--border)}
.pkg2 .breakdown div:last-child{border-bottom:0;background:var(--offwhite);font-weight:700;font-size:var(--text-base)}
.pkg2 .breakdown span:last-child{font-weight:700;white-space:nowrap}
.pkg2 .breakdown .lbl small{display:block;font-size:var(--text-xs);color:var(--muted);font-weight:400}
.pkg2 .exit{border:1.5px solid var(--border);border-radius:var(--radius);padding:24px 28px;background:var(--white);display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.pkg2 .exit .txt{flex:1 1 320px}
.pkg2 .exit h3{font-size:var(--text-xl);margin-bottom:6px}
.pkg2 .exit p{font-size:var(--text-sm);color:var(--muted);margin:0}
.pkg2 .exitlinks{display:flex;gap:8px;flex-wrap:wrap}
.pkg2 .exitlinks a{font-size:var(--text-sm);border:1.5px solid var(--border);border-radius:999px;padding:10px 16px;text-decoration:none;color:var(--muted);font-weight:700}
.pkg2 .exitlinks a:hover{border-color:var(--accent);color:var(--accent-text)}
.pkg2 /* FAQ, .pkg2 concept 1 styling */ details{border-bottom:1px solid var(--border);padding:16px 0}
.pkg2 summary{font-weight:700;cursor:pointer;font-size:var(--text-md)}
.pkg2 details p{margin:12px 0 0;color:var(--muted);font-size:var(--text-sm)}
.pkg2 details p:last-child{margin-bottom:0}
.pkg2 /* glossary hover card */ .glosshover{position:relative;display:inline-block;margin-bottom:6px}
.pkg2 .glosshover .trig{font:700 var(--text-base)/1.5 var(--font-body);color:var(--accent-text);background:none;border:0;border-bottom:2px dotted var(--accent);padding:0 0 2px;cursor:help;display:inline-flex;align-items:center;gap:8px}
.pkg2 .glosshover .trig svg{width:18px;height:18px;stroke:var(--accent-text);fill:none;stroke-width:1.8}
.pkg2 .glosshover .card{position:absolute;left:0;top:calc(100% + 12px);width:340px;background:var(--white);border:1.5px solid var(--accent);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-lg);font-size:var(--text-sm);color:var(--muted);line-height:1.6;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:20}
.pkg2 .glosshover .card:before{content:"";position:absolute;top:-8px;left:26px;width:14px;height:14px;background:var(--white);border-left:1.5px solid var(--accent);border-top:1.5px solid var(--accent);transform:rotate(45deg)}
.pkg2 .glosshover:hover .card, .pkg2 .glosshover:focus-within .card{opacity:1;visibility:visible;transform:translateY(0)}
.pkg2 .finalcta{background:var(--charcoal);color:var(--white);text-align:center;padding:64px 36px}
.pkg2 .finalcta h2{font-size:34px;color:var(--white);margin-bottom:12px}
.pkg2 .finalcta p{color:rgba(255,255,255,.82);max-width:52ch;margin:0 auto 24px}
@media(max-width:900px){
.pkg2 .steps, .pkg2 .ocards, .pkg2 .gal, .pkg2 .timerow, .pkg2 .testi{grid-template-columns:1fr}
.pkg2 .reel-slot{aspect-ratio:auto;height:320px}
.pkg2 .statline{flex-direction:column;align-items:flex-start;gap:10px}
.pkg2 .steps:before{display:none}
.pkg2 .gal.rev .g-txt{order:0}
.pkg2 .timerow>div{padding:0 0 18px}
.pkg2 .timerow>div:first-child{border-right:0;border-bottom:1.5px solid rgba(255,255,255,.22);margin-bottom:18px}
.pkg2 .hero-sticky{height:330px}
.pkg2 .hero-card{margin-top:-130px;padding:26px 24px}
.pkg2 .hero-card h1{font-size:30px}
.pkg2 .content{margin-top:-70px;padding-top:84px}
.pkg2 .glosshover .card{width:min(340px,80vw)}
.pkg2 .changelog{grid-template-columns:1fr}
}
.pkg2 .crumb{font-size:var(--text-xs);color:var(--muted);padding:16px 0}
.pkg2 .crumb b{color:var(--charcoal)}
.pkg2 .btn-block{display:block;text-align:center;width:100%}
.pkg2 .pagehero{padding:34px 0 46px;text-align:center}
.pkg2 .pagehero h1{font-size:46px;margin-bottom:14px}
.pkg2 .pagehero .lead{font-size:var(--text-lg);color:var(--muted);max-width:56ch;margin:0 auto}
.pkg2 /* problem cards */ .pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pkg2 .pcard{position:relative;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}
.pkg2 .pcard:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-2px)}
.pkg2 .pcard .pcard-cover{position:absolute;inset:0;z-index:1;text-indent:-9999px;overflow:hidden}
.pkg2 .pcard .pcard-cover:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.pkg2 .pcard .cta{position:relative;z-index:2}
.pkg2 .pcard .img{min-height:180px}
.pkg2 .pcard .body{padding:26px 28px;display:flex;flex-direction:column;flex:1}
.pkg2 .pcard .said{font-family:var(--font-display);font-size:24px;line-height:1.3;margin-bottom:12px}
.pkg2 .pcard .said:before{content:"“";color:var(--rose);margin-right:2px}
.pkg2 .pcard .said:after{content:"”";color:var(--rose)}
.pkg2 .pcard .answer{font-size:var(--text-md);color:var(--muted);margin-bottom:16px}
.pkg2 .pcard .name{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-top:16px;border-top:1.5px solid var(--border)}
.pkg2 .pcard .name h3{font-size:var(--text-xl)}
.pkg2 .pcard .money{font-size:var(--text-sm);color:var(--muted);margin-left:auto;text-align:right;line-height:1.35}
.pkg2 .pcard .money b{color:var(--charcoal);font-size:var(--text-base);display:block}
.pkg2 .pcard .cta{margin-top:auto}

/* V2 ships three package cards, not five. The two-column grid above was built
   around a full-width lead card plus two even rows; with three cards
   it strands the last one alone. Three across matches the home page. The
   max-width:900px rule further down still collapses this to a single column. */
.pkg2 .pcards{grid-template-columns:repeat(3,1fr)}
.pkg2 .pcard .said{font-size:22px}
.pkg2 .pcard .body{padding:24px 24px}

.pkg2 /* chooser */ .chooser{background:var(--white);border:2.5px solid var(--rose);border-radius:var(--radius);padding:34px 38px;box-shadow:var(--shadow-lg);max-width:740px;margin:0 auto}
.pkg2 .qn{display:none}
.pkg2 .qn.on{display:block}
.pkg2 .qcount{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--accent-text);font-weight:700;margin-bottom:10px}
.pkg2 .qn h3{font-size:28px;margin-bottom:20px}
.pkg2 .opts{display:grid;gap:11px}
.pkg2 .opt{text-align:left;font:400 var(--text-md)/1.45 var(--font-body);padding:17px 20px;border:1.5px solid var(--border);border-radius:10px;background:var(--white);cursor:pointer}
.pkg2 .opt:hover{border-color:var(--rose);background:var(--rose-mid)}
.pkg2 .result h3{font-size:30px;margin-bottom:8px}
.pkg2 .result .badge{display:inline-block;background:var(--rose-light);color:var(--accent-text);font-size:var(--text-xs);font-weight:700;padding:6px 13px;border-radius:999px;margin-bottom:14px}
.pkg2 .progress{height:5px;background:var(--border);border-radius:999px;margin-bottom:24px;overflow:hidden}
.pkg2 .progress i{display:block;height:100%;background:var(--rose);width:33%;transition:width .25s}
.pkg2 .recnote{font-size:var(--text-sm);background:var(--rose-light);border-radius:10px;padding:14px 18px;margin-top:16px;line-height:1.6}
.pkg2 /* comparison table */ .tablewrap{overflow-x:auto;border-radius:0 0 var(--radius) var(--radius);border:1.5px solid var(--border);border-top:0;background:var(--white)}
.pkg2 table.cmp{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:940px}
.pkg2 table.cmp th, .pkg2 table.cmp td{padding:14px 15px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.pkg2 table.cmp thead th{background:var(--charcoal);color:var(--white);font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em}
.pkg2 table.cmp thead th.free{background:var(--rose)}
.pkg2 table.cmp tbody th{background:var(--offwhite);font-weight:700;width:200px;min-width:200px;font-size:var(--text-sm);line-height:1.35;
  hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal;text-wrap:balance}
.pkg2 table.cmp .yes{color:var(--rose);font-weight:700}
.pkg2 table.cmp .no{color:var(--muted)}
.pkg2 table.cmp tr.pricerow td{background:var(--rose-mid);font-weight:700}
.pkg2 table.cmp tr.pricerow th{background:#F9E9EC;font-weight:700}
.pkg2 /* pinned first column */ table.cmp thead th:first-child, .pkg2 table.cmp tbody th{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--border)}
.pkg2 table.cmp thead th:first-child{z-index:4;background:var(--charcoal)}
.pkg2 .cmptoggle summary{font-weight:700;font-size:var(--text-md);cursor:pointer;padding:18px 22px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);list-style:none}
.pkg2 .cmptoggle summary::-webkit-details-marker{display:none}
.pkg2 .cmptoggle summary:before{content:"+ ";color:var(--rose)}
.pkg2 .cmptoggle[open] summary:before{content:"- "}
.pkg2 .cmptoggle[open] summary{border-radius:var(--radius) var(--radius) 0 0}
.pkg2 .bundle{background:var(--rose-light);border-radius:var(--radius);padding:32px 36px;text-align:center}
.pkg2 .bundle h3{font-size:28px;margin-bottom:10px}
.pkg2 .bundle p{max-width:58ch;margin:0 auto 18px;color:var(--muted)}
@media(max-width:900px){
.pkg2 .pcards, .pkg2 .changelog{grid-template-columns:1fr}

.pkg2 /* narrower pinned column on mobile, .pkg2 so more of the data is visible */ table.cmp{min-width:800px}
.pkg2 table.cmp th, .pkg2 table.cmp td{padding:12px 12px}
.pkg2 table.cmp tbody th{width:150px;min-width:150px;font-size:var(--text-xs)}
.pkg2 table.cmp thead th{font-size:var(--text-xs)}
}
.pkg2 /* ── reconciled between the two mockups (wider value wins) ── */ .wrap{max-width:1020px}
.pkg2 .reassure{max-width:60ch}
.pkg2 .ico{width:36px;height:36px}

/* image placeholders (replace with real <img> per image-requirements sheet) */
.img-placeholder{background:var(--rose-light);border:2px dashed var(--accent);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--accent-text);
  font-size:var(--text-sm);font-weight:700;padding:20px;min-height:180px;}
.img-placeholder span{max-width:220px;}

/* ── Live images served from R2 (added 2026-07-31) ─────────── */
img.hero-media-img{object-fit:cover;}
.about-img{display:block;height:auto;max-height:560px;width:auto;max-width:100%;border-radius:var(--radius);}
.problem-quote-avatar:has(img){border-color:transparent;background:none;}
.problem-quote-avatar img{width:100%;height:100%;object-fit:cover;}
.pkg2 .pcard .img.slot:has(img){padding:0;border:0;background:none;min-height:0;}
.pkg2 .pcard .img.slot img{display:block;width:100%;height:auto;}
.pkg2 .attrib .face:has(img){overflow:hidden;}
.pkg2 .attrib .face img{width:100%;height:100%;object-fit:cover;display:block;}

/* placeholder photos dropped into slots (preview) - class-based, no :has() */
.pkg2 .hero-img.photo{padding:0;background:none;}
.pkg2 .hero-img.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.pkg2 .slot.photo{display:block;padding:0;border:0;background:none;min-height:0;aspect-ratio:4/3;overflow:hidden;}
.pkg2 .slot.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:var(--radius);}
/* "What I need from you" galleries: make the photo box vertical, matching the text column height */
.pkg2 .gal:has(.timebox){align-items:stretch}
.pkg2 .gal:has(.timebox) > div:not(.g-txt){display:flex;flex-direction:column;min-height:0}
.pkg2 .gal:has(.timebox) .slot.photo{position:relative;aspect-ratio:auto;height:auto;flex:1 1 auto;min-height:230px;overflow:hidden}
.pkg2 .gal:has(.timebox) .slot.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.pkg2 .phone .ph-img.photo{padding:0;background:none;display:block;aspect-ratio:1/1;overflow:hidden;}
.pkg2 .phone .ph-img.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.pkg2 .pcard .img.slot.photo{padding:0;border:0;background:none;display:block;aspect-ratio:3/2;overflow:hidden;min-height:0;}
.pkg2 .pcard .img.slot.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

/* Home hero: pin, pan, release on desktop at natural height; image box on mobile.
   Track height and image height are set by JS from the pinned window's height. */
#page-home .hero{position:relative;padding:0;background:none;overflow:visible;}
#page-home .hero::before{display:none;}
#page-home .hero-pin{position:sticky;top:0;overflow:hidden;padding:96px 0 80px;}
#page-home .hero-bg{position:absolute;left:0;right:0;top:0;z-index:0;will-change:transform;
  background:#efe7e3 url('https://assets.businessonpointe.com/global/pole-dance-studio-hugging-bop-16x9.jpg') center top/cover no-repeat;}
#page-home .hero-scrim2{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,251,249,0.96) 0%, rgba(255,251,249,0.9) 32%, rgba(255,251,249,0.55) 54%, rgba(255,251,249,0) 76%);}
#page-home .hero .container{position:relative;z-index:2;width:100%;}
#page-home .hero-inner{grid-template-columns:1fr;}
#page-home .hero-media{display:none;}
#page-home .hero-media-img{object-position:top right;}
@media (max-width:900px){
  #page-home .hero{padding:0;background:var(--offwhite);height:auto !important;}
  #page-home .hero-pin{position:static;overflow:visible;padding:72px 0;height:auto !important;}
  #page-home .hero-bg,#page-home .hero-scrim2{display:none;}
  #page-home .hero-media{display:block;}
}
/* The next section rises over the hero's pan region so there is no blank gap */
#page-home .problem{position:relative;z-index:3;margin-top:calc(-1 * var(--hero-reveal, 0px));}
@media (max-width:900px){ #page-home .problem{margin-top:0;} }
/* Package heroes: taller image so it can pan while the sticky hero is pinned */
.pkg2 .hero-sticky .hero-img.photo img{height:135%;bottom:auto;will-change:transform;}
/* Home pivot: show the supplied photo instead of the dashed placeholder */
img.pivot-media{object-fit:cover;}

/* About: splits quote over a background image, white text aligned to the top */
.problem-quote.quote-bg{background:#3b2a31 url('https://assets.businessonpointe.com/about/ciara-philippa-fake-split-chi-chu-photography-nswpsc-2018.jpg') center bottom/cover no-repeat;
  color:#fff;min-height:440px;display:flex;flex-direction:column;justify-content:flex-start;
  text-shadow:0 1px 10px rgba(0,0,0,.55);}
.problem-quote.quote-bg::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.42) 100%);}
.problem-quote.quote-bg cite{color:rgba(255,255,255,.88);}

/* Full-width splits photo + quote band (above CTA) */
.about-splits-band{position:relative;z-index:0;padding:96px 0;overflow:hidden;
  background:#3b2a31 url('https://assets.businessonpointe.com/about/ciara-philippa-fake-split-chi-chu-photography-nswpsc-2018.jpg') center 30%/cover no-repeat;}
.about-splits-overlay{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.62) 100%);}
.about-splits-quote{margin:0;max-width:820px;color:#fff;
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:var(--text-xl);line-height:1.5;text-shadow:0 1px 14px rgba(0,0,0,.6);}
@media (max-width:640px){.about-splits-band{padding:64px 0;}.about-splits-quote{font-size:var(--text-lg);}}

/* embedded mockup iframes */
.pkg2 .art .mockframe{width:100%;aspect-ratio:3/2;border:1.5px solid var(--border);border-radius:12px;display:block;background:#fff}

/* inline package mockups - native, responsive, readable at every width
   (replaces the scaled 1200px iframe mockups that shrank to unreadable text) */
.pkg2 .art .mmk{background:var(--white);border:1.5px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:18px;font-family:var(--font-body)}
.pkg2 .mmk-h{font-family:var(--font-display);font-size:var(--text-lg);color:var(--charcoal);margin:0 0 14px}

/* 1. setup review checklist */
.pkg2 .mmk-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pkg2 .mmk-check li{display:flex;align-items:center;gap:10px;font-size:var(--text-sm);color:var(--muted);line-height:1.3}
.pkg2 .mmk-check li b{margin-left:auto;padding-left:8px;color:var(--charcoal);font-weight:700;font-size:var(--text-xs);white-space:nowrap}
.pkg2 .mmk-check .tick{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--rose-light);color:var(--accent-text)}
.pkg2 .mmk-check li.gap .tick{background:var(--rose);color:var(--white)}
.pkg2 .mmk-check li.gap b{color:var(--rose)}

/* 2. welcome sequence */
.pkg2 .mmk-seq{display:flex;flex-direction:column;gap:12px}
.pkg2 .mmk-mail{display:flex;align-items:flex-start;gap:12px;background:var(--offwhite);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;padding:12px 14px}
.pkg2 .mmk-av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--rose-light);color:var(--rose);font-family:var(--font-display);font-size:var(--text-md);display:flex;align-items:center;justify-content:center}
.pkg2 .mmk-subj{font-weight:700;font-size:var(--text-sm);color:var(--charcoal);line-height:1.35;margin-bottom:4px}
.pkg2 .mmk-when{font-size:var(--text-xs);color:var(--accent-text);font-weight:600}

/* 3. term calendar timeline */
.pkg2 .mmk-cal{display:flex;flex-direction:column}
.pkg2 .mmk-step{display:flex;align-items:flex-start;gap:14px;padding-bottom:18px;position:relative}
.pkg2 .mmk-step:last-child{padding-bottom:0}
.pkg2 .mmk-step:before{content:"";position:absolute;left:8px;top:20px;bottom:0;width:2px;background:var(--rose-light)}
.pkg2 .mmk-step:last-child:before{display:none}
.pkg2 .mmk-pin{flex:none;width:18px;height:18px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 4px var(--rose-light);margin-top:2px;position:relative;z-index:1}

/* content page - monthly calendar as a readable dot grid */
.pkg2 .mmk-month .cal-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.pkg2 .mmk-month .cal-top .mmk-h{margin:0}
.pkg2 .cal-count{font-family:var(--font-display);font-size:var(--text-sm);color:var(--rose);white-space:nowrap}
.pkg2 .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.pkg2 .cal-dow{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:2px}
.pkg2 .cal-cell{aspect-ratio:1/1;background:var(--offwhite);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center}
.pkg2 .cal-dot{width:9px;height:9px;border-radius:50%}
.pkg2 .cal-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:13px;font-size:var(--text-xs);color:var(--muted)}
.pkg2 .cal-legend span{display:inline-flex;align-items:center;gap:6px}
.pkg2 .cal-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.pkg2 .cal-note{margin-top:9px;font-size:var(--text-xs);color:var(--muted)}

/* content page - term & season map as a vertical phase list */
.pkg2 .mmk-phases{display:flex;flex-direction:column;gap:10px}
.pkg2 .phase{background:var(--offwhite);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;padding:11px 13px}
.pkg2 .phase .pname{font-weight:700;font-size:var(--text-sm);color:var(--charcoal)}
.pkg2 .phase .pname span{font-weight:400;color:var(--muted);font-size:var(--text-xs);margin-left:6px}
.pkg2 .phase .pwhen{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-text);background:var(--rose-light);border-radius:20px;padding:2px 9px;margin:6px 0 5px}
.pkg2 .phase .ptheme{font-size:var(--text-xs);color:var(--muted);line-height:1.45}