@layer reset, tokens, base, layout, components, motion, responsive, native-refinement;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure { margin: 0; }
  img { display: block; max-width: 100%; }
  button, input { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --ink: oklch(0.23 0.018 275);
    --ink-soft: oklch(0.42 0.02 275);
    --ink-muted: oklch(0.53 0.017 275);
    --violet: oklch(0.56 0.25 278);
    --violet-deep: oklch(0.42 0.26 280);
    --blue: oklch(0.64 0.19 253);
    --green: oklch(0.63 0.18 145);
    --surface: oklch(1 0 0);
    --surface-tint: oklch(0.975 0.009 278);
    --surface-soft: oklch(0.955 0.012 270);
    --line: oklch(0.88 0.012 270);
    --line-strong: oklch(0.77 0.025 270);
    --night: oklch(0.18 0.045 278);
    --night-raised: oklch(0.23 0.055 278);
    --night-text: oklch(0.96 0.01 278);
    --night-muted: oklch(0.76 0.025 278);
    --shadow-window: 0 30px 70px oklch(0.24 0.12 280 / 0.22);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --page: min(1200px, calc(100vw - 48px));
    --header-height: 76px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --z-sticky: 20;
    --z-menu: 30;
  }
}

@layer base {
  body {
    min-width: 320px;
    overflow-x: clip;
    background: var(--surface);
    color: var(--ink);
    font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  body.menu-open { overflow: hidden; }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }
  h1 { letter-spacing: -0.035em; }
  h2 { letter-spacing: -0.025em; }
  ::selection { background: oklch(0.84 0.09 278); color: var(--ink); }

  :focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .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;
  }

  .skip-link {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    transform: translateY(-150%);
    padding: 10px 16px;
    background: var(--ink);
    color: white;
    border-radius: var(--radius-sm);
  }

  .skip-link:focus { transform: translateY(0); }
}

@layer layout {
  .section {
    width: var(--page);
    margin-inline: auto;
    padding-block: clamp(88px, 11vw, 156px);
  }

  .section[id] { scroll-margin-top: calc(var(--header-height) + 34px); }

  .site-header {
    position: fixed;
    z-index: var(--z-sticky);
    inset: 0 0 auto;
    height: var(--header-height);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 36px;
    padding-inline: max(24px, calc((100vw - 1200px) / 2));
    border-bottom: 1px solid transparent;
    background: color-mix(in oklch, var(--surface) 82%, transparent);
    backdrop-filter: blur(18px) saturate(135%);
    transition: border-color 240ms ease, background 240ms ease;
  }

  .site-header.is-scrolled { border-color: var(--line); background: color-mix(in oklch, var(--surface) 94%, transparent); }
  .site-nav { display: flex; justify-content: center; gap: 32px; }
  .header-actions { display: flex; align-items: center; gap: 10px; }
  .menu-button { display: none; }

  .hero {
    min-height: min(980px, 100vh);
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
    align-items: center;
    gap: clamp(40px, 5vw, 82px);
    padding: calc(var(--header-height) + 70px) max(24px, calc((100vw - 1320px) / 2)) 88px;
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 36%, oklch(0.83 0.105 278 / 0.45), transparent 27%),
      linear-gradient(180deg, var(--surface) 0%, var(--surface-tint) 100%);
  }

  .hero__visual { position: relative; min-width: 0; perspective: 1300px; }
  .hero__copy { position: relative; z-index: 2; max-width: 640px; }
  .demo-lab { padding-bottom: clamp(110px, 14vw, 190px); }

  .capabilities {
    display: flex;
    flex-direction: column;
    gap: clamp(110px, 15vw, 190px);
    padding-top: 0;
  }

  .capability {
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(460px, 1.2fr);
    align-items: center;
    gap: clamp(48px, 8vw, 110px);
  }

  .capability--organize {
    grid-template-columns: minmax(500px, 1.15fr) minmax(300px, 0.85fr);
    min-height: 500px;
  }

  .capability--chat { grid-template-columns: minmax(300px, 0.85fr) minmax(460px, 1.15fr); }

  .privacy {
    position: relative;
    overflow: hidden;
    background: var(--night);
    color: var(--night-text);
  }

  .privacy::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -260px;
    right: -100px;
    border-radius: 50%;
    background: var(--violet);
    filter: blur(110px);
    opacity: 0.28;
  }

  .privacy__inner {
    position: relative;
    width: var(--page);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(500px, 1.18fr);
    gap: clamp(60px, 10vw, 140px);
    align-items: center;
    padding-block: clamp(110px, 14vw, 180px);
  }

  .platforms__heading,
  .questions__heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    align-items: end;
    gap: 48px;
    margin-bottom: 64px;
  }

  .platforms__content {
    display: grid;
    grid-template-columns: minmax(280px, 0.62fr) minmax(520px, 1.38fr);
    align-items: center;
    gap: clamp(50px, 8vw, 104px);
  }

  .open-source {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    align-items: center;
    gap: clamp(56px, 9vw, 132px);
  }

  .questions { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(60px, 10vw, 140px); }
  .questions__heading { display: block; margin: 0; align-self: start; position: sticky; top: calc(var(--header-height) + 40px); }

  .availability {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    padding-block: 72px;
    border-top: 1px solid var(--line);
  }

  .site-footer {
    width: var(--page);
    margin-inline: auto;
    min-height: 150px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 28px;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 14px;
  }
}

@layer components {
  .wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
  .wordmark img { border-radius: 10px; }
  .wordmark--footer img { border-radius: 8px; }

  .site-nav a { position: relative; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--violet); transition: right 240ms var(--ease-out); }
  .site-nav a:hover::after { right: 0; }

  .locale-switch {
    min-width: 42px;
    height: 38px;
    padding-inline: 10px;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
  }

  .locale-switch:hover { background: var(--surface-soft); }

  .github-link {
    min-width: 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    transition: transform 180ms var(--ease-out), border-color 180ms ease, background 180ms ease, color 180ms ease;
  }

  .github-mark { width: 19px; height: 19px; flex: none; fill: currentColor; transition: transform 180ms var(--ease-out); }
  .github-link:hover { transform: translateY(-1px); border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
  .github-link:hover .github-mark { transform: scale(1.06); }
  .github-link:active { transform: translateY(0) scale(0.98); }

  .header-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding-inline: 17px;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: white;
    font-size: 14px;
    font-weight: 700;
    transition: transform 200ms var(--ease-out), background 200ms ease;
  }

  .header-cta:hover { transform: translateY(-1px); background: var(--violet-deep); }
  .availability-line { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--ink-soft); font-size: 14px; font-weight: 650; }
  .status-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px oklch(0.89 0.08 145 / 0.72); }

  .hero h1 { max-width: 720px; font-size: clamp(3.25rem, 5.4vw, 5.8rem); line-height: 0.98; font-weight: 750; }
  .hero h1 > span { display: block; }
  .hero__title-accent { color: var(--violet); }
  .hero__lede { max-width: 61ch; margin-top: 28px; color: var(--ink-soft); font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.62; }
  .hero__download-note { margin-top: 14px; color: var(--ink-muted); font-size: 12px; font-weight: 650; letter-spacing: 0.01em; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

  .button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 22px;
    border-radius: 10px;
    font-weight: 700;
    transition: transform 200ms var(--ease-out), background 200ms ease, color 200ms ease;
  }

  .button:hover { transform: translateY(-2px); }
  .button--primary { background: var(--violet); color: white; box-shadow: 0 6px 0 var(--violet-deep); }
  .button--primary:hover { background: var(--violet-deep); }
  .button--quiet { color: var(--ink); }
  .button--quiet::after { content: "↘"; margin-left: 9px; color: var(--violet); }
  .button--quiet:hover { background: var(--surface-soft); }

  .hero__trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 34px; color: var(--ink-muted); font-size: 13px; }
  .hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
  .hero__trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); }

  .hero__halo { position: absolute; inset: 4% 0 0 10%; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--blue)); filter: blur(55px); opacity: 0.28; }
  .app-window { position: relative; overflow: hidden; border-radius: 14px; background: white; box-shadow: var(--shadow-window); transform: rotateY(-5deg) rotateX(2deg); transform-style: preserve-3d; transition: transform 500ms var(--ease-out); }
  .app-window img { width: 100%; height: auto; }
  .capture-note { position: absolute; right: 0; bottom: -32px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 12px; font-weight: 700; }
  .capture-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

  .floating-proof { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; min-width: 202px; padding: 12px 14px; border-radius: 11px; background: oklch(1 0 0 / 0.94); box-shadow: 0 8px 24px oklch(0.22 0.05 275 / 0.14); backdrop-filter: blur(14px); }
  .floating-proof span:last-child { display: flex; flex-direction: column; }
  .floating-proof strong { font-size: 13px; line-height: 1.3; }
  .floating-proof small { color: var(--ink-muted); font-size: 11px; }
  .floating-proof--privacy { top: 10%; right: -3%; }
  .floating-proof--result { bottom: 8%; left: -4%; }
  .proof-icon { width: 28px; height: 28px; position: relative; flex: none; border-radius: 8px; background: oklch(0.94 0.05 278); }
  .proof-icon--lock::before { content: ""; position: absolute; width: 9px; height: 8px; left: 9px; top: 11px; border: 2px solid var(--violet); border-radius: 2px; }
  .proof-icon--lock::after { content: ""; position: absolute; width: 8px; height: 7px; left: 10px; top: 6px; border: 2px solid var(--violet); border-bottom: 0; border-radius: 6px 6px 0 0; }
  .proof-icon--check { background: oklch(0.94 0.06 145); }
  .proof-icon--check::after { content: ""; position: absolute; width: 10px; height: 5px; left: 8px; top: 9px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

  .format-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 23px max(24px, calc((100vw - 1200px) / 2)); background: var(--ink); color: white; }
  .format-ribbon p { font-weight: 700; }
  .format-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
  .format-list span { padding: 4px 10px; border-radius: 999px; background: oklch(1 0 0 / 0.1); color: oklch(0.86 0.012 270); font-size: 12px; font-weight: 700; }

  .product-film__frame { position: relative; overflow: hidden; margin: 48px auto 0; border: 1px solid rgb(110 122 255 / 0.28); border-radius: var(--radius-lg); background: #0b0d19; box-shadow: 0 26px 70px rgb(29 35 99 / 0.2); }
  .product-film__meta { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 12px 8px 18px; border-bottom: 1px solid rgb(255 255 255 / 0.12); background: rgb(11 13 25 / 0.96); color: rgb(255 255 255 / 0.76); font-size: 12px; font-weight: 700; }
  .product-film__meta > span { display: inline-flex; align-items: center; gap: 9px; }
  .product-film__meta i { width: 7px; height: 7px; border-radius: 50%; background: #6cf0a7; box-shadow: 0 0 0 4px rgb(108 240 167 / 0.12); }
  .product-film__toggle { min-height: 32px; padding-inline: 12px; border: 1px solid rgb(255 255 255 / 0.18); border-radius: 7px; background: rgb(255 255 255 / 0.08); color: white; font-size: 12px; font-weight: 750; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; }
  .product-film__toggle:hover { border-color: rgb(255 255 255 / 0.36); background: rgb(255 255 255 / 0.16); }
  .product-film__video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #0b0d19; object-fit: cover; }
  .product-film figcaption { padding: 13px 18px; background: rgb(11 13 25 / 0.96); color: rgb(255 255 255 / 0.54); font-size: 11px; font-weight: 650; }

  .demo-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    margin-top: 64px;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--surface-soft);
  }

  .demo-tabs button {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 220ms var(--ease-out), color 220ms var(--ease-out), transform 120ms ease;
  }

  .demo-tabs button:hover { background: white; color: var(--ink); }
  .demo-tabs button:active { transform: scale(0.98); }
  .demo-tabs button[aria-selected="true"] { background: var(--ink); color: white; }

  .demo-tab__icon { width: 17px; height: 17px; position: relative; flex: none; display: block; }
  .demo-tab__icon::before, .demo-tab__icon::after { content: ""; position: absolute; }
  .demo-tab__icon--index::before { inset: 2px 3px 3px; border: 2px solid currentColor; border-radius: 3px; }
  .demo-tab__icon--index::after { width: 7px; height: 2px; left: 5px; top: 0; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 11px 0 currentColor; }
  .demo-tab__icon--search::before { width: 9px; height: 9px; left: 1px; top: 1px; border: 2px solid currentColor; border-radius: 50%; }
  .demo-tab__icon--search::after { width: 7px; height: 2px; right: 0; bottom: 2px; background: currentColor; transform: rotate(45deg); }
  .demo-tab__icon--smart::before { width: 12px; height: 12px; left: 2px; top: 2px; background: currentColor; clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); }
  .demo-tab__icon--chat::before { inset: 1px 1px 4px; border: 2px solid currentColor; border-radius: 5px; }
  .demo-tab__icon--chat::after { width: 5px; height: 5px; left: 4px; bottom: 1px; border-left: 2px solid currentColor; transform: skew(-28deg); }
  .demo-tab__icon--file::before { inset: 1px 3px; border: 2px solid currentColor; border-radius: 2px; }
  .demo-tab__icon--file::after { width: 6px; height: 5px; right: 2px; bottom: 0; border: 2px solid currentColor; border-radius: 50%; background: inherit; }

  .demo-shell {
    scroll-margin-top: calc(var(--header-height) + 18px);
    margin-top: 18px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-tint);
    box-shadow: 0 8px 0 oklch(0.83 0.025 275), 0 28px 56px oklch(0.26 0.08 278 / 0.15);
  }

  .demo-shell__bar {
    min-height: 58px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    background: var(--ink);
    color: white;
  }

  .demo-window-dots { display: flex; gap: 7px; }
  .demo-window-dots i { width: 9px; height: 9px; display: block; border-radius: 50%; background: oklch(0.72 0.02 275); }
  .demo-window-dots i:first-child { background: oklch(0.68 0.18 25); }
  .demo-window-dots i:nth-child(2) { background: oklch(0.79 0.16 85); }
  .demo-window-dots i:last-child { background: oklch(0.71 0.17 145); }
  .demo-workspace { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; }
  .demo-workspace img { border-radius: 7px; }
  .mock-badge { justify-self: end; padding: 4px 9px; border-radius: 999px; background: oklch(1 0 0 / 0.12); color: oklch(0.89 0.012 275); font-size: 11px; font-weight: 750; }

  .demo-stage { min-height: 520px; background: linear-gradient(145deg, var(--surface) 0%, var(--surface-tint) 100%); }
  .demo-panel { min-height: 520px; padding: 36px 42px 32px; }
  .demo-panel[hidden] { display: none; }
  .demo-panel__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
  .demo-panel__heading h3 { margin-top: 3px; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.12; }
  .demo-kicker { color: var(--violet-deep); font-size: 13px; font-weight: 750; }
  .demo-state { min-height: 32px; display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 5px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-size: 11px; font-weight: 750; }
  .demo-state i { width: 7px; height: 7px; display: block; border-radius: 50%; background: var(--green); }
  .demo-state--active { background: oklch(0.94 0.055 145); color: oklch(0.42 0.14 145); }

  .indexing-progress { height: 4px; overflow: hidden; margin-bottom: 28px; border-radius: 999px; background: oklch(0.9 0.018 275); }
  .indexing-progress span { width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--blue)); transform-origin: left; }
  .indexing-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); gap: 22px; align-items: stretch; }
  .indexing-queue { overflow: hidden; border-radius: var(--radius-md); background: white; }
  .mock-file { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 16px; }
  .mock-file + .mock-file { border-top: 1px solid var(--line); }
  .mock-file > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
  .mock-file strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .mock-file small { overflow: hidden; margin-top: 2px; color: var(--ink-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .file-badge--sheet { background: oklch(0.92 0.06 145); color: oklch(0.48 0.15 145); }
  .file-badge--slide { background: oklch(0.94 0.06 55); color: oklch(0.56 0.18 45); }
  .activity-ring { width: 19px; height: 19px; display: block; border: 2px solid oklch(0.88 0.03 278); border-top-color: var(--violet); border-radius: 50%; }
  .indexing-summary { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 26px; border-radius: var(--radius-md); background: var(--ink); color: white; }
  .indexing-summary strong { margin-top: 19px; font-size: 19px; }
  .indexing-summary small { margin-top: 8px; color: oklch(0.77 0.018 275); line-height: 1.5; }
  .summary-check { width: 42px; height: 42px; position: relative; border-radius: 12px; background: oklch(0.7 0.17 145); }
  .summary-check::after { content: ""; position: absolute; width: 17px; height: 9px; left: 12px; top: 13px; border-left: 3px solid white; border-bottom: 3px solid white; transform: rotate(-45deg); }

  .demo-search-field { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid var(--violet); border-radius: var(--radius-md); background: white; box-shadow: 0 5px 0 oklch(0.9 0.04 278); }
  .search-glyph { width: 18px; height: 18px; position: relative; flex: none; }
  .search-glyph::before { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--ink-soft); border-radius: 50%; }
  .search-glyph::after { content: ""; position: absolute; width: 7px; height: 2px; right: 0; bottom: 2px; background: var(--ink-soft); transform: rotate(45deg); }
  .typed-query { min-width: 0; overflow: hidden; flex: 1; font-weight: 650; white-space: nowrap; }
  .typing-caret { width: 2px; height: 22px; flex: none; background: var(--violet); }
  .demo-search-field kbd { padding: 3px 7px; border-radius: 5px; background: var(--surface-soft); color: var(--ink-muted); font-size: 11px; }
  .demo-results { margin-top: 22px; overflow: hidden; border-radius: var(--radius-md); background: white; }
  .result-reason { padding: 5px 8px; border-radius: 999px; background: var(--surface-tint); color: var(--violet-deep); font-size: 10px; font-weight: 750; white-space: nowrap; }

  .smart-query { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: var(--radius-md); background: white; }
  .smart-query p { font-weight: 650; }
  .intent-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0; }
  .intent-chip { padding: 7px 10px; border-radius: var(--radius-sm); background: oklch(0.94 0.04 278); color: var(--violet-deep); font-size: 11px; }
  .intent-chip b { margin-right: 5px; color: var(--ink-soft); }
  .smart-best { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 22px; border-radius: var(--radius-md); background: var(--ink); color: white; }
  .smart-best > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
  .smart-best small { color: oklch(0.78 0.11 278); font-weight: 750; }
  .smart-best strong { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .smart-best em { margin-top: 5px; color: oklch(0.78 0.018 275); font-size: 12px; font-style: normal; }
  .smart-best button, .file-answer li button { border: 0; border-radius: 7px; background: oklch(1 0 0 / 0.12); color: white; font-size: 11px; font-weight: 750; cursor: pointer; }
  .smart-best button { min-height: 36px; padding-inline: 13px; }

  .chat-thread { display: grid; gap: 16px; }
  .chat-message { display: flex; align-items: flex-start; gap: 12px; }
  .chat-message p { max-width: 660px; padding: 12px 15px; border-radius: 5px 12px 12px 12px; background: white; font-weight: 600; }
  .chat-thinking { display: flex; align-items: center; gap: 10px; padding-left: 50px; color: var(--ink-muted); }
  .chat-thinking img, .answer-heading img { border-radius: 8px; }
  .chat-thinking > span { display: flex; gap: 4px; }
  .chat-thinking i { width: 5px; height: 5px; display: block; border-radius: 50%; background: var(--violet); }
  .chat-thinking small { font-size: 11px; }
  .chat-answer, .file-answer { margin-left: 50px; padding: 20px; border-radius: var(--radius-md); background: white; }
  .chat-answer > p, .file-answer > p { margin-top: 10px; color: var(--ink-soft); font-size: 13px; }
  .compact-results { margin-top: 14px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-tint); }
  .compact-results .mock-file { padding-block: 11px; }
  .file-context { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-bottom: 22px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--ink); color: white; }
  .file-context > span:nth-child(2) { display: flex; flex-direction: column; }
  .file-context small, .context-pages { color: oklch(0.75 0.02 275); font-size: 11px; }
  .chat-thread--file { gap: 14px; }
  .file-answer { padding: 18px 20px; }
  .answer-heading { display: flex; align-items: center; gap: 9px; }
  .answer-heading > span { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: oklch(0.94 0.055 145); color: oklch(0.43 0.14 145); font-size: 10px; font-weight: 750; }
  .file-answer ol { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
  .file-answer li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border-radius: 7px; background: var(--surface-tint); }
  .file-answer li > span { display: flex; flex-direction: column; }
  .file-answer li strong { font-size: 12px; }
  .file-answer li small { color: var(--ink-muted); font-size: 10px; }
  .file-answer li button { min-width: 42px; min-height: 30px; background: var(--violet); }

  .demo-controls { min-height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 10px 18px; border-top: 1px solid var(--line); background: white; }
  .demo-progress { display: flex; gap: 7px; }
  .demo-progress span { width: 22px; height: 3px; border-radius: 999px; background: var(--line); transition: background 220ms ease, transform 220ms var(--ease-out); }
  .demo-progress span.is-active { background: var(--violet); transform: scaleX(1.15); }
  .demo-controls > p { color: var(--ink-muted); font-size: 12px; }
  .demo-controls > p strong { color: var(--ink); }
  .demo-controls > div:last-child { justify-self: end; display: flex; gap: 7px; }
  .demo-control { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 0; border-radius: 7px; background: var(--surface-soft); color: var(--ink-soft); font-size: 11px; font-weight: 750; cursor: pointer; transition: background 180ms ease, color 180ms ease, transform 100ms ease; }
  .demo-control:hover { background: oklch(0.92 0.035 278); color: var(--violet-deep); }
  .demo-control:active { transform: scale(0.97); }
  .pause-glyph { width: 10px; height: 11px; display: block; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
  .pause-glyph.is-play { width: 0; height: 0; border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }

  .demo-panel.is-running .demo-reveal { animation: demo-reveal 440ms var(--delay, 0ms) var(--ease-out) both; }
  .demo-panel--indexing.is-running .indexing-progress span { animation: demo-progress-fill 2.25s 100ms ease-out both; }
  .demo-panel--indexing.is-running .activity-ring { animation: demo-spin 700ms linear 3 both; }
  .demo-panel--search.is-running .typed-query { animation: demo-type 760ms 120ms steps(18, end) both; }
  .demo-panel--search.is-running .typing-caret { animation: demo-caret 430ms 3 both; }
  .demo-panel--smart.is-running .demo-state i { animation: demo-state-pulse 760ms 2 ease-in-out both; }
  .demo-panel--find-chat.is-running .chat-thinking i { animation: demo-thinking 620ms 900ms 2 ease-in-out both; }
  .demo-panel--find-chat.is-running .chat-thinking i:nth-child(2) { animation-delay: 1000ms; }
  .demo-panel--find-chat.is-running .chat-thinking i:nth-child(3) { animation-delay: 1100ms; }

  @keyframes demo-reveal {
    from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  @keyframes demo-progress-fill { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }
  @keyframes demo-spin { to { transform: rotate(360deg); } }
  @keyframes demo-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes demo-caret { 50% { opacity: 0; } }
  @keyframes demo-state-pulse { 50% { transform: scale(1.45); box-shadow: 0 0 0 5px oklch(0.72 0.14 145 / 0.18); } }
  @keyframes demo-thinking { 50% { transform: translateY(-4px); opacity: 0.45; } }

  .section-heading--centered { width: min(780px, 100%); margin-inline: auto; text-align: center; }
  .section-intro { margin-bottom: 15px; color: var(--violet-deep); font-weight: 700; }
  .section-heading h2, .platforms__heading h2, .questions__heading h2 { font-size: clamp(2.45rem, 4.5vw, 4.4rem); line-height: 1.06; }
  .section-heading > p:last-child { max-width: 68ch; margin: 24px auto 0; color: var(--ink-soft); font-size: 18px; }

  .search-demo { max-width: 980px; margin: 72px auto 0; overflow: hidden; border-radius: var(--radius-lg); background: white; box-shadow: 0 8px 0 var(--surface-soft), 0 26px 60px oklch(0.26 0.07 278 / 0.13); }
  .search-demo__query { display: flex; align-items: center; gap: 16px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
  .query-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--violet); color: white; font-size: 11px; font-weight: 800; }
  .search-demo__query p { font-size: 17px; font-weight: 650; }
  .search-demo__answer { padding: 24px 28px 28px; }
  .answer-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .answer-heading img { border-radius: 9px; }
  .answer-heading > span { display: flex; flex-direction: column; }
  .answer-heading small { color: var(--ink-muted); font-size: 12px; }
  .document-result { min-height: 74px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .document-result--best { grid-template-columns: auto minmax(0, 1fr) auto auto; border: 0; border-radius: var(--radius-md); background: var(--surface-tint); }
  .file-badge { width: 34px; height: 40px; display: grid; place-items: center; border-radius: 5px; background: oklch(0.92 0.06 257); color: oklch(0.52 0.2 257); font-size: 13px; font-weight: 800; }
  .file-badge--pdf { background: oklch(0.94 0.05 25); color: oklch(0.56 0.2 25); }
  .document-result__name { min-width: 0; display: flex; flex-direction: column; }
  .document-result__name small { overflow: hidden; color: var(--ink-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .match-pill { padding: 5px 9px; border-radius: 999px; background: oklch(0.92 0.07 145); color: oklch(0.46 0.15 145); font-size: 11px; font-weight: 800; }
  .reveal-action { color: var(--violet-deep); font-size: 12px; font-weight: 700; }

  .capability__label { display: inline-block; margin-bottom: 16px; color: var(--violet-deep); font-weight: 750; }
  .capability__copy h2 { font-size: clamp(2.25rem, 4.1vw, 4rem); line-height: 1.06; }
  .capability__copy > p { margin-top: 24px; color: var(--ink-soft); font-size: 17px; }
  .check-list { display: grid; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--ink-soft); }
  .check-list li { position: relative; padding-left: 29px; }
  .check-list li::before { content: ""; position: absolute; width: 15px; height: 8px; left: 1px; top: 7px; border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(-45deg); }

  .media-frame { overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-soft); box-shadow: 0 10px 0 var(--surface-soft); }
  .media-frame img { width: 100%; height: auto; object-fit: contain; }
  .media-frame--dark { padding: 12px; background: var(--night); box-shadow: 0 10px 0 oklch(0.26 0.055 278); }
  .media-frame--dark img { border-radius: 8px; }

  .organize-flow { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 350px; padding: 48px; border-radius: var(--radius-lg); background: linear-gradient(135deg, oklch(0.95 0.04 278), oklch(0.93 0.06 252)); }
  .flow-step { width: 132px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .flow-step > span:last-child { display: flex; flex-direction: column; }
  .flow-step small { margin-top: 3px; color: var(--ink-muted); font-size: 11px; line-height: 1.4; }
  .flow-step__icon { width: 72px; height: 72px; position: relative; display: block; border-radius: 18px; background: white; box-shadow: 0 6px 0 oklch(0.83 0.05 270); }
  .flow-step__icon::before, .flow-step__icon::after { content: ""; position: absolute; }
  .flow-step__icon--watch::before { width: 31px; height: 22px; left: 20px; top: 26px; border: 3px solid var(--violet); border-radius: 4px; }
  .flow-step__icon--watch::after { width: 15px; height: 7px; left: 23px; top: 21px; border: 3px solid var(--violet); border-bottom: 0; border-radius: 4px 4px 0 0; }
  .flow-step__icon--index::before { width: 27px; height: 34px; left: 22px; top: 18px; border: 3px solid var(--violet); border-radius: 4px; }
  .flow-step__icon--index::after { width: 15px; height: 15px; right: 14px; bottom: 13px; border-radius: 50%; background: var(--blue); border: 4px solid white; }
  .flow-step__icon--move::before { width: 30px; height: 22px; left: 20px; top: 28px; border: 3px solid var(--violet); border-radius: 4px; }
  .flow-step__icon--move::after { width: 19px; height: 3px; left: 27px; top: 25px; background: var(--violet); box-shadow: 0 7px 0 var(--violet), 0 14px 0 var(--violet); }
  .flow-connector { flex: 1; height: 2px; background: oklch(0.72 0.11 274); }
  .flow-connector span { display: block; width: 9px; height: 9px; margin: -3px 0 0 auto; border-top: 2px solid var(--violet); border-right: 2px solid var(--violet); transform: rotate(45deg); }

  .mini-features { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
  .mini-features span { padding: 7px 11px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--violet-deep); font-size: 12px; font-weight: 700; }

  .privacy__mark { margin-bottom: 28px; border-radius: 20px; }
  .privacy__statement > p:first-of-type { margin-bottom: 14px; color: oklch(0.78 0.12 278); font-weight: 700; }
  .privacy__statement h2 { max-width: 600px; font-size: clamp(2.8rem, 5.2vw, 5.2rem); line-height: 1.02; }
  .privacy__statement > p:last-child { max-width: 61ch; margin-top: 28px; color: var(--night-muted); font-size: 17px; }
  .privacy__map { display: grid; gap: 18px; }
  .device-boundary { padding: 24px; border: 1px solid oklch(0.48 0.08 278); border-radius: var(--radius-lg); background: var(--night-raised); }
  .device-boundary__label { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; color: var(--night-muted); font-size: 13px; font-weight: 700; }
  .device-boundary__label .status-dot { box-shadow: 0 0 0 5px oklch(0.4 0.1 145 / 0.46); }
  .local-parts { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; }
  .local-parts div { min-height: 118px; display: flex; flex-direction: column; justify-content: center; padding: 17px; border-radius: var(--radius-md); background: oklch(0.28 0.06 278); }
  .local-parts small { margin-top: 5px; color: var(--night-muted); font-size: 11px; line-height: 1.45; }
  .local-parts > span { color: oklch(0.67 0.1 278); }
  .cloud-choice { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-radius: var(--radius-md); background: oklch(0.25 0.03 278); color: var(--night-muted); }
  .cloud-choice > div { display: flex; align-items: center; gap: 13px; }
  .cloud-choice > div > span:last-child { display: flex; flex-direction: column; }
  .cloud-choice strong { color: var(--night-text); }
  .cloud-choice small { font-size: 11px; }
  .cloud-choice__icon { width: 34px; height: 24px; position: relative; border: 2px solid var(--night-muted); border-radius: 14px; }
  .cloud-choice__icon::before, .cloud-choice__icon::after { content: ""; position: absolute; border-radius: 50%; background: var(--night-raised); border: 2px solid var(--night-muted); }
  .cloud-choice__icon::before { width: 17px; height: 17px; left: 3px; top: -9px; border-bottom-color: transparent; }
  .cloud-choice__icon::after { width: 14px; height: 14px; right: 2px; top: -6px; border-bottom-color: transparent; }
  .choice-tag { padding: 5px 9px; border-radius: 999px; background: oklch(0.34 0.09 278); color: oklch(0.84 0.08 278); font-size: 11px; font-weight: 800; white-space: nowrap; }

  .platforms__heading > p, .questions__heading > p { color: var(--ink-soft); font-size: 18px; }
  .questions__heading > p { margin-top: 22px; }
  .platform-tabs { display: flex; gap: 6px; margin-bottom: 34px; padding: 5px; border-radius: 10px; background: var(--surface-soft); }
  .platform-tabs button { flex: 1; height: 42px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-muted); font-weight: 700; cursor: pointer; }
  .platform-tabs button[aria-selected="true"] { background: white; color: var(--violet-deep); box-shadow: 0 2px 5px oklch(0.24 0.04 278 / 0.1); }
  .platform-panel h3 { font-size: 28px; }
  .platform-panel p { margin-top: 14px; color: var(--ink-soft); }
  .release-state { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--ink-soft); font-size: 12px; font-weight: 700; }
  .release-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); }
  .release-state--active { background: oklch(0.94 0.06 145); color: oklch(0.43 0.14 145); }
  .release-state--active::before { background: var(--green); }
  .platform-preview { transform: rotate(1.3deg); transition: transform 420ms var(--ease-out); }
  .platform-preview:hover { transform: rotate(0); }

  .open-source__copy h2 { max-width: 740px; font-size: clamp(2.5rem, 4.6vw, 4.5rem); line-height: 1.04; }
  .open-source__copy > p:last-of-type { max-width: 62ch; margin-top: 24px; color: var(--ink-soft); font-size: 17px; }
  .open-source__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .open-source__repository { overflow: hidden; border: 1px solid oklch(0.4 0.07 278); border-radius: var(--radius-lg); background: var(--night); color: var(--night-text); box-shadow: 0 28px 70px oklch(0.22 0.08 278 / 0.18); }
  .open-source__repo-heading { display: flex; align-items: center; gap: 16px; padding: 26px 28px; border-bottom: 1px solid oklch(0.42 0.07 278); background: var(--night-raised); }
  .open-source__repo-heading > span { width: 46px; height: 46px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--night-text); color: var(--night); font-size: 13px; font-weight: 850; letter-spacing: -0.04em; }
  .open-source__repo-heading > div { min-width: 0; display: flex; flex-direction: column; }
  .open-source__repo-heading small { color: var(--night-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
  .open-source__repo-heading strong { overflow: hidden; font-size: clamp(1rem, 2vw, 1.35rem); text-overflow: ellipsis; white-space: nowrap; }
  .open-source__repository ul { margin: 0; padding: 0; list-style: none; }
  .open-source__repository li { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 28px; border-bottom: 1px solid oklch(0.37 0.06 278); }
  .open-source__repository li > span { color: var(--night-muted); font-size: 13px; }
  .open-source__repository li strong, .open-source__repository li a { text-align: right; font-size: 13px; font-weight: 750; }
  .open-source__repository li a { color: oklch(0.79 0.12 278); }
  .open-source__repository li a:hover { color: white; }
  .open-source__repository > p { padding: 21px 28px 24px; color: var(--night-muted); font-size: 12px; line-height: 1.6; }

  .faq-list { border-top: 1px solid var(--line); }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary { position: relative; padding: 26px 48px 26px 0; cursor: pointer; list-style: none; font-size: 19px; font-weight: 700; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::before, .faq-list summary::after { content: ""; position: absolute; top: 37px; right: 7px; width: 15px; height: 2px; background: var(--violet); transition: transform 240ms var(--ease-out); }
  .faq-list summary::after { transform: rotate(90deg); }
  .faq-list details[open] summary::after { transform: rotate(0); }
  .faq-list details p { max-width: 67ch; padding: 0 48px 28px 0; color: var(--ink-soft); }

  .availability__icon img { border-radius: 28px; box-shadow: 0 8px 0 var(--surface-soft); }
  .availability__copy > p:first-child { margin-bottom: 6px; color: var(--violet-deep); font-size: 13px; font-weight: 750; }
  .availability__copy h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.08; }
  .availability__copy > p:last-child { margin-top: 12px; color: var(--ink-soft); }
  .footer-brand { display: grid; gap: 8px; }
  .footer-brand > p { color: var(--ink-muted); font-size: 13px; }
  .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 20px; }
  .footer-nav a, .footer-domain { color: var(--ink-soft); font-size: 13px; font-weight: 650; }
  .footer-nav a:hover, .footer-domain:hover { color: var(--violet-deep); }
  .footer-meta { display: grid; justify-items: end; gap: 8px; }
  .footer-domain { color: var(--violet-deep); }
  .footer-note { color: var(--ink-muted); font-size: 12px; text-align: right; }
}

@layer components {
  /* Selected Direction A: native product stage with explicit local trust. */
  .hero__trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--line);
    box-shadow: 0 12px 30px oklch(0.24 0.05 278 / 0.07);
  }

  .hero__trust-grid > span {
    min-width: 0;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 12px 13px;
    background: color-mix(in oklch, var(--surface) 94%, transparent);
  }

  .hero__trust-grid strong { font-size: 12px; line-height: 1.25; }
  .hero__trust-grid small { color: var(--ink-muted); font-size: 10px; line-height: 1.35; }
  .hero__workflow-bar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(620px, 1.28fr);
    align-items: center;
    gap: 32px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
  }

  .hero__workflow-bar > div { display: flex; flex-direction: column; gap: 3px; }
  .hero__workflow-bar > div strong { font-size: 14px; }
  .hero__workflow-bar > div span { color: var(--ink-muted); font-size: 10px; }
  .hero__workflow-bar nav { display: flex; justify-content: flex-end; gap: 5px; }
  .hero__workflow-bar a { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 7px; color: var(--ink-soft); font-size: 10px; font-weight: 700; white-space: nowrap; transition: background 180ms ease, color 180ms ease; }
  .hero__workflow-bar a:hover { background: #ecebff; color: var(--violet-deep); }
  .hero__workflow-bar a small { color: var(--ink-muted); font-size: 8px; }
  .app-window { aspect-ratio: 2584 / 1500; transform: none; }
  .app-window img { width: 100%; height: auto; object-fit: contain; }
  .floating-proof--privacy { top: 8%; right: -2%; }
  .floating-proof--result { bottom: 7%; left: -3%; }
  .floating-proof > img { flex: none; border-radius: 7px; }
  .proof-status {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px oklch(0.89 0.08 145 / 0.55);
  }

  .demo-tabs { max-width: 820px; margin-inline: auto; }
  .demo-tabs button[aria-selected="true"] { background: oklch(0.93 0.04 278); color: var(--violet-deep); box-shadow: inset 0 0 0 1px oklch(0.82 0.08 278); }

  .demo-shell {
    display: grid;
    grid-template-columns: 225px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid oklch(0.78 0.02 270);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: 0 28px 70px oklch(0.24 0.08 278 / 0.2);
  }

  .demo-native-sidebar {
    min-width: 0;
    min-height: 642px;
    display: flex;
    flex-direction: column;
    padding: 0 14px;
    border-right: 1px solid oklch(0.87 0.012 270);
    background: #eef2f7;
  }

  .demo-sidebar-chrome { height: 48px; display: flex; align-items: center; }
  .demo-window-dots { display: flex; gap: 7px; }
  .demo-window-dots i { width: 11px; height: 11px; display: block; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.16); }
  .demo-window-dots i:nth-child(2) { background: #febc2e; }
  .demo-window-dots i:nth-child(3) { background: #28c840; }
  .demo-native-brand { height: 62px; display: flex; align-items: center; gap: 11px; padding: 0 6px; font-size: 16px; }
  .demo-native-brand img { border-radius: 8px; }
  .demo-native-nav { display: grid; gap: 5px; }
  .demo-native-nav span { min-height: 38px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; color: #4e525c; font-size: 13px; }
  .demo-native-nav span.is-selected { background: #e5e5ff; color: #4843db; font-weight: 700; }
  .demo-recent-label { margin: 24px 9px 7px; color: #787c86; font-size: 10px; font-weight: 700; }
  .demo-recent-list { display: grid; gap: 2px; }
  .demo-recent-list span { min-width: 0; overflow: hidden; padding: 7px 9px; border-radius: 7px; color: #5c6069; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .demo-recent-list span.is-selected { background: #e6e6fb; color: #4b46d9; font-weight: 700; }
  .demo-sidebar-state { min-height: 54px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 8px; margin-top: auto; border-top: 1px solid oklch(0.84 0.015 270); color: #4f535c; font-size: 10px; font-weight: 700; }
  .demo-sidebar-state .status-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px oklch(0.89 0.08 145 / 0.42); }
  .demo-sidebar-state small { grid-column: 2; color: #858892; font-size: 8px; font-weight: 600; }
  .demo-native-main { min-width: 0; display: flex; flex-direction: column; background: white; }
  .demo-stage { min-height: 578px; flex: 1; background: white; }
  .demo-panel { min-height: 578px; padding: 0 0 24px; background: white; }
  .demo-panel__heading { min-height: 94px; align-items: center; margin: 0 0 18px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
  .demo-panel__heading h3 { margin-top: 2px; font-size: 21px; letter-spacing: -0.02em; }
  .demo-kicker { color: var(--ink-muted); font-size: 10px; }
  .demo-state { min-height: 30px; border-radius: 7px; }
  .demo-panel > :not(.demo-panel__heading) { margin-right: 24px; margin-left: 24px; }
  .demo-panel .mock-file { min-height: 58px; padding-block: 10px; }
  .demo-panel .mock-file strong { font-size: 12px; }
  .demo-panel .mock-file small { font-size: 9px; }
  .indexing-progress { margin-bottom: 16px; }
  .indexing-grid { gap: 12px; }
  .indexing-summary { border: 1px solid oklch(0.86 0.03 145); background: oklch(0.97 0.025 145); color: var(--ink); }
  .indexing-summary strong { margin-top: 14px; font-size: 15px; }
  .indexing-summary small { color: var(--ink-muted); }
  .smart-best { border: 1px solid oklch(0.82 0.055 278); background: oklch(0.97 0.02 278); color: var(--ink); }
  .smart-best small { color: var(--violet-deep); }
  .smart-best em { color: var(--ink-muted); }
  .smart-best button { background: var(--violet); }
  .file-context { background: #f2f1ff; color: var(--ink); }
  .file-context small, .context-pages { color: var(--ink-muted); }
  .chat-answer, .file-answer { border: 1px solid var(--line); box-shadow: 0 7px 20px oklch(0.25 0.04 278 / 0.06); }
  .demo-controls { min-height: 64px; }
}

@layer components {
  .site-header--static { position: relative; width: var(--page); margin-inline: auto; border-bottom: 1px solid var(--line); background: transparent; }
  .release-page { background: radial-gradient(circle at 84% 10%, oklch(0.93 0.08 278 / 0.3), transparent 28%), var(--surface); }
  .release-hero { width: var(--page); min-height: min(720px, calc(100svh - var(--header-height))); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr); align-items: center; gap: clamp(48px, 9vw, 144px); padding-block: clamp(80px, 10vw, 140px); }
  .release-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--violet-deep); font-size: 13px; font-weight: 750; }
  .release-hero h1 { max-width: 720px; margin-top: 22px; font-size: clamp(3rem, 5.6vw, 5.75rem); line-height: 0.98; letter-spacing: -0.055em; }
  .release-lede { max-width: 62ch; margin-top: 26px; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; }
  .release-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .release-build-note { margin-top: 15px; color: var(--ink-muted); font-size: 12px; font-weight: 650; }
  .release-hero__art { position: relative; min-height: 360px; display: grid; place-items: center; isolation: isolate; }
  .release-hero__art::before { position: absolute; inset: 16% 5%; z-index: -1; border-radius: 42% 58% 54% 46% / 42% 39% 61% 58%; background: radial-gradient(circle at 40% 40%, oklch(0.68 0.18 278 / 0.45), transparent 42%), linear-gradient(135deg, oklch(0.93 0.06 278), oklch(0.95 0.035 258)); filter: blur(2px); content: ""; }
  .release-hero__art img { width: clamp(130px, 17vw, 204px); height: auto; border-radius: 25%; box-shadow: 0 30px 80px oklch(0.35 0.18 278 / 0.3); transform: rotate(-7deg); }
  .release-hero__art span { position: absolute; padding: 9px 12px; border: 1px solid oklch(1 0 0 / 0.72); border-radius: 999px; background: oklch(1 0 0 / 0.72); box-shadow: 0 10px 24px oklch(0.38 0.06 270 / 0.1); color: var(--ink-soft); font-size: 12px; font-weight: 750; backdrop-filter: blur(10px); }
  .release-hero__art span:nth-of-type(1) { top: 10%; right: 5%; }
  .release-hero__art span:nth-of-type(2) { bottom: 13%; left: 0; }
  .release-hero__art span:nth-of-type(3) { right: -4%; bottom: 28%; }
  .release-matrix { border-top: 1px solid var(--line); }
  .release-matrix .section-heading { max-width: 760px; }
  .release-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
  .release-card { min-height: 314px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--surface) 90%, var(--violet) 2%); box-shadow: 0 18px 40px oklch(0.24 0.04 278 / 0.04); }
  .release-card--ready { border-color: oklch(0.78 0.08 145); background: linear-gradient(145deg, oklch(0.975 0.025 145), var(--surface)); }
  .release-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .release-platform { color: var(--ink-muted); font-size: 13px; font-weight: 750; }
  .release-badge { padding: 6px 9px; border-radius: 999px; background: oklch(0.9 0.09 145); color: oklch(0.38 0.1 145); font-size: 11px; font-weight: 800; }
  .release-badge--quiet { background: oklch(0.93 0.03 278); color: var(--violet-deep); }
  .release-card h3 { margin-top: 30px; font-size: clamp(1.55rem, 2.4vw, 2rem); letter-spacing: -0.035em; }
  .release-card > p { margin-top: 12px; color: var(--ink-soft); line-height: 1.6; }
  .release-card ul { display: grid; gap: 9px; margin-top: 22px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
  .release-card li { position: relative; padding-left: 18px; }
  .release-card li::before { position: absolute; top: 0.5em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); content: ""; }
  .release-card--ready li::before { background: var(--green); }
  .release-card a { color: var(--violet-deep); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
  .download-release { border-top: 1px solid var(--line); }
  .download-release .section-heading { max-width: 680px; }
  .download-card { display: grid; grid-template-columns: minmax(260px, 1.05fr) minmax(220px, 0.85fr) auto; align-items: center; gap: 28px; margin-top: 48px; padding: clamp(24px, 4vw, 42px); border: 1px solid oklch(0.78 0.08 145); border-radius: var(--radius-lg); background: linear-gradient(135deg, oklch(0.975 0.025 145), oklch(0.98 0.012 265)); box-shadow: 0 20px 50px oklch(0.24 0.05 278 / 0.07); }
  .download-card__identity { display: flex; align-items: center; gap: 18px; }
  .download-card__identity img { flex: none; border-radius: 18px; box-shadow: 0 10px 25px oklch(0.35 0.12 278 / 0.2); }
  .download-card__identity p { color: var(--ink); font-size: 19px; font-weight: 760; letter-spacing: -0.025em; }
  .download-card__identity span { display: block; margin-top: 5px; color: var(--ink-muted); font-size: 13px; }
  .download-card__details { display: grid; gap: 9px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
  .download-card__details span { position: relative; padding-left: 18px; }
  .download-card__details span::before { position: absolute; top: 0.42em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--green); content: ""; }
  .download-card .button { white-space: nowrap; }
  .download-card__checksum { grid-column: 1 / -1; margin-top: -8px; padding-top: 20px; border-top: 1px solid oklch(0.78 0.04 145 / 0.55); color: var(--ink-muted); font-size: 11px; overflow-wrap: anywhere; }
  .download-card__checksum code { color: var(--ink-soft); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
  .install-guide { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 10vw, 160px); padding-block: clamp(72px, 10vw, 140px); }
  .install-guide h2 { margin-top: 14px; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.06; letter-spacing: -0.04em; }
  .install-steps { display: grid; border-top: 1px solid var(--line); }
  .install-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 17px; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); line-height: 1.65; }
  .install-steps li > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 12px; font-weight: 800; }
  .install-steps strong { color: var(--ink); }
  .release-notes { width: var(--page); margin-inline: auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 10vw, 160px); padding-block: clamp(72px, 10vw, 140px); }
  .release-notes h2 { margin-top: 14px; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.06; letter-spacing: -0.04em; }
  .release-notes__items { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .release-notes__items p { padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); line-height: 1.65; }
  .release-notes__items strong { color: var(--ink); }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .hero__copy { animation: hero-copy 900ms var(--ease-out) both; }
    .app-window { animation: hero-window 1100ms 100ms var(--ease-out) both; }
    .floating-proof--privacy { animation: proof-in 700ms 650ms var(--ease-out) both; }
    .floating-proof--result { animation: proof-in 700ms 760ms var(--ease-out) both; }
    .status-dot { animation: status-pulse 2.8s ease-in-out infinite; }
  }

  @keyframes hero-copy { from { opacity: 0; transform: translateY(18px); } }
  @keyframes hero-window { from { opacity: 0; transform: translateY(34px) rotateY(-8deg) rotateX(4deg); clip-path: inset(0 0 100% 0 round 14px); } }
  @keyframes proof-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
  @keyframes status-pulse { 50% { box-shadow: 0 0 0 8px oklch(0.89 0.08 145 / 0.18); } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
}

@layer responsive {
  @media (max-width: 1120px) {
    .hero { grid-template-columns: 1fr; padding-top: calc(var(--header-height) + 80px); }
    .hero__copy { max-width: 820px; }
    .hero__visual { width: min(940px, 94%); margin: 20px auto 0; }
    .hero { min-height: auto; }
    .hero__workflow-bar { grid-template-columns: 1fr; }
    .hero__workflow-bar nav { justify-content: flex-start; overflow-x: auto; }
    .privacy__inner { grid-template-columns: 1fr; }
    .privacy__statement { max-width: 780px; }
    .capability, .capability--organize, .capability--chat { grid-template-columns: 1fr 1.1fr; gap: 48px; }
    .platforms__content { grid-template-columns: 0.72fr 1.28fr; gap: 48px; }
    .release-hero { grid-template-columns: 1fr 0.7fr; gap: 48px; }
  }

  @media (max-width: 880px) {
    :root { --page: min(100% - 36px, 720px); }
    .site-header { grid-template-columns: auto 1fr auto; padding-inline: 18px; }
    .github-link { width: 44px; height: 44px; }
    .menu-button { display: flex; width: 40px; height: 40px; grid-column: 2; justify-self: end; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; }
    .menu-button__line { width: 20px; height: 2px; background: var(--ink); transition: transform 220ms var(--ease-out); }
    .menu-button[aria-expanded="true"] .menu-button__line:first-child { transform: translateY(3.5px) rotate(45deg); }
    .menu-button[aria-expanded="true"] .menu-button__line:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
    .site-nav { position: fixed; z-index: var(--z-menu); inset: var(--header-height) 0 auto; display: none; flex-direction: column; gap: 0; padding: 14px 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 14px 4px; font-size: 17px; }
    .site-nav a::after { display: none; }
    .release-page .site-header { width: var(--page); height: auto; grid-template-columns: 1fr auto; gap: 10px; padding-block: 14px; }
    .release-page .site-nav { position: static; display: flex; grid-column: 1 / -1; grid-row: 2; flex-direction: row; justify-content: flex-start; gap: 20px; overflow-x: auto; padding: 0; border: 0; background: transparent; }
    .release-page .site-nav a { flex: none; padding: 4px 0; font-size: 13px; }
    .release-page .header-cta { display: inline-flex; grid-column: 2; grid-row: 1; }
    .header-actions { grid-column: 3; }
    .header-cta { display: none; }
    .hero { grid-template-columns: 1fr; padding-inline: 22px; }
    .hero__visual { width: 100%; }
    .floating-proof { display: none; }
    .format-ribbon { align-items: flex-start; flex-direction: column; }
    .format-list { justify-content: flex-start; }
    .product-film__frame { margin-top: 36px; }
    .demo-tabs {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: minmax(150px, 1fr);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline mandatory;
    }
    .demo-tabs button { scroll-snap-align: start; }
    .demo-shell { grid-template-columns: 190px minmax(0, 1fr); }
    .demo-native-sidebar { padding-inline: 10px; }
    .demo-panel__heading { padding-inline: 20px; }
    .demo-panel > :not(.demo-panel__heading) { margin-right: 20px; margin-left: 20px; }
    .capability, .capability--organize, .capability--chat { grid-template-columns: 1fr; }
    .capability--search .capability__media, .capability--chat .capability__media { order: 2; }
    .capability--organize .capability__copy { order: -1; }
    .organize-flow { min-height: 300px; padding: 32px 22px; }
    .platforms__heading, .questions__heading { grid-template-columns: 1fr; gap: 18px; }
    .platforms__content { grid-template-columns: 1fr; }
    .open-source { grid-template-columns: 1fr; }
    .questions { grid-template-columns: 1fr; gap: 46px; }
    .questions__heading { position: static; }
    .release-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 96px; }
    .release-hero__art { width: min(560px, 100%); min-height: 300px; margin-inline: auto; }
    .release-cards, .release-notes, .install-guide { grid-template-columns: 1fr; }
    .release-notes, .install-guide { gap: 34px; }
    .download-card { grid-template-columns: 1fr auto; }
    .download-card__details { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .availability { grid-template-columns: auto 1fr; }
    .availability .button { grid-column: 2; justify-self: start; }
    .site-footer { grid-template-columns: 1fr auto; padding-block: 28px; }
    .footer-nav { display: none; }
  }

  @media (max-width: 620px) {
    :root { --page: calc(100% - 32px); --header-height: 68px; }
    .site-header {
      width: 100%;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 6px;
      padding-inline: 16px;
    }
    .menu-button { grid-column: 2; }
    .header-actions { grid-column: 3; }
    .locale-switch { min-width: 38px; padding-inline: 6px; }
    .release-page .site-header { width: calc(100% - 32px); }
    .release-page .header-cta { height: 36px; padding-inline: 12px; font-size: 12px; }
    .wordmark { font-size: 17px; }
    .wordmark img { width: 34px; height: 34px; }
    .hero { padding: calc(var(--header-height) + 58px) 17px 64px; }
    .hero__copy,
    .hero__copy > * { min-width: 0; max-width: 100%; }
    .hero h1 { font-size: clamp(3rem, 15vw, 4.3rem); }
    .hero__lede { font-size: 17px; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .release-actions { flex-direction: column; align-items: stretch; }
    .open-source__actions { flex-direction: column; align-items: stretch; }
    .release-hero { padding-top: 72px; }
    .release-hero__art { min-height: 245px; }
    .release-hero__art span { font-size: 10px; }
    .release-hero__art span:nth-of-type(3) { right: 0; }
    .release-cards { gap: 14px; margin-top: 34px; }
    .release-card { min-height: 0; padding: 24px; border-radius: var(--radius-md); }
    .release-card h3 { margin-top: 24px; }
    .download-card { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; padding: 24px; border-radius: var(--radius-md); }
    .download-card__details { grid-column: auto; grid-template-columns: 1fr; }
    .download-card .button { width: 100%; }
    .button { width: 100%; }
    .hero__trust-grid { grid-template-columns: 1fr; }
    .hero__trust-grid > span { min-height: 60px; }
    .hero__workflow-bar { display: none; }
    .capture-note { position: static; justify-content: flex-end; margin-top: 10px; }
    .format-ribbon { padding-inline: 17px; }
    .product-film__meta { min-height: 46px; padding: 7px 9px 7px 13px; }
    .product-film__meta > span { min-width: 0; }
    .product-film__meta > span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .product-film__toggle { flex: none; }
    .section { padding-block: 88px; }
    .demo-tabs { margin-top: 46px; }
    .demo-shell { grid-template-columns: 1fr; border-radius: var(--radius-md); }
    .demo-native-sidebar { display: none; }
    .demo-shell__bar { grid-template-columns: 1fr auto; padding-inline: 14px; }
    .demo-window-dots { display: none; }
    .demo-workspace { justify-self: start; }
    .mock-badge { grid-column: 2; }
    .demo-stage { min-height: 680px; }
    .demo-panel { min-height: 680px; padding: 25px 17px 22px; }
    .demo-panel__heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
    .demo-state { align-self: flex-start; }
    .indexing-grid { grid-template-columns: 1fr; }
    .indexing-summary { min-height: 190px; }
    .mock-file { padding-inline: 12px; }
    .mock-file strong { font-size: 12px; }
    .result-reason { display: none; }
    .demo-search-field kbd { display: none; }
    .smart-best { grid-template-columns: auto minmax(0, 1fr); padding: 17px; }
    .smart-best button { grid-column: 2; justify-self: start; margin-top: 3px; }
    .chat-thinking { align-items: flex-start; flex-wrap: wrap; padding-left: 0; }
    .chat-thinking small { width: 100%; padding-left: 38px; }
    .chat-answer, .file-answer { margin-left: 0; padding: 16px; }
    .file-context { grid-template-columns: auto minmax(0, 1fr); }
    .context-pages { grid-column: 2; }
    .answer-heading > span { display: none; }
    .file-answer li { align-items: flex-start; }
    .demo-controls { grid-template-columns: 1fr auto; gap: 10px; padding-inline: 12px; }
    .demo-controls > p { display: none; }
    .demo-controls > div:last-child { grid-column: 2; }
    .demo-progress span { width: 14px; }
    .search-demo { margin-top: 48px; border-radius: var(--radius-md); }
    .search-demo__query, .search-demo__answer { padding: 18px; }
    .document-result, .document-result--best { grid-template-columns: auto minmax(0, 1fr); }
    .match-pill, .reveal-action { display: none; }
    .organize-flow { flex-direction: column; min-height: 570px; }
    .flow-connector { width: 2px; height: auto; min-height: 40px; flex: 1; }
    .flow-connector span { width: 9px; height: 9px; margin: auto 0 0 -3px; transform: rotate(135deg); }
    .privacy__inner { width: calc(100% - 32px); }
    .privacy__mark { width: 68px; height: 68px; border-radius: 16px; }
    .local-parts { grid-template-columns: 1fr; }
    .local-parts > span { transform: rotate(90deg); text-align: center; }
    .cloud-choice { align-items: flex-start; flex-direction: column; }
    .platform-preview { transform: none; }
    .faq-list summary { padding-right: 36px; font-size: 17px; }
    .availability { grid-template-columns: 1fr; text-align: center; }
    .availability__icon { margin-inline: auto; }
    .availability__icon img { width: 104px; height: 104px; border-radius: 23px; }
    .availability .button { grid-column: auto; justify-self: stretch; }
    .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .footer-brand, .footer-meta { justify-items: center; text-align: center; }
    .footer-note { text-align: center; }
  }
}

@layer native-redesign {
  .site-main--native {
    --native-shell-width: min(1330px, calc(100vw - 36px));
    --native-section-gap: 24px;
    --ink: #1a1d24;
    --ink-soft: #5f6570;
    --ink-muted: #7b808a;
    --violet: #0d6bff;
    --violet-deep: #0759d8;
    --blue: #0d6bff;
    --green: #21be67;
    --surface: #eef1f5;
    --surface-tint: #f7f9fc;
    --surface-soft: #e5e9f0;
    --line: rgb(48 55 67 / 14%);
    --line-strong: rgb(42 50 64 / 24%);
    --night: #192131;
    --night-raised: #243047;
    --night-text: #f6f8fc;
    --night-muted: #b9c0cc;
    --shadow-window: 0 30px 70px rgb(29 39 58 / 22%);
    background:
      radial-gradient(circle at 90% 7%, rgb(13 107 255 / 13%), transparent 25%),
      radial-gradient(circle at 4% 22%, rgb(255 255 255 / 84%), transparent 26%),
      #eef1f5;
  }

  .site-main--native .site-header {
    width: var(--native-shell-width);
    height: 66px;
    top: 14px;
    inset-inline: 0;
    margin-inline: auto;
    padding-inline: 18px;
    border: 1px solid rgb(42 49 61 / 13%);
    border-radius: 16px;
    background: rgb(250 251 253 / 78%);
    box-shadow: 0 12px 35px rgb(33 40 52 / 8%), 0 1px 0 rgb(255 255 255 / 88%) inset;
    backdrop-filter: blur(20px) saturate(135%);
  }

  .site-main--native .site-header.is-scrolled { background: rgb(250 251 253 / 94%); }
  .site-main--native .site-nav { gap: 28px; }
  .site-main--native .site-nav a { color: #535a66; font-size: 13px; }
  .site-main--native .site-nav a::after { background: #0d6bff; }
  .site-main--native .header-cta,
  .site-main--native .button--primary {
    border: 1px solid rgb(0 74 182 / 24%);
    border-radius: 9px;
    background: #0d6bff;
    box-shadow: 0 1px 0 rgb(255 255 255 / 30%) inset, 0 7px 17px rgb(13 107 255 / 24%);
  }

  .site-main--native .header-cta:hover,
  .site-main--native .button--primary:hover { background: #075edc; }
  .site-main--native .locale-switch { border-color: rgb(46 53 64 / 15%); background: rgb(255 255 255 / 58%); color: #515864; }
  .site-main--native .github-link { border-color: rgb(46 53 64 / 13%); background: rgb(255 255 255 / 66%); color: #414853; }
  .site-main--native .github-link:hover { border-color: rgb(13 107 255 / 28%); background: #fff; color: #0759d8; }
  .site-main--native .hero {
    width: var(--native-shell-width);
    min-height: 760px;
    margin: 0 auto;
    padding: 152px 54px 40px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 3.5vw, 52px);
    border: 1px solid rgb(42 49 61 / 13%);
    border-radius: 28px;
    background: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(234 238 244 / 84%));
    box-shadow: 0 28px 70px rgb(33 40 52 / 12%), 0 1px 0 rgb(255 255 255 / 90%) inset;
  }

  .site-main--native .availability-line { color: #0a67e8; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
  .site-main--native .status-dot { width: 8px; height: 8px; box-shadow: 0 0 0 5px rgb(33 190 103 / 14%); }
  .site-main--native .hero h1 { max-width: 100%; font-size: clamp(3.8rem, 5.6vw, 6rem); letter-spacing: -0.082em; line-height: 0.9; }
  .site-main--native .hero__title-accent { color: #0d6bff; }
  .site-main--native .hero__lede { max-width: 48ch; margin-top: 30px; color: #5d6470; font-size: 18px; line-height: 1.65; }
  .site-main--native .hero__actions { gap: 12px; margin-top: 30px; }
  .site-main--native .button { min-height: 46px; border-radius: 9px; font-size: 13px; }
  .site-main--native .button--quiet { border: 1px solid rgb(46 53 64 / 16%); background: rgb(255 255 255 / 62%); color: #4d535e; box-shadow: 0 1px 0 rgb(255 255 255 / 86%) inset; }
  .site-main--native .button--quiet:hover { border-color: rgb(13 107 255 / 35%); background: rgb(255 255 255 / 88%); color: #0759d8; }
  .site-main--native .hero__trust-grid { max-width: 610px; gap: 10px; margin-top: 44px; }
  .site-main--native .hero__trust-grid > span { min-height: 104px; padding: 17px; border: 1px solid rgb(43 50 61 / 12%); border-radius: 13px; background: rgb(255 255 255 / 58%); box-shadow: 0 1px 0 rgb(255 255 255 / 76%) inset; }
  .site-main--native .hero__trust-grid strong { color: #1d2129; font-size: 13px; }
  .site-main--native .hero__trust-grid small { margin-top: 5px; color: #707681; font-size: 11px; }
  .site-main--native .hero__halo { inset: 6% -18% 8% 10%; background: radial-gradient(circle, rgb(13 107 255 / 19%), transparent 62%); filter: blur(12px); }
  .site-main--native .hero__visual { width: min(100%, 700px); }

  html:lang(zh-CN) .site-main--native .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  html:lang(zh-CN) .site-main--native .hero h1 {
    max-width: 7.2em;
    font-size: clamp(3.45rem, 4.9vw, 5.25rem);
    letter-spacing: -0.055em;
    line-height: 1.02;
  }

  html:lang(zh-CN) .site-main--native .hero__lede {
    max-width: 34em;
    font-size: 17px;
    line-height: 1.7;
  }

  html:lang(zh-CN) .site-main--native .hero__visual { width: min(100%, 650px); }
  .site-main--native .native-hero-window { position: relative; overflow: hidden; border: 1px solid rgb(42 49 61 / 25%); border-radius: 15px; background: #fff; box-shadow: 0 32px 60px rgb(31 40 57 / 24%), 0 2px 0 rgb(255 255 255 / 88%) inset; transform: perspective(1500px) rotateY(-4deg) rotateX(2deg); }
  .site-main--native .native-hero-window__bar { height: 38px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; border-bottom: 1px solid #d8dde4; background: linear-gradient(#f8f9fa, #eceff2); color: #575d66; font-size: 11px; font-weight: 700; }
  .site-main--native .native-hero-window__bar > span:nth-child(2) { justify-self: center; }
  .site-main--native .native-hero-window__state { justify-self: end; color: #12804b; }
  .site-main--native .native-hero-window__dots { display: flex; gap: 7px; }
  .site-main--native .native-hero-window__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 16%); }
  .site-main--native .native-hero-window__dots i:nth-child(2) { background: #febc2e; }
  .site-main--native .native-hero-window__dots i:nth-child(3) { background: #28c840; }
  .site-main--native .app-window { border: 0; border-radius: 0; box-shadow: none; }
  .site-main--native .app-window img { aspect-ratio: 1.722 / 1; object-fit: cover; object-position: top; }
  .site-main--native .capture-note { color: #707681; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
  .site-main--native .floating-proof { border-color: rgb(43 50 61 / 13%); border-radius: 11px; background: rgb(255 255 255 / 82%); box-shadow: 0 15px 30px rgb(31 40 57 / 16%); backdrop-filter: blur(16px); }
  .site-main--native .floating-proof strong { color: #30353f; }
  .site-main--native .floating-proof small { color: #737984; }
  .site-main--native .hero__workflow-bar { margin: 54px -54px -40px; padding: 23px 54px; border-top: 1px solid rgb(43 50 61 / 13%); background: rgb(255 255 255 / 40%); }
  .site-main--native .hero__workflow-bar strong { color: #2d333d; }
  .site-main--native .hero__workflow-bar > div > span { color: #727883; }
  .site-main--native .hero__workflow-bar nav { gap: 4px; padding: 4px; border: 1px solid rgb(43 50 61 / 10%); border-radius: 11px; background: rgb(255 255 255 / 58%); }
  .site-main--native .hero__workflow-bar a { min-width: 98px; padding: 7px 10px; border-radius: 7px; color: #565d69; }
  .site-main--native .hero__workflow-bar a:hover { background: #fff; color: #0759d8; }

  .site-main--native .format-ribbon { width: var(--native-shell-width); margin-inline: auto; padding: 18px 24px; border: 1px solid rgb(43 50 61 / 12%); border-radius: 15px; background: rgb(255 255 255 / 48%); color: #66707b; box-shadow: 0 1px 0 rgb(255 255 255 / 72%) inset; }
  .site-main--native .format-ribbon p { color: #59616d; font-size: 13px; font-weight: 650; }
  .site-main--native .format-list span { border-color: rgb(43 50 61 / 11%); border-radius: 7px; background: rgb(255 255 255 / 55%); color: #727983; }
  .site-main--native .product-film { width: var(--native-shell-width); margin-inline: auto; padding: 88px 42px; border: 1px solid rgb(43 50 61 / 12%); border-radius: 28px; background: linear-gradient(145deg, rgb(255 255 255 / 78%), rgb(229 233 240 / 76%)); box-shadow: 0 26px 60px rgb(31 40 57 / 8%); }
  .site-main--native .section-heading .section-intro { color: #0d6bff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .site-main--native .section-heading h2,
  .site-main--native .capability__copy h2,
  .site-main--native .privacy__statement h2,
  .site-main--native .platforms__heading h2,
  .site-main--native .questions__heading h2 { letter-spacing: -0.06em; }
  .site-main--native .demo-lab { width: var(--native-shell-width); margin-inline: auto; padding: 88px 42px; border: 1px solid rgb(43 50 61 / 12%); border-radius: 28px; background: linear-gradient(145deg, rgb(255 255 255 / 78%), rgb(229 233 240 / 76%)); box-shadow: 0 26px 60px rgb(31 40 57 / 8%); }
  .site-main--native .demo-tabs { padding: 4px; border: 1px solid rgb(43 50 61 / 11%); border-radius: 12px; background: rgb(255 255 255 / 62%); }
  .site-main--native .demo-tabs button { border-radius: 8px; color: #606875; }
  .site-main--native .demo-tabs button[aria-selected="true"] { background: #0d6bff; box-shadow: 0 4px 10px rgb(13 107 255 / 20%); color: #fff; }
  .site-main--native .demo-shell { overflow: hidden; border: 1px solid rgb(43 50 61 / 19%); border-radius: 15px; box-shadow: 0 26px 56px rgb(31 40 57 / 18%); }
  .site-main--native .demo-native-sidebar { background: linear-gradient(#f6f7f9, #ebedf1); }
  .site-main--native .demo-native-main { background: #fff; }
  .site-main--native .demo-controls { border-top-color: #d8dde4; background: #f6f7f9; }

  .site-main--native .capabilities { width: var(--native-shell-width); }
  .site-main--native .capability { padding-block: 96px; border-bottom-color: rgb(43 50 61 / 13%); }
  .site-main--native .capability__copy > p:first-child { color: #0d6bff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .site-main--native .capability__copy > p:last-of-type { color: #626a75; }
  .site-main--native .capability__copy li { color: #4e5662; }
  .site-main--native .capability__copy li::before { background: #0d6bff; }
  .site-main--native .media-frame { border: 1px solid rgb(43 50 61 / 14%); border-radius: 15px; background: #fff; box-shadow: 0 22px 46px rgb(31 40 57 / 12%); }
  .site-main--native .organize-flow { border: 1px solid rgb(43 50 61 / 14%); border-radius: 18px; background: linear-gradient(145deg, #f8fafc, #e3e7ed); box-shadow: 0 22px 46px rgb(31 40 57 / 10%); }
  .site-main--native .flow-node { border-color: rgb(43 50 61 / 13%); background: rgb(255 255 255 / 78%); box-shadow: 0 8px 20px rgb(31 40 57 / 7%); }
  .site-main--native .flow-node strong { color: #2d333d; }
  .site-main--native .flow-node small { color: #707782; }
  .site-main--native .flow-connector { background: rgb(13 107 255 / 24%); }
  .site-main--native .flow-connector span { background: #0d6bff; }

  .site-main--native .privacy { background: transparent; }
  .site-main--native .privacy__inner { width: var(--native-shell-width); padding: clamp(54px, 7vw, 98px); border: 1px solid rgb(34 47 67 / 24%); border-radius: 28px; background: linear-gradient(135deg, #1a2434, #26344a); box-shadow: 0 26px 60px rgb(22 30 43 / 24%); }
  .site-main--native .privacy__statement { color: #f5f7fb; }
  .site-main--native .privacy__statement p { color: #bec8d5; }
  .site-main--native .privacy__statement > p:first-of-type { color: #9abfff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .site-main--native .privacy__mark { border-radius: 20px; box-shadow: 0 18px 35px rgb(0 0 0 / 18%); }
  .site-main--native .device-boundary { border-color: rgb(255 255 255 / 18%); background: rgb(255 255 255 / 7%); }
  .site-main--native .device-boundary__label, .site-main--native .local-parts strong { color: #f5f7fb; }
  .site-main--native .local-parts small, .site-main--native .cloud-choice small { color: #bdc5d0; }
  .site-main--native .local-parts > div { border-color: rgb(255 255 255 / 12%); background: rgb(255 255 255 / 6%); }
  .site-main--native .cloud-choice { border-color: rgb(255 255 255 / 15%); background: rgb(255 255 255 / 8%); }
  .site-main--native .cloud-choice strong { color: #f5f7fb; }
  .site-main--native .choice-tag { background: #0d6bff; }

  .site-main--native .platforms,
  .site-main--native .open-source,
  .site-main--native .questions { width: var(--native-shell-width); }
  .site-main--native .platform-tabs { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid rgb(43 50 61 / 12%); border-radius: 10px; background: rgb(219 224 232 / 75%); }
  .site-main--native .platform-tabs button { border-radius: 7px; color: #626a75; }
  .site-main--native .platform-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 2px 7px rgb(31 40 57 / 12%); color: #0d6bff; }
  .site-main--native .platform-panel { padding: 26px; border: 1px solid rgb(43 50 61 / 12%); border-radius: 15px; background: rgb(255 255 255 / 62%); box-shadow: 0 10px 24px rgb(31 40 57 / 6%); }
  .site-main--native .release-state { border-radius: 999px; background: rgb(13 107 255 / 11%); color: #0759d8; }
  .site-main--native .faq-list { border-top-color: rgb(43 50 61 / 15%); }
  .site-main--native .faq-list details { border-bottom-color: rgb(43 50 61 / 15%); }
  .site-main--native .faq-list summary::before, .site-main--native .faq-list summary::after { background: #0d6bff; }
  .site-main--native .availability { width: var(--native-shell-width); margin-inline: auto; padding: 52px; border: 1px solid rgb(43 50 61 / 13%); border-radius: 20px; background: rgb(255 255 255 / 58%); box-shadow: 0 16px 34px rgb(31 40 57 / 7%); }
  .site-main--native .availability__icon img { border-radius: 24px; box-shadow: 0 8px 0 #dce2eb, 0 18px 35px rgb(31 40 57 / 12%); }
  .site-main--native .site-footer { width: var(--native-shell-width); min-height: 142px; }
  .site-main--native .footer-domain { color: #0759d8; }

  @media (max-width: 1120px) {
    .site-main--native .hero { min-height: auto; padding: 136px 42px 34px; grid-template-columns: 1fr; }
    .site-main--native .hero__workflow-bar { margin-inline: -42px; margin-bottom: -34px; padding-inline: 42px; }
    html:lang(zh-CN) .site-main--native .hero { grid-template-columns: 1fr; }
    html:lang(zh-CN) .site-main--native .hero h1 { max-width: 7.2em; }
  }

  @media (max-width: 880px) {
    .site-main--native { --native-shell-width: calc(100vw - 32px); --native-section-gap: 18px; }
    .site-main--native .site-header { width: var(--native-shell-width); top: 10px; border-radius: 14px; }
    .site-main--native .site-nav { background: rgb(250 251 253 / 98%); }
    .site-main--native .hero { width: var(--native-shell-width); padding: 122px 30px 30px; border-radius: 22px; }
    .site-main--native .hero__workflow-bar { margin-inline: -30px; margin-bottom: -30px; padding-inline: 30px; }
    .site-main--native .demo-lab { padding-inline: 26px; }
  }

  @media (min-width: 1121px) and (max-height: 820px) {
    .site-main--native .hero {
      min-height: 700px;
      padding-top: 126px;
      padding-bottom: 28px;
    }

    .site-main--native .hero h1 { font-size: clamp(3.7rem, 5.8vw, 6.25rem); }
    .site-main--native .hero__lede { margin-top: 22px; font-size: 16px; line-height: 1.55; }
    .site-main--native .hero__actions { margin-top: 22px; }
    .site-main--native .hero__trust-grid { margin-top: 26px; }
    .site-main--native .hero__trust-grid > span { min-height: 84px; padding: 13px; }
    .site-main--native .hero__trust-grid small { margin-top: 3px; font-size: 10px; }
    .site-main--native .hero__visual { width: min(100%, 650px); }
    html:lang(zh-CN) .site-main--native .hero h1 { font-size: clamp(3.25rem, 4.7vw, 4.75rem); line-height: 1.06; }
    html:lang(zh-CN) .site-main--native .hero__lede { margin-top: 18px; font-size: 16px; line-height: 1.6; }
  }

  @media (max-width: 620px) {
    .site-main--native { --native-shell-width: calc(100vw - 24px); --native-section-gap: 14px; }
    .site-main--native .hero { width: var(--native-shell-width); padding: 104px 18px 20px; border-radius: 19px; }
    .site-main--native .hero h1 { font-size: clamp(3rem, 13.8vw, 4.1rem); letter-spacing: -0.04em; line-height: 0.92; }
    html:lang(zh-CN) .site-main--native .hero h1 { font-size: clamp(3rem, 14.5vw, 4.1rem); line-height: 1.08; }
    .site-main--native .hero__lede { font-size: 16px; }
    .site-main--native .hero__trust-grid { margin-top: 32px; }
    .site-main--native .native-hero-window { transform: none; }
    .site-main--native .hero__workflow-bar { margin-inline: -18px; margin-bottom: -20px; padding-inline: 18px; }
    .site-main--native .format-ribbon,
    .site-main--native .product-film,
    .site-main--native .demo-lab,
    .site-main--native .capabilities,
    .site-main--native .privacy__inner,
    .site-main--native .platforms,
    .site-main--native .open-source,
    .site-main--native .questions,
    .site-main--native .availability,
    .site-main--native .site-footer { width: calc(100vw - 24px); }
    .site-main--native .product-film,
    .site-main--native .demo-lab { padding: 62px 16px; border-radius: 19px; }
    .site-main--native .privacy__inner { padding: 36px 22px; border-radius: 19px; }
    .site-main--native .availability { padding: 34px 22px; }
  }
}

@layer native-refinement {
  /* The refinement keeps blue for state and action, while surfaces stay quiet. */
  .site-main--native {
    background:
      radial-gradient(circle at 94% 11%, rgb(13 107 255 / 10%), transparent 22%),
      radial-gradient(circle at 8% 24%, rgb(255 255 255 / 88%), transparent 24%),
      #eef1f5;
  }

  .site-main--native .hero {
    border-radius: 24px;
    background: linear-gradient(145deg, rgb(255 255 255 / 88%), rgb(237 241 247 / 90%));
    box-shadow: 0 22px 54px rgb(33 40 52 / 10%), 0 1px 0 rgb(255 255 255 / 92%) inset;
  }

  .site-main--native .hero__workflow-bar {
    padding-top: 20px;
    padding-bottom: 20px;
    background: rgb(255 255 255 / 32%);
  }

  .site-main--native .hero__workflow-bar nav {
    background: rgb(255 255 255 / 68%);
  }

  .site-main--native .format-ribbon {
    margin-top: var(--native-section-gap);
    padding: 16px 22px;
    border-radius: 13px;
    background: rgb(250 252 255 / 70%);
    box-shadow: 0 10px 28px rgb(31 40 57 / 5%), 0 1px 0 rgb(255 255 255 / 82%) inset;
  }

  .site-main--native .format-ribbon p { color: #4f5865; }

  .site-main--native .format-list { gap: 7px; }

  .site-main--native .format-list span {
    padding: 5px 10px;
    background: rgb(255 255 255 / 76%);
  }

  .site-main--native .product-film,
  .site-main--native .demo-lab {
    padding: clamp(62px, 6vw, 78px) clamp(28px, 4vw, 52px);
    border-radius: 24px;
    box-shadow: 0 18px 44px rgb(31 40 57 / 7%), 0 1px 0 rgb(255 255 255 / 86%) inset;
  }

  .site-main--native .product-film {
    background: linear-gradient(155deg, rgb(255 255 255 / 86%), rgb(234 239 247 / 82%));
  }

  .site-main--native .demo-lab {
    background: linear-gradient(155deg, rgb(251 252 254 / 94%), rgb(232 237 245 / 84%));
  }

  .site-main--native .product-film__frame {
    margin-top: 38px;
    border-color: rgb(88 103 167 / 28%);
    box-shadow: 0 20px 48px rgb(20 29 70 / 18%);
  }

  .site-main--native .demo-tabs { margin-top: 50px; }

  .site-main--native .demo-shell { box-shadow: 0 22px 52px rgb(31 40 57 / 15%); }

  .site-main--native .capabilities { gap: clamp(84px, 11vw, 136px); }

  .site-main--native .capability { padding-block: 78px; }

  .site-main--native .privacy__inner {
    padding: clamp(56px, 6vw, 78px);
    border-radius: 24px;
    background:
      radial-gradient(circle at 86% 12%, rgb(37 120 255 / 20%), transparent 28%),
      linear-gradient(135deg, #172130, #223149);
    box-shadow: 0 22px 52px rgb(22 30 43 / 20%);
  }

  .site-main--native .privacy__mark { margin-bottom: 24px; }

  .site-main--native .device-boundary,
  .site-main--native .local-parts > div,
  .site-main--native .cloud-choice {
    background: rgb(255 255 255 / 5%);
  }

  .site-main--native .platforms,
  .site-main--native .questions { padding-block: clamp(82px, 9vw, 116px); }

  .site-main--native .availability {
    gap: clamp(24px, 4vw, 54px);
    padding: 42px 48px;
    border-radius: 18px;
    background: rgb(255 255 255 / 66%);
    box-shadow: 0 12px 28px rgb(31 40 57 / 6%), 0 1px 0 rgb(255 255 255 / 88%) inset;
  }

  .site-main--native main > section + section { margin-top: var(--native-section-gap); }
  .site-main--native .site-footer { margin-top: var(--native-section-gap); }

  .site-main--native .availability__icon img {
    box-shadow: 0 6px 0 #dce2eb, 0 14px 28px rgb(31 40 57 / 11%);
  }

  html:lang(zh-CN) body {
    font-family: -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  }

  html:lang(zh-CN) .site-main--native .site-nav a,
  html:lang(zh-CN) .site-main--native .section-heading .section-intro,
  html:lang(zh-CN) .site-main--native .capability__copy > p:first-child,
  html:lang(zh-CN) .site-main--native .privacy__statement > p:first-of-type {
    letter-spacing: 0.02em;
  }

  html:lang(zh-CN) .site-main--native .section-heading h2,
  html:lang(zh-CN) .site-main--native .capability__copy h2,
  html:lang(zh-CN) .site-main--native .privacy__statement h2,
  html:lang(zh-CN) .site-main--native .platforms__heading h2,
  html:lang(zh-CN) .site-main--native .questions__heading h2,
  html:lang(zh-CN) .site-main--native .availability__copy h2 {
    letter-spacing: -0.04em;
    line-height: 1.16;
  }

  html:lang(zh-CN) .site-main--native .section-heading > p:last-child,
  html:lang(zh-CN) .site-main--native .capability__copy > p:last-of-type,
  html:lang(zh-CN) .site-main--native .privacy__statement p,
  html:lang(zh-CN) .site-main--native .availability__copy > p:last-child {
    line-height: 1.75;
  }

  @media (max-width: 1120px) {
    .site-main--native .product-film,
    .site-main--native .demo-lab { padding-inline: 32px; }

    .site-main--native .privacy__inner { padding: 54px 48px; }
  }

  @media (max-width: 620px) {
    .site-main--native .format-ribbon { margin-top: var(--native-section-gap); padding: 14px 16px; }

    .site-main--native .product-film,
    .site-main--native .demo-lab { padding: 50px 18px; border-radius: 19px; }

    .site-main--native .demo-tabs { margin-top: 38px; }

    .site-main--native .privacy__inner { padding: 42px 24px; border-radius: 19px; }

    .site-main--native .availability { padding: 34px 22px; }

    html:lang(zh-CN) .site-main--native .section-heading h2,
    html:lang(zh-CN) .site-main--native .capability__copy h2,
    html:lang(zh-CN) .site-main--native .privacy__statement h2,
    html:lang(zh-CN) .site-main--native .platforms__heading h2,
    html:lang(zh-CN) .site-main--native .questions__heading h2,
    html:lang(zh-CN) .site-main--native .availability__copy h2 { line-height: 1.2; }
  }
}