/* Shared landing styles. Extracted from index.html so
   how-it-works.html, story.html, pricing.html, faq.html
   can all share one stylesheet. */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue: #3B6BF5;
      --blue-hover: #2A55D4;
      --blue-soft: #EDF1FE;
      --dark: #0A0A0A;
      --text: #1A1A1A;
      --text-secondary: #6B6B6B;
      --text-tertiary: #999;
      --bg: #FAFAFA;
      --white: #FFFFFF;
      --border: #E8E8E8;
      --green: #22C55E;
      --mono: 'Space Mono', monospace;
      --sans: 'DM Sans', -apple-system, sans-serif;
    }

    html {
      scroll-behavior: smooth;
      /* Belt-and-suspenders horizontal overflow guard so any wide
         inline SVG, image, or animated element can't push the page
         past the viewport on mobile. */
      overflow-x: hidden;
      max-width: 100vw;
    }

    body {
      font-family: var(--sans);
      color: var(--text);
      background: var(--white);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      max-width: 100vw;
      position: relative;
    }

    /* Global safety: any direct child of body that tries to escape the
       viewport gets clamped. Helps with third-party widgets and any
       element that might drift beyond 100vw. */
    img, video, svg { max-width: 100%; height: auto; }

    ::selection {
      background: var(--blue);
      color: white;
    }

    /* ── NAV ────────────────────────────────── */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 48px;
      position: sticky;
      top: 0;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 100;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s;
    }

    nav.scrolled { border-bottom-color: var(--border); }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nav-logo { height: 32px; }

    /* Old "INBOX & STORAGE CLEANUP" tag retired in favor of a cleaner nav.
       Class kept hidden so any legacy markup degrades gracefully. */
    .nav-tag { display: none !important; }

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

    /* See Demo + Log In show only inside the mobile hamburger menu.
       On desktop they live in .nav-right as buttons. */
    .nav-center-mobile { display: none; }

    .nav-center a {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.1px;
      text-decoration: none;
      color: var(--text-secondary);
      transition: color 0.2s;
    }

    .nav-center a:hover { color: var(--text); }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    /* Clock retired from the top nav. Class kept hidden so any leftover
       markup or JS that targets it stays silent instead of crashing. */
    .nav-clock { display: none !important; }

    /* ── NAV CTAs: Log in + See Demo + Get Started ─────────────────── */
    /* Log in is its own styled button in Gary Blue, paired with the
       outlined "See Demo" and filled-dark "Get Started" for a clean
       blue / white / black hierarchy across the three actions. */
    .nav-login {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      color: white;
      background: var(--blue);
      padding: 10px 22px;
      border-radius: 999px;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .nav-login:hover {
      background: #3957D9;
      color: white;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(75, 107, 245, 0.28);
    }

    .nav-demo {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      color: var(--text);
      padding: 10px 22px;
      border: 1.5px solid var(--text);
      border-radius: 999px;
      transition: all 0.2s ease;
      background: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .nav-demo:hover {
      background: var(--text);
      color: white;
      transform: translateY(-1px);
    }

    .nav-cta {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      color: white;
      background: var(--dark);
      padding: 10px 22px;
      border-radius: 999px;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .nav-cta:hover {
      background: #222;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    /* ── HAMBURGER ────────────────────────────── */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      z-index: 210;
      background: none;
      border: none;
    }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: all 0.3s;
    }

    .hamburger.open span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    .nav-mobile-close {
      display: none;
    }

    /* ── HERO ────────────────────────────────── */
    .hero {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 48px 32px;
      /* Fit the hero in the first viewport. No max-height: that was
         clipping Gary at the top when the left column overflowed. */
      min-height: calc(100vh - 88px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero-meta {
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .hero-meta .dot {
      width: 8px;
      height: 8px;
      background: var(--green);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .hero h1 {
      /* Sized so each of the three sentences fits on ONE line inside
         the ~570px content column (1200 max hero - 96 padding - 48 gap
         - 400 Gary column). Previous 60px cap forced each sentence to
         wrap, giving a 6-line headline that overflowed the viewport. */
      font-size: clamp(30px, 3.4vw, 48px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -1.2px;
      color: var(--text);
      margin-bottom: 20px;
      max-width: 620px;
    }

    .hero h1 .accent { color: var(--blue); }

    .hero-body {
      font-size: 16px;
      color: var(--text-secondary);
      max-width: 560px;
      line-height: 1.55;
      margin-bottom: 24px;
    }

    .hero-body strong {
      color: var(--text);
      font-weight: 600;
    }

    .hero-form-wrap {
      max-width: 480px;
      margin-bottom: 16px;
    }

    .hero-trial-btn {
      width: 100%;
      font-size: 16px;
      padding: 18px 28px;
    }

    .hero-or {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
      text-align: center;
      margin: 14px 0;
      position: relative;
    }

    .hero-or::before,
    .hero-or::after {
      content: '';
      position: absolute;
      top: 50%;
      width: calc(50% - 24px);
      height: 1px;
      background: var(--border);
    }

    .hero-or::before { left: 0; }
    .hero-or::after { right: 0; }

    .hero-form {
      display: flex;
      gap: 12px;
    }

    .input-field {
      flex: 1;
      padding: 16px 20px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-family: var(--sans);
      font-size: 15px;
      outline: none;
      transition: border-color 0.2s;
      background: var(--white);
    }

    .input-field:focus { border-color: var(--blue); }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 28px;
      border-radius: 8px;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.2s;
      text-decoration: none;
      border: none;
      white-space: nowrap;
    }

    .btn-primary {
      background: var(--dark);
      color: white;
    }

    .btn-primary:hover {
      background: #222;
      transform: translateY(-1px);
    }

    .btn-outline {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-outline:hover {
      border-color: var(--text);
    }

    .hero-note {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-tertiary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hero-note svg { color: var(--green); flex-shrink: 0; }

    .waitlist-msg {
      margin-top: 12px;
      padding: 14px 18px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      display: none;
    }

    .waitlist-msg.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; display: block; }
    .waitlist-msg.already { background: var(--blue-soft); color: #3730a3; border: 1px solid #c7d2fe; display: block; }
    .waitlist-msg.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; display: block; }

    .hero-scroll {
      margin-top: 40px;
      display: flex;
      align-items: center;
      gap: 16px;
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
    }

    .hero-scroll::before {
      content: '';
      width: 48px;
      height: 1px;
      background: var(--border);
    }

    /* ── HERO GARY ────────────────────────────── */
    .hero-layout {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 48px;
    }

    .hero-content { flex: 1; min-width: 0; }

    .hero-gary {
      flex-shrink: 0;
      position: relative;
      width: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding-bottom: 8px;
      /* Gary column top-aligns with the text column so the two visually
         start from the same baseline instead of centering against a
         much taller left side. */
      align-self: flex-start;
      padding-top: 8px;
    }

    /* Gary + his badge float as ONE unit. The animation lives on the
       wrapper (.hero-gary-center) so the "eats spam, frees storage" pill
       stays glued to Gary as he drifts. Previously the animation was on
       the img only, so the pill sat still while Gary moved, making it
       look disconnected. */
    .hero-gary-icon {
      width: 180px;
      height: auto;
      display: block;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 20px 40px rgba(59, 107, 245, 0.15));
    }

    /* Gary on top, his two enemies below: Gmail unread envelope (tilted
       left) and Google One storage warning (tilted right). Equal size,
       opposite tilts, each gently floating. The tilts make them feel
       like polaroids tossed on the page. */
    .hero-problems {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 36px;
    }

    .hero-gary-center {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* Wrapper carries the float so Gary + badge move together */
      animation: garyFloat 4s ease-in-out infinite;
      /* Reserve room for the absolutely-positioned badge below Gary
         so it never overlaps the icons row. */
      padding-bottom: 26px;
    }

    .hero-envelope-wrap {
      position: relative;
      z-index: 1;
      width: 150px;
      animation: envelopeTiltedFloat 4s ease-in-out infinite;
      animation-delay: -1s;
    }

    .hero-storage-card {
      width: 150px;
      height: auto;
      display: block;
      filter: drop-shadow(0 8px 22px rgba(234,67,53,0.22));
      animation: storageTiltedFloat 4s ease-in-out infinite;
      animation-delay: -2s;
    }

    @keyframes envelopeTiltedFloat {
      0%, 100% { transform: rotate(-8deg) translateY(0); }
      50%      { transform: rotate(-8deg) translateY(-8px); }
    }
    @keyframes storageTiltedFloat {
      0%, 100% { transform: rotate(8deg) translateY(0); }
      50%      { transform: rotate(8deg) translateY(-8px); }
    }

    .hero-envelope {
      width: 170px;
      height: auto;
      display: block;
      filter: drop-shadow(0 8px 20px rgba(0,0,0,0.08));
    }

    /* Trust badges */
    .hero-trust-badges {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 16px;
    }
    .trust-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-tertiary);
    }
    .trust-badge img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    @keyframes envelopeFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      25% { transform: translateY(-6px) rotate(0.5deg); }
      75% { transform: translateY(3px) rotate(-0.3deg); }
    }

    .hero-notif {
      position: absolute;
      top: -10px;
      right: -12px;
      background: #FF1744;
      color: #fff;
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 100px;
      box-shadow: 0 3px 10px rgba(255,23,68,0.35);
      z-index: 3;
      white-space: nowrap;
    }

    /* Storage warning badge: visualizes the second Gmail pain point
       (storage at/near 100% full). Mimics Google's actual storage
       warning UI so visitors instantly recognize it. */
    .hero-storage-warning {
      position: absolute;
      bottom: -6px;
      left: -18px;
      background: #FCE8E6;
      color: #B3261E;
      font-family: var(--sans);
      font-weight: 700;
      padding: 6px 12px 6px 10px;
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(234,67,53,0.25);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 6px;
      animation: warningPulse 2.4s ease-in-out infinite;
    }
    .hero-storage-warning svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }
    .hero-storage-warning-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1;
    }
    .hero-storage-warning-pct {
      font-size: 14px;
      letter-spacing: -0.2px;
    }
    .hero-storage-warning-label {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      opacity: 0.75;
      margin-top: 2px;
    }
    @keyframes warningPulse {
      0%, 100% { box-shadow: 0 4px 14px rgba(234,67,53,0.25); }
      50%      { box-shadow: 0 4px 18px rgba(234,67,53,0.55); }
    }

    .hero-gary-badge {
      /* Sit tight against Gary's base, inside the wrapper's reserved
         padding-bottom so it never spills into the icons row below.
         Whole wrapper (Gary + badge) is what floats, so this stays fixed
         relative to Gary at all times. */
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--blue);
      background: var(--blue-soft);
      z-index: 3;
      padding: 6px 14px;
      border-radius: 20px;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(59, 107, 245, 0.15);
    }

    @keyframes garyFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      25% { transform: translateY(-12px) rotate(1deg); }
      75% { transform: translateY(4px) rotate(-0.5deg); }
    }

    /* ── FLOATING GARY ────────────────────────── */
    .floating-gary {
      position: fixed;
      bottom: 32px;
      right: 32px;
      z-index: 90;
      width: 56px;
      height: 56px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      opacity: 0;
      transform: translateY(20px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }

    .floating-gary.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .floating-gary:hover {
      transform: translateY(-4px) scale(1.08);
      border-color: var(--blue);
      box-shadow: 0 8px 30px rgba(59, 107, 245, 0.15);
    }

    .floating-gary img { width: 32px; height: 32px; }

    .floating-gary-tooltip {
      position: absolute;
      right: 68px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--dark);
      color: white;
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 8px 14px;
      border-radius: 6px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .floating-gary:hover .floating-gary-tooltip { opacity: 1; }

    .floating-gary-tooltip::after {
      content: '';
      position: absolute;
      right: -6px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 6px solid var(--dark);
    }

    /* ── GARY IN STEPS ────────────────────────── */
    .step-gary {
      width: 48px;
      height: 48px;
      margin-bottom: 16px;
      opacity: 0.12;
      transition: opacity 0.3s;
    }

    .step:hover .step-gary { opacity: 0.25; }

    /* ── GARY CTA ─────────────────────────────── */
    .cta-layout {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 64px;
    }

    .cta-content { flex: 1; }

    .cta-gary {
      flex-shrink: 0;
      width: 200px;
      opacity: 0.08;
      animation: garyFloat 5s ease-in-out infinite;
    }

    /* ── MISSION MOMENT ─────────────────────────
       Personal, centered brand statement between the hero and the
       Gary chase divider. Replaces the old text-heavy manifesto.
       Tight padding to sit close to the hero without wasting scroll. */
    .mission-moment {
      max-width: 760px;
      margin: 0 auto;
      padding: 40px 48px 80px;
      text-align: center;
    }
    .mission-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .mission-avatar {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: var(--blue-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 28px;
      box-shadow: 0 12px 32px rgba(59, 107, 245, 0.18);
      overflow: hidden;
      border: 3px solid white;
    }
    /* When the avatar holds a real photo, fill the whole circle.
       When it holds an icon (like Gary favicon), keep it contained. */
    .mission-avatar.photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .mission-avatar img {
      width: 60px;
      height: 60px;
      object-fit: contain;
    }
    .mission-eyebrow {
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
      margin-bottom: 20px;
    }
    .mission-headline {
      font-size: clamp(38px, 5.5vw, 58px);
      font-weight: 700;
      letter-spacing: -1.5px;
      line-height: 1.08;
      margin-bottom: 24px;
      color: var(--text);
      max-width: 640px;
    }
    .mission-accent { color: var(--blue); }
    .mission-sub {
      font-size: 18px;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 580px;
      margin: 0 auto 40px;
    }
    .mission-tags {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 44px;
    }
    .mission-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--blue-soft);
      color: var(--blue);
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      padding: 10px 18px;
      border-radius: 999px;
      white-space: nowrap;
    }
    .mission-tag svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      stroke: var(--blue);
    }
    .mission-signature {
      display: flex;
      align-items: center;
      gap: 16px;
      justify-content: center;
    }
    .mission-signature-line {
      width: 40px;
      height: 1px;
      background: var(--border);
    }
    .mission-signature-text {
      text-align: left;
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-tertiary);
      line-height: 1.6;
    }
    .mission-signature-text strong {
      font-family: var(--sans);
      font-size: 15px;
      text-transform: none;
      letter-spacing: -0.2px;
      color: var(--text);
      font-weight: 600;
      display: block;
      margin-bottom: 2px;
    }
    @media (max-width: 640px) {
      .mission-moment { padding: 72px 20px; }
      .mission-tag { font-size: 13px; padding: 8px 14px; }
      .mission-sub { font-size: 16px; }
    }

    /* ── GARY CHASE (animated divider) ────────── */
    .gary-chase {
      position: relative;
      overflow: hidden;
      height: 120px;
      margin-bottom: 80px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }

    .gary-chase-runner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      animation: chaseLoop 12s linear infinite;
    }

    .gary-chase-gary {
      position: absolute;
      top: 50%;
      left: -80px;
      transform: translateY(-50%);
      width: 56px;
      height: 56px;
      animation: garyBounce 0.4s ease-in-out infinite alternate;
    }

    @keyframes garyBounce {
      0% { transform: translateY(-50%) rotate(-3deg) translateY(0); }
      100% { transform: translateY(-50%) rotate(3deg) translateY(-6px); }
    }

    .chase-mail {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.5;
      color: var(--text-tertiary);
      animation: mailShake 0.6s ease-in-out infinite alternate;
    }

    .chase-mail svg { display: block; }

    .chase-mail:nth-child(2) { left: 70px; top: 45%; animation-delay: 0.1s; }
    .chase-mail:nth-child(3) { left: 140px; top: 30%; animation-delay: 0.25s; }
    .chase-mail:nth-child(4) { left: 190px; top: 65%; animation-delay: 0.05s; }
    .chase-mail:nth-child(5) { left: 270px; top: 25%; animation-delay: 0.35s; }
    .chase-mail:nth-child(6) { left: 340px; top: 58%; animation-delay: 0.15s; }
    .chase-mail:nth-child(7) { left: 420px; top: 40%; animation-delay: 0.3s; }
    .chase-mail:nth-child(8) { left: 500px; top: 50%; animation-delay: 0.2s; }

    @keyframes mailShake {
      0% { transform: translateY(-50%) rotate(-8deg); }
      100% { transform: translateY(-50%) rotate(8deg) translateY(-5px); }
    }

    @keyframes chaseLoop {
      0% { transform: translateX(-5%); }
      100% { transform: translateX(105%); }
    }

    .gary-chase-label {
      position: absolute;
      bottom: 6px;
      right: 48px;
      font-family: var(--mono);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
      opacity: 0.5;
    }

    @media (max-width: 768px) {
      .hero-layout { flex-direction: column; }
      .hero-gary { width: 100%; max-width: 360px; margin: 0 auto 40px; order: -1; gap: 24px; }
      .hero-gary-icon { width: 140px; }
      .hero-envelope-wrap { width: 120px; }
      .hero-envelope { width: 120px; }
      .hero-notif { font-size: 11px; padding: 3px 9px; top: -8px; right: -8px; }
      .hero-problems { gap: 24px; justify-content: center; }
      .hero-storage-card { width: 120px; }
      .hero-gary-badge { font-size: 9px; padding: 5px 12px; bottom: 0; }
      .cta-layout { flex-direction: column; }
      .cta-gary { width: 120px; }
      .floating-gary { width: 48px; height: 48px; bottom: 20px; right: 20px; }
      .floating-gary img { width: 26px; height: 26px; }
    }

    /* ── MANIFESTO ────────────────────────────── */
    .manifesto {
      max-width: 1200px;
      margin: 0 auto;
      padding: 120px 48px;
    }

    .manifesto-text {
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 500;
      line-height: 1.3;
      letter-spacing: -0.5px;
      color: var(--text-tertiary);
      max-width: 1000px;
    }

    .manifesto-text strong {
      color: var(--text);
      font-weight: 700;
    }

    /* ── INSTAGRAM FEED ────────────────────────── */
    .ig-section {
      max-width: 1400px;
      margin: 0 auto;
      padding: 80px 48px 120px;
      text-align: center;
    }
    .ig-handle {
      font-family: var(--sans);
      font-size: clamp(32px, 4.5vw, 52px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -1px;
      color: var(--text);
      margin: 0 0 40px;
    }
    .ig-handle .accent { color: var(--blue); }
    .ig-row {
      display: flex;
      gap: 14px;
      justify-content: center;
      align-items: stretch;
      overflow-x: auto;
      padding: 4px 4px 16px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .ig-row::-webkit-scrollbar { display: none; }
    .ig-card {
      position: relative;
      flex: 0 0 auto;
      width: 340px;
      aspect-ratio: 9 / 16;
      border-radius: 8px;
      overflow: hidden;
      background: #111;
      cursor: pointer;
      scroll-snap-align: start;
      transition: transform 0.25s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }
    .ig-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgba(0,0,0,0.14);
    }
    .ig-card img,
    .ig-card video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .ig-card-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.45);
      color: #fff;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .ig-follow-wrap {
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
    /* .ig-follow-btn inherits .btn.btn-primary; just adds the icon spacing
       since the global .btn already sets gap:8px which is fine. */
    .ig-loading,
    .ig-error {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-tertiary);
      font-size: 14px;
      min-height: 200px;
    }
    @media (max-width: 768px) {
      .ig-section { padding: 60px 24px 80px; }
      .ig-handle { font-size: 18px; margin-bottom: 24px; }
      .ig-row {
        justify-content: center;
        padding-left: 12px;
        padding-right: 12px;
      }
      .ig-card { width: 260px; }
    }

    /* Legacy video styles kept for backwards compat with any other usage */
    .video-section { display: none; }
    .video-wrapper {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: var(--dark);
      aspect-ratio: 16/9;
    }

    .video-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #111 0%, #0a0a0a 100%);
      background-size: cover;
      background-position: center;
      color: white;
      gap: 20px;
      cursor: pointer;
    }

    .play-btn {
      width: 80px;
      height: 80px;
      background: rgba(255,255,255,0.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      border: 1px solid rgba(255,255,255,0.15);
    }

    .play-btn:hover {
      background: var(--blue);
      border-color: var(--blue);
      transform: scale(1.08);
    }

    .play-btn svg { margin-left: 4px; }

    .video-label {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255,255,255,0.5);
    }

    /* ── STATS ────────────────────────────────── */
    .stats {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .stats-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 64px 48px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 48px;
    }

    .stat {
      text-align: center;
    }

    .stat-number {
      font-size: 56px;
      font-weight: 700;
      color: var(--text);
      line-height: 1;
      letter-spacing: -2px;
    }

    .stat-number span {
      font-size: 28px;
      letter-spacing: 0;
    }

    .stat-label {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-tertiary);
      margin-top: 12px;
    }

    /* ── SECTION SHARED ──────────────────────── */
    .section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 120px 48px;
    }

    .section-num {
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
      margin-bottom: 24px;
    }

    .section h2 {
      font-size: clamp(32px, 4.5vw, 52px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -1px;
      color: var(--text);
      margin-bottom: 16px;
    }

    .section h2 .accent { color: var(--blue); }

    .section-sub {
      font-size: 18px;
      color: var(--text-secondary);
      max-width: 520px;
      line-height: 1.7;
      margin-bottom: 64px;
    }

    /* ── TESTIMONIAL ─────────────────────────── */
    .testimonial-section {
      background: linear-gradient(180deg, #FAFBFF 0%, #F0F4FF 100%);
      padding: 100px 48px;
      border-top: 1px solid #E8ECF8;
      border-bottom: 1px solid #E8ECF8;
    }
    .testimonial-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .testimonial-quote-col { padding-right: 16px; }
    .testimonial-eyebrow {
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--blue);
      margin-bottom: 28px;
      font-weight: 600;
    }
    .testimonial-quote {
      font-size: clamp(28px, 3.4vw, 42px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.5px;
      color: #1A1A2E;
      margin: 0 0 32px;
      font-family: inherit;
    }
    .testimonial-attribution {
      border-left: 3px solid #4B6BF5;
      padding-left: 16px;
    }
    .testimonial-attr-name {
      font-size: 17px;
      font-weight: 700;
      color: #1A1A2E;
      margin-bottom: 2px;
    }
    .testimonial-attr-sub {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .testimonial-receipt {
      background: white;
      border-radius: 20px;
      box-shadow: 0 16px 48px rgba(75,107,245,0.12), 0 2px 8px rgba(0,0,0,0.04);
      overflow: hidden;
      border: 1px solid #E8ECF8;
    }
    .testimonial-receipt-header {
      background: #4B6BF5;
      color: white;
      padding: 24px 28px;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .testimonial-receipt-header img {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
    }
    .testimonial-receipt-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: 0.8;
      margin-bottom: 4px;
    }
    .testimonial-receipt-title {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.3;
    }
    .testimonial-receipt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 24px 24px 12px;
    }
    .testimonial-stat {
      border-radius: 12px;
      padding: 18px 20px;
    }
    .testimonial-stat-scanned { background: #F4F6FB; }
    .testimonial-stat-eaten { background: #EAFFEF; }
    .testimonial-stat-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #6B7280;
      margin-bottom: 8px;
    }
    .testimonial-stat-eaten .testimonial-stat-label { color: #059920; }
    .testimonial-stat-val {
      font-size: 30px;
      font-weight: 700;
      color: #1A1A2E;
      line-height: 1;
      font-family: var(--mono);
      letter-spacing: -0.5px;
    }
    .testimonial-stat-eaten .testimonial-stat-val { color: #059920; }
    .testimonial-storage {
      margin: 12px 24px 24px;
      background: #EEF2FF;
      border-radius: 12px;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .testimonial-storage-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #4B6BF5;
      margin-bottom: 4px;
    }
    .testimonial-storage-sub {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
      max-width: 240px;
    }
    .testimonial-storage-val {
      font-size: 28px;
      font-weight: 700;
      color: #4B6BF5;
      font-family: var(--mono);
      line-height: 1;
      letter-spacing: -0.5px;
      white-space: nowrap;
    }
    .testimonial-receipt-foot {
      padding: 18px 24px 24px;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      border-top: 1px solid #F0F2F8;
    }

    @media (max-width: 900px) {
      .testimonial-section { padding: 72px 24px; }
      .testimonial-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .testimonial-quote-col { padding-right: 0; }
      .testimonial-storage {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .testimonial-storage-val { align-self: flex-end; }
    }

    /* ── HOW IT WORKS ────────────────────────── */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }

    .step {
      padding: 40px 32px;
      background: var(--white);
    }

    .step-num {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--blue);
      letter-spacing: 1px;
      margin-bottom: 20px;
    }

    .step h3 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 12px;
      letter-spacing: -0.3px;
    }

    .step p {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* ── FEATURES ────────────────────────────── */
    .features-bg {
      background: var(--bg);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }

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

    .feature-tag {
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--blue);
      margin-bottom: 12px;
    }

    .feature h3 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.2px;
    }

    .feature p {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* ── PRICING ──────────────────────────────── */
    .pricing-grid {
      max-width: 520px;
    }

    .pricing-header {
      margin-bottom: 48px;
    }

    .pricing-amount {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 8px;
    }

    .pricing-dollar {
      font-size: 24px;
      font-weight: 700;
      color: var(--text);
    }

    .pricing-value {
      font-size: 80px;
      font-weight: 700;
      color: var(--text);
      line-height: 1;
      letter-spacing: -3px;
    }

    .pricing-original {
      font-size: 32px;
      color: var(--text-tertiary);
      text-decoration: line-through;
      margin-left: 16px;
      font-weight: 400;
    }

    .pricing-period {
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-tertiary);
    }

    .pricing-badge {
      display: inline-block;
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      background: var(--blue-soft);
      color: var(--blue);
      padding: 8px 16px;
      border-radius: 6px;
      margin-bottom: 32px;
    }

    .pricing-fineprint {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-tertiary);
      text-align: center;
      margin-top: 16px;
      line-height: 1.6;
    }

    .pricing-list {
      list-style: none;
      margin-bottom: 40px;
    }

    .pricing-list li {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
      font-size: 15px;
      color: var(--text);
    }

    .pricing-list li:last-child { border-bottom: none; }

    .pricing-check {
      width: 20px;
      height: 20px;
      background: var(--blue-soft);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--blue);
      font-size: 12px;
    }

    /* ── CTA ──────────────────────────────────── */
    .cta-section {
      border-top: 1px solid var(--border);
      background: var(--bg);
    }

    .cta-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 120px 48px;
    }

    .cta-inner h2 {
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -1px;
      color: var(--text);
      margin-bottom: 16px;
    }

    .cta-inner h2 .accent { color: var(--blue); }

    .cta-sub {
      font-size: 18px;
      color: var(--text-secondary);
      margin-bottom: 40px;
      max-width: 480px;
    }

    .cta-trial-btn {
      max-width: 480px;
      width: 100%;
      font-size: 16px;
      padding: 18px 28px;
      margin-bottom: 0;
    }

    .cta-or {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
      margin: 16px 0 12px;
      max-width: 480px;
      text-align: center;
      position: relative;
    }

    .cta-or::before,
    .cta-or::after {
      content: '';
      position: absolute;
      top: 50%;
      width: calc(50% - 80px);
      height: 1px;
      background: var(--border);
    }

    .cta-or::before { left: 0; }
    .cta-or::after { right: 0; }

    .cta-form {
      display: flex;
      gap: 12px;
      max-width: 480px;
    }

    .cta-section .waitlist-msg.success,
    .cta-section .waitlist-msg.already,
    .cta-section .waitlist-msg.error {
      max-width: 480px;
    }

    /* ── TRUST STRIP ─────────────────────────── */
    .trust-strip {
      text-align: center;
      padding: 80px 48px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--bg);
    }

    .trust-strip-label {
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: var(--text-tertiary);
      margin-bottom: 40px;
    }

    .trust-badges {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 80px;
      flex-wrap: wrap;
    }

    .trust-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-decoration: none;
      color: var(--text-secondary);
      transition: transform 0.2s;
    }

    .trust-badge:hover { transform: translateY(-3px); }

    .trust-badge img {
      height: 140px;
      width: auto;
    }

    .trust-badge svg {
      width: 120px;
      height: 120px;
    }

    .trust-badge-label {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.5px;
    }

    /* ── FOOTER ───────────────────────────────── */
    footer {
      border-top: 1px solid var(--border);
      max-width: 1200px;
      margin: 0 auto;
      padding: 48px 48px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 48px;
    }

    .footer-brand {
      flex: 1;
    }

    .footer-brand-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }

    .footer-brand-sub {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .footer-col h4 {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-tertiary);
      margin-bottom: 16px;
    }

    .footer-col a {
      display: block;
      text-decoration: none;
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 10px;
      transition: color 0.2s;
    }

    .footer-col a:hover { color: var(--text); }

    .footer-copy {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 1px;
      text-align: center;
      padding: 24px 48px;
      border-top: 1px solid var(--border);
    }

    /* ── MOBILE ───────────────────────────────── */
    @media (max-width: 768px) {
      nav {
        padding: 14px 20px;
        gap: 8px;
      }
      .nav-right {
        gap: 10px;
      }
      .nav-center {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        z-index: 200;
      }
      .nav-center.open { display: flex; }
      .nav-center-mobile { display: block; }
      .nav-center a { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }

      /* Mobile menu CTA buttons: Log in (Gary Blue) and See Demo (outline).
         Match the desktop nav button hierarchy so the call to action is
         obvious even inside the hamburger overlay. */
      .nav-center .nav-mobile-login,
      .nav-center .nav-mobile-demo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 32px;
        border-radius: 999px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.2px;
        margin-top: 8px;
        transition: all 0.2s ease;
        min-width: 220px;
      }
      .nav-center .nav-mobile-login {
        background: var(--blue);
        color: white;
      }
      .nav-center .nav-mobile-login:hover,
      .nav-center .nav-mobile-login:active {
        background: #3957D9;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(75, 107, 245, 0.28);
      }
      .nav-center .nav-mobile-demo {
        background: transparent;
        color: var(--text);
        border: 1.5px solid var(--text);
      }
      .nav-center .nav-mobile-demo:hover,
      .nav-center .nav-mobile-demo:active {
        background: var(--text);
        color: white;
        transform: translateY(-1px);
      }
      .hamburger { display: flex; }
      .nav-tag { display: none; }
      .nav-clock { display: none; }
      /* On mobile, only show the primary CTA + hamburger.
         Log In and See Demo live in the hamburger menu below. */
      .nav-login { display: none; }
      .nav-demo { display: none; }
      .nav-cta { padding: 8px 18px; font-size: 13px; }

      .hero { padding: 80px 24px 48px; }
      .hero h1 { letter-spacing: -1px; }
      .hero-form { flex-direction: column; }
      .hero-form .btn { width: 100%; }
      .hero-scroll { display: none; }

      .manifesto { padding: 80px 24px; }
      .video-section { padding: 0 24px 80px; }

      .stats-inner {
        padding: 40px 24px;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      .stat-number { font-size: 36px; }

      .section { padding: 80px 24px; }
      .steps { grid-template-columns: 1fr; }
      .features { grid-template-columns: 1fr; }

      .cta-inner { padding: 80px 24px; }
      .cta-form { flex-direction: column; }
      .cta-form .btn { width: 100%; }

      footer {
        flex-direction: column;
        padding: 40px 24px;
        gap: 32px;
      }

      .footer-copy { padding: 24px; }
    }

    @media (max-width: 480px) {
      .stats-inner { grid-template-columns: 1fr; gap: 28px; }
      .stat-number { font-size: 44px; }

      /* Tighter horizontal padding on the smallest devices so the
         eyebrow/title/body have breathing room without touching the edge. */
      nav { padding: 12px 16px; gap: 6px; }
      .nav-right { gap: 8px; }
      .nav-cta { padding: 7px 14px; font-size: 12px; }
      .hero { padding: 60px 20px 40px; }
      .manifesto { padding: 60px 20px; }
      .section { padding: 60px 20px; }
      .cta-inner { padding: 60px 20px; }
      .founder-section { padding: 60px 20px; }
      .faq-section { padding: 60px 20px; }
      .voices-section { padding: 60px 20px; }
      .stats-inner { padding: 32px 20px; }

      /* Hero problems row: envelope + storage card. Cap width so they
         never push the viewport wider than the screen. */
      .hero-problems { gap: 16px; }
      .hero-envelope-wrap { width: 100px; }
      .hero-envelope { width: 100px; }
      .hero-storage-card { width: 100px; }
      .hero-gary-icon { width: 120px; }

      /* Trust badges wrap onto multiple lines cleanly */
      .hero-trust-badges, .trust-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }

      /* Hero title responsive down. Big letter-spacing on huge display
         type can push wider than expected on 375px viewports. */
      .hero h1 { font-size: clamp(38px, 10vw, 56px); letter-spacing: -1.5px; }

      /* IG feed keeps a single card visible, no horizontal scroll. */
      .ig-row { padding: 0 4px; }

      /* Footer stays snug */
      footer { padding: 32px 20px; }
    }

    /* ── Voices grid (placeholder testimonials) ─────────────────────── */
    .voices-section {
      padding: 100px 48px;
      background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
      border-top: 1px solid #E8ECF8;
    }
    .voices-inner { max-width: 1200px; margin: 0 auto; }
    .voices-eyebrow {
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
      margin-bottom: 16px;
    }
    .voices-headline {
      font-size: 36px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 56px;
      max-width: 720px;
      line-height: 1.15;
    }
    .voices-headline .accent { color: var(--blue); }
    .voices-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .voice-card {
      background: #FFFFFF;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 240px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .voice-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(75, 107, 245, 0.08);
    }
    .voice-card-quote {
      font-size: 18px;
      line-height: 1.55;
      color: var(--text);
      font-weight: 500;
    }
    .voice-card-author {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .voice-card-name {
      font-weight: 600;
      color: var(--text);
      font-size: 15px;
    }
    .voice-card-role {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      line-height: 1.5;
      color: var(--text-tertiary);
    }
    @media (max-width: 900px) {
      .voices-section { padding: 72px 24px; }
      .voices-grid { grid-template-columns: 1fr; gap: 16px; }
      .voices-headline { font-size: 28px; }
    }

    /* ── Founder Story ──────────────────────────────────────────────── */
    .founder-section {
      padding: 120px 48px;
      background: var(--bg);
    }
    .founder-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 80px;
      align-items: start;
    }
    .founder-photo-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: sticky;
      top: 100px;
    }
    .founder-photo {
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue) 0%, #6E89F8 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 96px;
      font-weight: 700;
      letter-spacing: -2px;
      box-shadow: 0 20px 60px rgba(75, 107, 245, 0.25);
      overflow: hidden;
    }
    .founder-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .founder-photo-caption {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text-tertiary);
      margin-top: 20px;
      text-align: center;
      line-height: 1.6;
    }
    .founder-story h2 {
      font-size: 44px;
      font-weight: 700;
      line-height: 1.15;
      color: var(--text);
      margin-bottom: 32px;
    }
    .founder-story h2 .accent { color: var(--blue); }
    .founder-story p {
      font-size: 18px;
      line-height: 1.7;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }
    .founder-story p strong { color: var(--text); font-weight: 600; }
    .founder-signature {
      font-family: var(--mono);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--text);
      margin-top: 40px;
      padding-top: 32px;
      border-top: 1px solid var(--border);
    }
    .founder-signature strong {
      font-family: var(--sans);
      font-size: 20px;
      text-transform: none;
      letter-spacing: -0.3px;
      display: block;
      margin-bottom: 4px;
      font-weight: 600;
    }
    @media (max-width: 900px) {
      .founder-section { padding: 80px 24px; }
      .founder-inner { grid-template-columns: 1fr; gap: 48px; }
      .founder-photo-col { position: static; }
      .founder-photo { width: 200px; height: 200px; font-size: 64px; }
      .founder-story h2 { font-size: 32px; }
      .founder-story p { font-size: 16px; }
    }

    /* ── FAQ ────────────────────────────────────────────────────────── */
    .faq-section {
      max-width: 880px;
      margin: 0 auto;
      padding: 120px 48px;
    }
    .faq-section .section-num { margin-bottom: 24px; }
    .faq-section h2 {
      font-size: 44px;
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .faq-section h2 .accent { color: var(--blue); }
    .faq-section .section-sub {
      font-size: 18px;
      color: var(--text-secondary);
      margin-bottom: 64px;
      max-width: 640px;
    }
    .faq-list { display: flex; flex-direction: column; }
    .faq-item {
      border-top: 1px solid var(--border);
      padding: 28px 0;
    }
    .faq-item:last-child { border-bottom: 1px solid var(--border); }
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      cursor: pointer;
      list-style: none;
      font-size: 19px;
      font-weight: 600;
      color: var(--text);
      transition: color 0.15s ease;
    }
    .faq-question:hover { color: var(--blue); }
    .faq-question::-webkit-details-marker { display: none; }
    .faq-toggle {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--blue-soft);
      color: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 400;
      line-height: 1;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    details[open] .faq-toggle {
      transform: rotate(45deg);
      background: var(--blue);
      color: white;
    }
    .faq-answer {
      margin-top: 16px;
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.65;
      max-width: 720px;
    }
    .faq-answer a { color: var(--blue); text-decoration: underline; }
    @media (max-width: 900px) {
      .faq-section { padding: 80px 24px; }
      .faq-section h2 { font-size: 32px; }
      .faq-question { font-size: 17px; }
    }