/* Power Pricing marketing website - shared stylesheet.
   Extracted verbatim from the inline <style> block in index.html so every
   page can share one copy instead of each keeping its own that drifts.
   Do not re-inline this. See CLAUDE.md. */
  :root {
    --pink: #b8306a;
    --pink-light: #c9396f;
    --pink-dim: rgba(184,48,106,0.10);
    --navy: #1B2A5E;
    --navy-mid: #243878;
    --bg: #F7F6FF;
    --white: #ffffff;
    --text: #1a1a2e;
    --muted: #5a5a7a;
    --border: rgba(27,42,94,0.1);
    --card-bg: #ffffff;
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.6;
  }

  /* ── NAV ── */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #1B2A5E;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(27,42,94,0.08);
    padding: 0 5%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-logo { display: flex; align-items: center; }
  .nav-logo img { height: 40px; display: block; mix-blend-mode: screen; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
  }

  .nav-links a {
    text-decoration: none;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s;
  }

  .nav-links a:not(.btn-pink):hover { color: #ffffff; }

  /* ── MOBILE MENU ──
     Hidden on desktop. Below 900px the horizontal links used to simply
     vanish with no replacement, so a phone visitor had no navigation at
     all. The button below and the panel rules in the responsive block are
     what replace them. */
  .nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 10px;
    margin-right: -10px;
    cursor: pointer;
    /* 44px minimum so it is a comfortable tap target */
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }

  .nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* Hamburger morphs into a cross while the menu is open */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-toggle-bar { transition: none; }
  }


  .btn-pink {
    display: inline-block;
    background: var(--pink);
    color: #fff;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.2s, transform 0.15s;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
  }

  .btn-pink:hover { background: var(--pink-light); transform: translateY(-1px); }

  .btn-pink-lg {
    padding: 16px 40px;
    font-size: 16px;
    border-radius: 8px;
  }

  /* ── HERO ── */
  .hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding: 80px 5% 60px;
    position: relative;
    overflow: hidden;
  }

  .hero::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -120px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(184,48,106,0.07) 0%, transparent 70%);
    pointer-events: none;
  }

  .hero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -80px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(27,42,94,0.06) 0%, transparent 70%);
    pointer-events: none;
  }

  .hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pink-dim);
    color: var(--pink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 24px;
  }

  .hero-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--pink);
    border-radius: 50%;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }

  .hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
  }

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

  .hero-sub {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 480px;
    font-weight: 400;
  }

  .hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .hero-beta {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  .hero-beta span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }

  /* hero visual */
  .hero-visual {
    position: relative;
  }

  .hero-mockup {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(27,42,94,0.14), 0 4px 16px rgba(27,42,94,0.06);
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .mockup-bar {
    background: var(--navy);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
  }

  .mockup-tab {
    margin-left: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    letter-spacing: 0.05em;
  }

  .mockup-tab.active { color: #fff; }

  .mockup-body { padding: 20px; }

  .mockup-client-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid transparent;
  }

  .mockup-client-row:hover { background: var(--bg); }

  .mockup-client-row.active {
    background: var(--pink-dim);
    border-color: rgba(184,48,106,0.15);
  }

  .mockup-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
  }

  .mockup-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
  .mockup-fee { font-size: 13px; font-weight: 700; color: var(--navy); }

  .mockup-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 100px;
    letter-spacing: 0.05em;
  }

  .badge-signed { background: #dcfce7; color: #16a34a; }
  .badge-sent { background: #fef3c7; color: #d97706; }
  .badge-draft { background: #f1f5f9; color: #64748b; }

  .mockup-total {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mockup-total-label { font-size: 11px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
  .mockup-total-val { font-size: 18px; font-weight: 700; color: var(--pink); font-family: 'Playfair Display', serif; }

  .hero-float-card {
    position: absolute;
    bottom: -20px;
    right: -30px;
    background: var(--white);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 30px rgba(27,42,94,0.12);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
  }

  .float-icon {
    width: 36px;
    height: 36px;
    background: var(--pink-dim);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  .float-text strong { display: block; font-weight: 700; color: var(--navy); font-size: 13px; }
  .float-text span { font-size: 11px; color: var(--muted); }

  /* ── SECTIONS SHARED ── */
  section { padding: 90px 5%; }

  .section-inner { max-width: 1100px; margin: 0 auto; }

  .section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 16px;
  }

  .section-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }

  .section-sub {
    font-size: 17px;
    color: var(--muted);
    max-width: 560px;
    line-height: 1.7;
  }

  /* ── PROBLEM ── */
  .problem { background: var(--navy); }

  .problem .section-label { color: rgba(184,48,106,0.9); }

  .problem .section-heading { color: #fff; }

  .problem .section-sub { color: rgba(255,255,255,0.6); max-width: 620px; margin-bottom: 56px; }

  .problem-intro { margin-bottom: 56px; }

  .problem-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }

  .problem-card {
    background: rgba(255,255,255,0.04);
    padding: 36px 32px;
    position: relative;
    transition: background 0.2s;
  }

  .problem-card:hover { background: rgba(255,255,255,0.07); }

  .problem-card:first-child { border-radius: 12px 0 0 0; }
  .problem-card:nth-child(2) { border-radius: 0 12px 0 0; }
  .problem-card:nth-child(3) { border-radius: 0 0 0 12px; }
  .problem-card:last-child { border-radius: 0 0 12px 0; }

  .problem-num {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 900;
    color: rgba(255,255,255,0.18);
    line-height: 1;
    margin-bottom: 12px;
  }

  .problem-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .problem-card p {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    line-height: 1.65;
  }

  /* ── SOLUTION ── */
  .solution { background: var(--bg); }

  .solution-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
    position: relative;
  }

  .solution-phases::before {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(16.67% + 20px);
    right: calc(16.67% + 20px);
    height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--navy));
    opacity: 0.2;
    z-index: 0;
  }

  .phase-card {
    background: var(--white);
    border-radius: 16px;
    padding: 36px 28px;
    border: 1px solid var(--border);
    position: relative;
    z-index: 1;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .phase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27,42,94,0.1);
  }

  .phase-number {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--navy);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
  }

  .phase-card:nth-child(2) .phase-number { background: var(--pink); }

  .phase-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }

  .phase-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.3;
  }

  .phase-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
  }

  /* ── FEATURES ── */
  .features { background: var(--white); }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 56px;
  }

  .feature-cell {
    background: var(--white);
    padding: 36px 32px;
    transition: background 0.2s;
  }

  .feature-cell:hover { background: var(--bg); }

  .feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--pink-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
  }

  .feature-cell h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .feature-cell p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
  }

  /* ── FEATURE LIST ── */
  .feature-list-section { background: var(--bg); }

  .feature-list-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 0;
  }

  .feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .feature-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--text);
    font-weight: 500;
  }

  .feature-list li::before {
    content: '';
    width: 22px;
    height: 22px;
    background: var(--pink);
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: center;
  }

  .feature-list-callout {
    background: var(--navy);
    border-radius: 20px;
    padding: 44px 40px;
    color: #fff;
  }

  .callout-stat {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 900;
    color: var(--pink);
    line-height: 1;
    margin-bottom: 8px;
  }

  .callout-label {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 32px;
    line-height: 1.5;
  }

  .callout-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 28px;
  }

  .callout-quote {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 16px;
  }

  .callout-attr {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .callout-author { display: flex; align-items: center; gap: 12px; }
  .callout-avatar-img {
    width: 44px; height: 44px; border-radius: 10px;
    object-fit: cover; object-position: center top;
    flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2);
  }
  .callout-name { font-size: 13px; font-weight: 700; color: #fff; }
  .callout-firm { font-size: 12px; color: rgba(255,255,255,0.5); }

  /* ── TESTIMONIALS ── */
  .testimonials { background: var(--white); }

  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 56px;
  }

  .testimonial-card {
    background: var(--bg);
    border-radius: 16px;
    padding: 36px 32px;
    border: 1px solid var(--border);
    position: relative;
  }

  .testimonial-card::before {
    content: '\201C';
    font-family: 'Playfair Display', serif;
    font-size: 80px;
    color: var(--pink);
    opacity: 0.15;
    position: absolute;
    top: 12px;
    left: 24px;
    line-height: 1;
  }

  .testimonial-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    padding-top: 28px;
  }

  .testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
  }


  .testimonial-avatar-img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    display: block;
  }
  .testimonial-name { font-size: 14px; font-weight: 700; color: var(--navy); }
  .testimonial-firm { font-size: 12px; color: var(--muted); }

  /* ── RESULTS STRIP ── */
  .results-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
  }
  .result-tile {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px;
    text-align: center;
  }
  .result-stat {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    font-weight: 900;
    color: var(--pink);
    line-height: 1;
    margin-bottom: 10px;
  }
  .result-label {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
  }

  .beta-note {
    text-align: center;
    margin-top: 40px;
    font-size: 13px;
    color: var(--muted);
  }

  .beta-note span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }

  /* ── ABOUT ── */
  .about { background: var(--bg); }

  .about-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: center;
  }

  .about-photo-wrap {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 20px 60px rgba(27,42,94,0.15);
  }

  .about-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .about-photo-placeholder {
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
  }

  .about-photo-placeholder::before {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(184,48,106,0.15) 0%, transparent 70%);
  }

  .about-photo-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
  }

  .about-content .section-label { margin-bottom: 12px; }
  .about-content .section-heading { margin-bottom: 20px; }

  .about-bio {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 32px;
  }

  .about-credentials {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .credential {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--text);
  }

  .credential-dot {
    width: 20px;
    height: 20px;
    background: var(--pink-dim);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .credential-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--pink);
    border-radius: 50%;
  }

  /* ── WAITLIST ── */
  .waitlist {
    background: var(--navy);
    position: relative;
    overflow: hidden;
  }

  .waitlist::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(184,48,106,0.10) 0%, transparent 70%);
    pointer-events: none;
  }

  .waitlist-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .waitlist .section-label { color: rgba(184,48,106,0.9); }
  .waitlist .section-heading { color: #fff; margin-bottom: 16px; }
  .waitlist .section-sub { color: rgba(255,255,255,0.6); margin: 0 auto 48px; }

  .waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .waitlist-form input {
    width: 100%;
    padding: 15px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: #fff;
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }

  .waitlist-form input::placeholder { color: rgba(255,255,255,0.35); }

  .waitlist-form input:focus {
    border-color: rgba(184,48,106,0.5);
    background: rgba(255,255,255,0.1);
  }

  .waitlist-form .btn-pink { width: 100%; text-align: center; padding: 16px; font-size: 16px; }

  .waitlist-disclaimer {
    margin-top: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.03em;
  }

  /* ── FOOTER ──
     One footer for every page. Two rows: logo + contact on top, legal line
     + links underneath. Previously the home page and the legal pages had
     different footer markup AND different footer CSS, which is how they
     ended up claiming different copyright years and different company
     details. Do not fork this again. */
  footer {
    background: #0f1a3a;
    padding: 32px 5%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 20px 0 4px;
  }
  .footer-nav .footer-link { font-size: 13px; color: rgba(255,255,255,0.55); }

  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  .footer-logo-img { height: 32px; display: block; }

  .footer-legal-links { display: flex; gap: 24px; }

  .footer-copy {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
  }

  .footer-link {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.2s;
  }

  .footer-link:hover { color: rgba(255,255,255,0.7); }

  /* ── PRICING ── */
  .pricing { background: var(--bg); }
  .pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 48px; }
  .pricing-toggle span { font-size: 14px; color: var(--muted); font-weight: 500; cursor: pointer; transition: color 0.2s; }
  .pricing-toggle span.active { color: var(--navy); font-weight: 600; }
  .toggle-track { width: 48px; height: 26px; border-radius: 13px; background: var(--pink); cursor: pointer; position: relative; transition: background 0.2s; }
  .toggle-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left 0.2s; }
  .toggle-track.annual .toggle-thumb { left: 24px; }
  .save-badge { display: inline-block; background: #E1F5EE; color: #0F6E56; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; margin-left: 4px; }
  .pricing-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
  .plan-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px 22px; display: flex; flex-direction: column; position: relative; transition: border-color 0.2s, transform 0.2s; }
  .plan-card:hover { border-color: rgba(27,42,94,0.25); transform: translateY(-3px); }
  .plan-card.featured { border: 2px solid var(--pink); }
  .popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--pink); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 14px; border-radius: 12px; white-space: nowrap; letter-spacing: 0.3px; }
  .plan-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
  .plan-users { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
  .plan-price { margin-bottom: 20px; min-height: 90px; }
  .price-amount { font-size: 40px; font-weight: 700; color: var(--navy); font-family: 'DM Sans', sans-serif; }
  .price-period { font-size: 14px; color: var(--muted); }
  .price-annual-note { font-size: 12px; color: var(--muted); margin-top: 4px; min-height: 18px; }
  .price-was { text-decoration: line-through; color: rgba(27,42,94,0.3); font-size: 15px; margin-right: 4px; }
  .price-standard-note { font-size: 12px; color: rgba(27,42,94,0.35); margin-top: 4px; text-decoration: line-through; }
  .plan-cta { display: block; width: 100%; padding: 14px; border-radius: 8px; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; border: none; transition: all 0.2s; margin-top: auto; font-family: 'DM Sans', sans-serif; text-decoration: none; }
  .plan-cta.primary { background: var(--pink); color: #fff; }
  .plan-cta.primary:hover { background: var(--pink-light); transform: translateY(-1px); }
  .plan-cta.secondary { background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); }
  .plan-cta.secondary:hover { background: var(--navy); color: #fff; }
  .plan-cta.ghost { background: var(--bg); color: var(--navy); border: 1.5px solid rgba(27,42,94,0.15); }
  .plan-cta.ghost:hover { border-color: var(--navy); }
  .enterprise-features { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; flex: 1; }
  .enterprise-features span { display: block; padding: 2px 0; }
  .founder-banner { background: var(--navy); border-radius: 16px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; position: relative; overflow: hidden; }
  .founder-banner::before { content: ''; position: absolute; top: -100px; right: -50px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(184,48,106,0.12) 0%, transparent 70%); pointer-events: none; }
  .founder-text { position: relative; z-index: 1; }
  .founder-text h4 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 6px; }
  .founder-text p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.5; }
  .founder-spots { text-align: right; white-space: nowrap; position: relative; z-index: 1; }
  .spots-number { font-size: 32px; font-weight: 700; color: #fff; font-family: 'DM Sans', sans-serif; }
  .spots-label { font-size: 12px; color: rgba(255,255,255,0.4); display: block; letter-spacing: 0.03em; }
  .included-section { margin-bottom: 48px; }
  .included-header { text-align: center; margin-bottom: 28px; }
  .included-header h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
  .included-header p { font-size: 14px; color: var(--muted); }
  .included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; max-width: 700px; margin: 0 auto; }
  .included-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.5; padding: 8px 0; }
  .check-icon { width: 20px; height: 20px; min-width: 20px; border-radius: 50%; background: #E1F5EE; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
  .check-icon svg { width: 10px; height: 10px; }
  .competitor-note { color: var(--pink); font-size: 12px; font-weight: 500; display: block; margin-top: 2px; }
  .pac-note { text-align: center; font-size: 13px; color: var(--muted); padding: 16px 0; border-top: 1px solid var(--border); }
  .pac-note strong { color: var(--navy); font-weight: 600; }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-content > * {
    animation: fadeUp 0.7s ease both;
  }

  .hero-content > *:nth-child(1) { animation-delay: 0.1s; }
  .hero-content > *:nth-child(2) { animation-delay: 0.2s; }
  .hero-content > *:nth-child(3) { animation-delay: 0.3s; }
  .hero-content > *:nth-child(4) { animation-delay: 0.4s; }

  .hero-visual {
    animation: fadeUp 0.8s ease 0.3s both;
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .hero-visual { display: none; }
    .problem-grid { grid-template-columns: 1fr; }
    .solution-phases { grid-template-columns: 1fr; }
    .solution-phases::before { display: none; }
    .features-grid { grid-template-columns: 1fr; }
    .feature-list-inner { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .results-strip { grid-template-columns: 1fr; }
    .about-inner { grid-template-columns: 1fr; }
    .about-photo-placeholder { display: none; }
    /* The menu becomes a panel that drops out of the nav bar. It is closed
       by default and .is-open is added by assets/js/site.js. */
    .nav-toggle { display: flex; }

    .nav-links {
      display: none;
      position: absolute;
      top: 68px;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: #1B2A5E;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      padding: 8px 5% 20px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.18);
    }

    .nav-links.is-open { display: flex; }

    .nav-links li { border-top: 1px solid rgba(255,255,255,0.08); }
    .nav-links li:first-child { border-top: 0; }

    .nav-links a:not(.btn-pink) {
      display: block;
      padding: 16px 0;
      font-size: 16px;
      color: rgba(255,255,255,0.85);
    }

    .nav-links li:last-child { border-top: 0; padding-top: 16px; }
    .nav-links .btn-pink {
      display: block;
      text-align: center;
      padding: 14px 24px;
      font-size: 15px;
    }
    .pricing-cards { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto 48px; }
    .included-grid { grid-template-columns: 1fr; }
    .founder-banner { flex-direction: column; text-align: center; }
    .founder-spots { text-align: center; }
    .footer-top, .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-legal-links { justify-content: center; }
    .footer-nav { justify-content: center; gap: 10px 18px; }
  }

/* ══════════════════════════════════════════════════════════════════════
   LEGAL PAGES (privacy, terms)
   Moved here from the duplicate <style> blocks those two pages each kept.
   Everything above this point is shared with every page.

   The legal pages deliberately keep two differences from the marketing
   pages, because they are long documents meant to be read rather than
   scanned:
     - line-height 1.7 rather than 1.6, scoped to .legal-body
     - DM Sans headings rather than Playfair Display
   Both were in the original legal-page CSS and are preserved on purpose.
   ══════════════════════════════════════════════════════════════════════ */

.legal-header {
  background: var(--navy);
  padding: 64px 5% 48px;
  color: #fff;
}
.legal-header h1 {
  font-family: 'DM Sans', sans-serif;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 12px;
}
.legal-header p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}

.legal-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 5%;
  line-height: 1.7;
}
.legal-body h2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  margin: 48px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.legal-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin: 28px 0 10px;
}
.legal-body p { color: var(--muted); margin-bottom: 16px; }
.legal-body ul { color: var(--muted); padding-left: 24px; margin-bottom: 16px; }
.legal-body ul li { margin-bottom: 8px; }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body a { color: var(--pink); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }

.callout {
  background: rgba(184,48,106,0.06);
  border-left: 3px solid var(--pink);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
}
.callout p { margin: 0; color: var(--text); }

@media (max-width: 900px) {
  .legal-header h1 { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BLOG
   Articles are long-form reading, so they use the same wider line height
   and narrower measure as the legal pages rather than the marketing
   sections, which are built for scanning.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Blog index ── */
.blog-header {
  background: var(--navy);
  padding: 64px 5% 56px;
  color: #fff;
}
.blog-header-inner { max-width: 780px; margin: 0 auto; }
.blog-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.blog-header p {
  color: rgba(255,255,255,0.7);
  font-size: 17px;
  line-height: 1.7;
  max-width: 620px;
}

.blog-body { max-width: 780px; margin: 0 auto; padding: 56px 5% 80px; }

.post-list { list-style: none; }
.post-list-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.post-list-item:first-child { padding-top: 0; }
.post-list-date {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}
.post-list-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}
.post-list-title a { color: var(--navy); text-decoration: none; }
.post-list-title a:hover { color: var(--pink); }
.post-list-summary { color: var(--muted); line-height: 1.7; margin-bottom: 12px; }

/* ── The article list, grouped by the reader's problem ──
   A div, never a nav: the bare `nav { }` selector above paints the navy top
   bar, so a second nav element here would silently inherit it. That has
   already caught the footer once. */
.blog-jump {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 26px;
  margin-bottom: 48px;
}
.blog-jump-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
}
.blog-jump-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.blog-jump-links a {
  color: var(--navy);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
}
.blog-jump-links a:hover {
  color: var(--pink);
  border-bottom-color: var(--pink);
}

.post-category { margin-bottom: 56px; }
.post-category:last-of-type { margin-bottom: 0; }
/* Italic serif, so a category reads as something a person said rather than as
   a louder version of the article titles underneath it, which are the same
   family upright. The pink rule carries the separation the size no longer has
   to. */
.post-category-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  padding-top: 20px;
  border-top: 3px solid var(--pink);
  margin-bottom: 10px;
}
.post-category-blurb {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 28px;
}
/* Slightly down from the ungrouped 26px so the category above always wins */
.post-category .post-list-title { font-size: 22px; }

/* The comparison pages sit at the end of the article list because that is
   where a reader who is shopping ends up. Links are coloured explicitly: this
   block is outside .post-body, so it inherits no prose link styling. */
.blog-compare {
  margin-top: 48px;
  padding: 28px 32px;
  /* Deliberately lighter than the shared --pink-dim used by blockquotes: at 10%
     the pink links on top of it measure 4.60 against the 4.5 minimum, which is
     too little headroom to survive anyone nudging either colour later. */
  background: rgba(184, 48, 106, 0.05);
  border-radius: 12px;
}
.blog-compare h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.blog-compare p { color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.blog-compare-links { list-style: none; display: grid; gap: 10px; }
.blog-compare-links a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-compare-links a:hover { color: var(--pink-light); }

@media (max-width: 600px) {
  .blog-compare { padding: 22px 20px; }
}
.post-list-more a {
  color: var(--pink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.post-list-more a:hover { text-decoration: underline; }
.post-list-empty { color: var(--muted); }

/* ── A single article ── */
.post-inner { max-width: 720px; margin: 0 auto; padding: 40px 5% 72px; }

.post-back { margin-bottom: 28px; }
.post-back a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.post-back a:hover { color: var(--pink); }

.post-header { margin-bottom: 36px; }
.post-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 14px;
}
.post-meta {
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 44px 0 14px;
}
.post-body h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 32px 0 10px;
}
.post-body p {
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 20px;
}
.post-body ul, .post-body ol {
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
  padding-left: 24px;
  margin-bottom: 20px;
}
.post-body li { margin-bottom: 10px; }
.post-body strong { font-weight: 600; color: var(--navy); }
.post-body a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--pink-light); }
/* Bold text inside a link takes the link's colour, not the bold navy above.
   Without this a bolded link renders navy with a pink underline, which reads
   as an underlining mistake rather than a link. */
.post-body a strong { color: inherit; }

/* A pulled-out line, used for the one idea a post turns on */
.post-body blockquote {
  border-left: 3px solid var(--pink);
  background: var(--pink-dim);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
  margin: 28px 0;
}
.post-body blockquote p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
}

/* A verbatim extract from a legal document, not a pull quote. It has to read
   as something lifted off a page rather than as emphasis, so it drops the pink
   and the raised weight and sits on white, which is the only thing that
   separates it from the lilac page behind it. Both selectors carry two classes
   so they beat the blockquote rules above on specificity, not source order. */
.post-body .clause {
  border-left: 3px solid var(--navy);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
  padding: 22px 26px;
  border-radius: 0 8px 8px 0;
  margin: 28px 0;
}
.post-body .clause p {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
}
.post-body .clause p:last-child {
  margin-bottom: 0;
}
.post-body .clause .clause-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ── The call to action at the end of every article ── */
.post-cta {
  margin-top: 56px;
  padding: 32px;
  background: var(--navy);
  border-radius: 12px;
  color: #fff;
}
.post-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.post-cta p {
  color: rgba(255,255,255,0.75);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.post-cta-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.post-cta-alt {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.post-cta-alt:hover { color: #fff; }

@media (max-width: 900px) {
  .post-cta { padding: 26px 22px; }
  .post-cta-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .post-cta .btn-pink { text-align: center; }
  .post-cta-alt { text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   OPT-IN AND THANK YOU
   ══════════════════════════════════════════════════════════════════════ */

.optin { background: var(--bg); padding: 72px 5% 88px; }
.optin-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: start;
}
.optin-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 8px 0 16px;
}
.optin-sub { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 28px; }

.optin-list { list-style: none; margin-bottom: 24px; }
.optin-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  color: var(--text);
  line-height: 1.6;
}
.optin-note { font-size: 14px; color: var(--muted); line-height: 1.6; }

.optin-form-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 6px 28px rgba(27,42,94,0.07);
}
.optin-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.optin-input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(27,42,94,0.18);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  margin-bottom: 18px;
}
.optin-input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-dim);
}
.optin-submit { width: 100%; padding: 14px 24px; font-size: 15px; }
.optin-consent {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 16px;
}
.optin-consent a { color: var(--pink); }

/* Honeypot. Hidden from people, visible to the bots that fill everything in. */
.optin-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Thank you ── */
.thanks { background: var(--bg); padding: 72px 5% 88px; }
.thanks-inner { max-width: 720px; margin: 0 auto; }
.thanks-inner h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 8px 0 16px;
}
.thanks-sub { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 14px; }

.thanks-videos { display: grid; gap: 12px; margin: 32px 0 28px; }
.thanks-video {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s;
}
.thanks-video:hover { border-color: var(--pink); transform: translateY(-1px); }
.thanks-video-num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thanks-video-body { display: block; }
.thanks-video-title {
  display: block;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.thanks-video-desc { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.thanks-next { color: var(--muted); }
.thanks-next a { color: var(--pink); font-weight: 500; }

/* ── A video, kept at 16:9 whatever it is embedded from ──
   The wrapper owns the shape, so swapping the embed for a different provider
   later does not reflow the page, and a phone never gets a letterboxed iframe
   sitting inside our own letterboxing. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 8px 0 32px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);
}
.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.6;
  border: 2px dashed rgba(255,255,255,0.3);
  border-radius: 12px;
}
.video-placeholder-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .optin-inner { grid-template-columns: 1fr; gap: 36px; }
  .optin-form-card { padding: 26px 22px; }
}

/* ── Figures inside articles ──
   Screenshots run wider than the text measure, because a 720px-wide
   screenshot of a three-column layout is unreadable. */
.post-figure {
  margin: 36px 0 32px;
}
.post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(27,42,94,0.08);
}
/* The screenshot is deliberately cut off mid-list; fading the bottom edge makes
   that read as "and it continues" rather than as a broken image. */
.post-figure--faded img {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
.post-figure figcaption {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 12px;
  text-align: center;
}

@media (min-width: 1100px) {
  /* Let a figure breathe past the text column on a wide screen */
  .post-figure { margin-left: -70px; margin-right: -70px; }
}

/* Visible to screen readers, not to sighted users. Used where a field already
   has a visible placeholder but still needs a real label. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   COMPARISON AND SWITCHING PAGES
   Same reading measure as the blog, since they are long-form argument
   rather than marketing sections to be scanned.
   ══════════════════════════════════════════════════════════════════════ */

.compare-header {
  background: var(--navy);
  padding: 64px 5% 56px;
  color: #fff;
}
.compare-header-inner { max-width: 780px; margin: 0 auto; }
.compare-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
}
.compare-sub {
  color: rgba(255,255,255,0.72);
  font-size: 17px;
  line-height: 1.7;
  max-width: 640px;
}

.compare-body { background: var(--bg); }
.compare-inner { max-width: 720px; margin: 0 auto; padding: 52px 5% 80px; }

/* ── /watch: the two ways in ──
   A choosing page rather than a converting one, which is why it is allowed
   two calls to action where the opt-in pages themselves get exactly one.
   Card colours match .thanks-video so the site keeps a single card style. */
.watch-body { max-width: 900px; margin: 0 auto; padding: 52px 5% 76px; }
.watch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.watch-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s;
}
.watch-card:hover { border-color: var(--pink); transform: translateY(-1px); }
.watch-card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}
.watch-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 12px;
}
.watch-card p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 12px;
}
.watch-card .watch-card-note {
  color: var(--text);
  font-weight: 500;
}
/* Pushed to the bottom so both cards' links sit on the same line however
   long the copy above them happens to run */
.watch-card .watch-card-more {
  margin-top: auto;
  margin-bottom: 0;
  color: var(--pink);
  font-weight: 600;
}
.watch-footnote {
  margin-top: 28px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
@media (max-width: 760px) {
  .watch-grid { grid-template-columns: 1fr; }
}

.compare-inner h2 {
  font-family: 'Playfair Display', serif;
  font-size: 25px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 44px 0 14px;
}
.compare-inner h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 32px 0 10px;
}
.compare-inner p {
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 20px;
}
.compare-inner ul {
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
  padding-left: 24px;
  margin-bottom: 20px;
}
.compare-inner li { margin-bottom: 12px; }
.compare-inner strong { font-weight: 600; color: var(--navy); }
/* Body links only. The closing call to action is excluded by name because its
   button lives INSIDE a paragraph - scoping to "p a" is not enough, which I
   found out by rendering it and measuring: the button came out pink on pink,
   the same invisible-button bug that shipped once already. Always compare a
   button's computed colour against its background. See CLAUDE.md. */
.compare-inner p:not(.post-cta-actions) a,
.compare-inner li a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.compare-inner p:not(.post-cta-actions) a:hover,
.compare-inner li a:hover { color: var(--pink-light); }
/* Same as the post-body rule: a bolded link keeps the link colour. */
.compare-inner p:not(.post-cta-actions) a strong,
.compare-inner li a strong { color: inherit; }

.compare-inner blockquote {
  border-left: 3px solid var(--pink);
  background: var(--pink-dim);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
  margin: 28px 0;
}
.compare-inner blockquote p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
}

/* The closing call to action sits on navy, so its heading must stay white.
   ".compare-inner h2" above would otherwise win on source order and render it
   navy on navy - invisible. Found by rendering every page and comparing each
   element's computed colour against its background. */
.compare-inner .post-cta h2 { color: #fff; }
.compare-inner .post-cta p { color: rgba(255,255,255,0.75); }

/* ── Author byline, on every article ──
   Who wrote it matters for credibility on financial subjects, so this is not
   decoration. Generated in the post template so it cannot drift between posts. */
.post-author {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.post-author img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.post-author-photo { flex: none; display: block; text-decoration: none; }
.post-author-name {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
/* The author block sits OUTSIDE .post-body, so it inherits none of the prose
   link styling and an unstyled link here renders browser-default blue. Every
   link in this block is therefore coloured explicitly. */
.post-author-name a {
  color: var(--navy);
  text-decoration: none;
}
.post-author-name a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-author-bio {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.post-author-more {
  font-size: 15px;
  margin: 8px 0 0;
}
.post-author-more a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-author-more a:hover { color: var(--pink-light); }

/* Same reasoning as the author block: the header byline is outside .post-body. */
.post-meta a {
  color: inherit;
  text-decoration: none;
}
.post-meta a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .post-author { gap: 14px; }
  .post-author img { width: 54px; height: 54px; }
}

/* Enterprise page heading, matching the opt-in page's column heading scale */
.enterprise-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 18px;
}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════════════════ */

.about-hero {
  background: var(--navy);
  color: #fff;
  padding: 64px 5% 0;
  overflow: hidden;
}
.about-hero-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: end;
}
.about-hero-text { padding-bottom: 64px; }
.about-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 8px 0 18px;
}
.about-lede {
  color: rgba(255,255,255,0.75);
  font-size: 18px;
  line-height: 1.7;
  max-width: 560px;
}
.about-hero-photo { align-self: end; }
.about-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
}

@media (max-width: 900px) {
  .about-hero { padding-bottom: 0; }
  .about-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .about-hero-text { padding-bottom: 0; }
  .about-hero-photo { max-width: 300px; }
}