<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <title>26Keys - Own your English</title>
  <meta name="description" content="26Keys turns your work messages and emails into practice, so you improve while you work.">
  <meta property="og:title" content="26Keys - Own your English">
  <meta property="og:description" content="26Keys turns your work messages and emails into practice, so you improve while you work.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://26keys.app/">
  <meta property="og:image" content="https://26keys.app/images/og-image.png">
  <link rel="canonical" href="https://26keys.app/">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="26Keys - Own your English">
  <meta name="twitter:description" content="26Keys turns your work messages and emails into practice, so you improve while you work.">
  <meta name="twitter:image" content="https://26keys.app/images/og-image.png">
  <link rel="stylesheet" href="components/shared.css?v=3">
  <script>
    if(localStorage.getItem('theme')==='light')document.documentElement.className='light';
  </script>
  <link rel="preload" href="fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/Merriweather-Black.ttf" as="font" type="font/ttf" crossorigin>
  <style>
    /* Inlined @font-face — no external CSS request, zero delay */
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: block; src: url('fonts/Inter-Light.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: block; src: url('fonts/Inter-Medium.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: block; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: block; src: url('fonts/Inter-Bold.woff2') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: block; src: url('fonts/Inter-ExtraBold.woff2') format('woff2'); }
    @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/Merriweather-Regular.ttf') format('truetype'); }
    @font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 400; font-display: block; src: url('fonts/Merriweather-Italic.ttf') format('truetype'); }
    @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 700; font-display: block; src: url('fonts/Merriweather-Bold.ttf') format('truetype'); }
    @font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 700; font-display: block; src: url('fonts/Merriweather-BoldItalic.ttf') format('truetype'); }
    @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 900; font-display: block; src: url('fonts/Merriweather-Black.ttf') format('truetype'); }
    :root {
      --dark: #0a0a0a;
      --dark-mid: #0a0a0a;
      --dark-card: #141414;
      --light: #F7F8F8;
      --light-mid: #E8E8E2;
      --text-dark: #0C0C0C;
      --text-muted: #6B6B64;
      --text-on-dark: #D0D6E0;
      --text-heading: #F7F8F8;
      --text-dim: rgba(247,248,248,0.45);
      --accent: #8A8F98;
      --accent-soft: rgba(138,143,152,0.12);
      --nav-bg: rgba(12,12,12,0.85);
      --surface-border: rgba(255,255,255,0.15);
      --separator: 1px solid var(--surface-border);
      --surface-border-soft: rgba(255,255,255,0.05);
      --surface-hover: rgba(255,255,255,0.03);
      --serif: 'Merriweather', Georgia, serif;
      --sans: 'Inter', -apple-system, sans-serif;
      --green: #6FCF97;
    }

    /* LIGHT MODE */
    .light {
      --dark: #FBFAF4;
      --dark-mid: #FBFAF4;
      --dark-card: #EFEEE8;
      --text-on-dark: #091717;
      --text-heading: #091717;
      --text-dim: rgba(9,23,23,0.8);
      --accent: #2797FF;
      --accent-soft: rgba(39,151,255,0.12);
      --nav-bg: rgba(251,250,244,0.9);
      --surface-border: rgba(0,0,0,0.12);
      --separator: 1px solid var(--surface-border);
      --surface-border-soft: rgba(0,0,0,0.07);
      --surface-hover: rgba(0,0,0,0.03);
      --green: #1A7A4A;
      background: #FBFAF4;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: auto; }

    body {
      font-family: var(--sans);
      background: transparent;
      color: var(--text-on-dark);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* HERO PILL ANIMATION — sequential scale bump */
    @keyframes pillBump {
      0%, 5%    { transform: scale(1); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
      12%, 26%  { transform: scale(1.15); box-shadow: 0 6px 28px rgba(0,0,0,0.25); }
      33%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
    }
    .hero-float-label.write   { animation: pillBump 4.5s ease-in-out 0s infinite; }
    .hero-float-label.learn   { animation: pillBump 4.5s ease-in-out 1.5s infinite; }
    .hero-float-label.improve { animation: pillBump 4.5s ease-in-out 3s infinite; }

    /* GLOBAL DIAGONAL TEXTURE — baked into body background */
    body {
      background-color: var(--dark);
      background-image: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.03) 10px,
        rgba(255,255,255,0.03) 14px
      );
      background-attachment: fixed;
    }

    /* HERO */
    .hero {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      padding: 6rem 3rem 4rem; position: relative;
      background: #0a0a0a; overflow: hidden;
    }
    .hero-inner {
      max-width: 1200px; margin: 0 auto; width: 100%;
      display: flex; align-items: center; gap: 4rem;
    }
    .hero-text {
      flex: 1; min-width: 0; text-align: left;
    }
    .hero-image-wrap {
      position: relative; flex-shrink: 0;
      width: clamp(240px, 30vw, 420px);
    }
    .hero-image-wrap img {
      width: 100%; border-radius: 20px; display: block;
      object-fit: cover; aspect-ratio: 3/4;
    }
    .hero-float-label {
      position: absolute;
      background: rgba(30,30,30,0.5); color: #f5f5f5;
      font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
      padding: 0.6rem 1.6rem; border-radius: 999px;
      white-space: nowrap;
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--surface-border);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    .hero-float-label.write { top: 8%; left: -40px; }
    .hero-float-label.learn { top: 42%; right: -50px; }
    .hero-float-label.improve { bottom: 18%; left: -55px; }
    .hero-tagline {
      display: inline-block;
      padding: 0.4rem 1.1rem;
      border: 1px solid var(--surface-border);
      border-radius: 999px;
      font-size: 1rem; font-weight: 500;
      color: rgba(255,255,255,0.55);
      background: rgba(255,255,255,0.07);
      margin-bottom: 2rem;
    }
    /* HEADING COLOR */
    h1, h2, h3, h4, blockquote { color: var(--text-heading); }

    .hero h1 {
      font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.6rem);
      line-height: 1.08; color: var(--text-heading); margin-bottom: 1.5rem;
      letter-spacing: -0.02em; font-weight: 700;
    }
    .hero h1 em {
      font-style: italic; font-weight: 400;
    }
    .hero-sub {
      font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--text-on-dark); opacity: 0.8;
      max-width: 520px; margin: 0 0 2.5rem; line-height: 1.65; font-weight: 400;
    }
    .hero-ctas { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 0.7rem;
      padding: 1.1rem 2.8rem; background: var(--light); color: var(--text-dark);
      border: none; border-radius: 40px; font-family: var(--sans); font-size: 1.05rem; font-weight: 500;
      cursor: pointer; text-decoration: none; transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
      letter-spacing: -0.01em;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 2px 10px rgba(255,255,255,0.08);
    }
    .btn-primary svg { width: 16px; height: 16px; }
    .btn-ghost {
      padding: 0.9rem 0; background: transparent; color: var(--text-on-dark);
      border: none; border-radius: 0;
      font-family: var(--sans); font-size: 1.05rem; font-weight: 500;
      cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
      transition: transform 0.22s ease, color 0.22s ease, text-underline-offset 0.22s ease;
    }
    .btn-ghost:hover {
      color: var(--text-heading);
      transform: translateX(4px);
      text-underline-offset: 7px;
    }
    .hero-note { display: none; }

    /* SHARED PILL LABEL */
    .pill-label {
      display: inline-block;
      padding: 0.35rem 1rem;
      border: 1px solid var(--surface-border);
      border-radius: 999px;
      font-size: 1.1rem; font-weight: 500;
      color: var(--text-dim);
      margin-bottom: 1.75rem;
    }

    /* OWN YOUR ENGLISH */
    .own-section {
      background: transparent;
      padding: 0;
    }
    .own-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex; flex-direction: column;
      align-items: center; gap: 0;
      border-left: 1px solid var(--surface-border);
      border-right: 1px solid var(--surface-border);
      background: #0a0a0a;
    }
    .own-title-wrap {
      width: 100vw;
      
      padding: 3rem 2.5rem;
      border-bottom: 1px solid var(--surface-border);
      border-top: 1px solid var(--surface-border);
      background: #0a0a0a;
    }
    .own-cards-wrap {
      width: 100%;
      padding: 3rem 2.5rem;
      /* border-bottom: 1px solid var(--surface-border); */
      box-sizing: border-box;
    }
    .own-subtitle-wrap {
      width: 100vw;
      padding: 2.5rem 2.5rem;
      background: #0a0a0a;
      border-top: 1px solid var(--surface-border);
    }
    .own-title {
      font-family: var(--serif); font-size: 3.125rem;
      font-weight: 700; color: var(--text-heading); text-align: center;
      line-height: 1.06; letter-spacing: -0.04em;
    }
    .own-subtitle {
      font-family: var(--sans); font-size: clamp(1.08rem, 1.55vw, 1.35rem);
      font-weight: 400; color: rgba(255,255,255,0.4);
      text-align: center; font-style: normal;
      letter-spacing: -0.03em; line-height: 1.28;
    }
    .own-cards {
      display: flex; gap: 3rem;
      justify-content: center; width: 100%;
      max-width: 1080px;
    }
    .own-card {
      width: 30%; max-width: 340px;
      height: 440px; border-radius: 2rem;
      overflow: hidden; position: relative;
      background: #fff; flex-shrink: 0;
      border: 1px solid var(--surface-border);
    }
    /* WRITE CARD */
    .own-card-write { background: #e8e8e2; }
    .own-card-top {
      padding: 2.4rem 2.4rem 0;
      position: relative; z-index: 2;
    }
    .own-card-heading {
      font-family: var(--serif); font-size: 2rem;
      font-weight: 600; color: #1e1e1e;
      line-height: 1; margin-bottom: 0.4rem;
    }
    .own-card-desc {
      font-family: var(--sans); font-size: 0.9rem;
      font-weight: 400; color: #1e1e1e;
      line-height: 1.45; max-width: 200px;
    }
    .own-card-body-write {
      position: absolute; bottom: 0; left: 0;
      width: calc(100% - 20px); height: 64%;
      background: #fafafa; border-radius: 0 1.5rem 0 0;
      padding: 1.5rem 2.4rem;
      display: flex; flex-direction: column;
      justify-content: space-between;
    }
    .own-email-mock {
      font-family: var(--sans); font-size: 0.95rem;
      font-weight: 300; color: #1e1e1e;
      line-height: 1.65;
    }
    .own-email-mock p { margin: 0; }
    .own-underline {
      text-decoration: underline wavy #FF0000;
      text-decoration-skip-ink: none;
      text-underline-offset: 3px;
    }
    .own-proofread-btn {
      align-self: center;
      background: #efefef; color: #121212;
      font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
      padding: 0.7rem 2.2rem; border-radius: 3rem;
      text-align: center;
    }
    /* LEARN CARD */
    .own-card-learn {
      background: #2a6d7a;
    }
    .own-card-bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; z-index: 0;
    }
    .own-card-top-light .own-card-heading { color: #fff; }
    .own-card-top-light .own-card-desc { color: #fff; max-width: 260px; }
    .own-card-body-learn {
      position: absolute; bottom: 0; left: 1.2rem;
      width: calc(100% - 1.2rem); height: 66%;
      background: linear-gradient(180deg, #fbfbfb, #f5f5f5);
      border-radius: 1.5rem 0 0 0;
      padding: 1.6rem 2rem;
    }
    .own-learn-label {
      font-family: var(--sans); font-size: 0.88rem;
      font-weight: 700; color: #121212;
      margin-bottom: 0.9rem;
    }
    .own-learn-category {
      font-family: var(--sans); font-size: 0.82rem;
      color: #0083F5; margin-bottom: 0.5rem;
    }
    .own-learn-subtype {
      font-family: var(--sans); font-size: 0.76rem;
      color: rgba(0,131,245,0.7); margin-bottom: 0.5rem;
    }
    .own-learn-title {
      font-family: var(--serif); font-size: 1.35rem;
      font-weight: 500; color: #121212;
      line-height: 1.2; margin-bottom: 1rem;
    }
    .own-learn-example {
      display: flex; align-items: stretch; gap: 0.75rem;
      font-family: var(--sans); font-size: 0.9rem;
      color: #121212; line-height: 1.6;
    }
    .own-learn-bar {
      width: 4px; flex-shrink: 0;
      background: #02CD91; border-radius: 2px;
    }
    .own-highlight {
      background: rgba(2,205,145,0.2);
      border-radius: 4px; padding: 0.15rem 0.4rem;
    }
    /* IMPROVE CARD */
    .own-card-improve { background: #e8e8e2; }
    .own-card-improve .own-card-heading { color: #1e1e1e; }
    .own-card-improve .own-card-desc { color: #1e1e1e; }
    .own-card-improve-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      z-index: 0;
    }
    .own-card-improve .own-card-top { z-index: 2; }

    /* LIGHT MODE */
    .light .own-section { background: transparent; border-color: var(--surface-border); }
    .light .own-title { color: #091717; }
    .light .own-subtitle { color: #091717; }

    /* DESKTOP — 80% max width + full height sections */
    @media (min-width: 1025px) {
      /* Main column: 80% of viewport on laptop / desktop / large monitors */
      .hero-inner,
      .own-inner,
      .rail-shell,
      .faq-inner {
        width: 80%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
      }
      .pain-section,
      .faq-section,
      .comparison-section {
        padding-left: 0;
        padding-right: 0;
      }
      .hero {
        padding-left: 0;
        padding-right: 0;
      }
      .own-english-section,
      .final-cta {
        padding-left: 0;
        padding-right: 0;
      }
      .own-cards {
        max-width: none;
        width: 100%;
        gap: clamp(1.5rem, 3vw, 4rem);
      }
      .own-card {
        max-width: none;
        height: auto;
        aspect-ratio: 340 / 440;
      }
      .faq-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
      }
      /* How it works: fill viewport below fixed nav; title top, tagline bottom, cards centered between */
      .own-section {
        min-height: calc(100vh - var(--nav-height));
        min-height: calc(100dvh - var(--nav-height));
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .own-inner {
        flex: 1;
        min-height: 0;
      }
      .own-title-wrap,
      .own-subtitle-wrap {
        flex-shrink: 0;
      }
      .own-title-wrap {
        padding: 4rem 2.5rem;
      }
      .own-cards-wrap {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      /* Sound Familiar — fill viewport below nav; title top, list centered, CTA bottom */
      .pain-section {
        min-height: calc(100vh - var(--nav-height));
        min-height: calc(100dvh - var(--nav-height));
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .pain-section > .pain-inner {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      .pain-section .section-title-row {
        flex-shrink: 0;
        padding: 72px 60px 74px;
      }
      .pain-section .pain-list {
        flex: 1;
        min-height: 0;
        align-content: stretch;
        align-self: stretch;
        width: 100%;
        grid-template-rows: 1fr 1fr;
      }
      .pain-section .pain-cta {
        flex-shrink: 0;
      }
      /* Other AI tools — same viewport fill + vertical rhythm */
      .comparison-section {
        min-height: calc(100vh - var(--nav-height));
        min-height: calc(100dvh - var(--nav-height));
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .comparison-section > .rail-shell {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      .comparison-section .section-title-row {
        flex-shrink: 0;
      }
      .comparison-section .comparison-card {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        flex: 1;
        min-height: 0;
        /* One row fills card height so columns (and center border) span full card */
        grid-template-rows: 1fr;
        align-content: stretch;
        align-items: stretch;
      }
    }

    /* RESPONSIVE */
    @media (max-width: 1100px) {
      .own-cards { flex-direction: column; align-items: center; }
      .own-card { width: 100%; max-width: 540px; height: 660px; }
      .own-cards { gap: 2.5rem; }
      .own-section { padding:  0rem 3rem 0rem 3rem; }
      .hero {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
      .own-english-section,
      .final-cta {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
      .pain-section,
      .faq-section,
      .comparison-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
      .own-inner { gap: 3rem; }
      .own-title { font-size: 3.8rem; }
    }
    @media (max-width: 1024px) {
      .rail-shell {
        max-width: 1200px;
        width: 100%;
      }
      .hero-inner { flex-direction: column; gap: 4rem; }
      .hero-text { text-align: center; }
      .hero-sub { margin-left: auto; margin-right: auto; }
      .hero-image-wrap { width: 300px; margin: 0 auto; }
      .hero-ctas { justify-content: center; }
      .hero h1 { font-size: clamp(3.5rem, 6.25vw, 4.5rem); }
    }
    @media (max-width: 768px) {
      .own-section { padding: 0rem 1.5rem 0rem 1.5rem; }
      .own-inner { gap: 2.5rem; }
      .own-title { font-size: 2.2rem; padding: 0 1.5rem; }
      .own-subtitle { padding: 0 1.5rem; }
      .own-cards-wrap { padding: 0; }

      /* Stack cards vertically on mobile */
      .own-cards {
        flex-direction: column;
        align-items: center;
        padding: 0 1.25rem;
        gap: 1rem;
      }

      .own-card {
        width: 100%;
        max-width: 360px;
        height: 420px;
        border-radius: 1.5rem;
      }

      /* Hide pagination dots */
      .own-scroll-hint { display: none !important; }

      .own-card-heading { font-size: 1.7rem; }
      .own-card-top { padding: 1.6rem 1.6rem 0; }
      .own-card-body-write { padding: 1.2rem 1.5rem; }
      .own-card-body-learn { padding: 1.4rem 1.6rem; }
      .own-learn-title { font-size: 1.2rem; }
    }

    /* PAIN - DARK */
    .pain-section {
      position: relative;
      background: transparent;
      color: var(--text-on-dark);
      padding: 0 3rem;
      overflow: hidden;
    }
    .rail-shell {
      margin: 0 auto;
      border-left: 1px solid var(--surface-border);
      border-right: 1px solid var(--surface-border);
      background: #0a0a0a;
    }
    .section-title-row {
      position: relative;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      padding: 56px 60px 58px;
      background: #0a0a0a;
      border-bottom: 1px solid var(--surface-border);
    }
    .section-title-row::before {
      content: '';
      position: absolute;
      left: 50%;
      width: 100vw;
      height: 1px;
      transform: translateX(-50%);
      background: var(--surface-border);
      pointer-events: none;
      top: 0;
    }
    .section-title-row h2 {
      margin: 0;
    }
    .pain-inner {
      position: relative;
      padding: 0;
    }
    .pain-section .section-title-row {
      text-align: center;
    }
    .pain-section h2 {
      font-family: var(--serif);
      font-size: 3.125rem;
      line-height: 1.06;
      letter-spacing: -0.04em;
      font-weight: 700;
      margin: 0;
    }
    .pain-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: relative;
      box-sizing: border-box;
      /* border: 1px solid var(--surface-border); */
      border-top: none;
      gap: 1px;
      background: var(--surface-border);
    }
    .pain-item {
      padding: 3rem 2.5rem;
      background: #0a0a0a;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }
    .pain-item h3 {
      font-family: var(--sans);
      font-size: clamp(1.08rem, 1.55vw, 1.35rem);
      font-weight: 400;
      line-height: 1.28;
      letter-spacing: -0.03em;
      color: var(--text-heading);
      max-width: 760px;
    }
    .pain-item p {
      font-size: 1rem;
      color: rgba(208,214,224,0.42);
      line-height: 1.5;
      font-weight: 400;
      max-width: 760px;
    }
    .pain-cta {
      min-height: 183px;
      padding: 0 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      background: #0a0a0a;
      border-top: 1px solid var(--surface-border);
    }
    .pain-cta .btn-dark {
      padding: 1.1rem 2.8rem;
      background: var(--light); color: var(--text-dark);
      border: none;
      border-radius: 40px;
      font-size: 1.05rem;
      font-weight: 500;
      box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    .pain-cta .btn-dark:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 2px 10px rgba(255,255,255,0.08);
    }
    .btn-dark {
      display: inline-flex; align-items: center; gap: 0.6rem;
      padding: 1.1rem 2.8rem; background: var(--light); color: var(--text-dark);
      border: none; border-radius: 40px; font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
      cursor: pointer; text-decoration: none; transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease;
      box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    .btn-dark:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(0,0,0,0.28), 0 2px 10px rgba(255,255,255,0.08);
    }

    /* REFRAME - DARK */
    .reframe {
      background: transparent; padding: 7rem 3rem;
      min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
      border-top: var(--separator);
    }
    .reframe-inner { max-width: 900px; width: 100%; margin: 0 auto; text-align: left; }
    .reframe .small {
      display: inline-block;
      padding: 0.35rem 1rem;
      border: 1px solid var(--surface-border);
      border-radius: 999px;
      font-size: 1.1rem; font-weight: 500;
      color: var(--text-dim); margin-bottom: 1.75rem;
    }
    .reframe h2 {
      font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3rem);
      line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2rem;
      padding-bottom: 2rem; border-bottom: 1px solid var(--surface-border);
    }
    .reframe h2 .accent { color: var(--accent); }
    .reframe .explain {
      font-size: 1.05rem; color: var(--text-dim); line-height: 1.7; margin: 0;
    }
    .reframe .conclusion {
      margin-top: 2.5rem; font-size: 1.15rem; font-weight: 600;
      color: var(--text-on-dark); line-height: 1.5;
    }

    /* HOW IT WORKS - DARK WALKTHROUGH */
    .how-section {
      background: transparent; color: var(--text-on-dark); padding: 7rem 3rem;
      border-top: var(--separator);
    }
    .how-inner { max-width: 960px; margin: 0 auto; }
    .how-section .label {
      display: inline-block;
      padding: 0.35rem 1rem;
      border: 1px solid var(--surface-border);
      border-radius: 999px;
      font-size: 1.1rem; font-weight: 500;
      color: var(--text-dim); margin-bottom: 1.75rem;
    }
    .how-section h2 {
      font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.2rem);
      line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; margin-bottom: 5rem;
    }

    .step-walkthrough {
      display: flex; flex-direction: column;
    }

    .step-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0;
      min-height: 530px;
      border: 1px solid var(--surface-border);
      overflow: hidden;
    }
    .step-row + .step-row { border-top: none; }

    .step-row.reverse .step-text { order: 2; border-left: 1px solid var(--surface-border); }
    .step-row.reverse .step-visual { order: 1; }

    .step-text {
      padding: 2.5rem;
      display: flex; flex-direction: column;
      border-right: 1px solid var(--surface-border);
    }
    .step-row.reverse .step-text { border-right: none; }

    .step-num {
      font-family: var(--serif); font-size: clamp(5rem, 12vw, 9rem); font-weight: 400;
      color: #f5f5f5; line-height: 1; margin-bottom: 0;
    }

    .step-tag {
      display: inline-block; font-size: 15px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: white; margin-bottom: 0.6rem;
      margin-top: auto;
    }

    .step-text h3 {
      font-family: var(--serif); font-size: 22px; font-weight: 700;
      color: white; margin-bottom: 0.6rem; line-height: 1.25;
    }

    .step-text p {
      font-size: 12px; color: white; line-height: 2;
    }

    .step-visual {
      position: relative;
      overflow: hidden;
    }

    .light .btn-primary { background: #091717; color: #FBFAF4; }
    .light .btn-primary:hover {
      background: #1a2a2a;
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(0,0,0,0.2);
    }
    .light .btn-dark { background: #091717; color: #FBFAF4; }
    .light .btn-dark:hover {
      background: #1a2a2a;
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(0,0,0,0.2);
    }

    /* Focus outlines — dark in light mode */
    .light *:focus-visible { outline-color: #091717; }
    .light a:focus-visible, .light button:focus-visible {
      outline: 2px solid #091717; outline-offset: 2px;
    }

    /* LIGHT MODE — page-specific overrides */

    /* Hero — light mode */
    .light .hero { background: #FBFAF4; }
    .light .hero h1 { color: #091717; }
    .light .hero-sub { color: #444; }
    .light .hero-tagline {
      color: #555; border-color: rgba(0,0,0,0.15);
      background: rgba(0,0,0,0.05);
    }
    .light .hero-float-label {
      background: rgba(255,255,255,0.45); color: #091717;
      border-color: rgba(255,255,255,0.7);
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }
    .light .btn-primary { background: #091717; color: #FBFAF4; }
    .light .btn-primary:hover { background: #1a2a2a; box-shadow: 0 14px 30px rgba(0,0,0,0.2); }
    .light .btn-ghost { color: #555; }
    .light .btn-ghost:hover { color: #091717; }

    /* How it works steps */
    .light .how-section { background: transparent; }
    .light .step-row { border-top-color: var(--surface-border); border-bottom-color: var(--surface-border); border-left-color: var(--surface-border); border-right-color: var(--surface-border); }
    .light .step-text { border-right-color: var(--surface-border); }
    .light .step-row.reverse .step-text { border-left-color: var(--surface-border); }
    .light .step-num { color: #091717; }
    .light .step-tag { color: var(--text-on-dark); }
    .light .step-text h3 { color: var(--text-on-dark); }
    .light .step-text p { color: var(--text-dim); }
    .light .vis-frame { border-top-color: var(--surface-border); border-left-color: var(--surface-border); border-right-color: var(--surface-border); border-bottom-color: var(--surface-border); }
    .light .vis-frame-dot.r { background: rgba(255,59,48,0.1); border-color: #ff3b30; }
    .light .vis-frame-dot.y { background: rgba(255,204,0,0.15); border-color: #ffcc00; }
    .light .vis-frame-dot.g { background: rgba(52,199,89,0.15); border-color: #34c759; }
    .light .vis-email-to { color: rgba(9,23,23,0.3); }
    .light .vis-email-addr { color: var(--text-on-dark); }
    .light .vis-email-divider { background: var(--surface-border); }
    .light .vis-email-text { color: var(--text-on-dark); }
    .light .vis-proof-line { color: var(--text-on-dark); border-color: var(--surface-border); }
    .light .vis-fix-old { color: #ff3b30; }
    .light .vis-fix-new { color: #34c759; }
    .light .vis-amb-sentence { color: var(--text-on-dark); }
    .light .vis-amb-card { background: rgba(255,180,50,0.08); border-color: rgba(255,180,50,0.2); }
    .light .vis-amb-card p { color: var(--text-dim); }
    .light .vis-why-card { border-color: var(--surface-border); }
    .light .vis-why-badge { color: var(--text-on-dark); }
    .light .vis-why-rule { color: var(--text-dim); }
    .light .vis-why-divider { background: var(--surface-border); }
    .light .vis-review-title { color: var(--text-on-dark); }
    .light .vis-review-item { border-color: var(--surface-border); }
    .light .vis-review-item .label-text { color: var(--text-dim); }
    .light .streak-dot.done { background: rgba(52,199,89,0.15); border-color: #34c759; }
    .light .streak-dot.miss { background: rgba(255,59,48,0.1); border-color: #ff3b30; }
    .light .streak-dot.empty { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.15); }

    /* Pain section */
    .light .pain-section {
      background: #FBFAF4;
    }
    .light .rail-shell {
      border-left-color: var(--surface-border);
      border-right-color: var(--surface-border);
    }
    .light .section-title-row {
      border-top-color: var(--surface-border);
      border-bottom-color: var(--surface-border);
    }
    .light .section-title-row::before,
    .light .section-title-row::after {
      background: var(--surface-border);
    }
    .light .pain-inner {
      border-left-color: var(--surface-border);
      border-right-color: var(--surface-border);
    }
    .light .pain-list {
      border-color: var(--surface-border);
      border-top: none;
      background: var(--surface-border);
    }
    .light .pain-item {
      background: #FBFAF4;
    }
    .light .pain-item h3 { color: #091717; }
    .light .pain-item p { color: rgba(9,23,23,0.52); }
    .light .pain-cta { border-top-color: var(--surface-border); }
    .light .pain-cta .btn-dark {
      background: #091717;
      color: #FBFAF4;
      border-color: #091717;
      box-shadow: none;
    }
    .light .pain-cta .btn-dark:hover {
      background: #1a2a2a;
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(0,0,0,0.2);
    }

    /* Reframe */
    .light .reframe h2 { border-bottom-color: var(--surface-border); }

    /* Social proof / testimonials */
    .light .social-proof { border-color: var(--surface-border); }

    /* Writing section */
    .light .writing-cell { border-top-color: var(--surface-border); }
    .light .writing-cell:nth-child(even) { border-left-color: var(--surface-border); }

    /* FAQ */
    .light .faq-icon { background: rgba(0,0,0,0.05); color: var(--text-dim); }
    .light .faq-intro { border-right-color: var(--surface-border); }
    .light .faq-eyebrow { color: rgba(9,23,23,0.45); }
    .light .faq-heading { color: #091717; }
    .light .faq-lede { color: rgba(9,23,23,0.55); }
    .light .faq-item { border-bottom-color: var(--surface-border); }
    .light .faq-item:first-child { border-top-color: var(--surface-border); }
    .light .faq-item::before { background: #2797FF; }
    .light .faq-toggle { color: rgba(9,23,23,0.4); }
    .light .faq-item:hover .faq-question {
      background-color: rgba(9, 23, 23, 0.06);
    }
    .light .faq-answer-inner { color: rgba(9,23,23,0.68); }

    /* Comparison section */
    .light .comparison-card { border-color: var(--surface-border); }
    .light .comparison-left { border-color: var(--surface-border); }
    .light .comparison-header { border-bottom-color: var(--surface-border); }
    .light .comparison-summary { border-top-color: var(--surface-border); }
    .light .comparison-point {
      color: #091717;
    }
    .light .comparison-points-without .comparison-point::before {
      color: #e04040;
    }
    .light .comparison-points-with .comparison-point::before {
      color: var(--green);
    }

    /* Final CTA */
    .light .final-cta .disclaimer { color: var(--text-dim); }

    /* Visual frame - macOS-style window */
    .vis-frame {
      position: absolute;
      top: 2rem;
      left: 2rem;
      right: 0;
      bottom: 0;
      border: 1px solid var(--surface-border);
      border-radius: 22px 0 0 0;
      border-right: none;
      border-bottom: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .vis-frame-bar {
      display: flex; gap: 10px; padding: 16px 22px;
    }
    .vis-frame-dot {
      width: 15px; height: 15px; border-radius: 50%;
      border: 1px solid;
    }
    .vis-frame-dot.r { background: rgba(158,0,42,0.2); border-color: #9e002a; }
    .vis-frame-dot.y { background: rgba(245,179,0,0.1); border-color: #f5b300; }
    .vis-frame-dot.g { background: rgba(2,205,145,0.2); border-color: #02cd91; }

    .vis-frame-body {
      flex: 1;
      padding: 1rem 1.5rem 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Adaptive-level callout — bottom of How It Works */
    .how-adaptive {
      margin-top: 4rem; padding-top: 3rem;
      text-align: center;
      max-width: 640px; margin-left: auto; margin-right: auto;
    }
    .how-adaptive blockquote,
    .quote-section .how-adaptive blockquote {
      font-family: var(--serif);
      font-size: clamp(1.3rem, 2.5vw, 1.75rem);
      font-style: normal; font-weight: 400;
      color: var(--text-on-dark); line-height: 1.35;
      letter-spacing: -0.015em; margin-bottom: 0.85rem;
      max-width: none;
    }
    .how-adaptive blockquote strong { color: var(--accent); font-style: normal; font-weight: 700; }
    .how-adaptive p {
      font-size: 0.95rem; color: var(--text-dim); line-height: 1.7;
    }

    /* Step 1: Email visual */
    .vis-email-to {
      font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.2);
      margin-bottom: 0.5rem;
    }
    .vis-email-addr {
      font-size: 16px; font-weight: 400; color: white;
      margin-bottom: 1rem;
    }
    .vis-email-divider {
      height: 1px; background: var(--surface-border); margin-bottom: 1rem;
    }
    .vis-email-text {
      font-size: 15px; font-weight: 200; color: white; line-height: 1.7;
    }
    .vis-cursor {
      display: inline-block; width: 2px; height: 14px;
      background: var(--accent); animation: blink 1s step-end infinite;
      vertical-align: text-bottom; margin-left: 2px;
    }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

    /* Step 2: Proofread visual */
    .vis-proof-line {
      font-size: 15px; font-weight: 200; color: white; line-height: 1.6;
      padding: 1rem 0;
      border-bottom: 1px solid var(--surface-border);
    }
    .vis-proof-line:last-child { border-bottom: none; }
    .vis-fix-old { color: #9e002a; text-decoration: line-through; }
    .vis-fix-arrow { color: rgba(255,255,255,0.3); margin: 0 4px; }
    .vis-fix-new { color: #02cd91; }

    /* Step 3: Ambiguity visual */
    .vis-amb-sentence {
      font-size: 15px; font-weight: 400; color: white; line-height: 1.6;
      margin-bottom: 1rem;
    }
    .vis-amb-highlight {
      display: inline-block;
      background: rgba(245,179,0,0.1); color: #f5b300;
      padding: 2px 8px; border-radius: 8px;
      border: 1px solid #f5b300;
      font-size: 15px;
    }
    .vis-amb-card {
      background: rgba(245,179,0,0.1);
      border: 1px solid rgba(245,179,0,0.15);
      border-radius: 10px; padding: 1.25rem;
    }
    .vis-amb-label {
      font-size: 16px; font-weight: 400;
      color: #f5b300; margin-bottom: 0.5rem;
    }
    .vis-amb-card p {
      font-size: 15px; font-weight: 200; color: white; line-height: 1.6;
    }

    /* Step 4: Why this matters visual */
    .vis-why-card {
      border: none;
      padding: 0;
      overflow: hidden;
    }
    .vis-why-badge {
      display: inline-block; font-size: 15px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: white; margin-bottom: 1rem;
    }
    .vis-why-divider {
      height: 1px; background: var(--surface-border); margin-bottom: 1rem;
    }
    .vis-why-rule {
      font-size: 15px; font-weight: 200; color: white; line-height: 1.6;
    }

    /* Step 5: Review visual */
    .vis-review-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 0.75rem;
    }
    .vis-review-title {
      font-size: 15px; font-weight: 400; text-transform: uppercase;
      letter-spacing: 0.1em; color: white;
    }
    .vis-review-time {
      display: inline-block;
      font-size: 15px; font-weight: 400; color: #137dff;
      background: rgba(19,125,255,0.2);
      border: 1px solid #137dff;
      border-radius: 8px;
      padding: 2px 10px;
    }
    .vis-review-item {
      padding: 0.6rem 0;
      border-top: 1px solid var(--surface-border);
      display: flex; align-items: center; justify-content: space-between;
    }
    .vis-review-item .label-text {
      font-size: 11px; font-weight: 200; color: white;
    }
    .vis-review-item .streak {
      display: flex; gap: 4px;
    }
    .streak-dot {
      width: 10px; height: 20px; border-radius: 5px;
      border: 1px solid;
    }
    .streak-dot.done { background: rgba(2,205,145,0.2); border-color: #02cd91; }
    .streak-dot.miss { background: rgba(158,0,42,0.2); border-color: #9e002a; }
    .streak-dot.empty { background: rgba(82,82,82,0.2); border-color: #525252; }

    /* QUOTE - DARK */
    .quote-section {
      background: transparent;
      text-align: left;
      padding: 0 3rem;
    }
    #whats-different {
      scroll-margin-top: 104px;
    }
    .comparison-section .section-title-row {
      padding-bottom: 54px;
      text-align: center;
    }
    .comparison-section .section-title-row h2 {
      font-family: var(--serif);
      font-size: 3.125rem;
      font-weight: 700;
      color: var(--text-heading);
      letter-spacing: -0.03em;
      line-height: 1.08;
      max-width: none;
    }
    .quote-section blockquote {
      font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3rem);
      font-style: italic; font-weight: 400;
      color: var(--text-heading); max-width: 750px; margin: 0 auto;
      line-height: 1.35; letter-spacing: -0.02em;
    }
    .comparison-card {
      /* border: 1px solid var(--surface-border); */
      border-radius: 0;
      overflow: hidden;
    }
    .comparison-col {
      min-height: 100%;
    }
    .comparison-col::after {
      content: '';
      position: absolute;
      right: -12%;
      bottom: -30%;
      width: min(670px, 92%);
      aspect-ratio: 670 / 698;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
    }
    .comparison-left {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .comparison-left > * {
      position: relative;
      z-index: 1;
    }
    .comparison-left::after {
      opacity: 0;
    }
    .comparison-right {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .comparison-right > * {
      position: relative;
      z-index: 1;
    }
    .comparison-right::after {
      opacity: 0;
    }
    .comparison-header {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      padding: 2.35rem 2.3rem;
      border-bottom: 1px solid var(--surface-border);
      background: transparent;
    }
    .comparison-summary {
      padding: 2.15rem 2.3rem 2.2rem;
      border-top: 1px solid var(--surface-border);
    }
    .comparison-header > * {
      position: relative;
      z-index: 1;
    }
    .comparison-header::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
    }
    .comparison-header-without::after {
      opacity: 0;
    }
    .comparison-header-with::after {
      opacity: 0;
    }
    .comparison-header-without { background: transparent; }
    .comparison-header-with { background: transparent; }
    .comparison-left > div:last-child { background: transparent; }
    .comparison-right > div:last-child { background: transparent; }
    .comparison-points {
      list-style: none;
      margin: 0;
      padding: 0;
      width: min(100%, 28rem);
    }
    .comparison-points-without {
      width: min(100%, 24rem);
    }
    .comparison-points-without .comparison-point::before {
      content: '\2717';
      color: #e04040;
    }
    .comparison-points-with {
      width: min(100%, 24rem);
    }
    .comparison-points-with .comparison-point::before {
      content: '\2713';
      color: var(--green);
    }
    .comparison-point {
      display: grid;
      grid-template-columns: 1.4rem 1fr;
      gap: 1rem;
      padding: 1.6rem 0 0;
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 400;
      color: var(--text-heading);
      line-height: 30px;
    }
    .comparison-point::before {
      content: '\2713';
      color: var(--green);
      font-size: 1.5rem;
      line-height: 1;
      transform: translateY(0.1rem);
    }

    /* MID CTA - ACCENT */
    .mid-cta {
      background: transparent; padding: 5rem 3rem; text-align: center;
      border-top: var(--separator);
      border-bottom: var(--separator);
    }
    .mid-cta h2 {
      font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2.2rem);
      line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 2rem;
    }
    .mid-cta h2 strong { color: var(--accent); }

    /* WHY WRITING - DARK */
    .writing-section {
      background: transparent; color: var(--text-on-dark); padding: 7rem 3rem;
      border-top: var(--separator);
    }
    .writing-inner { max-width: 900px; margin: 0 auto; }
    .writing-section .label {
      display: inline-block;
      padding: 0.35rem 1rem;
      border: 1px solid var(--surface-border);
      border-radius: 999px;
      font-size: 1.1rem; font-weight: 500;
      color: var(--text-dim); margin-bottom: 1.75rem;
    }
    .writing-section h2 {
      font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.2rem);
      line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; margin-bottom: 2rem;
    }
    .writing-section .intro-text {
      font-size: 1.05rem; color: var(--text-dim); line-height: 1.7;
      max-width: 560px; margin-bottom: 3rem;
    }
    .writing-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    }
    .writing-cell {
      padding: 2rem 2rem 2rem 0;
      border-top: 1px solid var(--surface-border);
    }
    .writing-cell:nth-child(even) { padding-left: 2rem; padding-right: 0; border-left: 1px solid var(--surface-border); }
    .writing-cell h4 {
      font-size: 0.95rem; font-weight: 700; color: var(--text-on-dark); margin-bottom: 0.4rem;
    }
    .writing-cell p {
      font-size: 0.88rem; color: var(--text-dim); line-height: 1.6;
    }
    .writing-insight {
      background: transparent; text-align: center;
      border-top: var(--separator);
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      padding: 6rem 3rem;
    }
    .writing-insight p:not(.hero-tagline) {
      font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--text-heading);
      line-height: 1.35; font-style: italic; max-width: 800px; margin: 0 auto;
      letter-spacing: -0.02em;
    }
    .writing-insight p span {
      color: var(--accent); font-style: normal; font-weight: 700;
    }
    .own-english-section {
      background: rgb(10, 10, 10);
      border-top: var(--separator);
      border-bottom: var(--separator);
      min-height: 58vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 3rem 3rem;
    }
    .own-english-section .inner {
      width: 100%;
      max-width: 980px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    @media (min-width: 1025px) {
      .own-english-section .inner,
      .final-cta > div {
        width: 80%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
      }
    }
    .own-english-section h2 {
      font-family: var(--serif);
      font-size: 3.5rem;
      line-height: 1.08;
      letter-spacing: -0.03em;
      font-weight: 700;
      color: var(--text-heading);
      margin: 0 0 2rem;
    }
    .own-english-section p {
      font-size: clamp(1.1rem, 1.8vw, 1.35rem);
      font-weight: 600;
      color: rgba(255,255,255,0.48);
      line-height: 1.45;
      margin: 0;
    }
    .scroll-reveal-text .word {
      display: inline; color: rgba(255,255,255,0.05);
      transition: color 0.4s ease;
    }
    .scroll-reveal-text .word.revealed {
      color: rgba(255,255,255,0.95);
    }
    .light .scroll-reveal-text .word {
      color: rgba(9,23,23,0.06);
    }
    .light .scroll-reveal-text .word.revealed {
      color: rgba(9,23,23,0.9);
    }
    .light .own-english-section {
      background: #FBFAF4;
      border-top-color: var(--surface-border);
      border-bottom-color: var(--surface-border);
    }
    .light .own-english-section h2,
    .light .own-english-section p {
      color: rgba(9,23,23,0.52);
    }
    .light .own-english-section h2 {
      color: #091717;
    }

    /* FINAL CTA - DARK */
    .final-cta {
      background: rgb(10, 10, 10);
      border-top: var(--separator);
      border-bottom: var(--separator);
      min-height: 100vh;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 6rem 3rem;
    }
    .final-cta h2 {
      font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 4.5rem);
      color: var(--text-heading); line-height: 1.08; font-weight: 700;
      letter-spacing: -0.03em; margin-bottom: 1.5rem;
    }
    .final-cta .sub {
      font-size: 1.05rem; color: var(--text-dim); margin-bottom: 2.5rem;
      max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.65;
    }
    .final-cta .note {
      margin-top: 1.25rem; font-size: 0.75rem; color: rgba(255,255,255,0.3);
    }

    /* FAQ - DARK (Ample-style: intro left, accordion right) */
    .faq-section {
      background: transparent;
      color: var(--text-on-dark);
      padding: 0 3rem;
    }
    .faq-inner {
      padding-bottom: 0;
    }
    .faq-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      align-items: start;
      box-sizing: border-box;
      border-bottom: 1px solid var(--surface-border);
      border-top: 1px solid var(--surface-border);
    }
    .faq-intro {
      padding: 3rem 0 2.5rem;
      text-align: left;
    }
    .faq-eyebrow {
      margin: 0 0 1.25rem;
      font-family: var(--sans);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-dim);
    }
    .faq-heading {
      font-family: var(--sans);
      font-size: clamp(1.75rem, 3.2vw, 2.35rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-heading);
      margin: 0 0 1.25rem;
      max-width: 22ch;
      text-wrap: balance;
    }
    .faq-lede {
      margin: 0;
      max-width: 28ch;
      font-family: var(--sans);
      font-size: 0.95rem;
      font-weight: 400;
      line-height: 1.45;
      color: var(--text-dim);
    }
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-width: 0;
    }
    .faq-item {
      border: none;
      border-bottom: 1px solid var(--surface-border);
      border-radius: 0;
      overflow: hidden;
      position: relative;
    }
    .faq-item > * {
      position: relative;
      z-index: 1;
    }
    .faq-item:first-child {
      border-top: 1px solid var(--surface-border);
    }
    .faq-item::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      background: #2797FF;
      opacity: 0;
      transition: opacity 0.22s ease;
      pointer-events: none;
      z-index: 3;
    }
    .faq-item:hover::before,
    .faq-item.active:not(.is-closing)::before,
    .faq-item.is-opening::before,
    .faq-item.is-open::before {
      opacity: 1;
    }
    .faq-question {
      display: flex;
      align-items: center;
      gap: 1rem;
      box-sizing: border-box;
      padding: 1.2rem 1.5rem;
      cursor: pointer;
      width: 100%;
      background: transparent;
      border: none;
      color: var(--text-heading);
      font-family: var(--sans);
      font-size: clamp(0.72rem, 1.05vw, 0.82rem);
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: left;
      transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
    }
    .faq-item:hover .faq-question {
      background-color: rgb(19, 19, 19);
    }
    .faq-item:not(.active):not(:hover) .faq-question {
      color: rgba(247, 248, 248, 0.92);
    }
    .faq-icon {
      display: none;
    }
    .faq-question span { flex: 1; min-width: 0; }
    .faq-toggle {
      width: 1.75rem;
      height: 1.75rem;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.45);
      font-size: 0.55rem;
      line-height: 1;
      transition: transform 0.3s ease, color 0.2s ease;
    }
    .faq-toggle::before {
      content: '';
      width: 0.45em;
      height: 0.45em;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: rotate(45deg);
      margin-top: -0.2em;
    }
    .faq-item.active .faq-toggle,
    .faq-item.is-opening .faq-toggle,
    .faq-item.is-open .faq-toggle,
    .faq-item.is-closing .faq-toggle {
      transform: rotate(180deg);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .faq-item.is-open .faq-answer,
    .faq-item.is-opening .faq-answer {
      cursor: pointer;
    }
    .faq-answer-inner {
      padding: 0 1.5rem 1.5rem 1.5rem;
      font-size: 0.95rem;
      color: rgba(255,255,255,0.42);
      line-height: 1.7;
      font-weight: 400;
    }
    @media (min-width: 900px) {
      .faq-layout {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
        gap: 0;
        align-items: stretch;
      }
      .faq-intro {
        padding: 3.5rem 2.5rem 4rem 2.5rem;
        border-right: 1px solid var(--surface-border);
        margin-right: 0;
      }
      .faq-list {
        padding: 0;
      }
      .faq-question {
        padding: 1.1rem 2.5rem;
      }
      .faq-answer-inner {
        padding: 0 2.5rem 2rem 2.5rem;
      }
      /* Outer frame supplies top/bottom; avoid double rules inside the list column */
      .faq-layout .faq-list .faq-item:first-child {
        border-top: none;
      }
    }
    .faq-layout .faq-list .faq-item:last-child {
      border-bottom: none;
    }

    .light .faq-section .faq-question,
    .light .faq-item:not(.active):not(:hover) .faq-question {
      color: #091717;
    }

    /* ANIMATIONS */
    .reveal { opacity: 1; transform: translateY(0); }
    .js-loaded .reveal:not([data-initial]) { opacity: 0; transform: translateY(28px); transition: all 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .js-loaded .reveal.visible { opacity: 1; transform: translateY(0); }
    .js-loaded .step-row.reveal:nth-child(1) { transition-delay: 0s !important; }
    .js-loaded .step-row.reveal:nth-child(2) { transition-delay: 0.18s !important; }
    .js-loaded .step-row.reveal:nth-child(3) { transition-delay: 0.36s !important; }
    .js-loaded .btn-dark.reveal, .js-loaded .btn-primary.reveal {
      transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease !important;
    }
    .js-loaded .btn-dark.reveal:hover, .js-loaded .btn-primary.reveal:hover {
      transform: translateY(-2px) !important;
    }

    /* COMPARISON ROW ALIGNMENT */
    .comparison-card {
      grid-template-rows: auto;
    }
    .comparison-col {
      display: flex;
      flex-direction: column;
    }

    /* RESPONSIVE */
    /* FAQ stacks below 900px — avoid desktop-sized uppercase title + harsh line breaks */
    @media (max-width: 899px) {
      .faq-heading {
        font-size: clamp(1.05rem, 2.8vw + 0.72rem, 1.65rem);
        letter-spacing: 0.04em;
        line-height: 1.18;
        max-width: none;
        text-wrap: balance;
      }
      .faq-intro {
        padding: 2.25rem 1.25rem 1.75rem;
        box-sizing: border-box;
      }
    }
    @media (max-width: 768px) {
      nav { padding: 1rem 1.5rem; }
      .hero { padding: 5rem 1.5rem 2rem; min-height: 100vh; min-height: 100dvh; justify-content: flex-start; padding-top: 8rem; }
      .hero-inner { flex-direction: column; gap: 2rem; flex: 1; }
      .hero-text { flex: none; text-align: center; }
      .hero-image-wrap { width: 260px; margin: auto auto 0; }
      .hero-float-label { font-size: 0.75rem; padding: 0.35rem 0.9rem; }
      .hero-float-label.write { left: -10px; }
      .hero-float-label.learn { right: -15px; }
      .hero-float-label.improve { left: -5px; }
      .hero-image-wrap { width: clamp(200px, 55vw, 260px); }
      .hero h1 { font-size: 2.7rem; }
      .hero-sub { font-size: 1rem; margin-bottom: 1.5rem; margin-left: auto; margin-right: auto; }
      .hero-ctas { flex-direction: column; align-items: center; gap: 1rem; }
      .btn-primary { padding: 0.8rem 1.8rem; font-size: 0.9rem; }
      .hero-ctas .btn-ghost { display: none !important; }
      .hero-tagline { font-size: 0.8rem; padding: 0.35rem 0.9rem; }
      .pain-section, .how-section, .writing-section, .reframe, .quote-section, .mid-cta, .final-cta, .faq-section, .own-english-section { padding-left: 1.5rem; padding-right: 1.5rem; }
      .section-title-row { padding: 34px 24px 38px; }
      .pain-inner { padding-top: 0; padding-bottom: 0; }
      .pain-section h2 { font-size: clamp(1.9rem, 8.8vw, 2.5rem); }
      .pain-list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 1px;
        column-gap: 0;
      }
      .pain-item {
        padding: 24px;
      }
      .pain-item h3 { font-size: 1.08rem; max-width: none; }
      .pain-item p { font-size: 0.95rem; max-width: none; }
      .pain-cta { min-height: 140px; padding: 0 24px; justify-content: center; }
      .comparison-section .section-title-row h2 { font-size: clamp(1.9rem, 8.8vw, 2.5rem); }
      .own-english-section { min-height: 48vh; padding-top: 4rem; padding-bottom: 4rem; }
      .own-english-section h2 { font-size: clamp(1.95rem, 8.8vw, 2.55rem); margin-bottom: 1.35rem; }
      .own-english-section p { font-size: 1rem; }
      .faq-heading {
        font-size: clamp(0.95rem, 3.5vw + 0.55rem, 1.32rem);
        letter-spacing: 0.03em;
        line-height: 1.22;
        max-width: none;
        margin-bottom: 1rem;
        text-wrap: balance;
      }
      .faq-intro {
        padding: 1.75rem 1.5rem 1.35rem;
        border-right: none;
      }
      .faq-eyebrow { margin-bottom: 0.85rem; font-size: 0.75rem; }
      .faq-lede { max-width: none; }
      .faq-layout { gap: 0; }
      .faq-question { padding: 1rem 1.25rem; font-size: clamp(0.68rem, 2.8vw, 0.78rem); }
      .faq-answer-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
      .step-row { grid-template-columns: 1fr; min-height: auto; }
      .step-row.reverse .step-text { order: 1; }
      .step-row.reverse .step-visual { order: 2; }
      .step-text { padding: 1.5rem 1.5rem 2rem; }
      .step-num { font-size: 4rem; margin-bottom: 2rem; }
      .step-visual { min-height: 320px; }
      .vis-frame { top: 1rem; left: 1rem; }
      .writing-grid { grid-template-columns: 1fr; }
      .writing-cell { padding: 1.5rem 0; }
      .writing-cell:nth-child(even) { padding-left: 0; border-left: none; }
      .proof-grid { grid-template-columns: 1fr !important; }
      .quote-section > div > div { grid-template-columns: 1fr !important; }
      .transform-grid { grid-template-columns: 1fr !important; }
      .transform-grid > div { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; }
      .social-proof { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
      .comparison-card { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
      .comparison-card > div { display: flex !important; flex-direction: column !important; grid-row: auto !important; }
      .comparison-steps { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; }
      .comparison-left { border-right: none !important; border-bottom: 1px solid var(--surface-border); }
    }

    /* Wins cascade over later padding: 0 3rem on these sections so rail matches .own-inner width. */
    @media (min-width: 1025px) {
      .pain-section,
      .faq-section,
      #whats-different {
        padding-left: 0;
        padding-right: 0;
      }
    }
  </style>
</head>
<body>

  <div id="shared-nav">
    <nav>
      <a href="/index.html" class="nav-logo">
        <svg viewBox="0 0 36 31" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.8548 24.7997C19.7185 22.3626 17.3764 22.3626 15.1335 22.3626L14.5518 27.3497C14.3101 29.4276 12.4763 31 10.2914 31H0L1.73047 16.1991H14.4912C19.4076 16.1991 23.1888 17.1669 25.7333 19.0706C28.0804 20.8319 31.8916 25.8951 32.3699 31H26.4379C25.3728 27.2499 24.2582 25.8853 22.8583 24.7989H22.8531L22.8548 24.7997Z" fill="white"/><path d="M25.0287 6.20115C21.3209 8.63825 18.9789 8.63825 16.7402 8.63825L17.7515 0H7.46091C5.27689 0 3.44222 1.57238 3.2005 3.65033L1.8988 14.8009H14.6595C19.5759 14.8009 23.5843 13.8331 26.5721 11.9294C29.3284 10.1681 34.3233 5.1049 36 0H30.068C28.1249 3.75014 26.6908 5.11472 25.0389 6.20115H25.0287Z" fill="white"/></svg>
        26Keys
      </a>
      <div class="nav-links" style="display:flex;align-items:center;gap:1.5rem;">
        <a href="javascript:void(0)" onclick="openWaitlistModal()" class="nav-cta">Get Early Access</a>
      </div>
    </nav>
    <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle light/dark mode">
      <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
      <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
    </button>
  </div>

  <!-- HERO -->
  <section class="hero">
    <div class="hero-inner">
      <div class="hero-text">
        <p class="hero-tagline reveal">The English coach for professionals who write every day.</p>
        <h1 class="reveal">Own your English.<br><em>Stop borrowing it</em> from AI.</h1>
        <p class="hero-sub reveal">26Keys turns your work messages and emails into practice, so you improve while you work.</p>
        <div class="hero-ctas reveal">
          <button onclick="openWaitlistModal()" class="btn-primary">
            <svg viewBox="0 0 24 24" fill="currentColor" style="width:18px;height:18px;flex-shrink:0"><path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 21.99 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.1 21.99C7.79 22.03 6.8 20.68 5.96 19.47C4.25 16.99 2.97 12.5 4.7 9.43C5.55 7.91 7.13 6.91 8.87 6.88C10.15 6.86 11.35 7.75 12.12 7.75C12.89 7.75 14.34 6.68 15.87 6.84C16.51 6.87 18.29 7.11 19.4 8.81C19.31 8.87 17.22 10.07 17.25 12.59C17.28 15.59 19.89 16.56 19.92 16.58C19.9 16.64 19.5 18.01 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/></svg>
            Get Early Access
          </button>
          <a href="#whats-different" class="btn-ghost">See what's different</a>
        </div>
      </div>
      <div class="hero-image-wrap reveal">
        <img src="images/hero-person.jpg" alt="Woman improving her English while working on her laptop" loading="eager">
        <span class="hero-float-label write">Write</span>
        <span class="hero-float-label learn">Learn</span>
        <span class="hero-float-label improve">Improve</span>
      </div>
    </div>
  </section>

  <!-- OWN YOUR ENGLISH -->
  <section class="own-section">
    <div class="own-inner">
      <div class="own-title-wrap">
        <h2 class="own-title reveal">How it works</h2>
      </div>
      <div class="own-cards-wrap">
        <div class="own-cards">
          <!-- WRITE CARD -->
          <div class="own-card reveal">
            <img src="images/YouWrite.png" alt="You Write — Your voice stays yours. No rewrite." loading="lazy" style="width:100%; height:100%; object-fit:cover; border-radius:inherit;">
          </div>
          <!-- LEARN CARD -->
          <div class="own-card reveal">
            <img src="images/WeTeach.png" alt="We Teach — We turn your mistakes into lessons." loading="lazy" style="width:100%; height:100%; object-fit:cover; border-radius:inherit;">
          </div>
          <!-- IMPROVE CARD -->
          <div class="own-card reveal">
            <img src="images/YouGrow.png" alt="You Grow — You say it right. In the actual meeting." loading="lazy" style="width:100%; height:100%; object-fit:cover; border-radius:inherit;">
          </div>
        </div>
        <div class="own-scroll-hint" id="own-dots" aria-hidden="true">
          <span class="active"></span><span></span><span></span>
        </div>
      </div>
      <div class="own-subtitle-wrap">
        <p class="own-subtitle reveal">Your writing mistakes become speaking confidence. Naturally.</p>
      </div>
    </div>
  </section>

  <!-- PAIN - LIGHT -->
  <section class="pain-section">
    <div class="pain-inner rail-shell">
      <div class="section-title-row">
        <h2 class="reveal">Sound Familiar?</h2>
      </div>
      <div class="pain-list">
        <div class="pain-item reveal">
          <h3>Rereading the same email five times before hitting send</h3>
          <p>You know what you want to say. But you keep second-guessing whether you said it right.</p>
        </div>
        <div class="pain-item reveal">
          <h3>Relying on ChatGPT for polished output but never improving</h3>
          <p>The email sounds great. But next time, you're right back asking the same thing again.</p>
        </div>
        <div class="pain-item reveal">
          <h3>Staying quiet in meetings because you fear being judged</h3>
          <p>You have the answer. But the thought of saying it wrong keeps you silent.</p>
        </div>
        <div class="pain-item reveal">
          <h3>Translating in your head before you speak</h3>
          <p>You're fluent in your ideas. Just not fast enough in English.</p>
        </div>
      </div>
      <div class="pain-cta reveal">
        <button onclick="openWaitlistModal()" class="btn-dark">Start Improving Today</button>
      </div>
    </div>
  </section>

  <!-- REFRAME - DARK (hidden for early access) -->
  <div style="display:none">
  <section class="reframe">
    <div class="reframe-inner">
      <p class="small reveal">The problem isn't your English.</p>
      <h2 class="reveal">It's that no method actually<br>taught you <span class="accent">what matters.</span></h2>
      <div class="explain reveal" style="display:flex; flex-direction:column; gap:0.75rem;">
        <p style="margin:0; white-space:nowrap;"><span style="color:var(--text-dim); margin-right:0.6rem;">&#10005;</span>Language apps teach generic content. Not what you struggle with.</p>
        <p style="margin:0;"><span style="color:var(--text-dim); margin-right:0.6rem;">&#10005;</span>Courses demand extra hours you don't have.</p>
        <p style="margin:0;"><span style="color:var(--text-dim); margin-right:0.6rem;">&#10005;</span>Textbooks teach grammar rules. Not how to use them at work.</p>
      </div>
      <p class="conclusion reveal"><span style="color:var(--text-on-dark); margin-right:0.6rem;">&#10003;</span>26Keys learns from your real writing so you practice what truly matters to you.</p>
    </div>
  </section>

  <section class="social-proof" style="background:var(--dark); min-height:100vh; padding:5rem 3rem; border-top:var(--separator); display:flex; align-items:center; justify-content:center;">
    <div style="max-width:1100px; width:100%; margin:0 auto; text-align:center;">
      <p class="pill-label reveal" style="margin-bottom:2.5rem;">What early users say</p>
      <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem; max-width:1100px; margin:0 auto;" class="proof-grid">
        <div class="reveal" style="text-align:left; padding:2.5rem; min-height:380px; background:var(--dark-card); border:1px solid var(--surface-border); border-radius:16px; display:flex; flex-direction:column; justify-content:space-between;">
          <p style="font-size:1.05rem; color:var(--text-on-dark); line-height:1.7; margin-bottom:2rem;">"I used to paste every email into ChatGPT. Now I actually understand why my sentence was wrong. Huge difference."</p>
          <div style="display:flex; align-items:center; gap:1rem;">
            <div style="width:52px; height:52px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:var(--accent); flex-shrink:0;">P</div>
            <div>
              <p style="font-size:0.95rem; font-weight:600; color:var(--text-on-dark); margin-bottom:0.3rem;">Priya S.</p>
              <p style="font-size:0.82rem; color:var(--text-dim);">Product Manager, Bangalore</p>
            </div>
          </div>
        </div>
        <div class="reveal" style="text-align:left; padding:2.5rem; min-height:380px; background:var(--dark-card); border:1px solid var(--surface-border); border-radius:16px; display:flex; flex-direction:column; justify-content:space-between;">
          <p style="font-size:1.05rem; color:var(--text-on-dark); line-height:1.7; margin-bottom:2rem;">"The 'why it matters' explanations are what make this different. I've stopped making the same preposition mistakes I made for 10 years."</p>
          <div style="display:flex; align-items:center; gap:1rem;">
            <div style="width:52px; height:52px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:var(--accent); flex-shrink:0;">K</div>
            <div>
              <p style="font-size:0.95rem; font-weight:600; color:var(--text-on-dark); margin-bottom:0.3rem;">Kenji T.</p>
              <p style="font-size:0.82rem; color:var(--text-dim);">Software Engineer, Tokyo</p>
            </div>
          </div>
        </div>
        <div class="reveal" style="text-align:left; padding:2.5rem; min-height:380px; background:var(--dark-card); border:1px solid var(--surface-border); border-radius:16px; display:flex; flex-direction:column; justify-content:space-between;">
          <p style="font-size:1.05rem; color:var(--text-on-dark); line-height:1.7; margin-bottom:2rem;">"I finally feel confident writing to my American clients without rereading everything three times. It's like having a patient teacher built into my workflow."</p>
          <div style="display:flex; align-items:center; gap:1rem;">
            <div style="width:52px; height:52px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:var(--accent); flex-shrink:0;">M</div>
            <div>
              <p style="font-size:0.95rem; font-weight:600; color:var(--text-on-dark); margin-bottom:0.3rem;">Maria L.</p>
              <p style="font-size:0.82rem; color:var(--text-dim);">UX Designer, São Paulo</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  </div><!-- end hidden for early access -->

  <!-- BEFORE / AFTER — DARK -->
  <section id="whats-different" class="quote-section comparison-section">
    <div class="rail-shell">
      <div class="section-title-row">
        <h2 class="reveal">Other AI tools fix your text.<br>26Keys fixes you.</h2>
      </div>

      <div class="comparison-card reveal" style="display:grid; grid-template-columns:1fr 1fr;">

        <!-- Without -->
        <div class="comparison-col comparison-left" style="border-right:1px solid var(--surface-border); display:flex; flex-direction:column;">
          <!-- Header -->
          <div class="comparison-header comparison-header-without">
            <h3 style="font-family:var(--serif); font-size:clamp(1.1rem, 2vw, 1.3rem); font-weight:700; color:#e04040; letter-spacing:-0.02em; margin:0;">Without 26Keys</h3>
          </div>
          <!-- Steps -->
          <div style="padding:1.05rem 2.3rem 2.2rem; flex:1;">
            <ul class="comparison-points comparison-points-without">
              <li class="comparison-point">Write your message</li>
              <li class="comparison-point">ChatGPT or Grammarly rewrites it. You edit it back to sound like you. This never ends.</li>
              <li class="comparison-point">You hit send. The message is perfect. You? Exactly where you started.</li>
              <li class="comparison-point">Next week, same mistake. Next month, next year?</li>
            </ul>
          </div>
          <!-- Summary -->
          <div class="comparison-summary">
            <p style="font-size:1rem; font-weight:500; color:#e04040; line-height:1.4; margin:0;">Years pass. Your English stays the same.</p>
          </div>
        </div>

        <!-- With -->
        <div class="comparison-col comparison-right" style="display:flex; flex-direction:column;">
          <!-- Header -->
          <div class="comparison-header comparison-header-with">
            <h3 style="font-family:var(--serif); font-size:clamp(1.1rem, 2vw, 1.3rem); font-weight:700; color:var(--green); letter-spacing:-0.02em; margin:0;">With 26Keys</h3>
          </div>
          <!-- Steps -->
          <div style="padding:1.05rem 2.3rem 2.2rem; flex:1;">
            <ul class="comparison-points comparison-points-with">
              <li class="comparison-point">Write your message</li>
              <li class="comparison-point">26Keys fixes it instantly. No rewrite. Your voice stays yours.</li>
              <li class="comparison-point">You hit send. Every fix just became part of your learning profile.</li>
              <li class="comparison-point">Next day, your weak spots become daily exercises. What you truly need. Not generic lessons designed for everyone.</li>
            </ul>
          </div>
          <!-- Summary -->
          <div class="comparison-summary">
            <p style="font-size:1rem; font-weight:500; color:var(--green); line-height:1.4; margin:0;">Same mistake next week? You won't make it.</p>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- OWN YOUR ENGLISH through WRITING VS SPEAKING (hidden for early access) -->
  <div style="display:none">
  <section style="background:var(--dark); padding:4rem 3rem; text-align:center; border-top:var(--separator);">
    <div class="reveal" style="max-width:640px; margin:0 auto; padding:3rem 0;">
      <blockquote style="font-family:var(--serif); font-size:clamp(1.6rem, 3vw, 2.4rem); font-style:normal; font-weight:700; color:var(--text-heading); line-height:1.4; letter-spacing:-0.01em; margin-bottom:0.85rem;">Own your English with <strong style="color:var(--accent); font-weight:700;">26Keys.</strong></blockquote>
      <p style="font-size:1.15rem; font-weight:600; color:var(--text-dim); line-height:1.5;">Your skill compounds. Every single day.</p>
    </div>
  </section>

  <section class="how-section" id="how-it-works">
    <div class="how-inner">
      <p class="label reveal">How it works</p>
      <h2 class="reveal">You improve<br><span style="color:var(--accent)">as you do your work.</span></h2>

      <div class="step-walkthrough">

        <!-- Step 1: You Write -->
        <div class="step-row reveal">
          <div class="step-text">
            <div class="step-num">1</div>
            <span class="step-tag">You Write</span>
            <h3>A clean space to think, just you and your words</h3>
            <p>Write your emails and messages in a distraction-free editor built for focused writing.</p>
          </div>
          <div class="step-visual">
            <div class="vis-frame">
              <div class="vis-frame-bar">
                <div class="vis-frame-dot r"></div>
                <div class="vis-frame-dot y"></div>
                <div class="vis-frame-dot g"></div>
              </div>
              <div class="vis-frame-body">
                <div class="vis-email-to">To</div>
                <div class="vis-email-addr">sarah.chen@company.com</div>
                <div class="vis-email-divider"></div>
                <div class="vis-email-text">Hi Sarah, I wanted to discuss about the quarterly report. The numbers looks promising and I think we should present it to the leadership team next week.<span class="vis-cursor"></span></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 2: Proofread -->
        <div class="step-row reverse reveal">
          <div class="step-text">
            <div class="step-num">2</div>
            <span class="step-tag">Proofread</span>
            <h3>26Keys catches your spelling and grammar mistakes</h3>
            <p>Your tone, your phrasing, your personality. Untouched.</p>
          </div>
          <div class="step-visual">
            <div class="vis-frame">
              <div class="vis-frame-bar">
                <div class="vis-frame-dot r"></div>
                <div class="vis-frame-dot y"></div>
                <div class="vis-frame-dot g"></div>
              </div>
              <div class="vis-frame-body">
                <div class="vis-proof-line">I wanted to <span class="vis-fix-old">discuss about</span><span class="vis-fix-arrow">→</span><span class="vis-fix-new">discuss</span></div>
                <div class="vis-proof-line">The numbers looks promising <span class="vis-fix-old">looks</span><span class="vis-fix-arrow">→</span><span class="vis-fix-new">look</span></div>
                <div class="vis-proof-line">we should present it <span class="vis-fix-old">present it</span><span class="vis-fix-arrow">→</span><span class="vis-fix-new">present them</span></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 3: Ambiguity Check -->
        <div class="step-row reveal">
          <div class="step-text">
            <div class="step-num">3</div>
            <span class="step-tag">Ambiguity Check</span>
            <h3>Make sure the reader understands exactly what you mean</h3>
            <p>Sometimes your sentence is correct but easy to misread. 26Keys spots those moments and shows you a clearer way to say it. You pick what to change. Nothing changes without you.</p>
          </div>
          <div class="step-visual">
            <div class="vis-frame">
              <div class="vis-frame-bar">
                <div class="vis-frame-dot r"></div>
                <div class="vis-frame-dot y"></div>
                <div class="vis-frame-dot g"></div>
              </div>
              <div class="vis-frame-body">
                <p class="vis-amb-sentence">"I think we should present them to the leadership team <span class="vis-amb-highlight">next week</span>"</p>
                <div class="vis-amb-card">
                  <div class="vis-amb-label">Ambiguity detected</div>
                  <p>"Next week" could mean different days to different people. Consider specifying: "by Friday, March 21" or "during Monday's standup."</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 4: Why This Matters -->
        <div class="step-row reverse reveal">
          <div class="step-text">
            <div class="step-num">4</div>
            <span class="step-tag">Quick Review</span>
            <h3>One rule. One minute. One real improvement.</h3>
            <p>After each write, 26Keys picks the one error that matters most and helps you understand it. So your next message is already better than this one.</p>
          </div>
          <div class="step-visual">
            <div class="vis-frame" style="border-radius: 22px 0 0 0;">
              <div class="vis-frame-body" style="padding-top: 1.5rem; justify-content: flex-start;">
                <div class="vis-why-card">
                  <div class="vis-why-badge">Why this matters</div>
                  <div class="vis-why-divider"></div>
                  <p class="vis-why-rule">"Discuss" is a transitive verb. It takes a direct object. You don't need "about" after it. Think of it like "enter" vs "enter into." This is one of the most common patterns non-native speakers mix up.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 5: Writing Patterns -->
        <div class="step-row reveal">
          <div class="step-text">
            <div class="step-num">5</div>
            <span class="step-tag">Writing Patterns</span>
            <h3>Your mistakes become your curriculum</h3>
            <p>Every correction feeds into your personal writing patterns. Your daily practice, just 2 minutes, generated purely based on this. No generic lessons. Real improvement you can feel.</p>
          </div>
          <div class="step-visual">
            <div class="vis-frame" style="border-radius: 22px 0 0 0;">
              <div class="vis-frame-body" style="padding-top: 1.5rem;">
                <div class="vis-review-header">
                  <span class="vis-review-title">Today's Review</span>
                  <span class="vis-review-time">2 Mins</span>
                </div>
                <div class="vis-review-item">
                  <span class="label-text">Transitive verbs (discuss, enter, approach)</span>
                  <div class="streak">
                    <div class="streak-dot done"></div>
                    <div class="streak-dot done"></div>
                    <div class="streak-dot miss"></div>
                    <div class="streak-dot done"></div>
                    <div class="streak-dot empty"></div>
                  </div>
                </div>
                <div class="vis-review-item">
                  <span class="label-text">Subject-verb agreement (plural nouns)</span>
                  <div class="streak">
                    <div class="streak-dot done"></div>
                    <div class="streak-dot miss"></div>
                    <div class="streak-dot done"></div>
                    <div class="streak-dot done"></div>
                    <div class="streak-dot miss"></div>
                  </div>
                </div>
                <div class="vis-review-item">
                  <span class="label-text">Pronoun reference (it vs them)</span>
                  <div class="streak">
                    <div class="streak-dot done"></div>
                    <div class="streak-dot done"></div>
                    <div class="streak-dot done"></div>
                    <div class="streak-dot empty"></div>
                    <div class="streak-dot empty"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="how-adaptive reveal" style="padding-bottom:0;">
        <blockquote style="font-family:var(--serif); font-size:clamp(1.6rem, 3vw, 2.4rem); font-style:normal; font-weight:700; color:var(--text-heading); line-height:1.4; letter-spacing:-0.01em; margin-bottom:0.85rem;">26Keys is <strong style="color:var(--accent); font-weight:700;">made for you.</strong></blockquote>
        <p style="font-size:1.15rem; font-weight:600; color:var(--text-dim); line-height:1.5;">It learns how you write from day one and builds practice that is truly yours. Beginner or advanced, you improve every day.</p>
      </div>

    </div>
  </section>

  <section class="writing-section">
    <div class="writing-inner">
      <p class="label reveal">Why writing?</p>
      <h2 class="reveal">You already practice English 50 times a day at work.</h2>
      <p class="intro-text reveal">26Keys turns the writing you already do into learning. No extra study time. No courses to schedule.</p>
      <div class="writing-grid">
        <div class="writing-cell reveal">
          <h4>No extra time needed</h4>
          <p>You already write 40+ emails a week. Each one is a lesson waiting to happen. Zero extra study hours.</p>
        </div>
        <div class="writing-cell reveal">
          <h4>Low pressure, deep learning</h4>
          <p>Unlike speaking, you can pause, rethink, and fix before anyone sees. That's the environment where real learning sticks.</p>
        </div>
        <div class="writing-cell reveal">
          <h4>Your speaking improves too</h4>
          <p>When you stop writing "looking forward to hear from you," you stop saying it too. Cleaner grammar in writing rewires how you speak in meetings.</p>
        </div>
        <div class="writing-cell reveal">
          <h4>Progress you can actually see</h4>
          <p>Your error patterns shrink week over week. Not a feeling. Your dashboard shows it. Real, measurable improvement.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- WRITING VS SPEAKING - DARK -->
  <section class="writing-insight">
    <div style="max-width:800px; margin:0 auto;">
      <p class="hero-tagline reveal" style="margin-bottom:2rem;">"Think of writing as slow speaking."</p>
      <p class="scroll-reveal-text reveal" style="font-family:var(--serif); font-size:clamp(1.8rem, 3.5vw, 2.8rem); line-height:1.35; font-weight:600; letter-spacing:-0.02em; margin-bottom:1.5rem; text-align:center;">The preposition you understand in an email today won't trip you up in tomorrow's presentation.</p>
      <p class="reveal" style="font-size:1.15rem; font-weight:600; font-family:var(--sans); font-style:normal; color:var(--text-dim); line-height:1.5; max-width:520px; margin:0 auto;">Fix mistakes in writing. It fixes itself in speaking.</p>
    </div>
  </section>
  </div><!-- end hidden for early access -->

  <section class="own-english-section">
    <div class="inner">
      <h2 class="reveal">Own your English with 26Keys.</h2>
      <p class="reveal">Your skill compounds. Every single day.</p>
    </div>
  </section>

  <!-- FAQ - DARK -->
  <section class="faq-section">
    <div class="faq-inner rail-shell">
      <div class="faq-layout">
      <div class="faq-intro">
        <p class="faq-eyebrow reveal">// FAQ</p>
        <h2 class="faq-heading reveal">Frequently asked questions</h2>
        <p class="faq-lede reveal">Everything you need to know before getting started.</p>
      </div>
      <div class="faq-list">
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>Why do I need 26Keys when I have Grammarly or ChatGPT?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner">Most grammar tools show you what's wrong. You hit accept, move on, and make the same mistake tomorrow. ChatGPT goes further and rewrites for you. Your message sounds perfect, but you slowly lose your own voice.<br><br>26Keys is different. First thing, your voice stays yours. No rewrite. It learns your writing patterns, turns your repeated mistakes into practice, and helps you break them. Not because a tool caught them, but because you understood why they were wrong.<br><br>That's owning your English.</div>
          </div>
        </div>
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>What is 26Keys and how does it work?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner">26Keys is a macOS app that helps you level up your English through your everyday writing. It doesn't just fix your writing. It teaches you why the mistake happened so you stop repeating it.</div>
          </div>
        </div>
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>How does 26Keys teach?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner">You write your message, 26Keys proofreads it while keeping your voice, shows you why the mistake happened with a quick explanation, and then turns your weak spots into personalized daily practice. Every correction feeds your learning profile. It's not a generic course. It's a loop built from your own writing.</div>
          </div>
        </div>
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>Who is 26Keys for?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner"><ul style="margin:0;padding-left:1.2em;"><li>Engineers, designers, PMs, founders, and consultants who write in English every day and want to get better at it.</li><li>Anyone who values their own unique voice and wants to improve.</li></ul></div>
          </div>
        </div>
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>Is 26Keys only for beginners?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner">No. 26Keys is completely adaptive and adjusts to your current level. Whether you're a beginner or advanced, it works because the feedback is based entirely on your own English.</div>
          </div>
        </div>
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>Is 26Keys free? What does it cost?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner">26Keys offers three plans: $4.99/week, $14.99/month, or $124.99/year (save 30%). The annual plan includes a 2-week free trial with full access to every feature. No hidden fees, no upsells, no ads.</div>
          </div>
        </div>
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>Do I need to write prompts to use it?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner">Not at all. You just focus on your writing. 26Keys analyzes what you write and gives you relevant feedback automatically. No prompts, no setup, no extra steps.</div>
          </div>
        </div>
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>How secure is my data?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner">Your writing stays on your device, with iCloud sync so you never lose progress. When you use proofreading features, your content is processed by AI but never stored on our servers or used to train any model. We don't sell your data, and the app is completely ad-free.</div>
          </div>
        </div>
        <div class="faq-item reveal">
          <button class="faq-question" type="button">
            <div class="faq-icon">?</div>
            <span>How can I share feedback or feature requests?</span>
            <div class="faq-toggle" aria-hidden="true"></div>
          </button>
          <div class="faq-answer">
            <div class="faq-answer-inner">Email us at <a href="mailto:contact@26keys.app" style="color:var(--accent);text-decoration:none;">contact@26keys.app</a>. We're here to help. You can also join our Discord community.</div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </section>

  <!-- FINAL CTA - DARK -->
  <section class="final-cta" id="get-access">
    <div>
      <h2 class="reveal">Don't just correct.<br>Learn.</h2>
      <p class="sub reveal">Build English skills from the writing you already do at work.<br>Real improvement. Not streaks and badges.<br><strong style="color:var(--text-on-dark);">2 weeks free with the annual plan.</strong></p>
      <button onclick="openWaitlistModal()" class="btn-dark reveal" style="font-size: 1.05rem; padding: 1rem 2.5rem;">
        <svg viewBox="0 0 24 24" fill="currentColor" style="width:18px;height:18px;flex-shrink:0"><path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 21.99 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.1 21.99C7.79 22.03 6.8 20.68 5.96 19.47C4.25 16.99 2.97 12.5 4.7 9.43C5.55 7.91 7.13 6.91 8.87 6.88C10.15 6.86 11.35 7.75 12.12 7.75C12.89 7.75 14.34 6.68 15.87 6.84C16.51 6.87 18.29 7.11 19.4 8.81C19.31 8.87 17.22 10.07 17.25 12.59C17.28 15.59 19.89 16.56 19.92 16.58C19.9 16.64 19.5 18.01 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/></svg>
        Get Early Access
      </button>
      <div class="reveal" style="margin-top:2.5rem; display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;">
        <span style="font-size:0.78rem; color:var(--text-dim); display:flex; align-items:center; gap:0.4rem;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--green);"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
          No ads, ever
        </span>
        <span style="font-size:0.78rem; color:var(--text-dim); display:flex; align-items:center; gap:0.4rem;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--green);"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
          Your data stays on-device & in iCloud
        </span>
        <span style="font-size:0.78rem; color:var(--text-dim); display:flex; align-items:center; gap:0.4rem;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--green);"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
          No account needed
        </span>
      </div>
    </div>
  </section>

  <div id="shared-footer"></div>
  <script src="components/load-components.js?v=3"></script>
  <script>
    // 1. Mark elements already in viewport BEFORE enabling animations
    document.querySelectorAll('.reveal').forEach(el => {
      const rect = el.getBoundingClientRect();
      if (rect.top < window.innerHeight + 50) {
        el.dataset.initial = 'true';
        el.classList.add('visible');
      }
    });

    // 2. NOW enable animations — initial elements are already protected
    document.documentElement.classList.add('js-loaded');

    // 3. Observe remaining elements for scroll reveal
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !entry.target.dataset.initial) {
          entry.target.classList.add('visible');
        }
      });
    }, { threshold: 0.05, rootMargin: '0px 0px 50px 0px' });

    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

    // Scroll-reveal text: wrap words and reveal on scroll
    document.querySelectorAll('.scroll-reveal-text').forEach(function(el) {
      var text = el.textContent.trim();
      var words = text.split(/\s+/);
      el.innerHTML = words.map(function(w) { return '<span class="word">' + w + '</span>'; }).join(' ');
    });

    function updateScrollReveal() {
      document.querySelectorAll('.scroll-reveal-text').forEach(function(el) {
        var rect = el.getBoundingClientRect();
        var words = el.querySelectorAll('.word');
        var start = window.innerHeight * 0.9;
        var end = window.innerHeight * 0.4;
        var progress = (start - rect.top) / (start - end);
        progress = Math.max(0, Math.min(1, progress));
        var revealCount = Math.floor(progress * words.length);
        words.forEach(function(w, i) {
          if (i < revealCount) w.classList.add('revealed');
          else w.classList.remove('revealed');
        });
      });
    }
    window.addEventListener('scroll', updateScrollReveal, { passive: true });
    updateScrollReveal();

    function openFaqItem(item) {
      if (item.classList.contains('is-open') || item.classList.contains('is-opening')) return;
      const answer = item.querySelector('.faq-answer');
      const answerHeight = answer.scrollHeight;

      item.classList.remove('is-closing');
      item.classList.add('active', 'is-opening');
      answer.style.maxHeight = '0px';

      requestAnimationFrame(() => {
        answer.style.maxHeight = answerHeight + 'px';
      });

      const onOpenEnd = (event) => {
        if (event.propertyName !== 'max-height') return;
        answer.removeEventListener('transitionend', onOpenEnd);
        item.classList.remove('is-opening');
        item.classList.add('is-open');
        answer.style.maxHeight = 'none';
      };

      answer.addEventListener('transitionend', onOpenEnd);
    }

    function closeFaqItem(item) {
      if ((!item.classList.contains('active') && !item.classList.contains('is-open')) || item.classList.contains('is-closing')) return;
      const answer = item.querySelector('.faq-answer');
      const question = item.querySelector('.faq-question');
      const answerHeight = answer.scrollHeight;

      item.classList.remove('is-opening', 'is-open');
      item.classList.add('is-closing', 'active');
      answer.style.maxHeight = answerHeight + 'px';

      requestAnimationFrame(() => {
        answer.style.maxHeight = '0px';
      });

      const onCloseEnd = (event) => {
        if (event.propertyName !== 'max-height') return;
        answer.removeEventListener('transitionend', onCloseEnd);
        item.classList.remove('is-closing', 'active');
        answer.style.maxHeight = '0px';
        question.blur();
      };

      answer.addEventListener('transitionend', onCloseEnd);
    }

    document.querySelectorAll('.faq-item').forEach((item) => {
      const question = item.querySelector('.faq-question');
      const answer = item.querySelector('.faq-answer');
      answer.style.maxHeight = '0px';

      question.addEventListener('click', () => {
        if (item.classList.contains('active') || item.classList.contains('is-open') || item.classList.contains('is-opening')) {
          closeFaqItem(item);
        } else {
          openFaqItem(item);
        }
      });

      answer.addEventListener('click', (e) => {
        if (e.target.closest('a')) return;
        if (item.classList.contains('active') || item.classList.contains('is-open') || item.classList.contains('is-opening')) {
          closeFaqItem(item);
        }
      });
    });

    const whatsDifferentLink = document.querySelector('a[href="#whats-different"]');
    if (whatsDifferentLink) {
      whatsDifferentLink.addEventListener('click', function(e) {
        const section = document.querySelector('#whats-different');
        const railShell = section ? section.querySelector('.rail-shell') : null;
        const nav = document.querySelector('nav');
        if (!section || !railShell) return;

        e.preventDefault();

        const navHeight = nav ? nav.offsetHeight : 0;
        const viewportHeight = window.innerHeight;
        const railRect = railShell.getBoundingClientRect();
        const absoluteTop = window.scrollY + railRect.top;
        const availableHeight = viewportHeight - navHeight - 32;
        const extraOffset = railRect.height < availableHeight
          ? Math.max(24, (availableHeight - railRect.height) / 2)
          : 24;
        const targetY = Math.max(0, absoluteTop - navHeight - extraOffset);

        window.scrollTo({ top: targetY, behavior: 'smooth' });
      });
    }

    // Enable smooth scroll only for anchor links (not browser scroll restoration)
    document.querySelectorAll('a[href^="#"]').forEach(a => {
      a.addEventListener('click', function(e) {
        if (this.getAttribute('href') === '#whats-different') return;
        var target = document.querySelector(this.getAttribute('href'));
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: 'smooth' });
        }
      });
    });
  </script>

  <!-- ═══════════ WAITLIST MODAL ═══════════ -->
  <style>
    /* MODAL OVERLAY */
    .wl-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: opacity 0.28s ease, visibility 0.28s ease;
      padding: 1.5rem;
    }
    .wl-overlay.is-open { opacity: 1; visibility: visible; }
    .wl-overlay.is-open .wl-card {
      transform: translateY(0) scale(1); opacity: 1;
    }

    /* MODAL CARD */
    .wl-card {
      position: relative;
      background: #181818; border: 1px solid var(--surface-border);
      border-radius: 24px; padding: 3.5rem 3.5rem 2.5rem;
      max-width: 680px; width: 100%;
      transform: translateY(24px) scale(0.97); opacity: 0;
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
    }

    /* CLOSE BUTTON */
    .wl-close {
      position: absolute; top: 1.25rem; right: 1.25rem;
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.07); border: none; cursor: pointer;
      color: rgba(255,255,255,0.5); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.18s ease, color 0.18s ease;
      line-height: 0;
    }
    .wl-close:hover { background: rgba(255,255,255,0.13); color: rgba(255,255,255,0.9); }

    /* FORM STATE */
    .wl-title {
      font-family: var(--serif); font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 400;
      color: rgba(255,255,255,0.92); line-height: 1.15; margin-bottom: 1rem;
      letter-spacing: -0.02em;
    }
    .wl-subtitle {
      font-size: 0.9rem; color: rgba(255,255,255,0.38); margin-bottom: 2.8rem; line-height: 1.55;
    }

    /* INLINE EMAIL INPUT */
    .wl-form { display: flex; flex-direction: column; }
    .wl-input-wrap {
      position: relative;
      border-bottom: 1px solid var(--surface-border);
      transition: border-color 0.2s ease;
      margin-bottom: 0.5rem;
    }
    .wl-input-wrap:focus-within { border-bottom-color: var(--accent); }
    .wl-input-wrap.wl-error { border-color: rgba(231,76,60,0.8); }
    .wl-input {
      width: 100%; padding: 0.5rem 0 0.75rem;
      background: transparent; border: none;
      color: rgba(255,255,255,0.88);
      font-family: var(--serif); font-size: clamp(1.4rem, 3.5vw, 2rem);
      font-weight: 400; letter-spacing: -0.01em;
      outline: none; caret-color: rgba(255,255,255,0.7);
    }
    .wl-input::placeholder { color: rgba(255,255,255,0.22); }

    .wl-error-msg {
      font-size: 0.78rem; color: rgba(231,76,60,0.9); min-height: 1.2em;
      margin-top: 0.25rem; letter-spacing: 0.01em;
    }

    /* BOTTOM ROW */
    .wl-bottom-row {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 2.2rem; gap: 1rem;
    }
    .wl-privacy {
      font-size: 0.76rem; color: rgba(255,255,255,0.3); line-height: 1.45;
    }
    .wl-privacy a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.15s; }
    .wl-privacy a:hover { color: rgba(255,255,255,0.7); }
    .wl-submit {
      flex-shrink: 0;
      padding: 0.7rem 1.6rem;
      background: rgba(255,255,255,0.93); color: #0c0c0c;
      border: none; border-radius: 999px;
      font-family: var(--sans); font-size: 0.88rem; font-weight: 600;
      cursor: pointer; transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
      letter-spacing: -0.01em;
    }
    .wl-submit:hover:not(:disabled) { transform: translateY(-2px); background: #ffffff; }
    .wl-submit:disabled { opacity: 0.4; cursor: not-allowed; }

    /* SUCCESS STATE */
    .wl-success { display: none; padding: 2rem 0 1.5rem; }
    .wl-success.is-visible { display: block; }
    .wl-success-icon {
      width: 52px; height: 52px; margin-bottom: 1.5rem;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .wl-success-title {
      font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 400;
      color: rgba(255,255,255,0.92); margin-bottom: 0.6rem; letter-spacing: -0.02em; line-height: 1.2;
    }
    .wl-success-msg {
      font-size: 0.88rem; color: rgba(255,255,255,0.38); line-height: 1.55;
    }

    /* LIGHT MODE */
    .light .wl-card { background: #EFEEE8; border-color: var(--surface-border); }
    .light .wl-title { color: rgba(9,23,23,0.9); }
    .light .wl-subtitle { color: rgba(9,23,23,0.42); }
    .light .wl-input { color: rgba(9,23,23,0.88); caret-color: #091717; }
    .light .wl-input::placeholder { color: rgba(9,23,23,0.22); }
    .light .wl-input-wrap { border-bottom-color: var(--surface-border); }
    .light .wl-input-wrap:focus-within { border-bottom-color: var(--accent); }
    .light .wl-close { background: rgba(0,0,0,0.06); color: rgba(9,23,23,0.45); }
    .light .wl-close:hover { background: rgba(0,0,0,0.1); color: #091717; }
    .light .wl-submit { background: #091717; color: #FBFAF4; }
    .light .wl-submit:hover:not(:disabled) { background: #1a2a2a; }
    .light .wl-privacy { color: rgba(9,23,23,0.35); }
    .light .wl-privacy a { color: rgba(9,23,23,0.5); }
    .light .wl-success-title { color: rgba(9,23,23,0.9); }
    .light .wl-success-msg { color: rgba(9,23,23,0.42); }

    /* MOBILE */
    @media (max-width: 600px) {
      .wl-card { padding: 2.5rem 1.75rem 2rem; border-radius: 20px; max-height: 90vh; overflow-y: auto; }
      .wl-bottom-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
      .wl-submit { align-self: stretch; text-align: center; padding: 0.85rem 1.6rem; border-radius: 12px; }
    }
    @media (max-width: 400px) {
      .hero-float-label { display: none; }
    }
  </style>

  <!-- MODAL HTML -->
  <div class="wl-overlay" id="wl-overlay" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Join the waitlist">
    <div class="wl-card">
      <button class="wl-close" onclick="closeWaitlistModal()" aria-label="Close">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>

      <!-- FORM STATE -->
      <div id="wl-form-state">
        <h3 class="wl-title">Get Early Access</h3>
        <p class="wl-subtitle">Be the first to know when 26Keys launches.<br>No spam. Just one email when it's ready.</p>
        <form class="wl-form" id="wl-form" onsubmit="handleWaitlistSubmit(event)">
          <div class="wl-input-wrap" id="wl-input-wrap">
            <input type="text" class="wl-input" id="wl-email" placeholder="enter your email address" autocomplete="email" inputmode="email">
          </div>
          <p class="wl-error-msg" id="wl-error"></p>
          <div class="wl-bottom-row">
            <p class="wl-privacy">We respect your privacy. Read our <a href="/privacy.html">Privacy Policy</a>.</p>
            <button type="submit" class="wl-submit" id="wl-submit-btn">Join the Waitlist</button>
          </div>
        </form>
      </div>

      <!-- SUCCESS STATE -->
      <div class="wl-success" id="wl-success">
        <div class="wl-success-icon" id="wl-success-icon">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <h3 class="wl-success-title" id="wl-success-title">You're on the list!</h3>
        <p class="wl-success-msg" id="wl-success-msg">We'll let you know as soon as 26Keys is ready for you.</p>
      </div>
    </div>
  </div>

  <!-- FIREBASE SDK (compat CDN) -->
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-functions-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-check-compat.js"></script>
  <script src="firebase-config.js"></script>
  <script>
    // ═══════════ WAITLIST LOGIC ═══════════

    // Initialize Firebase (config loaded from firebase-config.js)
    firebase.initializeApp(window.FIREBASE_CONFIG);

    // Initialize App Check with reCAPTCHA
    if (window.FIREBASE_CONFIG.recaptchaSiteKey) {
      firebase.appCheck().activate(window.FIREBASE_CONFIG.recaptchaSiteKey, true);
    }

    // Sign in anonymously on page load
    firebase.auth().signInAnonymously().catch(function(err) {
      console.error('Anonymous auth failed:', err);
    });

    // Cloud Functions callable
    var joinWaitlistFn = firebase.functions().httpsCallable('joinWaitlist');

    // ── Modal open / close ──
    window.openWaitlistModal = function() {
      var overlay = document.getElementById('wl-overlay');
      overlay.classList.add('is-open');
      overlay.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
      setTimeout(function() {
        document.getElementById('wl-email').focus();
      }, 300);
    };

    window.closeWaitlistModal = function() {
      var overlay = document.getElementById('wl-overlay');
      overlay.classList.remove('is-open');
      overlay.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
      setTimeout(function() {
        document.getElementById('wl-form-state').style.display = '';
        document.getElementById('wl-success').classList.remove('is-visible');
        document.getElementById('wl-email').value = '';
        document.getElementById('wl-input-wrap').classList.remove('wl-error');
        document.getElementById('wl-error').textContent = '';
        document.getElementById('wl-submit-btn').disabled = false;
        document.getElementById('wl-submit-btn').textContent = 'Join the Waitlist';
      }, 300);
    };

    // Close on overlay click (not card)
    document.getElementById('wl-overlay').addEventListener('click', function(e) {
      if (e.target === this) closeWaitlistModal();
    });

    // Close on Escape
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') closeWaitlistModal();
    });

    // ── Carousel dots (mobile) ──
    (function() {
      var carousel = document.querySelector('.own-cards');
      var dots = document.querySelectorAll('#own-dots span');
      if (!carousel || !dots.length) return;

      // Always start at card 1
      carousel.scrollLeft = 0;
      setTimeout(function() { carousel.scrollLeft = 0; }, 100);
      setTimeout(function() { carousel.scrollLeft = 0; }, 400);

      carousel.addEventListener('scroll', function() {
        var cards = carousel.querySelectorAll('.own-card');
        var closest = 0, minDist = Infinity;
        cards.forEach(function(card, i) {
          var dist = Math.abs(card.getBoundingClientRect().left - carousel.getBoundingClientRect().left);
          if (dist < minDist) { minDist = dist; closest = i; }
        });
        dots.forEach(function(d, i) { d.classList.toggle('active', i === closest); });
      }, { passive: true });
    })();

    // ── Email validation ──
    function isValidEmail(email) {
      if (!email || email.length > 254) return false;
      var parts = email.split('@');
      if (parts.length !== 2) return false;
      if (parts[0].length > 64) return false;
      if (!parts[1].includes('.')) return false;
      return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email);
    }

    function getEmailError(email) {
      if (!email) return 'Please enter your email address.';
      if (!isValidEmail(email)) return 'Please enter a valid email address.';
      return null;
    }

    // ── Form submit ──
    window.handleWaitlistSubmit = function(e) {
      e.preventDefault();

      var emailInput = document.getElementById('wl-email');
      var errorEl = document.getElementById('wl-error');
      var submitBtn = document.getElementById('wl-submit-btn');

      var email = emailInput.value.trim().toLowerCase();

      // Validate with specific error messages
      var emailErr = getEmailError(email);
      if (emailErr) {
        document.getElementById('wl-input-wrap').classList.add('wl-error');
        errorEl.textContent = emailErr;
        return;
      }

      // Clear errors
      document.getElementById('wl-input-wrap').classList.remove('wl-error');
      errorEl.textContent = '';

      // Loading state
      submitBtn.disabled = true;
      submitBtn.textContent = 'Joining...';

      // Call Cloud Function (App Check token sent automatically)
      joinWaitlistFn({
        email: email,
        source: window.location.pathname,
        userAgent: navigator.userAgent.substring(0, 200)
      }).then(function(result) {
        if (result.data.status === 'duplicate') {
          showResult('duplicate');
        } else {
          showResult('new');
        }
      }).catch(function(err) {
        console.error('Waitlist error:', err);
        submitBtn.disabled = false;
        submitBtn.textContent = 'Join the Waitlist';
        errorEl.textContent = 'Network error. Please check your connection.';
      });
    };

    function showResult(type) {
      var titleEl = document.getElementById('wl-success-title');
      var msgEl = document.getElementById('wl-success-msg');
      var iconEl = document.getElementById('wl-success-icon');

      if (type === 'duplicate') {
        iconEl.innerHTML = '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#F2C94C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>';
        iconEl.style.background = 'rgba(242,201,76,0.12)';
        titleEl.textContent = 'You\'re already on the list!';
        msgEl.textContent = 'This email is already registered. We\'ll notify you when 26Keys is ready.';
      } else {
        iconEl.innerHTML = '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--green)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
        iconEl.style.background = 'rgba(111,207,151,0.12)';
        titleEl.textContent = 'You\'re on the list!';
        msgEl.textContent = 'We\'ll let you know as soon as 26Keys is ready for you.';
      }

      document.getElementById('wl-form-state').style.display = 'none';
      document.getElementById('wl-success').classList.add('is-visible');
    }
  </script>
