/*
      ══════════════════════════════════════════════════════════════════════
      Bảng màu lấy NGUYÊN từ extension — `extension/src/ui/action-popup/
      index.css`, hai khối `:root` (light) và `html.dark`.

      Trước đây site dùng một bảng riêng với accent xanh #2383E2 (tông Notion),
      nên trang quảng bá và sản phẩm đọc ra như hai thương hiệu khác nhau: mở
      trang web thấy xanh, cài xong mở popup thấy vàng.

      Hai vai trò được tách bạch, KHÔNG gộp làm một như bản cũ:

        --accent   vàng thương hiệu, dùng cho CHỮ và nhãn nhỏ (eyebrow, số
                   phiên bản, link trong văn bản). Ở bảng light phải là vàng
                   TRẦM, không phải #f5b931 — vàng nguyên bản trên nền kem chỉ
                   đạt 1.58:1, hoàn toàn không đọc được. Giá trị cụ thể và lý
                   do chọn nó ghi ngay tại chỗ khai báo bên dưới.

        --primary  xanh, CHỈ dùng cho nút bấm, nền đặc và vòng focus. Trùng
                   `--mp-primary` của extension, giống nhau ở cả hai theme.

      Token nào đổi giá trị ở đây thì chép lại từ extension, đừng chế. Ba
      ngoại lệ có chủ đích (`--text-muted`, `--text-subtle`, `--accent` ở bảng
      light) đều kèm số đo ngay tại chỗ: site dùng chúng cho chữ nhỏ trên nền
      kem, vai trò mà bảng gốc của extension không phải gánh.
      ══════════════════════════════════════════════════════════════════════
    */
    :root {
      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
        'Liberation Mono', monospace;
      --bg: #f5f2eb;              /* mp-canvas — nền kem ấm */
      --surface: #fffdf8;         /* mp-surface-raised — thẻ nổi trên kem */
      --surface-alt: #e2dac9;     /* mp-surface-sunken */
      --surface-hover: #eae5d9;   /* mp-surface-hover */
      --border: #e7e5e4;          /* mp-line */
      --border-strong: #d6d3d1;   /* mp-line-strong */
      --text: #1c1917;            /* mp-ink */
      /*
        Đậm hơn `mp-ink-muted` (#6b645f) của extension một bậc. Lý do: ở site
        token này còn phải gánh chữ nằm TRÊN CHIP (`--surface-alt` #e2dac9),
        nơi #6b645f chỉ đạt 4.18:1. #57514c đạt 5.62:1 trên chip và 6.99:1
        trên nền kem.

        Không chọn cách ngược lại — nới nền chip cho sáng lên — vì extension
        đã đi đúng đường đó rồi phải quay lại: chip nhạt quá thì tàng hình
        trên nền kem, và hình viên thuốc chỉ lộ ra SAU khi đã tìm thấy nó.
      */
      --text-muted: #57514c;
      /*
        Hai token DUY NHẤT lệch khỏi extension, và lệch có lý do.

        Extension dùng `ink-subtle #a8a29e` và `brand #b07a09` cho nhãn phụ
        trên bề mặt nhỏ, nơi chúng hiếm khi là thứ phải đọc. Trên site thì
        hai vai trò đó lại rơi vào CHỮ THẬT ở 12–13px: dòng "Free forever
        tier" dưới hero, các eyebrow "Release history" / "Why Markpad
        exists", ngày tháng trong danh sách phiên bản.

        Đo trên nền kem #f5f2eb: #a8a29e chỉ đạt 2.26:1 và #b07a09 đạt
        3.33:1 — dưới ngưỡng AA 4.5:1 cho chữ thường. Đậm thêm tới khi đạt:
          --text-subtle  #6b645f  5.20:1
          --accent       #7d5606  5.86:1
        Accent còn phải đạt chuẩn khi nằm trên bề mặt lõm `--surface-alt`
        (#e2dac9) — chỗ đó nền tối hơn nên khắt khe hơn: #7d5606 đạt 4.71:1,
        bản nhạt hơn một bậc (#8a5f07) chỉ đạt 4.06:1.
        Bảng dark không phải đổi gì: ở đó cả hai đã vượt ngưỡng sẵn.
      */
      --text-subtle: #6b645f;
      --accent: #7d5606;
      --accent-hover: #6f4c05;
      --accent-soft: #fdf6e6;     /* mp-brand-surface */
      --accent-fg: #1c1917;
      --primary: #3b82f6;         /* mp-primary */
      --primary-hover: #2563eb;
      --primary-fg: #ffffff;
      --success: #15803d;         /* mp-success-ink */
      --warning: #b45309;         /* mp-warning-ink */
      --highlight: #f5b931;       /* vàng logo nguyên bản — chỉ làm NỀN tô sáng */
      --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
      --shadow-md: 0 4px 12px -2px rgba(28, 25, 23, 0.09);
      --shadow-lg: 0 12px 32px -6px rgba(28, 25, 23, 0.13);
      --radius-sm: 6px;
      --radius-md: 9px;
      --radius-lg: 12px;
      --radius-xl: 18px;
    }

    [data-theme="dark"] {
      --bg: #1f1c1b;              /* mp-canvas */
      --surface: #292524;         /* mp-surface */
      --surface-alt: #171413;     /* mp-surface-sunken */
      --surface-hover: #383431;   /* mp-surface-hover */
      --border: #44403c;          /* mp-line */
      --border-strong: #57534e;   /* mp-line-strong */
      --text: #f5f5f4;            /* mp-ink */
      --text-muted: #a8a29e;      /* mp-ink-muted — stone-500 chỉ đạt 3.2:1, không dùng */
      --text-subtle: #b6b0ab;     /* mp-ink-subtle */
      --accent: #f5b931;          /* mp-brand (dark) — nền tối thì vàng nguyên bản đạt 7.36:1 */
      --accent-hover: #ffd166;
      --accent-soft: #332813;     /* mp-brand-surface */
      --accent-fg: #14120f;
      --primary: #3b82f6;
      --primary-hover: #60a5fa;
      --primary-fg: #ffffff;
      --success: #4ade80;         /* mp-success-ink */
      --warning: #fbbf24;         /* mp-warning-ink */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 12px 32px -6px rgba(0, 0, 0, 0.5);
    }

    /*
      ══════════════════════════════════════════════════════════════════════
      Chữ: KHÔNG gọi ra ngoài.

      Bản cũ tải ba họ chữ từ Google Fonts (Inter + Nunito + IBM Plex Mono) —
      ba request chặn render tới một máy chủ bên thứ ba, trên một trang mà cả
      mệnh đề bán hàng là "dữ liệu của bạn không đi đâu cả". Mỗi lượt xem
      trang là một lượt rò referrer sang Google.

      Nay:
        - Thân bài + tiêu đề dùng font hệ thống (cùng stack extension dùng).
        - Mono dùng font hệ thống.
        - Riêng wordmark "Markpad" nhúng thẳng subset Fredoka 500 — ĐÚNG khối
          @font-face mà extension đang dùng, chép từ
          `extension/src/ui/action-popup/index.css`. 1.4KB, `unicode-range`
          bó đúng 6 glyph của chữ "Markpad" (M a d k p r) nên ký tự nào khác
          rơi về font hệ thống thay vì vẽ ra ô trống.
      ══════════════════════════════════════════════════════════════════════
    */
    @font-face {
      font-family: "Fredoka";
      src: url(data:font/woff2;base64,d09GMgABAAAAAAV8ABAAAAAACcwAAAUfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgWQcLgZgP1NUQVRAAGQRCAqGfIVJCxIAATYCJAMgBCAFhDIHIAwHG+8HyAQC/t2seUmw1IA60C4VWK+vmdQcO3F657Dq3Jpbe6qf5rn/sVnx0HhdNBIitfEFOQ6zQ2WilqJ4W1Vr2vpCbut7qBOSmjgTO76NRQDRKCQhRNSH7wWVHHojDRw8ciK2uuJAA7EoQ7z/Cnnz2SBqy30NGGcr6ZUYiR67EpmoErYbmU+goqeI9vsotLYVFdJdEihyj4weAxcSGBl2X0GdQm1wSmkJB0UJdTEKN6RDeVaSSGK8B5UTjZe0r5C1r+hBB44yjk6pKi/xkUAykCAtJTcdFMkmfkUnUkiayoMj4uPFbApEB5xOEGNjXwwPr93i95eVcwEnPvmelgCz5O/5F8g4Nv0qnWHoJIyCJL9DPFRk156rrAocsOe5skCV6AuZx/RKIpYy0jwoKuLXJ+dGlOei3GpIQGFs3oxZutjJKIopoxYPPkIr1R7RvteOaBu1iLZaW64tW3m5M1ogNI04pjZGzWBvDAj3XdjCHRPPAaVTcP9vQlHys8wJZosrwWJuP0YXo5TE6KInhbatEbqmtbujwluXJ05TZ6xcuT0qvHM1SnDVFjW0a42Qpy5btkUNbVuRNF0KrtpSHNolWi07c0MNNTc3i6aWlpao8M2zqbam3VHhnauRgqu2TA7fvyyaLt1TQ3cuELx4tzjU3NwsmlpaWqLCT58+zQg+efJkcvj+ZdF0qb85KbTLdgS57zWlO9e32bFlm3sypuxS7LxEmrJy+9bUnevaTFxVt1nF1olkzpCqrF61ZcY2o9YIuWntdvH9KSt37z4eFd66detqgnvU0IoV29TQlh2r2POfK8lz2vNW0Tj9OHxGW6TW0s9cs8iROPDE5F8mJv86qbJlgtW+qNbSL6424rAvqjXvParPOtPNYu62e9AR3f642gh3DWlH4+e+PP6jDrnj3b0HZk8tzM+e3GfAeHdO27c8F2cmHUt3eGZaGywzFj72Z45Ts1unzs10LVFd2akbMRhzxrl69c+aXlSQNbV3/3GujnkjXEX97VOlQtvUogEj3c5A1lyTy20qzsryqG6XKfhRwLGkqMoyPGhPe63GMtEyYyGni5e7pkpr16Sfe/85c+1ChyM4wzzJUhN0ODw11qHvvfX/qR1fhKzPvf0yeVL+yOyi/rYphZJ9alG/Ea68nLGu3gOyphYWZU3p1Xdc1m/37ZFplj6WaUG77fP+U6iJrO2T5VFdbpMnK9NrdLtUDw0me3CGxW+dvsBhn1+GukskNW9Ii96yY9ahaOc/SXFP39FZ435c+n/CL5bpEQAQgET/1yd9P2VOXM/fjLL8A8CTUZ98APDZYO9wba0Wo7wn3wP0SAAIkO99xudWtmlr//co730mPzVKrSiQi+gqdSNd6oNb/ERnqZAcEaETf362o428goGyD3qZIz/dXDQr0phikvU7+NUicPCBRSKWWxaZAlZtVfotOmy8atHjoMQcSxE5AbFPKJNZBCopFoVoopWxH4PRNOKjnmLqGEU5ZVTzDPVMoRooQJUE5QiVyM23BAjgoTu55OKnFB/VMgQMyEE35uvIWe3iSnIZw2BGMhjfmic3UksxHXeAyRx9c37bSANOCsghjzzyDece+PFTRvma11GOh0rcrY5ifKNcnaMH0IiHF84tKfFd+T6OnXEykaqdnbMvGouPRmoop3Q09GP8bnCig36ctLkzIb+cr6S6l56hxLi4lEbqyaWKYiqonj5ANcXkEqIxNMjY9vfO1L20dRTgjDwhtLcOKPMBAAAA) format("woff2");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
      unicode-range: U+4d, U+61, U+64, U+6b, U+70, U+72;
    }

    /* Wordmark cạnh logo — cùng font, cùng weight với thanh header của app. */
    .brand span,
    .footer-brand strong {
      font-family: "Fredoka", var(--font-sans);
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    /*
      Link trong VĂN BẢN chưa bao giờ được tạo kiểu — chúng đang dùng xanh
      mặc định của trình duyệt (#0000EE). Trên nền tối của site đó là 1.95:1,
      gần như vô hình; trên nền kem thì nó là một màu xanh web cũ không thuộc
      bảng màu nào ở đây.

      Selector để trần nên mọi link ĐÃ có màu riêng (nav, footer, nút, thẻ
      tính năng) vẫn thắng nhờ độ đặc hiệu cao hơn — khối này chỉ với tới
      những link nằm trong câu chữ.
    */
    a {
      color: var(--accent);
    }
    a:hover {
      color: var(--accent-hover);
    }
    p a,
    li a,
    .guide-note a,
    .section-lead a {
      text-decoration: underline;
      text-underline-offset: 2px;
    }

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

    /* Thanh nav dính cao 64px — mọi cuộn tới phần tử phải chừa chỗ cho nó,
       nếu không đích đến nằm khuất ngay dưới nav. */
    :target,
    .release-major,
    .faq-item { scroll-margin-top: 84px; }

    body {
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      transition: background 200ms ease, color 200ms ease;
    }

    .mono { font-family: var(--font-mono); }
    .container { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

    /* ─────── Nav ─────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    nav .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 17px;
      color: var(--text);
      text-decoration: none;
    }
    .brand-mark {
      width: 28px;
      height: 28px;
    }
    .nav-left { display: flex; align-items: center; gap: 32px; }
    .nav-links { display: flex; align-items: center; gap: 22px; }
    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 120ms ease;
    }
    .nav-links a:hover { color: var(--text); }
    .nav-links a.active {
      color: var(--text);
      font-weight: 700;
    }
    @media (max-width: 780px) {
      .nav-links { display: none; }
    }
    .nav-actions { display: flex; align-items: center; gap: 6px; }
    .nav-btn {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      padding: 7px 11px;
      border-radius: var(--radius-md);
      transition: all 120ms ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .nav-btn:hover {
      background: var(--surface-alt);
      color: var(--text);
    }
    .nav-btn.cta {
      background: var(--text);
      color: var(--bg);
      padding: 8px 16px;
    }
    .nav-btn.cta:hover {
      background: var(--accent);
      color: var(--accent-fg);
    }
    .lang-pill {
      display: inline-flex;
      background: var(--surface-alt);
      border-radius: var(--radius-md);
      padding: 3px;
    }
    .lang-pill button {
      background: transparent;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 7px;
      color: var(--text-muted);
      transition: all 120ms ease;
    }
    .lang-pill button.active {
      background: var(--surface);
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }

    /* ─────── Hero ─────── */
    .hero {
      padding: 88px 0 96px;
      text-align: center;
      position: relative;
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      margin-bottom: 24px;
    }
    .hero-eyebrow .dot {
      width: 6px;
      height: 6px;
      background: var(--success);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .hero h1 {
      font-size: clamp(40px, 6vw, 60px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero .highlight {
      background: linear-gradient(180deg, transparent 65%, var(--highlight) 65%);
      padding: 0 4px;
    }
    .hero p.lead {
      font-size: 19px;
      color: var(--text-muted);
      max-width: 620px;
      margin: 0 auto 36px;
      line-height: 1.55;
    }
    .hero-ctas {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: var(--radius-md);
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      text-decoration: none;
      transition: all 150ms ease;
    }
    .btn-primary {
      background: var(--text);
      color: var(--bg);
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
    .btn-secondary {
      background: var(--surface);
      color: var(--text);
      border-color: var(--border);
    }
    .btn-secondary:hover {
      background: var(--surface-hover);
      border-color: var(--border-strong);
    }
    .hero-meta {
      margin-top: 32px;
      font-size: 13px;
      color: var(--text-subtle);
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    .hero-meta span { display: inline-flex; align-items: center; gap: 6px; }

    /* ─────── Sections ─────── */
    section.block {
      padding: 80px 0;
      border-top: 1px solid var(--border);
    }
    .section-eyebrow {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent);
      margin-bottom: 14px;
    }
    .section-title {
      font-size: clamp(28px, 3.6vw, 38px);
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.15;
      margin-bottom: 18px;
      max-width: 720px;
    }
    .section-lead {
      font-size: 17px;
      color: var(--text-muted);
      max-width: 660px;
      margin-bottom: 56px;
      line-height: 1.55;
    }

    /* ─────── Features grid ─────── */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }
    @media (max-width: 720px) {
      .features-grid { grid-template-columns: 1fr; }
    }
    .feature-card {
      padding: 28px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      transition: all 200ms ease;
    }
    .feature-card:hover {
      border-color: var(--border-strong);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .feature-icon {
      width: 52px;
      height: 52px;
      background: linear-gradient(135deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 45%, var(--surface)) 100%);
      border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
      border-radius: var(--radius-lg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--accent);
      box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--accent) 32%, transparent);
    }
    .feature-icon svg {
      width: 24px;
      height: 24px;
      stroke-width: 1.75;
    }
    .feature-card h3 {
      font-size: 19px;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .feature-card p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.55;
      margin-bottom: 12px;
    }
    .feature-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .feature-tag {
      font-size: 11px;
      font-weight: 500;
      padding: 3px 9px;
      background: var(--surface-alt);
      color: var(--text-muted);
      border-radius: 999px;
    }
    .feature-card.coming {
      background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
    }
    .feature-card.coming .feature-icon {
      background: var(--accent);
      color: var(--accent-fg);
    }
    .coming-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 3px 9px;
      background: var(--accent);
      color: var(--accent-fg);
      border-radius: 4px;
      margin-bottom: 12px;
    }

    /* ─────── Why grid ─────── */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    @media (max-width: 720px) {
      .why-grid { grid-template-columns: 1fr; gap: 28px; }
    }
    .why-card .why-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 45%, var(--surface)) 100%);
      border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      color: var(--accent);
      box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--accent) 32%, transparent);
    }
    .why-card .why-icon svg {
      width: 26px;
      height: 26px;
      stroke-width: 1.75;
    }
    .why-card h3 {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .why-card p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.55;
    }

    /* ─────── How steps ─────── */
    .how-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 32px;
    }
    @media (max-width: 720px) {
      .how-steps { grid-template-columns: 1fr; }
    }
    .step {
      padding: 28px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      position: relative;
    }
    .step-num {
      width: 32px;
      height: 32px;
      background: var(--text);
      color: var(--bg);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 14px;
    }
    .step h3 {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .step p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.55;
    }

    /* ─────── Plan table (Free vs Pro, sinh từ plan-catalog.ts) ─────── */
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .plan-table {
      width: 100%;
      max-width: 820px;
      margin-top: 24px;
      border-collapse: separate;
      border-spacing: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      font-size: 15px;
    }
    .plan-table th,
    .plan-table td {
      padding: 14px 18px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid var(--border);
    }
    .plan-table tbody tr:last-child th,
    .plan-table tbody tr:last-child td { border-bottom: 0; }
    .plan-table thead th {
      font-size: 18px;
      font-weight: 700;
      background: var(--surface-alt);
    }
    .plan-table thead th.pro { background: var(--accent-soft); }
    .plan-table td:last-child { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
    .plan-table tbody th { font-weight: 600; width: 46%; }
    .plan-table small {
      display: block;
      margin-top: 4px;
      font-size: 13px;
      font-weight: 400;
      color: var(--text-muted);
    }
    .plan-table thead small { color: var(--accent); font-weight: 600; }
    .plan-table td.yes { color: var(--success); font-weight: 700; font-size: 18px; }
    .plan-table td.no { color: var(--text-subtle); }
    .plan-table-cta { margin-top: 20px; }
    @media (max-width: 560px) {
      .plan-table { font-size: 14px; }
      .plan-table th, .plan-table td { padding: 10px 10px; }
      .plan-table tbody th { width: auto; }
    }

    /* ─────── Pricing ─────── */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      margin-top: 24px;
      max-width: 820px;
    }
    @media (max-width: 720px) {
      .pricing-grid { grid-template-columns: 1fr; }
    }
    .price-card {
      padding: 32px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .price-card.featured {
      border-color: var(--text);
      border-width: 2px;
      position: relative;
    }
    .price-card.featured::before {
      content: '★';
      position: absolute;
      top: -10px;
      right: 28px;
      background: var(--text);
      color: var(--bg);
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 700;
    }
    .price-card h3 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .price-card .tagline {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 18px;
    }
    .price-amount {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 22px;
    }
    .price-amount .amount {
      font-size: 38px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .price-amount .period {
      font-size: 14px;
      color: var(--text-muted);
    }
    .price-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }
    .price-features li {
      font-size: 14px;
      color: var(--text-muted);
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .price-features li::before {
      content: '✓';
      color: var(--success);
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ─────── Releases timeline ─────── */
    .releases-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .release-major {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    /*
      Hai header accordion giờ là <button> chứ không phải <div> có onclick:
      trước đây không bấm được bằng bàn phím, không có vai trò, không báo
      trạng thái đóng/mở cho trình đọc màn hình. Khối này chỉ gỡ bỏ diện mạo
      mặc định của nút — hình thức giữ y như cũ.
    */
    .release-major-header,
    .faq-question {
      width: 100%;
      text-align: left;
      background: none;
      border: 0;
      font: inherit;
      color: inherit;
      cursor: pointer;
    }
    .release-major-header:focus-visible,
    .faq-question:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: -2px;
    }

    .release-major-header {
      padding: 22px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: background 150ms ease;
    }
    .release-major-header:hover {
      background: var(--surface-hover);
    }
    .release-major-title {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .release-major-version {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 16px;
      color: var(--accent);
    }
    .release-major-name {
      font-weight: 700;
      font-size: 17px;
    }
    .release-major-date {
      font-size: 13px;
      color: var(--text-subtle);
    }
    .release-major-toggle {
      font-size: 16px;
      color: var(--text-muted);
      transition: transform 200ms ease;
    }
    .release-major.expanded .release-major-toggle {
      transform: rotate(180deg);
    }
    /*
      Đóng/mở bằng `grid-template-rows: 0fr → 1fr`, KHÔNG phải `max-height`.

      Bản cũ để `max-height: 2000px` trong khi nội dung thật chỉ 334–750px.
      Transition chạy trên thang 2000px nên thời gian có cảm giác đúng chỉ
      với nhóm nào cao đúng 2000px — tức là không nhóm nào:

        mở   : chạm chiều cao thật ở ~50ms rồi đứng → bật phịch ra
        đóng : ~250ms đầu không có gì xảy ra (max-height vẫn trên
               chiều cao thật), rồi sập trong 50ms cuối

      `0fr → 1fr` nội suy theo chiều cao THẬT của nội dung, nên 280ms là 280ms
      với mọi nhóm, dài ngắn gì cũng vậy. Và không còn con số trần nào để một
      ngày nào đó nội dung vượt qua rồi bị cắt âm thầm.

      `min-height: 0` trên con là bắt buộc: mặc định `min-height` của grid item
      là `auto`, nó chặn không cho hàng co xuống dưới chiều cao nội dung, và
      hàng 0fr sẽ không bao giờ đóng lại được.
    */
    .release-major-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 280ms ease;
    }
    .release-major.expanded .release-major-body {
      grid-template-rows: 1fr;
    }
    .release-major-body > * {
      overflow: hidden;
      min-height: 0;
    }
    .release-list {
      padding: 0 28px 22px;
    }
    .release-item {
      padding: 16px 0;
      border-top: 1px solid var(--border);
    }
    .release-item-head {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .release-item-version {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 13px;
      color: var(--text);
    }
    .release-item-tag {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 2px 8px;
      border-radius: 4px;
    }
    /*
      Nền pha từ CHÍNH màu chữ của nhãn, không phải ba giá trị rgba viết cứng.

      Bản cũ ghi thẳng `rgba(35, 131, 226, .15)` cho nhãn "fix" — đó là xanh
      Notion của bảng màu cũ, nên khi bảng màu đổi thì chữ đổi theo còn nền thì
      không, và nhãn tự mâu thuẫn với chính nó. `color-mix` khiến nền luôn là
      bản nhạt của đúng màu chữ, ở cả hai theme, không cần khai thêm token.
    */
    .release-item-tag.feature {
      background: color-mix(in srgb, var(--success) 16%, transparent);
      color: var(--success);
    }
    .release-item-tag.fix {
      background: color-mix(in srgb, var(--primary) 16%, transparent);
      color: var(--primary);
    }
    .release-item-tag.polish {
      background: color-mix(in srgb, var(--warning) 18%, transparent);
      color: var(--warning);
    }
    .release-item-date {
      font-size: 12px;
      color: var(--text-subtle);
      margin-left: auto;
    }
    .release-item-summary {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.55;
    }

    /* ─────── FAQ ─────── */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .faq-question {
      padding: 18px 22px;
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      user-select: none;
      transition: background 150ms ease;
    }
    .faq-question:hover {
      background: var(--surface-hover);
    }
    .faq-toggle {
      font-size: 18px;
      color: var(--text-muted);
      transition: transform 200ms ease;
      flex-shrink: 0;
    }
    .faq-item.open .faq-toggle {
      transform: rotate(45deg);
    }
    /* Cùng cơ chế grid như nhóm release. Padding nằm ở lớp bọc BÊN TRONG,
       không ở `.faq-answer`: padding trên phần tử grid không co theo hàng,
       nên để ngoài thì lúc đóng vẫn còn một dải trống 18px. */
    .faq-answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 240ms ease;
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .faq-item.open .faq-answer {
      grid-template-rows: 1fr;
    }
    .faq-answer > * {
      overflow: hidden;
      min-height: 0;
      padding: 0 22px 18px;
    }

    /* ─────── Footer ─────── */
    footer {
      padding: 56px 0 40px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 13px;
    }
    footer .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
    }
    .footer-brand { display: flex; align-items: center; gap: 10px; }
    .footer-links {
      display: flex;
      gap: 22px;
    }
    .footer-links a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color 120ms ease;
    }
    .footer-links a:hover { color: var(--text); }

    /* ─────── Tech stack grid (about page) ─────── */
    .stack-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    @media (max-width: 900px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .stack-grid { grid-template-columns: 1fr; } }
    .stack-item {
      padding: 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .stack-label {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .stack-value {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .stack-note {
      font-size: 12px;
      color: var(--text-muted);
    }
    .footer-copyright { font-size: 12px; color: var(--text-subtle); }

    /* ─────── Lightbox (zoom on click for .stack-item screenshots) ─────── */
    .stack-item img[data-zoomable] {
      cursor: zoom-in;
      transition: opacity 150ms ease;
    }
    .stack-item img[data-zoomable]:hover {
      opacity: 0.9;
    }
    .lightbox-overlay {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(15, 12, 10, 0.9);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 32px;
      cursor: zoom-out;
    }
    .lightbox-overlay.open {
      display: flex;
    }
    .lightbox-content {
      max-width: min(1100px, 92vw);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .lightbox-content img {
      max-width: 100%;
      max-height: 78vh;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      cursor: default;
    }
    .lightbox-caption {
      color: #F5F2EB;
      font-size: 14px;
      text-align: center;
      max-width: 640px;
      cursor: default;
    }
    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 28px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      border: none;
      color: #fff;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 150ms ease;
    }
    .lightbox-close:hover {
      background: rgba(255, 255, 255, 0.22);
    }


/* ── Guide teaser (landing) — lối vào docs/guide/ ngay dưới hero ───── */
/* Năm thẻ = năm tab: một hàng trên desktop, không để thẻ cuối lẻ loi hàng dưới. */
.guide-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 600px) { .guide-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .guide-teaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .guide-teaser-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
.guide-teaser-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.guide-teaser-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.guide-teaser-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  display: block;
  border-bottom: 1px solid var(--border);
}
.guide-teaser-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.guide-teaser-body strong { font-size: 15px; }
.guide-teaser-body p { font-size: 13px; color: var(--text-muted); margin: 0; }
.guide-teaser-body ul { margin: 4px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.guide-teaser-more { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.guide-teaser-cta { margin-top: 24px; display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .guide-teaser-card, .guide-teaser-card:hover { transition: none; transform: none; }
}